업로드 후 사진 색이 바래 보이는 이유

제품 사진을 보정하고, 빨강이 실제 스웨터 색과 딱 맞는 것을 확인한 뒤 스토어에 업로드합니다. 그런데 그 빨강이 벽돌색으로 돌아옵니다. 초록은 올리브색이 됩니다. 같은 화면에서 원본을 열어 보면 여전히 완벽합니다.

압축 때문이 아니고, 플랫폼이 여러분의 이미지를 "망가뜨리는" 것도 아닙니다. 흔한 원인은 색 프로필 불일치입니다. 파일은 자기 색을 한 언어로 설명하는데, 페이지는 그 숫자를 다른 언어로 읽는 것이죠.

같은 숫자가 서로 다른 두 색이 되는 이유

픽셀은 숫자 세 개이고, 200, 40, 40이 특정한 빨강이 되는 것은 어떤 색 공간이 그것을 재는지 알 때뿐입니다. Display P3는 빨강 원색을 sRGB보다 더 바깥으로 밀어내므로(x 0.68 대 0.64) 같은 세 숫자가 더 깊은 빨강을 가리킵니다. Adobe RGB (1998)는 sRGB와 정확히 같은 빨강·파랑 원색을 유지하는 대신 초록 원색을 늘리므로, 여분의 범위가 초록과 시안 쪽에 있습니다. 어느 쪽이든 그 숫자들은 sRGB를 가정하는 브라우저에게 다른 의미가 됩니다.

프로필은 어떤 자로 쟀는지 적어 둔 쪽지이고, 그것이 사라지면 웹은 단호하게 기본값을 씁니다. CSS Color Module Level 4는 명시적입니다. 호환성을 위해, HTML에서 지정된 색과 태그가 없는 이미지는 달리 명시되지 않는 한 sRGB 색 공간에 있는 것으로 취급해야 한다고요. 태그가 없는 채로 올린 파일은 결코 달리 명시하지 않으니, 결론은 sRGB입니다.

그래서 파일을 Adobe RGB나 Display P3로 내보냈는데 프로필이 떨어져 나가면(다시 인코딩하는 파이프라인, 메타데이터를 벗겨 내는 변환기), 그 광색역 숫자들이 sRGB로 읽힙니다. 더 좁은 가정 안으로 짓눌린 숫자들은 채도가 빠진 채로 나옵니다. 바로 그 바랜 느낌입니다. 어떤 색이 피해를 보는지는 원본에 달렸습니다. sRGB로 잘못 읽힌 Adobe RGB 파일은 초록과 시안에서 힘을 잃고, Display P3 파일은 채도 높은 빨강까지 떨어집니다. 무채색은 거의 움직이지 않습니다. 회색 팩샷에서는 아무 일도 없지만, 코럴색 수영복에서는 재앙입니다.

화면이 아니라 파일이 문제인지 확인하기

원본과 업로드본을 브라우저 창 하나에 나란히 놓으세요.

• 편집기에서는 맞는데 브라우저에서 밋밋하다면: 프로필 문제입니다.
• 브라우저에서는 둘이 같은데 편집기와 다르다면: 편집기가 브라우저는 무시하는 작업 색 공간으로 미리보기를 보여 주는 것입니다.
• 휴대폰이나 동료의 노트북에서만 틀리게 보인다면: 파일이 아니라 디스플레이 차이입니다.

그다음 원본을 브라우저 탭으로 끌어다 놓으세요. 브라우저는 파일에 포함된 프로필을 존중합니다. 로컬 파일은 맞는데 업로드본이 그렇지 않다면, 업로드 경로가 태그를 버린 것입니다.

파일이 어떤 프로필을 지니고 있는지 알아내기

• macOS: 미리보기로 파일을 열고 도구 막대의 정보 버튼을 누르거나 Command-I를 누른 다음, 이미지의 색 프로필이 표시되는 추가 정보 탭을 보세요.
• Photoshop: 문서 상태 표시줄의 화살표를 눌러 문서 프로파일을 고르세요.
• Lightroom: 내보내기 대화상자의 색 공간 드롭다운이 실제로 내보낸 값입니다.
• 플랫폼을 가리지 않는 방법: ExifTool이 알려 줍니다 — exiftool -ProfileDescription photo.jpg.

웹용이라면 sRGB가 아닌 것은 모두 용의자입니다. 최근 iPhone은 와이드 컬러로 사진을 찍고 파일에 그에 맞는 태그를 붙입니다. 애플은 카메라 사양에 "사진과 Live Photos의 와이드 컬러 캡처"를 명시하고 있습니다. 일부 안드로이드 휴대폰도 광색역 촬영 옵션을 제공하니 파일을 확인하세요.

sRGB로 변환하세요 — 제거하거나 지정하지 말고

비슷하게 들리는 세 가지 작업이 전혀 다른 일을 합니다.

• 제거(Strip) 는 라벨만 없애고 숫자는 그대로 둡니다. 광색역 데이터가 이제 확실하게 sRGB로 읽히니 상황이 더 나빠집니다.
• 지정(Assign) 은 다시 계산하지 않고 라벨만 바꾸므로 겉모습이 달라지고, 대개 틀린 쪽으로 갑니다.
• 변환(Convert) 은 픽셀을 하나하나 다시 계산해 더 좁은 색 공간이 허용하는 한 색을 가깝게 유지한 다음, sRGB 태그를 붙입니다.

원하는 것은 변환입니다. Photoshop의 편집 › 프로파일 변환, 또는 Lightroom 내보내기의 색 공간을 sRGB로 설정하면 됩니다. 채도가 가장 높은 색은 조금 달라진다고 예상하세요.

반대 경우: 지나치게 쨍해 보이는 스크린샷

메커니즘은 같고 방향만 반대입니다. 광색역 디스플레이에서 찍은 스크린샷은 그 디스플레이의 색 공간으로 색 값을 기록합니다. macOS에서 찍은 스크린샷은 대체로 디스플레이의 프로필이 함께 저장되지만, 다른 캡처 도구는 아무것도 붙이지 않을 수 있습니다. sRGB로 되읽히면 같은 숫자가 눈으로 본 것보다 더 채도 높게 그려집니다. 형광 초록, 햇볕에 탄 듯한 피부색이죠. 해결법도 같습니다.

배경을 바꿀 때 이것이 중요한 이유

프로필 불일치는 여기서부터 더 이상 미묘하지 않습니다. remover.bg에서 누끼를 브랜드 컬러 위에 올린 다음, 그 이미지를 CSS로 같은 헥스 값을 칠한 블록 옆에 두어 보세요. CSS 색은 sRGB로 그려집니다.

이미지가 다른 태그를 지니고 있다면, 한 가지 색의 두 가지 톤이 나란히 앉아 서로 맞기를 거부합니다. 업로드하기 전에 sRGB로 변환하면 그 모호함이 근원에서 사라집니다.

순백은 변환을 거쳐도 그대로이므로, 불일치만으로 마켓플레이스의 흰색 배경 검수에서 떨어지지는 않습니다. 피해를 보는 것은 제품 색입니다. 형식도 구원이 되지 못합니다. PNG, JPEG, WebP 모두 프로필을 담고, 태그가 사라지면 모두 잘못 읽힙니다. 투명 누끼도 예외가 아닙니다.

다음 업로드 전에

실제로 쓰는 프리셋 안에서 내보내기 색 공간을 sRGB로 한 번 설정해 두면 문제가 다시 생기지 않습니다. 그다음 업로드한 한 장을 같은 화면에서 원본과 대조해 보세요. 색이 그대로 유지된다면 여러분의 파이프라인은 깨끗합니다.