웹 이미지에는 어떤 색상 프로파일을 사용해야 하나요?

sRGB가 웹의 표준 색상 프로파일입니다. 모든 브라우저가 지원하며 프로파일이 없는 이미지도 sRGB로 해석합니다. 여러 기기와 플랫폼에서 가장 일정한 결과를 얻으려면 sRGB를 사용하세요.

다른 모니터에서 스크린샷 색상이 달라 보이는 이유는 무엇인가요?

모니터마다 표현하는 색 영역과 보정 설정이 다릅니다. Display P3 같은 광색역 프로파일로 캡처한 스크린샷을 일반 sRGB 모니터에서 보면, 모니터가 더 넓은 색 범위를 표현하지 못해 색이 흐리거나 달라 보일 수 있습니다.

sRGB와 Display P3는 무엇이 다른가요?

sRGB는 사람이 볼 수 있는 색의 약 35%를 포함하며 오랫동안 웹 표준으로 사용됐습니다. Display P3는 sRGB보다 약 25% 더 많은 색을 포함해 빨강, 초록, 주황을 더 선명하게 표현합니다. 최신 Apple 기기와 여러 고급 모니터가 Display P3를 지원합니다.

PNG와 JPEG도 색상 프로파일을 지원하나요?

네. 두 형식 모두 메타데이터에 ICC 색상 프로파일을 넣을 수 있습니다. PNG는 프로파일을 무손실로 보존하고 JPEG는 표준 메타데이터 필드에 저장합니다. 일부 이미지 최적화 도구는 프로파일을 제거해 색상 차이를 만들 수 있습니다.

파일 크기를 줄이기 위해 색상 프로파일을 지워도 되나요?

프로파일을 지우면 보통 3~5KB를 줄이지만 브라우저는 이미지를 sRGB로 해석합니다. 다른 프로파일로 만든 이미지에서 이를 제거하면 색상이 잘못 표시됩니다. 이미 sRGB인 이미지에서만 프로파일 제거를 고려하세요.

색상 프로파일란? | 용어집

색상 프로파일은 이미지의 색을 어떻게 해석하고 표시할지 정하는 데이터입니다. 서로 다른 화면, 브라우저, 인쇄 장치에서도 색이 일정하게 보이도록 돕습니다.

자주 쓰는 색상 프로파일

색상 프로파일의 정식 명칭은 ICC 프로파일이며, 이미지의 색을 표준 색 공간에 대응시킵니다. 스크린샷과 웹 이미지에서 주로 만나는 프로파일은 다음 세 가지입니다.

sRGB(Standard Red Green Blue)는 웹의 기본 색 공간입니다. HP와 Microsoft가 1996년에 만들었으며 사람이 볼 수 있는 색 영역의 약 35%를 포함합니다. 최신 브라우저, 운영체제, 디스플레이가 모두 sRGB를 지원합니다. 웹 이미지에 프로파일이 들어 있지 않으면 브라우저는 sRGB로 해석합니다.

Display P3는 Apple 기기(Retina 디스플레이가 있는 iPhone, iPad, Mac)와 점점 더 많은 고급 모니터에서 쓰는 광색역 공간입니다. sRGB보다 약 25% 더 많은 색을 포함해 빨강, 초록, 주황을 더 선명하게 표현합니다. 지원하는 하드웨어의 macOS는 스크린샷을 Display P3로 캡처합니다.

Adobe RGB는 Display P3와 비슷한 범위를 포함하지만 청록색과 녹색 영역에 더 무게를 둡니다. 주로 인쇄 사진과 인쇄 전 작업에서 사용합니다. 웹 스크린샷과는 관련이 적지만 전문 카메라로 만든 이미지를 다룰 때 만날 수 있습니다.

프로파일 사이의 차이는 실제 결과에 영향을 줍니다. Display P3로 만든 이미지에는 sRGB가 표현하지 못하는 색이 들어 있습니다. 적절히 변환하지 않고 sRGB 모니터에 표시하면 범위를 벗어난 색이 잘리면서 원래보다 흐리거나 다른 색조로 보입니다.

스크린샷에서 프로파일이 중요한 이유

