일관된 컬러 디자인을 위해서 우리가 알아두어야 하는 것들. KIPFA 2013 모바일 빅뱅 컨퍼런스 발표 자료. 아래 링크 주소 정정 http://yamoo9.net/iecolortest -> http://url.yamoo9.net/iecolortest

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

2. eyeS &
LighT인간은 사물을 어떻게
볼 수 있나요?
2

3. eyeS &
LighT
인간의 눈은 빛을 통해 사물을 인식합니다. 빛이 있음으로
써 사물의 형태와 색을 구분할 수 있는 것이죠. 형태의 경우
모호한 경우를 제외하고는 대다수가 눈을 통해 받아들이는
정보에 큰 차이가 없습니다. 사각형은 사각형으로, 원은 원
으로 인식합니다. 반면 색의 경우는 인간 개개인마다 정보
를 받아들이는 편차가 큽니다.
3

4. Changed
perception of
color 색을 인식하는데 있어
모두가 동등한 능력을 가졌을까요?
4

5. Changed
perception of
color
색을 인식하는 능력은 유전적 요인으로 다르기도 하고, 남녀의 성별에 따라 또는 연령에 따라 천차만별 다릅니다. 색맹, 색약 등 색을 인식하는데
장애를 가진 경우는 유전적 결함으로 색을 제대로 구분할 능력이 없으며, 적색과 녹색을 구분하지 못하는 유형이 일반적입니다.
보고된 통계에 따르면 세계 인구 중 약 1억 8천만명 가량이 색을 구분하는데 장애를 가지고 있습니다.
5

6. 여성보다 남성의 경우 색을 인식하지 못하는 확률이 약 20배 가량 높습니다. 평균적으로 남성 12명 중
1명 꼴로 장애를 가지고 있으며, 여성은 250명중 1명 꼴로 장애를 가지고 있습니다. 뿐만 아니라
섬세한 여성과 달리 남성은 색을 구분하는 인식 범위가 매우 단순하기 때문에 여성과 남성은
같은 공간에서 같은 색을 바라보지만, 서로 다르게 인식할 수 있습니다.
Women men
7

7. 여성과 남성이 선호하는 색 또한
확연하게 차이가 납니다.
8

8. 노인의 경우, 나이가 들어감에 따라 시각 능력이 노쇠화 되기에 색을 인식하는
능력이 현저히 떨어지게 됩니다. 이처럼 인간이 색을 인식하는 능력은 여러
요인에 따라 천차만별 다릅니다.
Old men노인의 경우, 나이가 들어감에 따라 시각 능력이 노쇠화 되기에 색을 인식하는
능력이 현저히 떨어지게 됩니다. 이처럼 인간이 색을 인식하는 능력은 여러
요인에 따라 천차만별 다릅니다.
10

9. Determines of
the COLOr,
LIGHT색을 구분하는데
영향을 주는 요인은 무엇이 있을까요?
11

10. 익히 잘 알려졌듯이 정상적인 시각을 가진 사람은 망막의 감각세포인 원추체를 통해
세가지 분광색인 빨간색(RED), 녹색(GREEN), 파란색(BLUE)을 혼합하여 모든 색을
만들 수 있습니다. 빛이 스펙트럼(spectrum)되는 과정 상에서 세가지 분광색으로
확연히 구분되는 것을 볼 수 있습니다.
Determines of
the COLOr,
LIGHT
12

11. Color MiXiNG
13

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

14. 16

15. White
Balance
Digital Camera Monitor Display
17

16. 18

17. AmbienT Light주변 환경이
우리 눈에 어떤 영향을 미칠까요?
19

18. AmbienT Light
주변의 빛에 따라 사람은 사물을 인식하는 색상이 달라집니다. 그런 이유로 컬러 디자인 작업 시,
정확한 색을 선택하고 매칭(Matching)하기 위해서는 주변 조명에 신경을 써야 합니다.
20

19. 체크무늬 바닥은 밝은 색 사각형과 어두운 색 사각형으로 구성되어 있습니다. 일견하기에도
두 색은 분명 다른 색으로 보이지만, 사실 그림자 영역 내부의 밝은 사각형 색은
그림자 밖의 어두운 사각형 색과 동일합니다.
AmbienT Light
21

20. 이는 사람의 눈은 주변 환경에 영향을 받아 사물의 색을 달리 볼 수 있다는 것을 증명하는 예시입니다.
AmbienT Light
22

21. 디자이너의 작업공간에는 어떤 문제가 있을까요?
23

22. Daylight
Indoor Light
자연광, 실내광에 영향을 받는 환경이라면 정확한 색 작업이 어렵습니다.
가급적이면 일정량의 빛의 세기가 보장되는 환경이 디자이너에게 적합한 환경입니다.
24

23. Daylight
Indoor Light
25

