OneClickColorScout 1.0 — 가벼운 색상 추출 유틸리티(무료 배포)

[소개]

색상 추출부터 가독성 검수까지, 딱 3초면 끝납니다.
시중에 컬러 피커는 많지만, 정작 내가 뽑은 색이 웹 표준에 맞는지,
가독성은 좋은지 알려주는 툴은 찾기 힘들었습니다
화면 어디든 마우스만 가져가면 3x, 9x, 17x 현미경 줌으로 
정밀하게 색을 따고, WCAG 2.1 가이드에 맞춘 데이터 기반의 
배색을 추천해 줍니다. 감으로 찍는 게 아니라 점수로 확인하고  
쓰세요. 가볍고 빠릅니다.

[문제인식]

블로그 글을 작성할때 글자와 배경사이에 이게 잘보이나 안보이나
궁금해지는데 그것을 해결하고 싶었고, 이런 문제를 해결하기위해
타 웹사이트를 들어가서 색넣고, 분석하고 이렇게 하는게 불편했습니다.
그냥 지금 보고 있는 화면에서 '어, 이 색 좋다' 싶을 때 바로 찍어서 확인
하고 싶었습니다.. 그게 제일 빠르니까요.
WCAG 2.1 가독성 가이드란 것이 있다는걸 알았고 4이상 6점대
정도 물론 그이상은 대비가 좋아 잘보인다고 해서 적당한 점수대로만
색을 뽑아줘도 가치있겠다는 생각을 하게 되었습니다.

➠ 화면을 보거나 이미지를 보거나 해서 괸찮은 색이 있다면 인지하고
➠ 캡쳐 버튼을 눌러 컬러를 고르면
➠ 프로그램에서 보색, 뮤트톤, 무채색, 명도극대화, 유사색을 이용해서
➠ 색을 추천합니다. (추천할수있는 기본점수가 안되면 그대로)
➠ 해당 정보를 복사및 저장을 하고 추후 재사용합니다.

[제작 및 사용]

프로그램 실행 이미지

실제 하나의 색을 찍고나면 브라우저로 이런 결과물이 나옵니다.

 

[OneClickColorScout 주요기능 설명]

① 초정밀 17배율 실시간 픽셀 줌 (17x Zoom) - 캡쳐 버튼을 눌렀을때

마우스 휠을 이용한 확대 : 3배, 9배, 17배줌

줌(휠)을 이용한 배율 확대해서 색을 선택할수있습니다.

마우스 커서의 위치를 0.01초 단위로 추적하여 실시간 확대 영상을 
제공합니다. 단순한 이미지 확대를 넘어 픽셀 간의 경계선을 명확하게
구분해 줍니다. 마치 '조준경'을 사용하는 것처럼 안티앨리어싱이 
걸린 미세한 영역에서도 정확한 1px을 골라낼 수 있습니다.

② 지능형 보색 및 배색 추천 (Smart Color Analytics)

대비값(Contrast 6.0) 기준

대충 찍어도 맞춰주는 배색 추천 (Color Analytics) 색 하나 찍으면 
고민할 거 없이 어울리는 색 몇 개 띄워줍니다. 제가 설정해둔
대비값(Contrast 6.0) 기준이라, 적어도 이 프로그램이 골라준 색 쓰면 
"글씨가 왜 이리 안 보여?"라는 소리는 안 듣습니다. 
물론 내부적으로 추천이 6.0이 안되는 색이 있습니다.
(단, 밝기가 50% 근처인 애매한 색들은 점수가 미달로 나올 수 있습니다. 
안 보여주는 게 아니라 점수가 낮은 걸 눈으로 확인하고 직접 판단하시면 
됩니다.)

색을 고르면 바로 바로 적용되어 직관적입니다. 배경색으로 예시 - 1

색을 고르면 바로 바로 적용되어 직관적입니다. 배경색으로 예시 - 2

추천된 색을 누르면 자동으로 색과 값들이 변경되어 적용이 됩니다.

③ 원클릭 멀티 포맷 클립보드 복사 (Single-Click Clipboard)

작업 흐름이 끊기는 것을 방지하기 위해 '원클릭' 인터페이스를 
채택했습니다. 상단의 Base Color or 추천색  클릭하는 순간 
HEX(#FFFFFF) 포맷으로 값이 동시에 클립보드에 생성됩니다.
별도의 저장 버튼을 누를 필요 없이 코드 편집기에 바로 붙여넣기만 
하면 됩니다.

상단의 색을 마우스로 호버후 클릭하면 복사가 가능합니다.

④ 웹 프리뷰 자동 생성 (Instant HTML Preview)

색상을 선택하면 시스템 브라우저를 즉시 호출하여, 실제 웹 환경에서의 

가독성 시뮬레이션 화면을 실시간으로 제공합니다.
실제 웹 브라우저 환경에서 텍스트나 배경으로 쓰였을 때 어떤 느낌인지, 
가독성은 어떠한지를 즉각적으로 시각화하여 검수할 수 있게 돕습니다.

색을 하나 선택(Base Color)하면 그에 맞는 배경색을 추천해줍니다.

⑤ 스마트 히스토리 저장 및 관리 (Auto-Save System)

단발성 추출에 그치지 않도록 체계적인 관리 기능을 넣었습니다. `저장(HTML)`을 
누르면 현재 날짜를 기준으로 폴더를 자동 생성(`Save_Color_yyyy.MM.dd`)하며,
추출한 색상의 상세 HTML 보고서와 미리보기 PNG 이미지를 쌍으로 저장합니다. 
이를 통해 프로젝트별 컬러 히스토리를 아카이브할 수 있습니다.

프로그램(exe)파일이 있는 폴더에 저장폴더가 생성됩니다.

선택했던 색들은 프로그램에서 저장(HTML)을 할시에 색과, 그에해당하는 html을 한쌍으로 저장합니다. 빨간네모처럼 한쌍 - 큰아이콘 미리보기를 추천드립니다.

 

 

[사용후기]

색을 아무생각없이 눈대중으로 쓰는것보다는 표준 WCAG 2.1 대비값을 이용해서
점수로 추천을 해주니 판단을 내릴때 쉽다는 생각이 들었습니다. 그리고 
사용했던 색을 저장하고, 관리할수 있다는게 또다른 매력이었습니다.
간단하게 만들어 쓰는 프로그램으로, 캡쳐, 저장, 폴더열기로 단순하게 구성한것도
직관적이라고 할수있습니다.

- 누군가에게 도움이 된다면 좋겠습니다.

 

 

 

[다운로드 파일]

OneClickColorScout.zip

0.20MB

 

 

참고사항 : 

1. 프로그램 파일(EXE/ZIP)은 개인 배포용입니다. 재배포는 삼가주시고, 

    본 포스팅을 통해 다운로드 부탁드립니다.

2. 개인 제작 프로그램이라 Windows에서 ‘확인되지 않은 앱’ 안내가 

    뜰 수 있습니다. ‘추가 정보 → 실행’을 누르면 정상 실행됩니다.

    (해당 안내는 일반적으로 첫 실행 이후 다시 표시되지 않습니다.)