스크린샷은 캡처한 디스플레이의 색상 프로파일을 따릅니다. 최신 Mac에서는 보통 Display P3, 대부분의 Windows 컴퓨터에서는 sRGB입니다.

이 차이 때문에 Display P3를 쓰는 Mac에서 캡처한 스크린샷이 sRGB 디스플레이가 있는 Windows 컴퓨터에서 조금 다르게 보일 수 있습니다. P3에 들어 있는 선명한 색을 더 좁은 sRGB 범위에 맞추면서 채도가 낮아지기도 합니다.

여러 사람이 문서, 디자인 검토, 고객 프레젠테이션에서 스크린샷을 공유하면 이 차이가 혼란을 만듭니다. 디자이너가 선명한 브랜드 색상을 담은 이미지를 캡처해도 일반 모니터로 보는 사람에게는 색조가 다르게 보일 수 있습니다.

서버의 헤드리스 브라우저를 사용하는 자동 스크린샷 도구는 보통 sRGB로 렌더링합니다. 작업자의 디스플레이 하드웨어와 상관없이 같은 결과를 만들어 프로파일 불일치를 피합니다.

색상 프로파일과 웹

최신 브라우저는 색상을 관리합니다. 이미지에 들어 있는 ICC 프로파일을 읽고 현재 모니터에서 정확하게 표시하도록 변환합니다. 프로파일이 포함돼 있고 브라우저가 색상 관리를 지원한다면 Display P3 이미지도 P3와 sRGB 모니터에서 각각 알맞게 보입니다.

CSS는 광색역 색상을 위한 함수도 지원합니다. color(display-p3 1 0.5 0)은 P3 색 공간의 색을 직접 지정합니다. color-gamut 미디어 쿼리로 디스플레이가 광색역을 지원하는지 확인하고 알맞은 이미지를 고릅니다.

대부분의 웹 작업에는 sRGB가 여전히 안전한 기본값입니다. 널리 지원되고 별도 처리가 필요 없으며 예상 가능한 결과를 만듭니다. Display P3 같은 광색역 프로파일은 지원하는 디스플레이에서 더 풍부한 색을 보여 주지만 일반 모니터에서 색이 달라지지 않도록 주의해서 다뤄야 합니다.

반복 가능한 스크린샷 검토

여러 사람이 서로 다른 하드웨어에서 같은 캡처를 검토하는 순간 색상 프로파일은 작업상의 문제가 됩니다. 한 사람이 P3 Mac에서 광색역 스크린샷을 내보내고 다른 사람이 sRGB 화면에서 비교하면 같은 이미지가 왜 다르게 보이는지부터 확인해야 합니다. 캡처와 내보내기 규칙을 표준화하면 이런 혼란을 줄이고 시각적 검토 결과를 더 믿을 수 있습니다.

흔한 실수

한 프로젝트에서 프로파일을 섞습니다. 같은 디자인이나 문서에 sRGB와 Display P3 이미지를 함께 쓰면 색이 일정하지 않습니다. 웹 콘텐츠라면 보통 sRGB 하나로 정하고 모든 이미지를 같은 프로파일로 변환하세요.
최적화 중 프로파일을 제거합니다. 일부 이미지 최적화 도구는 파일 크기를 줄이려고 ICC 프로파일을 지웁니다. Display P3로 만든 이미지에서 프로파일을 제거하면 브라우저가 sRGB로 잘못 해석해 채도가 달라집니다.
스크린샷 비교에서 프로파일 차이를 무시합니다. 서로 다른 하드웨어에서 캡처한 스크린샷을 비교하면 프로파일 불일치가 시각적 회귀의 오탐을 만들 수 있습니다. 모든 캡처에 같은 색상 프로파일과 렌더링 조건을 사용하세요.
모든 모니터의 색이 같다고 생각합니다. 프로파일이 정확해도 모니터 보정 상태는 다릅니다. 보정된 디자인 모니터에서 정확해 보인 이미지가 노트북이나 보급형 디스플레이에서는 다르게 보일 수 있습니다. 표준 프로파일을 사용하고 최종 색 정확도는 보는 사람의 하드웨어에도 영향을 받는다는 점을 고려하세요.

색상 프로파일