JPG 색차 서브샘플링이 글자 가장자리를 흐리는 이유

밝기와 색 정보가 다르게 저장될 수 있습니다

JPEG 작업 흐름에서는 화면의 빨강·초록·파랑 값을 밝기 성분과 색 차이 성분으로 변환해 다룰 수 있습니다. 사람의 시각이 세밀한 밝기 변화에 더 민감하다는 점을 이용해 색차 정보를 더 낮은 공간 해상도로 저장하는 것이 색차 서브샘플링입니다. 그래서 같은 픽셀 크기라도 밝은 윤곽은 비교적 또렷하고 색 경계만 부드러워 보일 수 있습니다.

4:4:4는 색차를 줄이지 않는 구성을 가리키고, 4:2:0은 가로와 세로 방향에서 색차 표본을 줄이는 대표적인 구성입니다. 이 표기는 최종 화질 전체를 한 숫자로 말하는 것이 아닙니다. 양자화 품질, 원본 내용, 인코더와 재압축도 함께 결과를 바꿉니다. 파일 정보에 서브샘플링이 표시되지 않으면 눈으로 추측만 하지 말고 비교 표본을 만드세요.

4:2:2처럼 가로 방향의 색차 해상도만 줄이는 중간 구성도 있어 선택지가 항상 두 개뿐인 것은 아닙니다. 같은 이름의 품질 프리셋도 앱마다 서로 다른 서브샘플링과 양자화 값을 사용할 수 있습니다. 따라서 다른 프로그램의 숫자를 그대로 비교하지 말고 각 프로그램이 만든 파일을 검사하세요. 저장 설정 화면과 결과 속성을 함께 기록해야 다음 내보내기에서도 같은 조건을 재현할 수 있습니다. 작은 시험 파일로 먼저 확인하는 습관이 가장 안전하고 매우 중요합니다.

• 밝기 선명도와 색 경계 선명도를 따로 보기
• 서브샘플링과 품질 값을 구분하기
• 결과 파일의 실제 인코딩 정보 확인하기

색 글자와 얇은 선이 취약한 이유를 찾으세요

회색 바탕의 빨강 글자, 파랑 아이콘, 보색이 맞닿은 한 픽셀 선은 색차 변화가 급격합니다. 색차 해상도가 낮아지면 인접 픽셀이 색 정보를 공유하면서 경계 밖으로 색이 번진 것처럼 보일 수 있습니다. 검은 글자는 밝기 대비가 커서 상대적으로 또렷해 보이지만, 같은 크기의 채도 높은 글자는 흐리거나 색 테두리가 생길 수 있습니다.

화면 캡처, 코드 이미지, 차트 범례, 로고와 게임 픽셀 아트는 사진보다 이 문제를 쉽게 드러냅니다. 100퍼센트 배율에서 작은 글자 획과 수직·수평 선을 보고, 200퍼센트 확대에서는 번짐의 방향을 확인하세요. 확대 화면만으로 불합격을 정하지 말고 실제 표시 크기에서 읽기와 색 구분에 문제가 있는지도 함께 판단합니다.

• 빨강·파랑 작은 글자 확인하기
• 한 픽셀 선과 차트 범례 비교하기
• 확대 화면과 실제 표시 크기 모두 보기

품질 슬라이더만 올려서는 해결되지 않을 수 있습니다

많은 내보내기 도구가 품질 숫자만 보여주고 서브샘플링 선택은 숨깁니다. 품질을 높이면 압축 손실이 줄 수 있지만 인코더가 계속 4:2:0을 사용한다면 색 경계의 해상도 제한은 남을 수 있습니다. 반대로 4:4:4를 선택해도 지나치게 낮은 품질이면 다른 압축 자국이 보일 수 있습니다. 두 설정을 독립적인 판단 항목으로 다루세요.

가능하다면 같은 원본을 4:4:4와 4:2:0, 두세 가지 품질 값으로 내보내 비교표를 만듭니다. 각 결과의 용량, 색 글자 선명도, 사진 질감과 그라데이션을 기록하세요. 도구가 서브샘플링을 지정하지 못한다면 결과 파일을 검사하거나 다른 내보내기 경로와 비교합니다. 파일이 크다는 이유만으로 4:4:4라고 가정하지 마세요.

• 같은 원본과 크기로 설정만 바꿔 비교하기
• 용량·글자·사진 질감을 함께 기록하기
• 지원되지 않는 설정은 추측하지 않기

콘텐츠에 따라 JPG와 PNG를 선택하세요

대부분이 사진이고 글자는 크고 적다면 적절한 JPEG가 작은 용량과 충분한 품질을 제공할 수 있습니다. 반대로 사용자 인터페이스 캡처, 설명 도표, 로고와 작은 색 글자가 핵심이라면 PNG가 경계를 무손실로 보존하는 데 더 유리할 수 있습니다. PNG가 언제나 더 작지는 않으며 사진에서는 용량이 크게 늘 수 있으므로 전달 제한을 함께 확인합니다.

사진 위에 자막이 있는 혼합 이미지라면 원본 편집 파일을 보관하고 4:4:4 JPG와 PNG를 모두 시험하세요. 대상 서비스가 업로드 뒤 JPEG로 다시 압축하면 로컬에서 고른 설정이 최종 화면에 그대로 남지 않을 수 있습니다. 중요 텍스트는 이미지 안에 굽기보다 가능한 경우 실제 웹 텍스트나 별도 캡션으로 제공하면 읽기와 접근성에도 도움이 됩니다.

• 사진 비중과 경계 중요도 평가하기
• 4:4:4 JPG와 PNG 비교하기
• 가능하면 텍스트를 이미지 밖에 제공하기

실제 배포 경로에서 최종 결과를 검사하세요

대표 이미지를 준비해 회색 바탕의 빨강·파랑 작은 글자, 얇은 색 선, 사진 영역을 함께 넣습니다. PNG 원본과 JPG 후보를 같은 뷰어, 같은 배율에서 비교하고 파일 크기를 기록하세요. JPG를 다시 PNG로 바꿔 확대하면 비교는 편해질 수 있지만 이미 잃은 색 정보가 복원되지는 않습니다. 원본과 후보 파일을 명확히 구분해 반복 저장을 피합니다.

선택한 JPG를 실제 웹사이트나 메신저의 비공개 위치에 올리고 표시 화면과 재다운로드 파일을 검사합니다. 서비스가 크기 변경이나 추가 압축을 하면 색 번짐이 더 커질 수 있습니다. 최종 사용 크기에서 글자가 읽히고 브랜드 색 경계가 허용 범위인지 확인한 뒤 승인하세요. 설정, 인코더 버전과 대상 서비스를 기록하면 다음 작업에서 같은 기준을 재현하기 쉽습니다.

검수 기준은 확대 화면의 완벽함보다 사용자에게 중요한 정보가 유지되는지에 맞추세요. 본문 글자가 읽히는지, 차트의 두 색을 혼동하지 않는지, 로고 색 경계가 브랜드 기준 안에 있는지를 항목별로 확인합니다. 접근성을 위해 색만으로 의미를 구분하지 않고 레이블이나 모양을 함께 쓰는 것도 중요합니다. 서비스나 내보내기 도구가 바뀌면 승인했던 품질 값을 그대로 복사하지 말고 같은 표본으로 다시 비교하세요.

• 색 글자와 사진이 함께 있는 대표 표본 만들기
• 업로드 전후 파일과 표시 화면 비교하기
• 승인한 설정과 도구 버전 기록하기