본문 바로가기

추천팁

OS X에 내장된 디지털 컬러 측정기를 '컬러 픽커'로 활용하는 방법

웹 디자이너나 개발자에게 '색깔'을 고르는 과정은 흔한 일인 동시에 매우 중요한 일입니다.

특히 모니터에서 '색상값(Color Code)'을 추출해야 할 때가 많이 생기는데 이럴 때를 대비해 OS X 안에는 '디지털 컬러 측정기(Digital Color Meter)'라는 유틸리티가 내장돼 있습니다. 생각보다 잘 알려지지 않은 이유는 사용 방법이 다소 애매모호하기 때문인 듯한데, 이번 기회에 디지털 컬러 측정기의 기본적인 사용 방법을 살펴보도록 하겠습니다. 잘만 활용하면 상용 '컬러 픽커' 못지않습니다

디지털 컬러 측정기 사용 방법

디지털 컬러 측정기는 응용 프로그램 > 유틸리티 폴더에 위치해 있습니다. 스팟라이트나 알프레드를 쓰는 분은 'Color'라는 키워드로 손쉽게 불러낼 수 있습니다. (위 사진 참고)

1. 아래는 디지털 컬러 측정기를 실행한 모습입니다. 왼쪽에 마우스 포인터 주변을 확대한 섬네일 이미지가 보이고, 오른쪽에는 마우스 포인터가 올려져 있는 픽셀의 색 값이 다양한 방식으로 표시됩니다. ▼

2. 마우스 포인터가 놓은 위치의 픽셀 하나가 아닌 주변 픽셀의 평균 값을 구하고 싶을 때는 조리개 슬라이드바를 통해 조리개 크기를 조정할 수 있습니다. 정확도 보다는 좀 더 조화로운 색상을 찾을 때 유용한 기능이죠. ▼

3. 색상 표준하면 그레이 모델, RGB 모델, HSV 모델 등 여러가지가 떠오를 텐데요. 웹 디자인은 주로 RGB 모델을 바탕으로 한 색상값을 사용할 때가 많죠. 우측 상단에 달린 풀다운 메뉴를 통해 총 5가지 색상 표준을 선택할 수 있는데 예시에선 RGB 모델을 선택하도록 하겠습니다. ▼

4. 이제 화면(또는 이미지)에서 색상값을 추출해 보겠습니다. 색상값을 추출할 픽셀 위에 마우스 포인터를 올린 후 command + L 키를 눌러줍니다. 나중에 마우스 포인터를 움직이더라도 색상값을 유지하기 위해서 입니다. ▼

5. 참고로 웹 작업에 주로 이용하는 색상값을 얻으려면 디지털 컬러 측정기 보기 > 값 표시에서 16진수를 선택해야 합니다. 예컨대 기본 상태에서 '흰색'의 색상값을 측정하면 255 255 255라는 값을 얻게 되고, 16진수에선 #FFFFFF라는 값을 얻게 됩니다.

6. 이제 command + shift + C 키를 누르면 색상값이 클립보드에 텍스트로 저장되며 다른 응용 프로그램에 붙여넣을 수 있게 됩니다. ▼

7. 예컨대 클립보드에 저장한 색상값을 포토샵 컬러 픽커에 붙여넣으면, 현재 작업 중인 이미지에 해당 색상을 사용할 수 있게 되죠. 또 같은 방법으로 HTML이나 CSS 코드에 붙여넣을 수도 있습니다. ▼

응용 프로그램 폴더 구석에 '디지털 컬러 측정기'라고 있던데 도대체 어떻게 사용하는거야?

이제 이런 의문은 들지 않겠죠? 이처럼 OS X 안에는 의외로 유용한 기능을 품은 유틸리티가 곳곳에 숨어 있습니다. 보다 전문적인 도구가 필요하다면 맥 앱스토어와 인터넷을 뒤져봐야 하겠지만, 간단한 도구로도 괜찮다면 OS X에 내장된 프로그램을 먼저 이용해 보는 건 어떠십니까? 앞으로도 기회가 될 때마다 애플이 준비한 OS X의 여러 유틸리티를 차근차근 소개하도록 하겠습니다.



참조
Apple - Mac OS X 모니터의 색상 측정하기

관련 글
화면에서 색상 코드를 추출할 수 있는 인기 맥용 컬러피커 프로그램 'Sip'
OS X 색상 패널에 추가할 수 있는 새로운 컬러피커 플러그인 'Skala Color'
OS X 요세미티의 색상 선택 창은 RGB 색상코드도 지원
OS X의 '색상 보기'에 이미지를 끌어넣어 자신만의 팔레트를 꾸며보자!