24. 주변의 조명에 영향을 받는 또 다른 요인은 모니터의 ‘밝기’입니다. 사람이 모니터를
보기 위해서는 모니터의 밝기가 주변 빛의 밝기보다 높아야 하기 때문입니다. 그렇지
않으면 사람은 모니터 화면 내용을 제대로 볼 수 없습니다. 날씨가 화창한 날 야외에서
스마트 폰 액정의 화면이 잘 보이지 않는 이유입니다. 실내 환경에서도 마찬가지겠죠.
여러분의 작업 공간이 매우 밝다면, 모니터 디스플레이 화면의 밝기가 주변 빛보다
밝아야 합니다.
300일
밝기 변화
색 변화
26

25. 근래 출시되는 모니터 디스플레이, 노트북 디스플레이의 경우
주변 광을 감지하여 자동으로 빛을 조절하는 기능이 있습니다.
AmbienT Light
SenseR
27

26. Smart Device Notebook / PC
일정량의 밝기가 보장되는 환경이라면, 디스플레이의 자동 밝기 조정을 해제하는 것이 정확한 색상 작업에 적합합니다.
28

27. SpeculaR
Surface
눈
부
심
이
우
리
눈
에
미
치
는
영
향
은
.
.
.
29

28. 모니터에 비치는 빛 반사는 디자인 작업물의 색상에 영향을 끼칩니다. 빛 반사율이 높은
모니터 앞에서 그래픽 작업을 하면, 디자이너가 있고 있는 옷의 컬러에 따라 이미지의
색상이 다르게 보여질 수 있는 것이죠.
SpeculaR
Surface
30

29. GLoSSy MaTte
31

30. GLoSSy
Matte 스크린에 비해 색상, 대조, 이미지 선명하게 출력됩니다.
반사될만한 요인이 없다는 전제하에 Matte 스크린에 비해 더 잘 읽을 수 있습니다.
매트 코팅을 벗기지 않고, 스크린을 청소하기 수월합니다.
반사가 되기 때문에 뒤에서 훔쳐보는 누군가를 견제하기 수월합니다.
모든 것이 밝고, 선명하게 표현됩니다.
32

31. GLoSSy
Matte 스크린에 비해 과장된 표현으로 사진 출력 결과가 화면과 다를 수 있습니다.
야외 이동 중에는 반사가 될 환경이 다분하기 때문에 불편합니다.
지문, 먼지 얼룩 문제로 스크린을 자주 닦아야 합니다.
반사로 인해 작업에 집중하기가 어렵습니다.
장시간 노출시, 눈의 피로와 두통을 유발할 수 있습니다.
33

32. GLoSSy
글로시 패널 위에 필름을 붙여 만들어진 매트의 경우 빛 반사가 덜해 주변 환경의 영향을 덜 받는 다는 장점이
있지만, 상대적으로 글로시에 비해 선명함이 떨어져 보입니다. 스마트 폰 액정을 그대로 쓸 때와 필름 지를
붙였을 때의 차이점을 생각해 보면 이해가 쉬울 겁니다.
정리하면 난반사가 심한 것이 거슬린다면 안티글레어 패널을, 선명함을 추구한다면 글로시 패널이 적합합니다.
다만 글로시 패널의 경우는 주변 조명에 신경 써야 하는 불편함이 있습니다. 분명 기호에 따라 다르겠지만
주변 조명이 적절한 작업환경에서라면 글로시 패널을 사용하는 것이 안티글래어 패널보다 나은 선택일 겁니다.
MaTte
34

33. Block AmbienT
Light 주변 빛으로부터의 방해를
차단하는 좋은 방법은 뭘까요?
35

34. 작업 공간 주변 환경이 빛 세기, 색 온도, 반사 등에 영향을 받을 수 밖에 없다면 모니터 후드(Hood) 사용
을 고려해볼 필요가 있습니다. 주변 조명 빛에 최대한 영향을 받지 않으려면 모니터 디스플레이에 직접
적인 영향을 주지 못하도록 가려줘야 합니다.
Block AmbienT
Light
36

35. 구매 금액에 부담이 느껴진다면 직접 만들어 사용도 가능합니다. 가까운
문구센터에서 블랙 폼 보드, 블랙 테이프를 구매하여 모니터 크기에 맞게
재단하여 만들 수 있습니다. 그것조차 귀찮다면 후드 티셔츠 또는 넥(Neck)
티셔츠 하나로 모니터 후드 대용으로 사용할 수 있습니다.
Block AmbienT
Light Diy
37

36. ColoR
ManageMent
SysteM
디지털 장비간 컬러 호환을 위한 관리는
어떻게 이루어지나요?
38

37. ColoR
ManageMent
SysteM
디스플레이, 프린트 등 컬러 장비에서 일관성있고, 예측, 지속 가능한
컬러를 위한 관리로, 디지털 카메라로 찍은 사진의 컬러를 모니터,
프로젝터 등에서 정확히 재현하는 시스템을 말합니다.
표준 컬러 프로파일
ICC Profile
39

38. 컬러 매니지먼트 미 적용
?
컬러 매니지먼트 적용
?
?
?
40

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

45. MonitoR
CalibratioN모니터 캘리브레이션은
왜 필요한가요?
47

46. MonitoR
CalibratioN
48

47. MonitoR
CalibratioN
48

