이미지가 더 나을 때만

KRDS CP-202 — 사용자에게 정보를 전달하는데 텍스트 보다 이미지가 적합하거나 도움이 되는 경우 사용하고 있다.

0. 들어가며 — 이미지 그룹의 첫 규칙

이번 322편부터 이미지(Image) 그룹(CP-202~207, 6개)으로 들어갑니다. 첫 규칙은 텍스트보다 이미지가 적합 하거나 도움이 되는 경우에 이미지를 사용하라는 내용이죠.

이미지는 강력한 정보 전달 수단이지만 — 무게가 무겁고, 시각 정보라 일부 사용자(스크린 리더)에게 직접 전달되지 않으며, 텍스트로 충분한 것을 이미지로 만들면 비효율적이죠. CP-202는 ’이미지가 텍스트보다 나을 때’에 한해 쓰라고, 목적성을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 이미지가 적합·도움될 때 사용

CP-202 (컴포넌트 > 이미지) “사용자에게 정보를 전달하는데 텍스트 보다 이미지가 적합하거나 도움이 되는 경우 사용하고 있다.”

이미지를, 같은 정보를 텍스트로 전하는 것보다 이미지로 전하는 것이 더 적합하거나 이해에 도움이 되는 경우에 사용하라는 뜻입니다.

정리: 이미지가 텍스트보다 나을 때만 이미지를 써라. 이게 CP-202입니다.

2. 왜 이미지의 목적성을 따지나

이미지는 정보를 풍부하고 직관적으로 전하는 강력한 수단입니다 — 사진, 도표, 다이어그램, 지도, 아이콘 등. 하지만 이미지에는 비용과 한계가 따르죠:

무게(성능) — 이미지 파일은 텍스트보다 훨씬 무겁습니다. 많이·크게 쓰면 페이지 로딩이 느려지죠(효율성 영역, Web Vitals).

접근성 한계 — 이미지는 시각 정보라, 스크린 리더 사용자에게는 직접 전달되지 않습니다. 대체 텍스트(CP-205)로 보완하지만, 복잡한 이미지는 텍스트로 다 담기 어렵죠.

유지보수 — 이미지 안의 정보(특히 텍스트가 든 이미지)는 수정·번역·검색이 어렵습니다.

그래서 ‘이미지를 쓸지 텍스트로 할지’는 목적에 맞게 판단해야 합니다. 핵심 기준은 —’같은 정보를 텍스트로 하는 것보다 이미지가 더 적합하거나 도움이 되는가?’ 입니다.

이미지가 더 나은 경우 (적절):

시각적 정보 본질 — 사진(실물·현장), 지도(위치), 차트·그래프(데이터 추세), 다이어그램(구조·흐름), 도형 안내 등은 텍스트로 풀어쓰는 것보다 이미지가 훨씬 직관적이죠. “왼쪽 상단에서 시작해 시계방향으로…” 라고 글로 설명하느니 그림 하나가 낫습니다.

이해 보조 — 복잡한 절차나 개념을 이미지(인포그래픽)로 보여주면 이해가 빨라지는 경우.

인지·식별 — 아이콘, 로고처럼 빠른 시각 식별이 필요한 경우.

텍스트가 나은 경우 (이미지 부적절):

텍스트로 충분한 정보를 이미지로 — 본문 내용, 안내 문구를 이미지(그림 파일)로 만드는 것. 무겁고, 스크린 리더가 못 읽고, 검색·복사·번역·확대가 안 되며, 흐려질 수 있죠. 텍스트는 텍스트로 둬야 합니다(특히 CP-203의 ’이미지에 텍스트 합성’과 연결).

장식 외 목적 없는 이미지 — 정보 전달도 이해 보조도 아닌, 그저 공간을 채우는 무의미한 이미지.

이 판단은 — ‘이미지를 무조건 많이/예쁘게’가 아니라’목적에 맞게 적재적소에’ 쓰라는 것입니다. 이미지가 정보 전달·이해에 실질적으로 기여할 때 쓰고, 텍스트로 충분하거나 더 나을 때는 텍스트를 쓰죠. 긴급 공지(CP-151), 배지(CP-184), 아코디언(CP-192)에서 본 ’컴포넌트를 목적에 맞게’의 이미지 버전입니다.

이 규칙은 이미지 그룹의 ‘용도 게이트’입니다 적절한 경우에 쓰라는 것이죠. 이어지는 규칙들이 이미지를 ’제대로 쓰는 법’ 텍스트 합성 구분(203), 반응형(204), 대체 텍스트(205·206), 비대화형(207) 을 다룹니다.

정리하면 — 이미지는 비용·한계가 있으므로, 텍스트보다 이미지가 적합하거나 이해에 도움이 될 때 목적에 맞게 사용해야 합니다.

3. 점검 / 개선

무엇을 점검하나

목적 적합성 — 이미지가 정보 전달·이해에 실질적으로 기여하는가.

텍스트 대체 가능성 — 텍스트로 충분한 정보를 불필요하게 이미지로 만들지 않았는가.

텍스트 이미지화 배제 — 본문·안내를 그림 파일로 만들지 않았는가(CP-203).

개선 방향

텍스트로 충분한 정보는 텍스트로(검색·번역·확대·접근성 유리).

시각적 본질(사진·차트·다이어그램)·이해 보조에만 이미지 활용.

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

역할	책임
기획/콘텐츠	이미지 vs 텍스트 판단
디자이너/개발	목적에 맞는 이미지 적용·텍스트 이미지화 배제

기관 유형	CP-202 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (이미지 사용 시)

이미지를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이미지가 정보 전달·이해에 실질적으로 기여하나요?

□ 텍스트로 충분한 정보를 불필요하게 이미지로 만들지 않았나요?

□ 본문·안내를 그림 파일로 만들지 않았나요?

❓ FAQ

Q1. 이미지를 많이 쓰면 풍부해 보이지 않나요? 무게(성능)·접근성·유지보수 비용이 따릅니다. 목적에 맞게 적재적소에 쓰는 게 좋습니다. Q2. 텍스트가 든 이미지(배너 문구 등)는요? 검색·번역·확대·접근성이 안 됩니다. 가능한 한 실제 텍스트로 구현합니다(CP-203 연결). Q3. 언제 이미지가 나은가요? 사진·지도·차트·다이어그램처럼 시각적 본질이거나, 복잡한 개념의 이해를 돕는 경우입니다.

6. 마무리

CP-202의 메시지:

이미지가 더 나을 때만 — 텍스트보다 이미지가 적합하거나 도움이 될 때 사용하라.

이미지는 강력하지만 무게·접근성·유지보수 비용이 따릅니다. 텍스트로 충분한 것을 이미지로 만들면 비효율적이죠. 시각적 본질이거나 이해를 돕는 경우에 목적에 맞게 써야 합니다. 다음 편은 이미지에 텍스트를 합성할 때의 구분 입니다.

다음 편 예고 ▶ 「323. (CP-203) 이미지에 텍스트를 합성하여 사용하는 경우 배경 이미지와 텍스트를 구분하여 사용하고 있다.」

ViewCheck는 이미지가 텍스트보다 적합한 경우에 목적에 맞게 사용되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 이미지(Image) 가이드 — https://www.krds.go.kr/html/site/component/component_19.html

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

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