1. CoNsisTent COLOR
computer software for use in producing accurate &
consistent color in the field of Web viewing
일관된 컬러 디자인을 위해서
우리가 알아두어야 하는 것들.
yAMOO9
yamoo9@naver.com
facebook.com/yamoo9
1
3. eyeS &
LighT
인간의 눈은 빛을 통해 사물을 인식합니다. 빛이 있음으로
써 사물의 형태와 색을 구분할 수 있는 것이죠. 형태의 경우
모호한 경우를 제외하고는 대다수가 눈을 통해 받아들이는
정보에 큰 차이가 없습니다. 사각형은 사각형으로, 원은 원
으로 인식합니다. 반면 색의 경우는 인간 개개인마다 정보
를 받아들이는 편차가 큽니다.
3
5. Changed
perception of
color
색을 인식하는 능력은 유전적 요인으로 다르기도 하고, 남녀의 성별에 따라 또는 연령에 따라 천차만별 다릅니다. 색맹, 색약 등 색을 인식하는데
장애를 가진 경우는 유전적 결함으로 색을 제대로 구분할 능력이 없으며, 적색과 녹색을 구분하지 못하는 유형이 일반적입니다.
보고된 통계에 따르면 세계 인구 중 약 1억 8천만명 가량이 색을 구분하는데 장애를 가지고 있습니다.
5
6. 여성보다 남성의 경우 색을 인식하지 못하는 확률이 약 20배 가량 높습니다. 평균적으로 남성 12명 중
1명 꼴로 장애를 가지고 있으며, 여성은 250명중 1명 꼴로 장애를 가지고 있습니다. 뿐만 아니라
섬세한 여성과 달리 남성은 색을 구분하는 인식 범위가 매우 단순하기 때문에 여성과 남성은
같은 공간에서 같은 색을 바라보지만, 서로 다르게 인식할 수 있습니다.
Women men
7
8. 노인의 경우, 나이가 들어감에 따라 시각 능력이 노쇠화 되기에 색을 인식하는
능력이 현저히 떨어지게 됩니다. 이처럼 인간이 색을 인식하는 능력은 여러
요인에 따라 천차만별 다릅니다.
Old men노인의 경우, 나이가 들어감에 따라 시각 능력이 노쇠화 되기에 색을 인식하는
능력이 현저히 떨어지게 됩니다. 이처럼 인간이 색을 인식하는 능력은 여러
요인에 따라 천차만별 다릅니다.
10
10. 익히 잘 알려졌듯이 정상적인 시각을 가진 사람은 망막의 감각세포인 원추체를 통해
세가지 분광색인 빨간색(RED), 녹색(GREEN), 파란색(BLUE)을 혼합하여 모든 색을
만들 수 있습니다. 빛이 스펙트럼(spectrum)되는 과정 상에서 세가지 분광색으로
확연히 구분되는 것을 볼 수 있습니다.
Determines of
the COLOr,
LIGHT
12
12. Compare ColoR
TempeRaTures
인간은 빛을 통하지 않고는 색을 볼 수 없을뿐더러, 조명 빛의 색 온도에 따라 인식하는 색이 달라질 수도 있
습니다. 즉 자연광, 형광등, 백열등 빛의 온도에 따라 색을 달리 보게 됩니다. 동일한 색감을 지닌 이미지라
하더라도 백열등(Incandescent), 부드러운 조명(Soft White), 밝은 조명(Bright White), 일반 조명(Daylight)
등 색 온도에 따라 전혀 다른 색으로 인식되는 것이죠.
Incandescent Soft White Bright White
Daylight
14
13. 빛의 색 온도는 광원에 의해 생성된 빛이 가지는 온도의 수치인 캘빈(Kelvin, 절대온도의 단위. 1캘빈은 섭씨 1도)
값으로 측정됩니다. 객체를 가열하면 빛이 발하게 되는데 가열한 온도에 따라 빛이 발하는 색상은 달라집니다.
빛의 온도 값이 높을수록 자연광(백색)에 가까워지고, 낮을수록 백열등(붉은색)에 가까워지게 됩니다.
Color Temperatures
광원 온도
장작 불 900 K
성냥 불 1700 K
백열등 2700 - 3000 K
자연광(햇빛) 3000 K
정오의 햇빛 6500 K
15
24. 주변의 조명에 영향을 받는 또 다른 요인은 모니터의 ‘밝기’입니다. 사람이 모니터를
보기 위해서는 모니터의 밝기가 주변 빛의 밝기보다 높아야 하기 때문입니다. 그렇지
않으면 사람은 모니터 화면 내용을 제대로 볼 수 없습니다. 날씨가 화창한 날 야외에서
스마트 폰 액정의 화면이 잘 보이지 않는 이유입니다. 실내 환경에서도 마찬가지겠죠.
여러분의 작업 공간이 매우 밝다면, 모니터 디스플레이 화면의 밝기가 주변 빛보다
밝아야 합니다.
300일
밝기 변화
색 변화
26
25. 근래 출시되는 모니터 디스플레이, 노트북 디스플레이의 경우
주변 광을 감지하여 자동으로 빛을 조절하는 기능이 있습니다.
AmbienT Light
SenseR
27
26. Smart Device Notebook / PC
일정량의 밝기가 보장되는 환경이라면, 디스플레이의 자동 밝기 조정을 해제하는 것이 정확한 색상 작업에 적합합니다.
28
30. GLoSSy
Matte 스크린에 비해 색상, 대조, 이미지 선명하게 출력됩니다.
반사될만한 요인이 없다는 전제하에 Matte 스크린에 비해 더 잘 읽을 수 있습니다.
매트 코팅을 벗기지 않고, 스크린을 청소하기 수월합니다.
반사가 되기 때문에 뒤에서 훔쳐보는 누군가를 견제하기 수월합니다.
모든 것이 밝고, 선명하게 표현됩니다.
32
31. GLoSSy
Matte 스크린에 비해 과장된 표현으로 사진 출력 결과가 화면과 다를 수 있습니다.
야외 이동 중에는 반사가 될 환경이 다분하기 때문에 불편합니다.
지문, 먼지 얼룩 문제로 스크린을 자주 닦아야 합니다.
반사로 인해 작업에 집중하기가 어렵습니다.
장시간 노출시, 눈의 피로와 두통을 유발할 수 있습니다.
33
32. GLoSSy
글로시 패널 위에 필름을 붙여 만들어진 매트의 경우 빛 반사가 덜해 주변 환경의 영향을 덜 받는 다는 장점이
있지만, 상대적으로 글로시에 비해 선명함이 떨어져 보입니다. 스마트 폰 액정을 그대로 쓸 때와 필름 지를
붙였을 때의 차이점을 생각해 보면 이해가 쉬울 겁니다.
정리하면 난반사가 심한 것이 거슬린다면 안티글레어 패널을, 선명함을 추구한다면 글로시 패널이 적합합니다.
다만 글로시 패널의 경우는 주변 조명에 신경 써야 하는 불편함이 있습니다. 분명 기호에 따라 다르겠지만
주변 조명이 적절한 작업환경에서라면 글로시 패널을 사용하는 것이 안티글래어 패널보다 나은 선택일 겁니다.
MaTte
34
34. 작업 공간 주변 환경이 빛 세기, 색 온도, 반사 등에 영향을 받을 수 밖에 없다면 모니터 후드(Hood) 사용
을 고려해볼 필요가 있습니다. 주변 조명 빛에 최대한 영향을 받지 않으려면 모니터 디스플레이에 직접
적인 영향을 주지 못하도록 가려줘야 합니다.
Block AmbienT
Light
36
35. 구매 금액에 부담이 느껴진다면 직접 만들어 사용도 가능합니다. 가까운
문구센터에서 블랙 폼 보드, 블랙 테이프를 구매하여 모니터 크기에 맞게
재단하여 만들 수 있습니다. 그것조차 귀찮다면 후드 티셔츠 또는 넥(Neck)
티셔츠 하나로 모니터 후드 대용으로 사용할 수 있습니다.
Block AmbienT
Light Diy
37
37. ColoR
ManageMent
SysteM
디스플레이, 프린트 등 컬러 장비에서 일관성있고, 예측, 지속 가능한
컬러를 위한 관리로, 디지털 카메라로 찍은 사진의 컬러를 모니터,
프로젝터 등에서 정확히 재현하는 시스템을 말합니다.
표준 컬러 프로파일
ICC Profile
39
39. OS &
MonitoR
운영체제가 모니터의 능력을 모르고 있다는 것은 모니터 화면에 어떻게
색상을 표현할지 아무도 모르는 것과 같습니다. 즉, 정확한 색상을 화면에
출력할 수 없습니다. 디자인 작업에 있어 정확한 색상이 보여줄 수 없는
모니터를 사용하고 있는데 어떤 전문가가 문제 삼지 않을 수 있겠습니까?
연결된 모니터가
뭐에요?
41
40. 운영체제에 컬러 프로파일을 설정하는 것은 몸무게를 측정하기 이전에 체중계의 영점을 맞추거나 혹은 군대에서
사격을 하기 전에 영점을 맞추는 것과 같습니다. 즉, 오차의 범위를 줄이기 위한 설정으로 정확한 컬러 디자인 작업을
추구하는 프로페셔널 디자이너에게 필요합니다.
Zero PoinT
AdJusTMenT
42
41. 모니터의 컬러 정보를 담고 있는 프로파일을 운영체제에 제공하면 됩니다.
일반적으로 모니터를 구매하면 함께 동봉된 CD의 드라이버를 설치하거나,
모니터 제조사의 웹 사이트에서 제공하는 드라이버(Driver)를 다운로드 받아
설치하면 자동으로 운영체제에 컬러 프로파일이 제공됩니다.
insTalL
MonitoR
DriveR
모델명은
어디서?
43
42. 운영체제의 컬러 프로파일 관리 설정 내용을 확인하기 위해 [Windows 로고
>제어판]을 선택합니다. 제어판 창의 항목 중 ‘색 관리’를 선택합니다. 만약
‘색 관리’ 항목이 보이지 않으면 오른쪽 상단 [보기 기준] 설정 값을 ‘범주’에
서 ‘작은 아이콘’으로 변경합니다. 목록 항목 보기 기준이 변경되면 ‘색 관
리’를 찾을 수 있을 겁니다.
windows
MonitoR
ChecK
색관리는
어디서?
44
43. [맥 로고>시스템 환경설정>디스플레이]를 찾아 선택합니다. 띄워진 컬러
LCD 창에서 [색상] 버튼을 누른 후, [디스플레이 프로파일]에서 현재
운영체제에 연결된 컬러 프로파일을 확인할 수 있습니다.
Mac oS
MonitoR
ChecK
컬러 프로파일
관리는?
45
44. 디자인 작업을 위해 사용하는 포토샵, 일러스트레이터 같은 그래픽 프로그램이 구동될 때, 운영체제로부터
컬러 프로파일을 읽어옵니다. 다시 말해 컬러 프로파일이 설정되지 않은 운영체제의 포토샵으로 그래픽
디자인을 할 경우, 작업된 컬러가 정확하다고 보장할 수 없습니다.
OS &
PhotosHoP &
ColoR ProfiLe
ICC 컬러 프로파일
46
57. 소프트웨어 방식의 모니터 캘리브레이션은 결국 주변 환경에 영향을 크게 받는 인간의
눈에 의존한 방법이기 때문에 객관적일 수 없습니다. 스스로의 눈에는 적합하다고
느껴질지 모르나, 주관적인 해석이기에 정확한 색을 보고 작업한다고
보장할 수는 없습니다.
색 온도
Color Temperature
주변광
Ambient Light
반사면
Specular Surface
57
58. HardWare
CaLibrATioN
객관화된 수치는 별도의 센서를 통해 측정해야 하기에 센서를 구매해야 합니다. 네. 맞습니다. 투자
를 해야 정확한 컬러 프로파일을 얻을 수 있는 것이죠. 센서 구매는 여러분 또는 여러분이 몸담고
있는 소속사의 선택일 뿐입니다. 사용 중인DataColor사의 Spyder4 Elite를 통해 모니터 캘리브레이
션 하는 과정을 다뤄보겠습니다. Spyder4 Elite는 우주선 모양의 센서로 캘리브레이션 프로그램 수
행 시, 모니터에 접촉하여 계측하는 과정을 수행합니다.
하드웨어 캘리브레이션
H/W Calibration
58
59. 센서로 모니터를 계측하기 전에 먼저 주변 조명을 적당히 조정하
는 것이 중요합니다. Spyder4 Utility를 구동시키면 센서를 통해 주
변 조명의 세기를 측정할 수 있습니다. 주변 조명 빛 세기 수준을
‘중간’ 정도로 맞춘 후, 모니터 캘리브레이션을 수행합니다.
AmbienT
Light
59
74. ★ 대상의 상태 (시각 장애, 색맹, 노인 등)
★ 주변 조명의 밝기, 색 온도
★ 디스플레이 종류 (CRT, LCD, OLED 등)
★ 운영체제(Windows, Mac OS, Linux 등)
★ 웹 브라우저 (Chrome, Safari, Firefox, Internet Explorer, Opera 등)
74
75. Windows와 Mac OS는 시장의 양 축을 차지하고 있는 인기 있는 운영체제지만,
두 운영체제의 컬러 호환은 원활하게 이루어지지 않았습니다. 두 운영체제는 같은 컬러를
다르게 표현했던 데는 나름의 이유가 있었습니다. 감마(Gamma) 처리 방법이나,
컬러 프로파일을 적용하는 방법이 서로 다르기 때문입니다.
75
76. 감마(Gamma)란?
픽셀과 휘도(밝기)의 관계를 말합니다. 쉽게 말해 이미지의 톤 처리(밝은, 중간, 어두운 단계별
농도 관계)를 말합니다. 여러분이 포토샵 커브(Curve) 보정을 사용해봤다면 한결 이해하기가 수월할겁니다.
가장 밝은 하얀색(White)과 가장 어두운 검정색(Black)을 제외한 나머지 톤(Tone) 단계를 조정하는 것이
커브죠. 왼쪽 그래프를 보면 하얀색 포인트와 검정색 포인트를 제외한 나머지 영역이 이미지의 밝고,
중간, 어두운 면을 말합니다.
GamMa
76
77. 디지털 이미지와 감마는 관련이 있습니다. 관련성을 이해
하기 위해서는 빛을 기록하는 디지털 기기와 사람의 눈의
차이점에 대해 먼저 공부해야 합니다. 먼저 디지털 기기는
빛의 밝기를 선형(직선)으로 기록할 뿐, 비선형(곡선)으로
는 기록하지 않습니다.
하지만 인간의 눈은 ‘베버의 법칙(Weber's law)’에 따라 밝
기에 대해 비선형으로 반응합니다. 쉽게 말해 디지털 기기
의 밝기 기록 그대로는 인간의 눈에 자연스럽게 보이지 않
습니다. 이 점이 디지털 이미지 저장 시, 감마 보정이 필요
한 이유입니다.
DigitaL Image &
GamMa
77
78. 베버의 법칙이란?
간단히 말해서 ‘자극의 변화를 느끼기 위해서는 처음 받은 자극에
대해 일정 비율 이상의 자극을 받아야 한다’는 법칙입니다. 처음
받은 자극이 약할 경우, 자극의 변화가 적어도 변화를 인지할 수
있는 반면 처음 받은 자극의 크기가 클 경우에는 다음 자극의 크
기가 커져야만 변화를 감지할 수 다는 이론입니다. 일상에서 찾을
수 있는 베버의 법칙의 예로는 조용한 곳에서 이야기할 때보다 시
끄러운 곳에서 보다 큰 목소리를 내야만, 대화가 가능한 경우를
들 수 있습니다.
78
79. 윈도우즈 감마
Gamma 2.2
매킨토시 감마
Gamma 1.8
SysteM GamMa
Windows와 Mac OS는 서로 다른 감마 보정책으로 인해
화면에 표시되는 색상 간에 차이가 생겼던 것입니다.
79
82. 웹 브라우저마다 컬러 표현에 있어 차이가 나는 이유는
각 브라우저마다 컬러 프로파일 적용 유무가 다르기 때문입니다.
We
rowseRb
82
83. 운영체제에서의 색 차이 문제가 해결되었다 하더라도 웹 디자인이 최종 출력되는 결과물은 모니터가
아니라, 웹 브라우저의 뷰포트(Viewport, 화면 표시영역)이기 때문에 실질적으로 색 차이가 발생할 수
있습니다.
웹 브라우저마다 컬러 프로파일을 처리하는 방식에 차이가 있기 때문입니다. 일부 웹 브라우저는 컬러
매니지먼트(CMS: Color Management System)를 지원하지 않거나, 일부만 지원하기 때문에 컬러 표현
력이 떨어집니다. 인터넷 익스플로러(IE) 8이하 버전은 컬러 매니지먼트를 지원하지 않습니다. 쉽게
말해 IE 6, 7, 8 브라우저는 시스템/이미지의 컬러 프로파일을 전혀 읽지 못합니다.
? ? ?
83
84. 운영체제, 브라우저만도 워낙 많은데다, 다양한 버전까지 테스트
해보려면 수백 가지 조합이 발생하기 때문에 테스트 환경을 갖추
기란 매우 어려운데다 부담이 됩니다. 더구나 모바일 환경까지
추가적으로 테스트해야 하는 경우라면 암담하기까지 합니다.
browserstack.com을 이용하여 고민을 해결할 수 있습니다. 유료
서비스이기 때문에 다소 부담이 될 수는 있겠지만, 지원되는 서비
스가 워낙 다양하기에 투자 가치가 있습니다. 참고로 2014년 1월
까지는 마이크로소프트사의 후원으로 3개월간 무료로 체험 사용
이 가능합니다.
84