48. MonitoR
CalibratioN
300일
밝기 변화
색 변화
300일
밝기 변화
색 변화
48

49. http://www.photofriday.com/calibrate.php
MonitoR
CalibratioN
49

50. 50

51. 51

52. 캘리브레이션된 이미지캘리브레이션 안된 이미지
Calibrated DisplayNon-Calibrated Display
52

53. 소프트웨어 캘리브레이션
S/W Calibration
하드웨어 캘리브레이션
H/W Calibration
OS 도구 활용
센서 활용
53

54. SoftWare
CaLibrATioN
소프트웨어 캘리브레이션
S/W Calibration
SW 캘리브레이션은 센서를 통해서 받은 모니터의 색상 값을 읽어서 그래픽 카드의 출력 신호의
LUT(LooK up Table)를 조정하는 방식 입니다. 가장 간단하고 별도의 비용이 들지 않아 좋은 방법
이지만, 주관적인 눈에 의지하기 때문에 부정확한 단점을 지닙니다.
54

55. windows
CalibraTioNhttp://windows.microsoft.com/ko-kr/windows7/Calibrate-your-display
55

56. Mac OS
CalibraTioN
56

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

60. 60

61. 61

62. 62

63. 63

64. 64

65. 65

66. 맥북 프로 레티나
Macbook Pro Retina
맥북 에어
Macbook Air
66

67. Before Calibration After Calibration
67

68. Before After
68

69. Before Calibration After Calibration
69

70. 70

71. 71

72. Day1 Day2 Day3 Day4 Day5 Day6 Day7
20,000 30,000 40,000 45,000 50,000 55,000 60,000
http://goo.gl/8EKbs9
72

73. eNvironmentaL
factors To looK
DiffeRent
ColoRS
컬러가 다르게 보이게 하는 환경 요인으로는
어떤 것들이 있을까요?
73

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

80. Gamma 1.8 Gamma 2.2
80

81. 2.2
GamMa
81

82. 웹 브라우저마다 컬러 표현에 있어 차이가 나는 이유는
각 브라우저마다 컬러 프로파일 적용 유무가 다르기 때문입니다.
We
rowseRb
82

83. 운영체제에서의 색 차이 문제가 해결되었다 하더라도 웹 디자인이 최종 출력되는 결과물은 모니터가
아니라, 웹 브라우저의 뷰포트(Viewport, 화면 표시영역)이기 때문에 실질적으로 색 차이가 발생할 수
있습니다.
웹 브라우저마다 컬러 프로파일을 처리하는 방식에 차이가 있기 때문입니다. 일부 웹 브라우저는 컬러
매니지먼트(CMS: Color Management System)를 지원하지 않거나, 일부만 지원하기 때문에 컬러 표현
력이 떨어집니다. 인터넷 익스플로러(IE) 8이하 버전은 컬러 매니지먼트를 지원하지 않습니다. 쉽게
말해 IE 6, 7, 8 브라우저는 시스템/이미지의 컬러 프로파일을 전혀 읽지 못합니다.
? ? ?
83

84. 운영체제, 브라우저만도 워낙 많은데다, 다양한 버전까지 테스트
해보려면 수백 가지 조합이 발생하기 때문에 테스트 환경을 갖추
기란 매우 어려운데다 부담이 됩니다. 더구나 모바일 환경까지
추가적으로 테스트해야 하는 경우라면 암담하기까지 합니다.
browserstack.com을 이용하여 고민을 해결할 수 있습니다. 유료
서비스이기 때문에 다소 부담이 될 수는 있겠지만, 지원되는 서비
스가 워낙 다양하기에 투자 가치가 있습니다. 참고로 2014년 1월
까지는 마이크로소프트사의 후원으로 3개월간 무료로 체험 사용
이 가능합니다.
84

85. Test
ColoR
ProfiLe
IE9이상버전부터는완벽하지않지만,컬러매니지먼트를지원(이미지컬러프로
파일만호출)합니다.컬러매니지먼트지원유무체크는http://yamoo9.net/iecolortest
에서테스트해볼수있습니다.
링크를따라가면화면상단에ColorinIE9링크를클릭합니다.그러면가로로3등분
된이미지가보이는데3장의이미지가마치1장의이미지처럼보인다면브라우저는
컬러매니지먼트를지원한다고볼수있습니다.그렇지않다면컬러매니지먼트를
제대로지원하지않는것입니다.
85

86. Mobile
ColoR Space
86

87. 아이패드 미니
iPad Mini
87

88. 넥서스 7
Nexus 7
아이패드 미니
iPad Mini
88

89. PhotoShoP
SettinG웹 디자인 작업 시, 컬러 작업에 유용한
방법은 뭐가 있을까요?
89

90. ColoR
SettinGS
컬러 프로파일이 다를 경우
컬러 프로파일을 찾지 못했을 경우
90

91. ColoR
ProofinG
91

92. Save foR
WeB
92

93. SwatcH
ManagemeNT
http://flatuicolors.com/
93

94. SamplinG of
Image ColoR
94

95. ThanKS
95