프로덕트 디자이너를 위한 디바이스 컬러 표현 방법
스트릿 출신의 프로덕트 디자이너가 가치 있는 제품을 만들려는 노력의 기록
내 화면에서 보이는 주황색과
네 화면에서 보는 주황색이
왜 다른거야?
여기 하나의 앱 디자인 작업물이 있습니다.
디자이너인 '우주'와 '신비'가 리뉴얼을 위해 디자인중인 앱화면입니다. 메인 디자인이 나온 뒤 둘은 업무를 분담하여 화면을 만들고 있었습니다.
그런데 이상합니다.
분명 같은 주황색인데 우주의 화면에서 보이는 주황색과 신비의 화면에서 보이는 주황색이 서로 미묘하게 다릅니다. 물어보니 둘다 "디자인 가이드에 있는 색상을 그대로 썼다"고 합니다.
다른 팀 사람들이 하나둘씩 모여들더니 자기들 노트북에서 확인합니다. 그러더니 "주황색 맞아요? 좀 빨간데요?" 라고 합니다.
어떤 사람은 "내 모니터에서는 주황색은 주황색인데 좀 탁하네. 이거 우리 브랜드 컬러랑 다른데? 애초에 잘못 만든거 아냐?" 라고 합니다. 또 어딘가에서는 "이거 브로슈어랑 아예 색이 달라요. 잘못된 것 같은데요?", "어, 너두? 야, 나두.." 라고 합니다.
우린 모두 서로 얼굴을 바라보며 눈을 꿈벅이며 말합니다.
"...뭐야, 왜 전부 다 달라?"
스포이드툴로 찍었는데도
컬러가 다르다니..!?
화면의 색상이 다른걸 발견하는건 위와 같은 스토리로 진행되기도 하지만 아래와 같은 스토리로 진행되기도 합니다.
1. 배너 디자인 베리에이션 외주 작업을 맡기기 위해 외부 디자이너에게 메인 배너와 함께 보냄
2. 며칠 뒤 외부 디자이너의 작업물을 받아봤는데 전체적으로 색의 명도와 톤이 조금 낮음
3. 스포이드 툴로 내부 작업물과 외부 작업물의 색감을 찍어서 비교해보았더니 역시 외부에 맡긴 작업물의 채도나 명도가 조금 더 낮음
4. '디자이분이 실수 하셨나보다' 라고 생각하며 '색상의 명도와 채도가 달라요. 색상을 맞춰주세요' 라고 수정 요청을 함
5. 수정 요청을 받은 디자이너도 '어라? 스포이드로 기존 색상 찍어서 했는데 이상하다.. 뭐 중간에 실수가 있었나보지' 라며 색상을 수정하여 다시 보냄
6. 그렇게 색상 수정이 완료된 파일을 주고 받음. 그런데 여전히 색상톤이 달라서 한번 더 수정요청을 함
7. 이쯤 되니 양쪽 모두 이상하다고 생각함
9. 그리고는 '이래서 아무리 바빠도 외주를 못맡기겠어'라며 외부를 탓함
10. 외부 디자이너는 '하.. 진짜 진상이네' 라며 업체측을 탓함
(실화를 바탕으로 하였습니다.)
위와 같은 일은 내부에서도 여러명의 디자이너가 작업물을 사혼의 조각처럼 쪼개서 작업할 경우에도 발생할수 있습니다. 도대체 사람마다 왜 다르게 나오는걸까요? 그렇다면 오직 단 한명이 모든걸 작업하는것만이 답일까요?
그렇지 않습니다. 원인을 알면 해결할 수 있습니다.
이런 경우 원인은 주로 2가지입니다. '색공간이 다른 경우'와 '디바이스가 다른 경우'입니다.
그렇기 때문에 이 2가지에 대해 이해하고 있다면 문제를 해결할 수 있습니다.
하나씩 살펴보시죠!
첫번째,
디바이스별로
화면에 표현되는 색상이 다르니
디바이스를 체크해요.
디바이스의 종류는 정말 다양합니다. 먼저 카테고리로 나누자면 모니터, 스마트폰, 영화관스크린, 티비스크린 등이 있습니다. 각 카테고리 안에서도 브랜드별로, 스크린별로, 제품별로 또 모두 다릅니다.
뭐가 됐든 물리적으로 색감에 영향을 주는건 '패널'과 '색공간'입니다.
모니터의 패널 종류에는 크게 TN패널, VA패널, IPS패널 등으로 나뉩니다.
스마트폰 액정 패널 종류에는 크게 AMOLED패널, IPS패널로 나뉩니다.
브랜드별로, 제품별로, 가격대별로 차용하는 패널은 다릅니다. 그래서 같은 브랜드 기기라도 서로 보이는 색상이 다른 현상이 나타납니다.
(**같은 패널이더라도 관련 기술력의 차이에 따라 색 재현이 다릅니다만 이 글은 패널에 대해 상세하게 소개하는 내용은 아니니 '아, 이렇게나 다양하구나' 하고 넘어갈께요! 넘어가주세요..)
이정도 알았으니 우리가 체크해야할것은 '너와 나의 모니터/스마트폰(의 패널과 색공간)이 다른가 같은가' 입니다.
맨 위에서 등장한 우주와 신비에게 물어보니 우주는 'VA 패널을 차용한 삼성 모니터'를 사용중이었고 신비는 'IPS 패널을 차용한 아이맥'을 사용중이었네요!
다른 직원들도 모두 서로 다른 모니터를 쓰고 있었어요. 그래서 모두 다른 주황색을 봤던거였어요.
어라? 그런데 외주를 줬던 회사와 그걸 진행했던 디자이너는 알아보니 우리와 같은 패널을 사용한 삼성 모니터를 쓰고 있었어요. 그런데 왜 다르죠?
두번째,
각자 사용하는 색공간이
같은지 다른지 체크해요.
색에는 색공간이라는 개념이 있습니다. 색이 분포되어 있는 공간을 말하는 것으로 '삼각형으로 생긴 색상의 방'이라고 생각하면 인지하기 쉽습니다. 이 색공간은 국제 표준법 안에서 표현됩니다.
그리고 색공간이라는 방 안에는 '나는 이만큼을 표현할꺼야!' 라고 정의한 애들이 여럿 있는데요.
그 중 웹/앱 디자인에 적합한 색공간은 sRGB(Standard RGB), Display-P3 이렇게 2가지 정도가 있습니다. (때에 따라, 직군에 따라, 업종에 따라 애플 RGB(Apple RGB), Adobe RGB 등도 쓰겠지만 지금은 위의 2개만 알아도 맥락을 파악하는데 충분하다고 생각하여 더이상 소개하지 않겠습니다.)
이들은 모두 색 공간 안에서 차지하는 영역의 범위가 조금씩 다르며 패널처럼 모니터마다, 브랜드마다, 기기마다 모두 각각 다른 색공간을 사용합니다.
이렇게 색 공간 안에서 차지하는 색 영역의 범위가 다르기 때문에 내 기기에서 표현할 수 없는 색공간의 색을 쓴 이미지 파일이나 웹 페이지를 열게 되면 내 기기가 자동으로 그 색을 바꿉니다. 표현은 해야하는데 나에게는 없는 색이니 눈치껏 '아 이거면 비슷하겠네' 하는 색으로 컬러값을 바꿔치기 하는 겁니다. (눈치가 나보다 빠른걸..!?)
이러니 스포이드툴로 찍을때 애초에 다른 색상 컬러값이 찍히는 것입니다.
참고로 위의 디바이스랑은 별개로 운영체제별로 지원하는 색공간도 다릅니다.
운영체제(OS)에서 넓은 색공간을 지원해도 디바이스가 지원하지 않을수도 있습니다. 이런 현상은 디바이스를 제조하는 회사와 운영체제(OS)를 만드는 회사가 달라서 그렇습니다.
(각자 만들고 합체할 때 이상함을 깨닫게 되는 걸까요...?... ㅎㅎ)
그럼 다시 외주를 맡긴 업체와 디자이너의 상황으로 돌아가볼까요?
이 사실을 알고 서로의 디바이스를 확인해보았더니 업체 내의 디자이너들 모니터는 'sRGB'로 설정되어 있었고 외부 디자이너는 'Display-P3'로 설정되어 있었습니다.
(참고로 같은 sRGB나 P3라 해고 모니터에는 또 색 재현율이라는게 있어서 저 안에서도 색을 다 표현하냐 못하냐가 관건이기도 합니다... 까다롭.. 이 역시 이번편에서 자세히 다룰 내용은 아니니 넘어가겠습니다.)
신기한 마음에 옆자리 동료끼리도 살펴보니 갤럭시 S20과 그 옆자리 동료의 갤럭시 플립 그리고 나의 아이폰 12가 모두 발현되는 색상이 다르다는 걸 알았습니다.
참고로 포토샵이나 일러스트, 피그마, 스케치 등의 작업 툴에서도 색공간 설정이 가능합니다.
포토샵, 일러스트에서는 다양한 색공간을 제공하지만 피그마, 스케치, XD, 피그마는 각각 제공하는 색공간이 한정적이고 서로 다르다는점도 기억해주셔야 합니다.
아참, 잊을 뻔 했네요. 브라우저마다도 제공하는 색공간이 다릅니다. (^^...)
휴, 정말 신경써야 할게 많습니다!
이러니 완전 같은 모니터/스마트폰에 같은 툴, 같은 브라우저가 아닌 이상 보이는 색상이 같은게 불가능하다 싶습니다. (이정도 되면 '어쩌라고' 싶..)
세번째,
이참에 나와 타인의 화면에서
똑같은 색상을 보는건
불가능하다는 것을 인지해요.
이렇게 모든 디스플레이는 제조방식, 제조사, 운영체제등의 여러 조건에 따라 색상 표현 방법이 다 다릅니다.
데스크탑, 노트북, 태블릿, 스마트폰간의 또오옥같은 컬러값은 재현할 수 없습니다.
물리적으로 불가능합니다. 위에서 이미 느끼셨을 것 입니다.
이 말은 작업자들끼리도 그렇지만 사용자에게도 이 불가능이 적용된다는 말이 됩니다.
같은 회사 내의 몇십명 안되는 사람들끼리도 이렇게 맞기 힘든데 (아니 하다못해 내 듀얼 모니터 두개도 색이 다른걸..) 몇백, 몇천명의 고객의 조건의 합은 엄청나게 파편화 될수밖에 없습니다.
그러니 작업자들끼리는 작업 환경을 맞추는 것이 중요하고 그보다 중요한 것은 '우리 고객의 환경은 어떠한가'를 알고 기준을 잡고 가는것이 중요합니다.
그럼 디자이너는
무슨 색공간을 써야하나요?
일단 웹/앱 디자이너가 쓰는 일반적인 색공간은 위에서 말씀드렸듯이 'sRGB'와 'DCI-P3' 이렇게 2가지입니다. 왜냐면 웹/앱은 결국 스마트폰, 타블렛, 모니터 등과 같은 디스플레이 기기를 통해 발현되는데 현재 디스플레이 분야에서 주로 사용되는 색공간이 'sRGB'와 'DCI-P3'이기 때문입니다.
✳️ sRGB (standard RGB) : HP와 마이크로소프트가 합작하여 만든 컴퓨터 모니터를 위한 인터넷용 표준 RGB색공간입니다.표준이기에 모든 디바이스에서 사용 가능하며 색공간이 가장 작아 '색 표현에 안전'한 색공간입니다.
단점은 표현할 수 있는 색상에 한계가 있어 감각적인 디자인을 위해 특별한 색을 써야할 때 쓸 수 없다는 점입니다.표준은 특별함을 품을 수 없지만 모든 디스플레이에서 내가 의도한 색으로 동일하게 재현된다는 점때문에 가장 많이 쓰입니다. 특히 sRGB는 현재 IT분야에서 가장 많이 사용되기에 각종 기기들과 호환성이 제일 높습니다.
참고로 디스플레이용이기에 디지털 이미지를 인쇄하거나 인화할 때는 이 색공간을 쓰지 않는것이 좋습니다.
✳️ DCI-P3 : sRGB보다 약 25% 더 많은 컬러를 제공합니다. 일부 애플 제품에서 지원합니다. 그래서 애플에서 색상표현이 더 풍부하다고 느끼는 것입니다. 실제로 풍부하기 때문이죠.특히 green쪽이 풍부합니다. 그쪽의 색 영역을 더 많이 쓰기 때문입니다.
역시 디스플레이용이기에 디지털 이미지를 인쇄하거나 인화할 때는 이 색공간을 쓰지 않는 것이 좋습니다.
너의 화면에서 보이는 주황색과 나의 화면에서 보이는 주황색은 일부러 모든 환경을 맞추지 않는이상 다를 수 밖에 없습니다. 색이 사람의 눈까지 도달하는 과정에서 변수가 너무 많기 때문입니다.
그러니 사용자 경험을 설계하는 사람은 이 주황색을 본인에게 맞추는 것이 아닌 이 색상을 보게 될 사용자의 환경을 조사하여 그에 맞춰야 합니다.
나의 작업 환경을 고객의 환경과 100% 똑같이 만들수는 없겠지만 우리 고객이 '어떤 주황색'을 보게 될지는 알고 작업해야 합니다.
그래야 '고객을 위한 디자인'에 조금 더 가까워질 수 있습니다.
참고 ) 색공간에 대해 더 자세히 알고 싶으시다면 컬러 박사 '김환' 교수님의 컨텐츠를 추천드립니다.
'김환' 교수님의 유튜브 영상 : https://www.youtube.com/watch?v=JTNH3uvWND8
참고 ) 갤럭시 s8이 나왔을 때 화면이 시뻘개서 난리였(...)던걸 아는 사람이라면 아래의 글도 재미있어요.
'신현묵' 작가님의 브런치 글 : https://brunch.co.kr/@supims/108
참고 ) 디스플레이 색 체계의 역사 Part.1
'삼성디스플레이 뉴스룸'의 발행 글 : https://news.samsungdisplay.com/14129
참고 ) 디스플레이 색 체계의 역사 Part.2
'삼성디스플레이 뉴스룸'의 발행 글 : https://news.samsungdisplay.com/14388
