디자이너가 포토샵으로 만든 시안을 개발자가 구현할 때 색상이 미묘하게 달라지는 경험을 해보셨을 겁니다. 이는 색상 프로파일과 표현 방식의 차이 때문입니다.
포토샵 색상 모드 확인
포토샵에서 작업할 때 Image > Mode에서 RGB Color인지 확인하세요. CMYK 모드로 작업한 파일은 웹에서 색상이 다르게 보입니다. RGB로 변환 후 색상 값을 추출해야 합니다.
정확한 HEX 값 얻기
스포이드 도구로 색상을 선택한 후 색상 피커에서 HEX 값을 복사합니다. 이 값을 색상 변환기에서 RGB, HSL 등 다른 형식으로도 변환해두면 활용도가 높아집니다.
모니터 색상 보정
같은 HEX 값이라도 모니터마다 다르게 보일 수 있습니다. sRGB 프로파일 기준으로 모니터를 보정하면 디자이너와 개발자가 같은 색상을 보게 됩니다.
포토샵에서의 정확한 추출
포토샵에서 색상 피커를 열면 HSB, RGB, LAB, CMYK, HEX 값을 모두 볼 수 있습니다. 웹용으로는 HEX나 RGB를 복사합니다. 작업 파일의 색상 모드가 RGB인지 반드시 확인하세요. CMYK 모드에서 추출한 값은 웹에서 다르게 보입니다. 색상 변환기에서 추출한 값이 맞는지 검증하세요.
Figma와 포토샵 간 색상 차이
두 도구가 다른 색상 프로파일을 사용할 수 있습니다. 정확한 일치를 위해서는 둘 다 sRGB로 설정하는 것을 권장합니다. HEX 값은 같더라도 시각적으로 다르게 보이면 프로파일 설정을 확인하세요.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.