디자이너가 포토샵에서 만든 시안을 개발자가 CSS로 구현할 때, 색상이 미묘하게 달라지는 경우가 있다. 왜 그런지, 어떻게 해결하는지 알아보자.
색공간 차이
포토샵의 기본 색공간이 sRGB가 아니면 문제가 생긴다. Adobe RGB나 ProPhoto RGB는 더 넓은 색역을 갖고 있어서, 웹 브라우저가 표현하는 sRGB와 다르게 보인다. 포토샵 파일을 sRGB로 변환하거나, 처음부터 sRGB로 작업하자.
색상 피커 확인
포토샵에서 색상 피커를 열면 HEX 값이 보인다. 이 값을 색상 변환기에 넣어서 RGB 값도 확인하고 CSS에 정확히 입력하자. 눈대중으로 비슷한 색 고르면 안 된다.
모니터 캘리브레이션
디자이너와 개발자의 모니터 색상이 다를 수 있다. 가능하면 캘리브레이션된 모니터를 사용하고, 색상 코드를 숫자로 정확히 전달하는 게 안전하다.
디자인 핸드오프 도구
Figma, Zeplin 같은 도구를 쓰면 색상 코드가 자동으로 추출된다. 수동 복사보다 실수가 줄어든다. 색상 변환기로 검증하면 더 확실하다.
색상 프로파일 통일
포토샵, 피그마, 브라우저 모두 sRGB를 사용하도록 설정하면 색상 차이를 최소화할 수 있습니다. 포토샵에서는 Edit > Color Settings에서 Working Space를 sRGB로 설정하세요. 색상 변환기로 확인한 값이 의도대로 보이려면 프로파일 일치가 중요합니다.
CSS 코드 복사 팁
포토샵에서 레이어 스타일을 복사하면 CSS로 변환해주는 플러그인들이 있습니다. 그라데이션이나 그림자까지 한 번에 옮길 수 있어 편리합니다.