SlideShare a Scribd company logo
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
eyeS &
LighT인간은 사물을 어떻게
볼 수 있나요?
2
eyeS &
LighT
인간의 눈은 빛을 통해 사물을 인식합니다. 빛이 있음으로
써 사물의 형태와 색을 구분할 수 있는 것이죠. 형태의 경우
모호한 경우를 제외하고는 대다수가 눈을 통해 받아들이는
정보에 큰 차이가 없습니다. 사각형은 사각형으로, 원은 원
으로 인식합니다. 반면 색의 경우는 인간 개개인마다 정보
를 받아들이는 편차가 큽니다.
3
Changed
perception of
color 색을 인식하는데 있어
모두가 동등한 능력을 가졌을까요?
4
Changed
perception of
color
색을 인식하는 능력은 유전적 요인으로 다르기도 하고, 남녀의 성별에 따라 또는 연령에 따라 천차만별 다릅니다. 색맹, 색약 등 색을 인식하는데
장애를 가진 경우는 유전적 결함으로 색을 제대로 구분할 능력이 없으며, 적색과 녹색을 구분하지 못하는 유형이 일반적입니다.
보고된 통계에 따르면 세계 인구 중 약 1억 8천만명 가량이 색을 구분하는데 장애를 가지고 있습니다.
5
여성보다 남성의 경우 색을 인식하지 못하는 확률이 약 20배 가량 높습니다. 평균적으로 남성 12명 중
1명 꼴로 장애를 가지고 있으며, 여성은 250명중 1명 꼴로 장애를 가지고 있습니다. 뿐만 아니라
섬세한 여성과 달리 남성은 색을 구분하는 인식 범위가 매우 단순하기 때문에 여성과 남성은
같은 공간에서 같은 색을 바라보지만, 서로 다르게 인식할 수 있습니다.
Women men
7
여성과 남성이 선호하는 색 또한
확연하게 차이가 납니다.
8
노인의 경우, 나이가 들어감에 따라 시각 능력이 노쇠화 되기에 색을 인식하는
능력이 현저히 떨어지게 됩니다. 이처럼 인간이 색을 인식하는 능력은 여러
요인에 따라 천차만별 다릅니다.
Old men노인의 경우, 나이가 들어감에 따라 시각 능력이 노쇠화 되기에 색을 인식하는
능력이 현저히 떨어지게 됩니다. 이처럼 인간이 색을 인식하는 능력은 여러
요인에 따라 천차만별 다릅니다.
10
Determines of
the COLOr,
LIGHT색을 구분하는데
영향을 주는 요인은 무엇이 있을까요?
11
익히 잘 알려졌듯이 정상적인 시각을 가진 사람은 망막의 감각세포인 원추체를 통해
세가지 분광색인 빨간색(RED), 녹색(GREEN), 파란색(BLUE)을 혼합하여 모든 색을
만들 수 있습니다. 빛이 스펙트럼(spectrum)되는 과정 상에서 세가지 분광색으로
확연히 구분되는 것을 볼 수 있습니다.
Determines of
the COLOr,
LIGHT
12
Color MiXiNG
13
Compare ColoR
TempeRaTures
인간은 빛을 통하지 않고는 색을 볼 수 없을뿐더러, 조명 빛의 색 온도에 따라 인식하는 색이 달라질 수도 있
습니다. 즉 자연광, 형광등, 백열등 빛의 온도에 따라 색을 달리 보게 됩니다. 동일한 색감을 지닌 이미지라
하더라도 백열등(Incandescent), 부드러운 조명(Soft White), 밝은 조명(Bright White), 일반 조명(Daylight)
등 색 온도에 따라 전혀 다른 색으로 인식되는 것이죠.
Incandescent Soft White Bright White
Daylight
14
빛의 색 온도는 광원에 의해 생성된 빛이 가지는 온도의 수치인 캘빈(Kelvin, 절대온도의 단위. 1캘빈은 섭씨 1도)
값으로 측정됩니다. 객체를 가열하면 빛이 발하게 되는데 가열한 온도에 따라 빛이 발하는 색상은 달라집니다.
빛의 온도 값이 높을수록 자연광(백색)에 가까워지고, 낮을수록 백열등(붉은색)에 가까워지게 됩니다.
Color Temperatures
광원 온도
장작 불 900 K
성냥 불 1700 K
백열등 2700 - 3000 K
자연광(햇빛) 3000 K
정오의 햇빛 6500 K
15
16
White
Balance
Digital Camera Monitor Display
17
18
AmbienT Light주변 환경이
우리 눈에 어떤 영향을 미칠까요?
19
AmbienT Light
주변의 빛에 따라 사람은 사물을 인식하는 색상이 달라집니다. 그런 이유로 컬러 디자인 작업 시,
정확한 색을 선택하고 매칭(Matching)하기 위해서는 주변 조명에 신경을 써야 합니다.
20
체크무늬 바닥은 밝은 색 사각형과 어두운 색 사각형으로 구성되어 있습니다. 일견하기에도
두 색은 분명 다른 색으로 보이지만, 사실 그림자 영역 내부의 밝은 사각형 색은
그림자 밖의 어두운 사각형 색과 동일합니다.
AmbienT Light
21
이는 사람의 눈은 주변 환경에 영향을 받아 사물의 색을 달리 볼 수 있다는 것을 증명하는 예시입니다.
AmbienT Light
22
디자이너의 작업공간에는 어떤 문제가 있을까요?
23
Daylight
Indoor Light
자연광, 실내광에 영향을 받는 환경이라면 정확한 색 작업이 어렵습니다.
가급적이면 일정량의 빛의 세기가 보장되는 환경이 디자이너에게 적합한 환경입니다.
24
Daylight
Indoor Light
25
주변의 조명에 영향을 받는 또 다른 요인은 모니터의 ‘밝기’입니다. 사람이 모니터를
보기 위해서는 모니터의 밝기가 주변 빛의 밝기보다 높아야 하기 때문입니다. 그렇지
않으면 사람은 모니터 화면 내용을 제대로 볼 수 없습니다. 날씨가 화창한 날 야외에서
스마트 폰 액정의 화면이 잘 보이지 않는 이유입니다. 실내 환경에서도 마찬가지겠죠.
여러분의 작업 공간이 매우 밝다면, 모니터 디스플레이 화면의 밝기가 주변 빛보다
밝아야 합니다.
300일
밝기 변화
색 변화
26
근래 출시되는 모니터 디스플레이, 노트북 디스플레이의 경우
주변 광을 감지하여 자동으로 빛을 조절하는 기능이 있습니다.
AmbienT Light
SenseR
27
Smart Device Notebook / PC
일정량의 밝기가 보장되는 환경이라면, 디스플레이의 자동 밝기 조정을 해제하는 것이 정확한 색상 작업에 적합합니다.
28
SpeculaR
Surface
눈
부
심
이
우
리
눈
에
미
치
는
영
향
은
.
.
.
29
모니터에 비치는 빛 반사는 디자인 작업물의 색상에 영향을 끼칩니다. 빛 반사율이 높은
모니터 앞에서 그래픽 작업을 하면, 디자이너가 있고 있는 옷의 컬러에 따라 이미지의
색상이 다르게 보여질 수 있는 것이죠.
SpeculaR
Surface
30
GLoSSy MaTte
31
GLoSSy
Matte 스크린에 비해 색상, 대조, 이미지 선명하게 출력됩니다.
반사될만한 요인이 없다는 전제하에 Matte 스크린에 비해 더 잘 읽을 수 있습니다.
매트 코팅을 벗기지 않고, 스크린을 청소하기 수월합니다.
반사가 되기 때문에 뒤에서 훔쳐보는 누군가를 견제하기 수월합니다.
모든 것이 밝고, 선명하게 표현됩니다.
32
GLoSSy
Matte 스크린에 비해 과장된 표현으로 사진 출력 결과가 화면과 다를 수 있습니다.
야외 이동 중에는 반사가 될 환경이 다분하기 때문에 불편합니다.
지문, 먼지 얼룩 문제로 스크린을 자주 닦아야 합니다.
반사로 인해 작업에 집중하기가 어렵습니다.
장시간 노출시, 눈의 피로와 두통을 유발할 수 있습니다.
33
GLoSSy
글로시 패널 위에 필름을 붙여 만들어진 매트의 경우 빛 반사가 덜해 주변 환경의 영향을 덜 받는 다는 장점이
있지만, 상대적으로 글로시에 비해 선명함이 떨어져 보입니다. 스마트 폰 액정을 그대로 쓸 때와 필름 지를
붙였을 때의 차이점을 생각해 보면 이해가 쉬울 겁니다.
정리하면 난반사가 심한 것이 거슬린다면 안티글레어 패널을, 선명함을 추구한다면 글로시 패널이 적합합니다.
다만 글로시 패널의 경우는 주변 조명에 신경 써야 하는 불편함이 있습니다. 분명 기호에 따라 다르겠지만
주변 조명이 적절한 작업환경에서라면 글로시 패널을 사용하는 것이 안티글래어 패널보다 나은 선택일 겁니다.
MaTte
34
Block AmbienT
Light 주변 빛으로부터의 방해를
차단하는 좋은 방법은 뭘까요?
35
작업 공간 주변 환경이 빛 세기, 색 온도, 반사 등에 영향을 받을 수 밖에 없다면 모니터 후드(Hood) 사용
을 고려해볼 필요가 있습니다. 주변 조명 빛에 최대한 영향을 받지 않으려면 모니터 디스플레이에 직접
적인 영향을 주지 못하도록 가려줘야 합니다.
Block AmbienT
Light
36
구매 금액에 부담이 느껴진다면 직접 만들어 사용도 가능합니다. 가까운
문구센터에서 블랙 폼 보드, 블랙 테이프를 구매하여 모니터 크기에 맞게
재단하여 만들 수 있습니다. 그것조차 귀찮다면 후드 티셔츠 또는 넥(Neck)
티셔츠 하나로 모니터 후드 대용으로 사용할 수 있습니다.
Block AmbienT
Light Diy
37
ColoR
ManageMent
SysteM
디지털 장비간 컬러 호환을 위한 관리는
어떻게 이루어지나요?
38
ColoR
ManageMent
SysteM
디스플레이, 프린트 등 컬러 장비에서 일관성있고, 예측, 지속 가능한
컬러를 위한 관리로, 디지털 카메라로 찍은 사진의 컬러를 모니터,
프로젝터 등에서 정확히 재현하는 시스템을 말합니다.
표준 컬러 프로파일
ICC Profile
39
컬러 매니지먼트 미 적용
?
컬러 매니지먼트 적용
?
?
?
40
OS &
MonitoR
운영체제가 모니터의 능력을 모르고 있다는 것은 모니터 화면에 어떻게
색상을 표현할지 아무도 모르는 것과 같습니다. 즉, 정확한 색상을 화면에
출력할 수 없습니다. 디자인 작업에 있어 정확한 색상이 보여줄 수 없는
모니터를 사용하고 있는데 어떤 전문가가 문제 삼지 않을 수 있겠습니까?
연결된 모니터가
뭐에요?
41
운영체제에 컬러 프로파일을 설정하는 것은 몸무게를 측정하기 이전에 체중계의 영점을 맞추거나 혹은 군대에서
사격을 하기 전에 영점을 맞추는 것과 같습니다. 즉, 오차의 범위를 줄이기 위한 설정으로 정확한 컬러 디자인 작업을
추구하는 프로페셔널 디자이너에게 필요합니다.
Zero PoinT
AdJusTMenT
42
모니터의 컬러 정보를 담고 있는 프로파일을 운영체제에 제공하면 됩니다.
일반적으로 모니터를 구매하면 함께 동봉된 CD의 드라이버를 설치하거나,
모니터 제조사의 웹 사이트에서 제공하는 드라이버(Driver)를 다운로드 받아
설치하면 자동으로 운영체제에 컬러 프로파일이 제공됩니다.
insTalL
MonitoR
DriveR
모델명은
어디서?
43
운영체제의 컬러 프로파일 관리 설정 내용을 확인하기 위해 [Windows 로고
>제어판]을 선택합니다. 제어판 창의 항목 중 ‘색 관리’를 선택합니다. 만약
‘색 관리’ 항목이 보이지 않으면 오른쪽 상단 [보기 기준] 설정 값을 ‘범주’에
서 ‘작은 아이콘’으로 변경합니다. 목록 항목 보기 기준이 변경되면 ‘색 관
리’를 찾을 수 있을 겁니다.
windows
MonitoR
ChecK
색관리는
어디서?
44
[맥 로고>시스템 환경설정>디스플레이]를 찾아 선택합니다. 띄워진 컬러
LCD 창에서 [색상] 버튼을 누른 후, [디스플레이 프로파일]에서 현재
운영체제에 연결된 컬러 프로파일을 확인할 수 있습니다.
Mac oS
MonitoR
ChecK
컬러 프로파일
관리는?
45
디자인 작업을 위해 사용하는 포토샵, 일러스트레이터 같은 그래픽 프로그램이 구동될 때, 운영체제로부터
컬러 프로파일을 읽어옵니다. 다시 말해 컬러 프로파일이 설정되지 않은 운영체제의 포토샵으로 그래픽
디자인을 할 경우, 작업된 컬러가 정확하다고 보장할 수 없습니다.
OS &
PhotosHoP &
ColoR ProfiLe
ICC 컬러 프로파일
46
MonitoR
CalibratioN모니터 캘리브레이션은
왜 필요한가요?
47
MonitoR
CalibratioN
48
MonitoR
CalibratioN
48
MonitoR
CalibratioN
300일
밝기 변화
색 변화
300일
밝기 변화
색 변화
48
http://www.photofriday.com/calibrate.php
MonitoR
CalibratioN
49
50
51
캘리브레이션된 이미지캘리브레이션 안된 이미지
Calibrated DisplayNon-Calibrated Display
52
소프트웨어 캘리브레이션
S/W Calibration
하드웨어 캘리브레이션
H/W Calibration
OS 도구 활용
센서 활용
53
SoftWare
CaLibrATioN
소프트웨어 캘리브레이션
S/W Calibration
SW 캘리브레이션은 센서를 통해서 받은 모니터의 색상 값을 읽어서 그래픽 카드의 출력 신호의
LUT(LooK up Table)를 조정하는 방식 입니다. 가장 간단하고 별도의 비용이 들지 않아 좋은 방법
이지만, 주관적인 눈에 의지하기 때문에 부정확한 단점을 지닙니다.
54
windows
CalibraTioNhttp://windows.microsoft.com/ko-kr/windows7/Calibrate-your-display
55
Mac OS
CalibraTioN
56
소프트웨어 방식의 모니터 캘리브레이션은 결국 주변 환경에 영향을 크게 받는 인간의
눈에 의존한 방법이기 때문에 객관적일 수 없습니다. 스스로의 눈에는 적합하다고
느껴질지 모르나, 주관적인 해석이기에 정확한 색을 보고 작업한다고
보장할 수는 없습니다.
색 온도
Color Temperature
주변광
Ambient Light
반사면
Specular Surface
57
HardWare
CaLibrATioN
객관화된 수치는 별도의 센서를 통해 측정해야 하기에 센서를 구매해야 합니다. 네. 맞습니다. 투자
를 해야 정확한 컬러 프로파일을 얻을 수 있는 것이죠. 센서 구매는 여러분 또는 여러분이 몸담고
있는 소속사의 선택일 뿐입니다. 사용 중인DataColor사의 Spyder4 Elite를 통해 모니터 캘리브레이
션 하는 과정을 다뤄보겠습니다. Spyder4 Elite는 우주선 모양의 센서로 캘리브레이션 프로그램 수
행 시, 모니터에 접촉하여 계측하는 과정을 수행합니다.
하드웨어 캘리브레이션
H/W Calibration
58
센서로 모니터를 계측하기 전에 먼저 주변 조명을 적당히 조정하
는 것이 중요합니다. Spyder4 Utility를 구동시키면 센서를 통해 주
변 조명의 세기를 측정할 수 있습니다. 주변 조명 빛 세기 수준을
‘중간’ 정도로 맞춘 후, 모니터 캘리브레이션을 수행합니다.
AmbienT
Light
59
60
61
62
63
64
65
맥북 프로 레티나
Macbook Pro Retina
맥북 에어
Macbook Air
66
Before Calibration After Calibration
67
Before After
68
Before Calibration After Calibration
69
70
71
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
eNvironmentaL
factors To looK
DiffeRent
ColoRS
컬러가 다르게 보이게 하는 환경 요인으로는
어떤 것들이 있을까요?
73
★ 대상의 상태 (시각 장애, 색맹, 노인 등)
★ 주변 조명의 밝기, 색 온도
★ 디스플레이 종류 (CRT, LCD, OLED 등)
★ 운영체제(Windows, Mac OS, Linux 등)
★ 웹 브라우저 (Chrome, Safari, Firefox, Internet Explorer, Opera 등)
74
Windows와 Mac OS는 시장의 양 축을 차지하고 있는 인기 있는 운영체제지만,
두 운영체제의 컬러 호환은 원활하게 이루어지지 않았습니다. 두 운영체제는 같은 컬러를
다르게 표현했던 데는 나름의 이유가 있었습니다. 감마(Gamma) 처리 방법이나,
컬러 프로파일을 적용하는 방법이 서로 다르기 때문입니다.
75
감마(Gamma)란?
픽셀과 휘도(밝기)의 관계를 말합니다. 쉽게 말해 이미지의 톤 처리(밝은, 중간, 어두운 단계별
농도 관계)를 말합니다. 여러분이 포토샵 커브(Curve) 보정을 사용해봤다면 한결 이해하기가 수월할겁니다.
가장 밝은 하얀색(White)과 가장 어두운 검정색(Black)을 제외한 나머지 톤(Tone) 단계를 조정하는 것이
커브죠. 왼쪽 그래프를 보면 하얀색 포인트와 검정색 포인트를 제외한 나머지 영역이 이미지의 밝고,
중간, 어두운 면을 말합니다.
GamMa
76
디지털 이미지와 감마는 관련이 있습니다. 관련성을 이해
하기 위해서는 빛을 기록하는 디지털 기기와 사람의 눈의
차이점에 대해 먼저 공부해야 합니다. 먼저 디지털 기기는
빛의 밝기를 선형(직선)으로 기록할 뿐, 비선형(곡선)으로
는 기록하지 않습니다.
하지만 인간의 눈은 ‘베버의 법칙(Weber's law)’에 따라 밝
기에 대해 비선형으로 반응합니다. 쉽게 말해 디지털 기기
의 밝기 기록 그대로는 인간의 눈에 자연스럽게 보이지 않
습니다. 이 점이 디지털 이미지 저장 시, 감마 보정이 필요
한 이유입니다.
DigitaL Image &
GamMa
77
베버의 법칙이란?
간단히 말해서 ‘자극의 변화를 느끼기 위해서는 처음 받은 자극에
대해 일정 비율 이상의 자극을 받아야 한다’는 법칙입니다. 처음
받은 자극이 약할 경우, 자극의 변화가 적어도 변화를 인지할 수
있는 반면 처음 받은 자극의 크기가 클 경우에는 다음 자극의 크
기가 커져야만 변화를 감지할 수 다는 이론입니다. 일상에서 찾을
수 있는 베버의 법칙의 예로는 조용한 곳에서 이야기할 때보다 시
끄러운 곳에서 보다 큰 목소리를 내야만, 대화가 가능한 경우를
들 수 있습니다.
78
윈도우즈 감마
Gamma 2.2
매킨토시 감마
Gamma 1.8
SysteM GamMa
Windows와 Mac OS는 서로 다른 감마 보정책으로 인해
화면에 표시되는 색상 간에 차이가 생겼던 것입니다.
79
Gamma 1.8 Gamma 2.2
80
2.2
GamMa
81
웹 브라우저마다 컬러 표현에 있어 차이가 나는 이유는
각 브라우저마다 컬러 프로파일 적용 유무가 다르기 때문입니다.
We
rowseRb
82
운영체제에서의 색 차이 문제가 해결되었다 하더라도 웹 디자인이 최종 출력되는 결과물은 모니터가
아니라, 웹 브라우저의 뷰포트(Viewport, 화면 표시영역)이기 때문에 실질적으로 색 차이가 발생할 수
있습니다.
웹 브라우저마다 컬러 프로파일을 처리하는 방식에 차이가 있기 때문입니다. 일부 웹 브라우저는 컬러
매니지먼트(CMS: Color Management System)를 지원하지 않거나, 일부만 지원하기 때문에 컬러 표현
력이 떨어집니다. 인터넷 익스플로러(IE) 8이하 버전은 컬러 매니지먼트를 지원하지 않습니다. 쉽게
말해 IE 6, 7, 8 브라우저는 시스템/이미지의 컬러 프로파일을 전혀 읽지 못합니다.
? ? ?
83
운영체제, 브라우저만도 워낙 많은데다, 다양한 버전까지 테스트
해보려면 수백 가지 조합이 발생하기 때문에 테스트 환경을 갖추
기란 매우 어려운데다 부담이 됩니다. 더구나 모바일 환경까지
추가적으로 테스트해야 하는 경우라면 암담하기까지 합니다.
browserstack.com을 이용하여 고민을 해결할 수 있습니다. 유료
서비스이기 때문에 다소 부담이 될 수는 있겠지만, 지원되는 서비
스가 워낙 다양하기에 투자 가치가 있습니다. 참고로 2014년 1월
까지는 마이크로소프트사의 후원으로 3개월간 무료로 체험 사용
이 가능합니다.
84
Test
ColoR
ProfiLe
IE9이상버전부터는완벽하지않지만,컬러매니지먼트를지원(이미지컬러프로
파일만호출)합니다.컬러매니지먼트지원유무체크는http://yamoo9.net/iecolortest
에서테스트해볼수있습니다.
링크를따라가면화면상단에ColorinIE9링크를클릭합니다.그러면가로로3등분
된이미지가보이는데3장의이미지가마치1장의이미지처럼보인다면브라우저는
컬러매니지먼트를지원한다고볼수있습니다.그렇지않다면컬러매니지먼트를
제대로지원하지않는것입니다.
85
Mobile
ColoR Space
86
아이패드 미니
iPad Mini
87
넥서스 7
Nexus 7
아이패드 미니
iPad Mini
88
PhotoShoP
SettinG웹 디자인 작업 시, 컬러 작업에 유용한
방법은 뭐가 있을까요?
89
ColoR
SettinGS
컬러 프로파일이 다를 경우
컬러 프로파일을 찾지 못했을 경우
90
ColoR
ProofinG
91
Save foR
WeB
92
SwatcH
ManagemeNT
http://flatuicolors.com/
93
SamplinG of
Image ColoR
94
ThanKS
95

More Related Content

Viewers also liked

창의적 발상
창의적 발상창의적 발상
창의적 발상
Seul Gi Park
 
=2012 1장 지각론-1 빛과색 눈 색채지각효과
=2012 1장 지각론-1 빛과색 눈 색채지각효과=2012 1장 지각론-1 빛과색 눈 색채지각효과
=2012 1장 지각론-1 빛과색 눈 색채지각효과
Hyun Kang
 
color of modern art
color of modern artcolor of modern art
color of modern art
혜 진
 
Ppt색채학
Ppt색채학Ppt색채학
Ppt색채학
michi96
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 
박슬기 컬러베스2
박슬기 컬러베스2박슬기 컬러베스2
박슬기 컬러베스2
Seul Gi Park
 
제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개
제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개
제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개
dgmit2009
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
yamoo9
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
yamoo9
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
yamoo9
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
yamoo9
 
아트콜라보레이션에 대하여
아트콜라보레이션에 대하여아트콜라보레이션에 대하여
아트콜라보레이션에 대하여
윤아 이
 
색채학보고서 타이포
색채학보고서 타이포색채학보고서 타이포
색채학보고서 타이포
EMLIE
 
1412920 박소연
1412920 박소연1412920 박소연
1412920 박소연
soyeonp
 
색채학연구주제보고 최종
색채학연구주제보고 최종색채학연구주제보고 최종
색채학연구주제보고 최종
jiyein
 
색채학연구주제보고
색채학연구주제보고색채학연구주제보고
색채학연구주제보고
jiyein
 
색채학 1313032강소미
색채학 1313032강소미색채학 1313032강소미
색채학 1313032강소미
somikang_
 
한글 타이포그래피
한글 타이포그래피한글 타이포그래피
한글 타이포그래피
유정 김
 

Viewers also liked (20)

창의적 발상
창의적 발상창의적 발상
창의적 발상
 
=2012 1장 지각론-1 빛과색 눈 색채지각효과
=2012 1장 지각론-1 빛과색 눈 색채지각효과=2012 1장 지각론-1 빛과색 눈 색채지각효과
=2012 1장 지각론-1 빛과색 눈 색채지각효과
 
color of modern art
color of modern artcolor of modern art
color of modern art
 
Ppt색채학
Ppt색채학Ppt색채학
Ppt색채학
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
박슬기 컬러베스2
박슬기 컬러베스2박슬기 컬러베스2
박슬기 컬러베스2
 
제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개
제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개
제 4회 DGMIT UI&UX 컨퍼런스 : 타이포그래피의 기초와 전시회 소개
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
 
아트콜라보레이션에 대하여
아트콜라보레이션에 대하여아트콜라보레이션에 대하여
아트콜라보레이션에 대하여
 
색채학보고서 타이포
색채학보고서 타이포색채학보고서 타이포
색채학보고서 타이포
 
1412920 박소연
1412920 박소연1412920 박소연
1412920 박소연
 
색채학연구주제보고 최종
색채학연구주제보고 최종색채학연구주제보고 최종
색채학연구주제보고 최종
 
색채학연구주제보고
색채학연구주제보고색채학연구주제보고
색채학연구주제보고
 
색채학 1313032강소미
색채학 1313032강소미색채학 1313032강소미
색채학 1313032강소미
 
한글 타이포그래피
한글 타이포그래피한글 타이포그래피
한글 타이포그래피
 

More from yamoo9

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
yamoo9
 
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
yamoo9
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
yamoo9
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
yamoo9
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
yamoo9
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
yamoo9
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
yamoo9
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
yamoo9
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
yamoo9
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
yamoo9
 

More from yamoo9 (12)

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
 
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
 

일관된 컬러 매니지먼트 - Consistent Color Management

  • 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
  • 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
  • 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
  • 24. 주변의 조명에 영향을 받는 또 다른 요인은 모니터의 ‘밝기’입니다. 사람이 모니터를 보기 위해서는 모니터의 밝기가 주변 빛의 밝기보다 높아야 하기 때문입니다. 그렇지 않으면 사람은 모니터 화면 내용을 제대로 볼 수 없습니다. 날씨가 화창한 날 야외에서 스마트 폰 액정의 화면이 잘 보이지 않는 이유입니다. 실내 환경에서도 마찬가지겠죠. 여러분의 작업 공간이 매우 밝다면, 모니터 디스플레이 화면의 밝기가 주변 빛보다 밝아야 합니다. 300일 밝기 변화 색 변화 26
  • 25. 근래 출시되는 모니터 디스플레이, 노트북 디스플레이의 경우 주변 광을 감지하여 자동으로 빛을 조절하는 기능이 있습니다. AmbienT Light SenseR 27
  • 26. Smart Device Notebook / PC 일정량의 밝기가 보장되는 환경이라면, 디스플레이의 자동 밝기 조정을 해제하는 것이 정확한 색상 작업에 적합합니다. 28
  • 28. 모니터에 비치는 빛 반사는 디자인 작업물의 색상에 영향을 끼칩니다. 빛 반사율이 높은 모니터 앞에서 그래픽 작업을 하면, 디자이너가 있고 있는 옷의 컬러에 따라 이미지의 색상이 다르게 보여질 수 있는 것이죠. SpeculaR Surface 30
  • 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
  • 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
  • 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
  • 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
  • 82. 웹 브라우저마다 컬러 표현에 있어 차이가 나는 이유는 각 브라우저마다 컬러 프로파일 적용 유무가 다르기 때문입니다. We rowseRb 82
  • 83. 운영체제에서의 색 차이 문제가 해결되었다 하더라도 웹 디자인이 최종 출력되는 결과물은 모니터가 아니라, 웹 브라우저의 뷰포트(Viewport, 화면 표시영역)이기 때문에 실질적으로 색 차이가 발생할 수 있습니다. 웹 브라우저마다 컬러 프로파일을 처리하는 방식에 차이가 있기 때문입니다. 일부 웹 브라우저는 컬러 매니지먼트(CMS: Color Management System)를 지원하지 않거나, 일부만 지원하기 때문에 컬러 표현 력이 떨어집니다. 인터넷 익스플로러(IE) 8이하 버전은 컬러 매니지먼트를 지원하지 않습니다. 쉽게 말해 IE 6, 7, 8 브라우저는 시스템/이미지의 컬러 프로파일을 전혀 읽지 못합니다. ? ? ? 83
  • 84. 운영체제, 브라우저만도 워낙 많은데다, 다양한 버전까지 테스트 해보려면 수백 가지 조합이 발생하기 때문에 테스트 환경을 갖추 기란 매우 어려운데다 부담이 됩니다. 더구나 모바일 환경까지 추가적으로 테스트해야 하는 경우라면 암담하기까지 합니다. browserstack.com을 이용하여 고민을 해결할 수 있습니다. 유료 서비스이기 때문에 다소 부담이 될 수는 있겠지만, 지원되는 서비 스가 워낙 다양하기에 투자 가치가 있습니다. 참고로 2014년 1월 까지는 마이크로소프트사의 후원으로 3개월간 무료로 체험 사용 이 가능합니다. 84
  • 88. 넥서스 7 Nexus 7 아이패드 미니 iPad Mini 88
  • 89. PhotoShoP SettinG웹 디자인 작업 시, 컬러 작업에 유용한 방법은 뭐가 있을까요? 89
  • 90. ColoR SettinGS 컬러 프로파일이 다를 경우 컬러 프로파일을 찾지 못했을 경우 90