글자는 이미지에 굽지 마라

KRDS CP-226 — 슬라이드에 텍스트가 포함된 이미지를 사용하지 않고 있다.

0. 들어가며 — 캐러셀 그룹의 마지막

이번 346편은 캐러셀 그룹(CP-208~226, 19개)의 마지막 규칙입니다. 슬라이드에 텍스트가 포함된 이미지를 사용하지 말라는 내용이죠. 이로써 846 규칙 중 가장 큰 컴포넌트 그룹(19개)을 마칩니다.

캐러셀 배너를 만들 때 — 제목·문구를 이미지에 ‘구워 넣어’(텍스트가 이미지 픽셀의 일부) 만드는 경우가 흔합니다. 디자인은 자유롭지만 — 검색·번역·확대·접근성이 안 되죠. CP-226은 텍스트를 이미지에 넣지 말고 실제 텍스트로 구현하라고 규정합니다. 이미지 CP-202·203의 정신과 직결되죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 텍스트 포함 이미지 금지

CP-226 (컴포넌트 > 캐러셀) “슬라이드에 텍스트가 포함된 이미지를 사용하지 않고 있다.”

캐러셀 슬라이드에 텍스트를 이미지로 구워 넣지 말고, 텍스트는 실제 텍스트(HTML)로 구현하라는 뜻입니다.

정리: 슬라이드 텍스트를 이미지에 굽지 말고 실제 텍스트로 구현하라. 이게 CP-226입니다.

2. 왜 텍스트 이미지를 쓰면 안 되나

’텍스트가 포함된 이미지(image of text)’는 — 제목·문구 같은 텍스트가 이미지 파일의 픽셀로 그려진 것입니다. 예를 들어 “2026 지원금 신청 시작” 이라는 배너 문구를 포토샵에서 이미지로 만들어 슬라이드에 넣는 것이죠. 시각 디자인은 자유로워지지만(폰트·효과 마음대로), 심각한 한계가 따릅니다 — 이미지 CP-202·203에서 본 문제가 캐러셀 에서 특히 두드러지죠.

텍스트 이미지의 문제:

접근성 — 스크린 리더 못 읽음 — 이미지 안의 텍스트는 그림(픽셀)이라 스크린 리더가 못 읽습니다. alt로 보완해도, 긴 문구를 alt에 다 담기 어렵고 캐러셀 슬라이드마다 alt 관리가 번거롭죠. 비시각 사용자에게 핵심 메시지가 전달 안 됩니다.

확대 시 흐려짐 — 저시력 사용자가 화면을 확대하면, 실제 텍스트는 또렷하게 커지지만 텍스트 이미지는 픽셀이 깨져 흐려집니다. 읽기 어려워지죠(WCAG SC 1.4.4 Resize Text, 1.4.5 Images of Text와 직결).

반응형 안 됨 — 텍스트 이미지는 화면 크기에 따라 글자 크기·줄바꿈이 적응 못 합니다. 모바일에서 작아져 안 읽히거나 잘리죠. 실제 텍스트는 반응형으로 적응하는데요.

검색·번역·복사 불가 — 이미지 텍스트는 검색 엔진이 못 읽고(SEO 손해), 브라우저 번역이 안 되며, 사용자가 복사할 수 없습니다.

유지보수 부담 — 문구를 바꾸려면 이미지를 다시 만들어야 하죠. 실제 텍스트는 코드만 고치면 됩니다.

WCAG의 명시적 금지. WCAG 2.1 SC 1.4.5(Images of Text)는 — ’동일한 시각 효과를 실제 텍스트로 낼 수 있다면, 텍스트 이미지 대신 실제 텍스트를 쓰라’고 규정합니다(로고 등 예외 제외). 캐러셀 배너 문구는 실제 텍스트로 충분히 구현 가능하므로, 텍스트 이미지를 쓰면 안 되죠.

그래서 CP-226은 — 슬라이드 텍스트를 실제 HTML 텍스트로 구현하라고 합니다. 캐러셀 슬라이드는 보통:

