이미지 위 텍스트, 가독성을 지키는 5가지 방법Readable Text on Images: Five Techniques That Always Work
사진 위에 텍스트를 올릴 때 가독성을 확보하는 오버레이·그라디언트·블러 등 실전 기법을 소개합니다.How to reliably ensure legible text overlay on photography or illustration, from scrim gradients to text shadows to dedicated safe zones.
- 방법 1: 어두운 오버레이
- 방법 2: 부분 그라디언트
- 방법 3과 4: 블러와 박스
- 방법 5: 텍스트 섀도와 위치 전략
- 동적 콘텐츠 환경에서의 안전장치
- 기법별 선택 가이드
- 1. Semi-transparent scrim (overlay)
- 2. Dedicated safe zone
- 3. Text shadow
- 4. Frosted glass panel
- 5. Outline or knockout text
히어로 이미지 위에 흰 제목을 올렸는데 사진의 밝은 부분과 겹쳐 글자가 사라진 경험, 누구나 있을 것입니다. 이미지는 통제할 수 없는 배경입니다. 밝기도, 색도, 복잡도도 사진마다 다릅니다. 이미지 위 텍스트의 가독성은 우연에 맡기지 말고 장치로 보장해야 합니다.
방법 1: 어두운 오버레이
가장 보편적인 해법은 이미지 전체에 반투명 검정 레이어(rgba(0,0,0,.4)~.6)를 덮고 흰 텍스트를 올리는 것입니다. 단순하고 확실하지만 이미지의 생동감이 죽는 비용이 있습니다. 사진이 분위기 전달용이라면 좋은 선택이고, 제품 사진처럼 디테일이 중요하면 부적합합니다.
방법 2: 부분 그라디언트
텍스트가 있는 영역에만 그라디언트를 까는 방식입니다. 하단에 제목이 있다면 linear-gradient(to top, rgba(0,0,0,.7), transparent 60%)처럼 아래쪽만 어둡게 만듭니다. 이미지의 위쪽은 살아 있고 텍스트 영역은 보호되는, 비용 대비 효과가 가장 좋은 기법입니다. 영상 썸네일과 카드 UI에서 표준처럼 쓰입니다.
방법 3과 4: 블러와 박스
backdrop-filter: blur()로 텍스트 뒤 영역만 흐리게 만들면 세련된 글래스 효과와 가독성을 동시에 얻습니다. 더 확실한 방법은 텍스트에 불투명한 배경 박스를 주는 것입니다. 잡지 스타일의 타이포그래피 박스는 가독성이 완벽하고 디자인 의도도 분명해 보입니다.
방법 5: 텍스트 섀도와 위치 전략
가벼운 보정으로는 text-shadow(0 1px 3px rgba(0,0,0,.5))가 있습니다. 단독으로는 약하므로 다른 기법과 병행하는 보조 수단으로 보는 것이 좋습니다. 마지막으로 가장 근본적인 방법은 배치입니다. 이미지에서 단순한 영역(하늘, 벽, 아웃포커스된 배경)을 골라 텍스트를 두고, CMS라면 에디터가 텍스트 위치를 조정할 수 있게 만드는 것입니다.
어떤 방법을 쓰든 검증 기준은 하나입니다. 가장 밝은 사진과 가장 어두운 사진을 넣어 보세요. 양극단에서 모두 읽힌다면 그 디자인은 안전합니다.
동적 콘텐츠 환경에서의 안전장치
CMS나 사용자 업로드 이미지처럼 어떤 사진이 올지 모르는 환경이라면 안전장치를 시스템에 내장해야 합니다. 썸네일 카드에는 항상 하단 그라디언트를 기본 적용하고, 텍스트 영역의 최소 대비를 검사해 기준 미달이면 오버레이 농도를 자동으로 올리는 로직도 가능합니다. 가장 간단한 대안은 텍스트를 이미지 밖으로 빼는 것입니다. 이미지 아래 텍스트 영역을 분리한 카드 레이아웃은 어떤 이미지가 와도 가독성이 보장됩니다.
기법별 선택 가이드
상황별 권장 조합을 정리합니다. 브랜드 무드가 중요한 히어로는 부분 그라디언트 + 텍스트 섀도. 영상·뉴스 썸네일은 하단 그라디언트가 표준. 제품 사진 위 짧은 레이블은 반투명 블러 칩(backdrop-filter). 긴 텍스트를 얹어야 한다면 불투명 박스나 이미지 밖 분리. 그리고 모든 경우에 최종 검증은 같습니다. 순백에 가까운 사진과 칠흑 같은 사진을 넣고 양쪽에서 AA 대비(4.5:1)가 나오는지 확인하는 것입니다.
Placing text directly on a photograph is a reliable way to create a legibility problem. Images have unpredictable bright and dark areas that can wash out or obscure text in ways that vary by image. These five techniques solve the problem reliably regardless of the underlying image.
1. Semi-transparent scrim (overlay)
Apply a semi-transparent color layer between image and text — typically black or a dark brand color at 40–60% opacity. The scrim darkens the entire image uniformly, guaranteeing contrast without hiding the image entirely. For hero sections, a gradient scrim (dark at the bottom, transparent at the top) is particularly effective: the image breathes at the top while the bottom provides reliable text contrast.
2. Dedicated safe zone
Crop and compose the image to include a consistently bright or dark region where text will sit. A landscape photo with an open sky at the top provides a reliable pale area for dark text. This requires coordination between design and content/photography, but produces the cleanest visual result.
3. Text shadow
A diffuse text shadow — text-shadow: 0 1px 8px rgba(0,0,0,.7) — separates light text from any background without a visible overlay layer. It works best for display text (large headings) and less well for small body text, where the blur can reduce legibility rather than improve it.
4. Frosted glass panel
Place text inside a panel with backdrop-filter: blur(12px) and a semi-transparent background. The blur creates readable contrast while keeping the background imagery visible and dynamic. Browser support is excellent as of 2024.
5. Outline or knockout text
Thick text stroke in a contrasting color creates readable text without any background overlay. Best for display or decorative use rather than body text.
Test every technique with the real image content, not a placeholder. Techniques fail at particular image-content combinations, and that failure is only visible with real content.