안녕하세요, 컬러 토큰 정리 중인 신입 프로덕트 디자이너입니다. 제가 피그마에서 고른 값이랑 개발된 화면 색이 미묘하게 다르게 보이더라고요. 토큰 hex는 똑같이 넘겼거든요. 졸업작품 인쇄 맡겼다가 색 차이에 충격받고 캘리브레이션 얘기를 들은 적은 있는데, 이게 모니터 문제인지 브라우저 렌더링 차이인지 제가 판단할 짬이 되나 싶어서요. 이럴 때 뭘 먼저 확인해보시는지 여쭤보고 싶습니다.
피그마 색이랑 실제 화면 색이 다른 거, 왜 그럴까요?
10.8 03:22조회수 0댓글 7
토큰 hex는 똑같이 넘겼는데 미묘하게 다르다는 그 지점에서 저도 좀 멈칫했어요. 저는 BX라 화면보다 인쇄 쪽에서 비슷한 걸 겪었거든요, 리뉴얼 때 모니터에선 딱 맞던 그린이 실사 간판으로 나오니까 톤이 확 가라앉아서, 그때도 결국 "내 눈이 문제인가 재료가 문제인가"를 한참 헤맸어요. 말씀하신 캘리브레이션 얘기가 저한테도 그 출장 사진들이랑 겹쳐 떠오르는데, 그게 모니터 색역 때문인지 브라우저가 sRGB를 어떻게 먹는지까지는 저도 자신 있게 판단을 못 하겠더라고요. 그래서 궁금한 게, 개발된 화면은 다른 기기 여러 대에서도 똑같이 다르게 보이던가요, 아니면 세진님 모니터에서만 그런 걸까요? 저는 그 "어디서부터 어긋났나"를 좁히는 순서를 잘 몰라서, 다들 뭐부터 열어보시는지 저도 같이 듣고 싶어요.
저도 처음엔 제 모니터만 의심했는데, 회사 노트북이랑 핸드폰으로 같은 화면을 열어봤더니 거기서도 미묘하게 다르게 보이더라고요. 그래서 모니터만의 문제는 아니겠구나 싶었고, 그때부터 일단 셀 수 있는 것부터 확인했어요. 넘긴 hex가 코드에 그대로 들어갔는지, 그리고 캡처해서 스포이드로 찍은 값이 맞는지요. 판단이 아니라 셈이라 그건 저도 열어볼 수 있겠더라고요. 혹시 간판 때는 원본 색값이랑 실물 사진을 따로 찍어서 나란히 대조해보신 적 있으세요?
저는 그 나란히 대조를 간판 나오고 나서야 뒤늦게 해봤어요. 리뉴얼 때 모니터에선 딱 맞던 그린이 실물 간판으로 나오니 다르게 보여서, 넘긴 원본 hex랑 현장 사진을 붙여놓고 들여다봤거든요. 근데 막상 대보니까 사진 쪽 색이 그날 현장 조명이랑 하늘색까지 다 먹어버려서, hex는 셀 수 있는데 실물 사진은 그 공기까지 같이 찍혀 나오니까 이게 색 차이인지 그날 빛 차이인지 저는 끝까지 못 가르겠더라고요. 그래서 셈이 되는 건 코드까지고, 사진은 참고로만 걸어두는 쪽으로 남았어요.
저는 BX 쪽이라 브라우저 렌더링까지는 확답을 못 드리겠는데요. 다만 시안 넘길 때 발색을 100% 이상 확대해서 따로 보는 버릇이 있는데, 같은 파일인데도 제 13인치 화면이랑 클라이언트 쪽 모니터에서 색이 달라 보여 당황한 적이 여러 번이에요. 그때 알았어요. hex가 같다는 건 '값이 같다'는 거지 '같은 색으로 보인다'는 보장은 아니더라고요. 세진님이 "토큰 hex는 똑같이 넘겼다"고 쓰신 그 대목이 저는 좀 걸리거든요. 그 hex가 어느 색공간에서 해석되는지는 넘긴 값에 안 적혀 있잖아요. 모니터 문제냐 렌더링 문제냐 범인부터 찾기보다, 피그마랑 실제 화면 양쪽의 색 프로파일 설정을 나란히 적어두고 시작하시는 게 어떨까 싶어요. 짐작으로 넘기면 매번 '느낌상 다르다'에서 멈추게 되더라고요.
모니터부터 의심하기 쉬운데, 저는 hex가 같은데도 다르게 보인다는 그 지점이면 색공간부터 봐요. 3D라 결이 좀 다를 수 있는데, 저는 렌더 걸 때 같은 값인데 뷰포트랑 최종 출력 색이 어긋나서 한참 헤맨 적이 있거든요. 알고 보니 sRGB로 나가야 할 게 다른 감마로 물려 있었더라고요. 그 뒤로는 피그마든 렌더든 "같은 hex"보다 "같은 색공간에서 보고 있나"를 먼저 의심하게 됐어요. 졸작 인쇄 때 충격받으셨다는 거랑도 사실 결이 닿아 있는 게, 인쇄는 아예 색영역 자체가 다른 거고 화면은 같은 디지털 안에서 변환 단계가 꼬인 거라서요. 판단할 짬이 되나 싶다고 하셨는데, 모니터 캘리브레이션은 그 다음 순서 같아요. 혹시 개발 화면 쪽 색변환 설정은 확인해보셨어요?
색공간부터 의심한다는 말이 제일 먼저 걸리더라고요. 저는 지금까지 hex가 같으니 값은 맞다고만 보고, 정작 개발 쪽 색변환 설정은 열어볼 생각을 못 했거든요. 넘긴 토큰 hex가 같은지만 확인했지 그게 어떤 색공간에서 렌더되는지는 한 번도 안 봤더라고요. 렌더 감마가 어긋났다는 얘기 들으니 제 경우도 변환 단계 어디가 꼬인 쪽에 가깝겠다 싶어서 좀 서늘해지네요. 혹시 개발자분께 색공간을 뭐라고 여쭤보고 뭘 적어가야 판단이 아니라 셈이 될지, 그 지점이 궁금합니다.
졸업작품 인쇄 맡겼다가 색 차이에 충격받았다는 그 대목이 딱 제 밥벌이라 눈이 갔어요. 저는 패키지 쪽인데, 별색 코드를 똑같이 넘겨도 지질이 코팅지냐 비코팅지냐에 따라 발색이 완전히 달라지거든요. 그래서 저는 hex나 코드 숫자 자체는 애초에 안 믿고, 실물 지질에 올린 교정쇄를 봐야 판단이 서요. 화면 쪽은 제가 안 해본 영역이라 모니터인지 브라우저 렌더링인지는 확답을 못 드리겠는데, "값이 같은데 왜 다르지"를 고민하는 그 지점이 저랑 결이 비슷해 보여요. 숫자가 맞다고 색이 맞는 게 아니라는 거, 인쇄든 화면이든 공통인 것 같거든요. 혹시 개발된 화면을 여러 기기에서 띄워보셨는지, 아니면 두 환경의 색공간 설정이 같은지부터 확인해보시면 어떨까 싶어요.