배경은 이미지, 텍스트는 그 위에 실제 텍스트로 — 배경 사진/그래픽은 이미지(<img>/배경), 그 위에 제목· 문구를 실제 HTML 텍스트로 얹죠(이미지 CP-203의 ‘이미지 위 텍스트’ 구분). 그러면 텍스트는 접근 가능·반응형· 검색 가능하면서, 배경과 구분(오버레이, CP-203)해 읽히게 합니다.

텍스트 2줄 이내(CP-211) + 배경 대비 확보(CP-203) — 이 규칙들과 결합해 짧고 또렷한 실제 텍스트를 제공.

이로써 캐러셀 19개 규칙(CP-208~226)이 완성됩니다 — 자동 회전 안전(208·209·222), 콘텐츠 절제(210·211·226), 시각 구조(212·213·214·215·216), 컨트롤(217·219·220·221), 입력 수단(218·223·224), 접근성(225)까지. 846 규칙 중 가장 큰 컴포넌트 그룹을 마치며, 캐러셀을 사용성·접근성 양면에서 제대로 만드는 규칙들을 모두 다뤘죠.

정리하면 — 텍스트 이미지는 접근성·확대·반응형·검색·유지보수에 모두 불리하므로, 캐러셀 슬라이드 텍스트는 실제 HTML 텍스트로 구현하고 배경과 구분해 읽히게 해야 합니다(WCAG 1.4.5).

3. 점검 / 개선

무엇을 점검하나

텍스트 이미지 없음 — 슬라이드 제목·문구가 이미지에 구워지지 않았는가.

실제 텍스트 — 텍스트가 실제 HTML 텍스트로 구현됐는가(확대·번역·검색 가능).

배경 구분 — 배경 이미지 위 실제 텍스트가 대비를 갖춰 읽히는가(CP-203).

개선 방향

슬라이드 텍스트를 이미지에서 빼고 실제 HTML 텍스트로 구현.

배경은 이미지, 텍스트는 그 위에 실제 텍스트(오버레이로 대비 확보, CP-203). 로고 등 예외만 이미지.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너/퍼블리셔	텍스트를 실제 텍스트로 구현·배경 분리
접근성 담당	텍스트 이미지 미사용·실제 텍스트 검증

기관 유형	CP-226 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (텍스트 있는 캐러셀 사용 시)

배너·캐러셀에 텍스트를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 슬라이드 제목·문구가 이미지에 구워지지 않았나요?

□ 텍스트가 실제 HTML 텍스트로 구현됐나요(확대·번역·검색 가능)?

□ 배경 이미지 위 실제 텍스트가 대비를 갖춰 읽히나요?

❓ FAQ

Q1. 텍스트 이미지가 디자인이 자유롭지 않나요? 자유롭지만 접근성·확대·반응형·검색·유지보수가 다 안 됩니다. WCAG도 실제 텍스트를 요구하죠(1.4.5). Q2. 배너는 텍스트 이미지가 보통 아닌가요? 배경은 이미지, 텍스트는 그 위에 실제 텍스트로 얹는 게 맞습니다 (CP-203). 텍스트를 굽지 않죠. Q3. 예외는 없나요? 로고 등 텍스트가 본질적 그래픽인 경우만 예외입니다. 일반 배너 문구는 실제 텍스트로 합니다.

6. 마무리

CP-226의 메시지:

글자는 이미지에 굽지 마라 — 슬라이드 텍스트를 실제 텍스트로 구현하라.

텍스트 이미지는 접근성·확대·반응형·검색·유지보수에 모두 불리합니다. 캐러셀 슬라이드 텍스트를 실제 HTML 텍스트로 구현하고, 배경 이미지 위에 대비를 갖춰 얹으면 읽히고 접근 가능하죠. 이로써 캐러셀 19개(CP-208~226) — 가장 큰 컴포넌트 그룹을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 탭(Tabs) 으로 넘어갑니다.

다음 편 예고 ▶ 「347. (CP-227) 탭 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 캐러셀 슬라이드에 텍스트 포함 이미지가 사용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 캐러셀(Carousel) 가이드 — https://www.krds.go.kr/html/site/component/component_20.html

WCAG 2.1 SC 1.4.5 Images of Text — https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준