디자인과 개발 아웃풋의 컬러가 다르다면 ?

 

내 컴퓨터에서는 색을 잘 맞췄는데 실제 아웃풋에서는 생각보다 쨍하거나, 칙칙하게 나오는 일이 많다.
디자인과 실제 아웃풋 컬러가 다르게 보이는 일이 발생하는 것이다. 
이런 일을 타파하기 위해서 컬러 프로파일의 개념을 알아둬야한다.

 

---

 

 

디지털 디자인과 컬러 프로파일의 관계

컬러 프로파일은 크게 3가지로 나누어진다
sRGB, Adobe RGB(ARGB), P3

 

sRGB  : 모니터 및 프린터 표준 RGB 색공간

ARGB : sRGB에서 손실되고 부족한 영역대를 보완한 색공간, 어도비의 인쇄장비 기준

P3       : sRGB보다 약 25% 더 많은 컬러를 제공, 디지털 시네마 기준
             대표적인 제품은 Iphone 7, 아이패드 프로, 아이맥 등

 

ARGB는 인쇄 기준 색공간이므로 크게 신경쓰지 않아도 된다.
실제로 요즘 많은 디지털 하드웨어들은 P3를 사용한다. 조금 더 자세히 알아보자.

 

---

 

 

http://www.innovative-pixel.de/finaldcp/colors/

sRGB < P3

위 그림을 보면 표준 컬러 프로파일인 sRGB의 영역이 제일 작은 것을 알 수 있다.
표준이 제일 작은데 넓은 컬러 영역의 P3를 기반으로 작업한다면 sRGB를 기반으로 하는 하드웨어나 브라우저에서는 원했던 색깔이 나오지 않는다. 그렇기 때문에 웹과 앱을 만들 때는 모든 기기와 브라우저에서 기본으로 깔고가는 sRGB를 사용해야 실제 작업물과 아웃풋에서 동일한 컬러를 볼 수 있다.

스케치로 작업한다면 스케치도 sRGB로 설정해서 표준 컬러파일로 렌더링하여 봐야한다.
스케치에서 sRGB로 설정하는 법을 알아보자.

 

 

 

스케치 상단에 File > Change Color Profile을 선택한다

 

 

 

sRGB로 변경한다. 끝!

 

스케치는 기본적으로 P3와 sRGB를 제공한다. 
ARGB는 인쇄기반이기 때문에 UI디자인 툴인 스케치는 제공할 이유가 없다. 
Unmanaged는 MacBook Pro의 기본 색상 프로파일인 '컬러 LCD'를 의미한다.

 

 

스케치의 컬러 프로파일이 더 궁금하다면 https://sketchapp.com/docs/other/color-management/#display-p3-color-profile

 

 

 

---

많은 안드로이드 기기들도 최근에는 P3 컬러 프로파일을 지원하지만, 운영체제가 문제이다.
안드로이드의 컬러 매니지먼트의 문제로 색영역 정보를 제대로 읽지못해서 디스플레이 패널의 세팅값에 맞춰 이미지를 출력하는 것이다. 안드로이드의 문제이므로 삼성, 구글, LG 등이 모두 갖고있는 문제다. (안드로이드는 고통..)

 

간단히 요약해서 sRGB는 웹 960와 비슷하게 보면 될 것 같다.
더 많은 모니터들을 포괄하기 위해 960 사이즈로 웹을 제작하는 것으로 sRGB는 컬러 프로파일의 마지노선같은.

 

---

 

tmi 1. 최근에 나온 뉴맥북에어가 레티나 디스플레이가 도입됐대서 끌리고 있었다.
하지만 sRGB 색영역만 지원한다기에 고려대상에서 제외하기로 했다. P3 색영역은 맥북 프로와 아이맥에서만 지원한다.

 

tmi 2. 일렉트론(Electron)같은 경우, 개발툴에서 렌더링할 때 컬러가 변동되는 일이 있는 것 같다.
이 문제는 개발툴의 문제이므로 해결하지 못했다.

 

 

 

 

참조 링크

컬러에 대한 정보 블로그 : https://m.blog.naver.com/PostList.nhn?blogId=howardkim&logCode=0&categoryNo=5¤tPage=3

P3에 대하여 : http://dpg.danawa.com/news/view?boardSeq=63&listSeq=3582623&past=N&#csidx1bc25495bf10bc6ae2eb43d4cd3e72d