디자인 프로그램에서 분명 예쁘게 만든 이미지인데, 블로그나 SNS에 올렸더니
- 색이 탁하게 변하거나
- 원래보다 붉게/노랗게/푸르게 보이고
- 웹 브라우저마다 색감이 다르게 느껴진다면
이건 단순한 기분 탓이 아니라 색상 프로파일(ICC Profile)과 컬러모드 설정 때문입니다.
1. 색상 깨짐의 주요 원인
원인설명
| 색상 프로파일 미포함 | 모니터, 브라우저, 운영체제가 색 정보를 제대로 해석하지 못함 |
| CMYK → RGB 전환 문제 | 인쇄용 CMYK 모드를 그대로 저장하면 웹에서 색상 왜곡 발생 |
| 저품질 압축 | 이미지 압축 시 색상 정보가 손실되며 톤이 뭉개지는 현상 발생 |
| 브라우저 간 렌더링 차이 | 특히 모바일 브라우저에서는 색상 프로파일을 무시하는 경우도 있음 |
2. 색상 깨짐 방지하는 이미지 저장 설정 (디자인툴 기준)
✅ Adobe Photoshop 기준 (JPG 저장 시)
- 컬러 모드 확인
- 메뉴 > 이미지 > 모드 > RGB 색상 선택
- CMYK로 작업했을 경우 반드시 RGB로 변환
- ICC 프로파일 포함 저장
- 파일 > 내보내기 > 웹용으로 저장(Save for Web)
- 파일 형식: JPEG 고화질
- 체크박스: ✅ ICC 프로파일 포함(Embed Color Profile) 선택
- sRGB IEC61966-2.1 프로파일이 가장 일반적
- PNG 저장 시
- PNG-24 권장 (배경 투명도 필요할 경우)
- ICC 프로파일은 PNG 저장 시 자동으로 포함되지 않음 → 원본 색상 보정을 먼저 정확히 해야 함
3. 색상 깨짐 방지를 위한 이미지 저장 팁
팁설명
| 웹용 최적화 저장 | 무조건 ‘웹용 저장(Save for Web)’ 기능 활용 |
| 색공간은 sRGB 고정 | 디스플레이용 이미지의 국제 표준 → Apple, Chrome, Windows 대부분 호환 |
| 너무 높은 압축률 피하기 | JPEG 저장 시 품질 70 이상 권장 (색 띠, 뭉개짐 방지) |
| 이미지뷰어 아닌 브라우저에서 미리보기 | 뷰어 프로그램은 색상 보정을 적용해 보여줄 수 있음 |
4. 실제 적용 예시 (디자이너/블로거용)
- 포토샵으로 만든 썸네일을 네이버 블로그에 올릴 경우
→ 웹용 저장 + ICC 포함 + sRGB 프로파일 적용
→ 블로그 썸네일/본문 이미지가 탁하지 않고 원본에 가깝게 표시 - 인스타그램 업로드 시
→ 모바일 기본 브라우저가 ICC를 무시할 수 있음
→ 모바일 최적화 대비해서 색온도를 약간 보정하거나
너무 진하거나 어두운 색은 피하는 게 안전
5. 마무리 체크리스트 ✔
- RGB 모드에서 작업했는가?
- sRGB 색공간을 사용했는가?
- ICC 프로파일 포함하여 저장했는가?
- 이미지 압축률은 적정 수준(70~90%)인가?
- 웹 브라우저에서 직접 테스트해봤는가?
댓글