가·가·가만으론 부족하다

KRDS CP-427 — 옵션에 텍스트 레이블 없이 글자 크기만을 보여주는 아이콘만 제공되거나 확대 배율만 표시될 경우 사용자에 따라 이해가 어려울 수 있으므로 설명적인 레이블을 함께 제공하고 있다.

0. 들어가며 — ‘가’ 아이콘이 무슨 뜻인지

이번 547편부터 화면 크기 조정(Resize) 그룹입니다(5개). 첫 규칙은 글자 크기 아이콘·배율만으로는 이해가 어려울 수 있으므로 설명적인 레이블을 함께 제공하라는 규칙입니다.

화면 크기 조정은 — 글자·화면을 키우고 줄이는 기능이죠(노인·저시력 사용자에게 중요). 그 옵션을 — ‘ㄱ’ 크기만 다른 아이콘이나 ‘100%’ 배율만으로 보여주면, 무슨 기능인지 모르는 사용자가 있습니다. CP-427은 설명 레이블 병행을 규정 합니다. 이번 편을 풀어냅니다.

1. 원문 — 설명적 레이블 병행

CP-427 (컴포넌트 > 화면 크기 조정) “옵션에 텍스트 레이블 없이 글자 크기만을 보여주는 아이콘만 제공되거나 확대 배율만 표시될 경우 사용자에 따라 이해가 어려울 수 있으므로 설명적인 레이블을 함께 제공하고 있다.”

글자 크기 조정 옵션을 아이콘·배율만으로 표시하지 말고, 무슨 기능인지 설명하는 레이블을 함께 제공하라는 뜻입니다.

정리: 글자 크기 조정 옵션에 설명적 레이블을 함께 제공하라. 이게 CP-427입니다.

2. 왜 설명적 레이블이 필요한가

화면 크기 조정(Resize)은 사용자가 글자·화면 크기를 키우거나 줄이는 기능입니다. 노인·저시력 사용자에게 글자를 크게 보는 건 필수적이라, 공공 사이트는 이 기능을 자주 제공하죠(보통 헤더에 ‘가- 가 가+’ 같은). 그런데 이 옵션을 어떻게 표시하느냐가 이해를 좌우합니다.

아이콘·배율만 있을 때의 문제:

글자 크기 아이콘만 크기가 다른 ‘가’·‘ㄱ’·‘A’ 글자(작은 가 / 큰 가)만 아이콘으로 보여주면, 일부 사용자는 ‘이게 글자 크기 조정이구나’를 짐작하지만, 모르는 사용자도 있습니다. 특히 디지털 익숙도가 낮은 노인 사용자, 인지적으로 그 의미를 추론하기 어려운 사용자는 ’이 작은 가·큰 가가 뭐지?’ 합니다. 정작 이 기능이 가장 필요한 사용자(노인·저시력)가 이해 못 할 수 있죠.

배율만 — ‘100%’, ‘150%’ 같은 — 확대 배율 숫자만 보여주면, 이게 무엇의 배율인지(글자? 화면?) 모르는 사용자가 있습니다. 숫자만으론 기능을 짐작하기 어렵죠.

그래서 CP-427은 — 아이콘·배율에 더해 설명적인 레이블을 함께 제공하라고 합니다:

설명 레이블 병행 ‘글자 크기’, ‘화면 확대’, ‘글자 작게/크게’ 같은 무슨 기능인지 설명하는 텍스트를 함께 둡니다. 아이콘만이 아니라 ’글자 크기 조정’이라는 안내가 있으면, 모든 사용자가 그 기능을 이해하죠.

각 옵션 설명 — 각 옵션 버튼(‘가-’, ‘가’, ‘가+’)에도 — ‘작게’, ‘보통’, ‘크게’ 같은 설명 레이블이나 접근가능한 이름을 줍니다. ’A-’만으론 무슨 동작인지 모르니까요.

왜 이게 중요한가 대상 사용자. 화면 크기 조정은 노인·저시력 사용자가 주 대상입니다. 이들은 디지털 아이콘·배율 표기에 덜 익숙할 수 있죠. 정작 이 기능이 가장 필요한 사용자가 아이콘만 보고 이해 못 하면, 기능이 무용지물입니다. 그래서 설명적 레이블이 특히 중요하죠. 가장 도움이 필요한 사람이 쓸 수 있게요.

접근성. 시각적 설명 레이블에 더해 — 스크린 리더용 접근가능한 이름도 줍니다(‘글자 크게’, ‘aria-label’). 아이콘 버튼이 — 스크린 리더에 ’버튼’으로만 들리면 안 되죠(아이콘 버튼 이름 정신, 툴팁 CP-376·382).

아이콘 + 레이블 조합. 핵심은 — 아이콘·배율을 없애라는 게 아니라, 거기에 설명 레이블을 더하라는 것 입니다. 아이콘(직관적 시각)+레이블(명확한 설명)이 함께면 — 익숙한 사용자는 아이콘으로 빠르게, 모르는 사용자는 레이블로 이해하죠.

이 규칙은 화면 크기 조정의 ’이해 가능성’을 담당합니다 — 아이콘·배율에 설명 레이블을 더해(427), 노인·저시력 등 모든 사용자가 이 기능을 이해하고 쓰게 하죠. 이후 화면 크기 조정 규칙들(옵션 개수·반응형·콘텐츠 보존·단일 방향 스크롤)이 이 위에 쌓입니다.

정리하면 — 글자 크기 아이콘·배율만으론 노인·저시력 등 일부 사용자가 무슨 기능인지 이해하기 어려우므로, 설명적인 레이블을 함께 제공해 모든 사용자가 이해하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

설명 레이블 — 글자 크기 조정에 ‘글자 크기’ 등 설명 레이블이 있는가(아이콘·배율만 아님).

각 옵션 설명 — 각 옵션 버튼에 ‘작게/크게’ 등 설명·접근가능한 이름이 있는가.

접근성 — 스크린 리더에 기능·옵션이 전달되는가.

개선 방향

아이콘·배율에 ‘글자 크기 조정’ 등 설명 레이블 병행.

각 옵션에 ‘작게/보통/크게’ 레이블·aria-label. 노인·저시력 사용자 이해 우선.

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

역할	책임
콘텐츠/UX	설명 레이블 작성
퍼블리셔/개발	레이블·접근가능한 이름 구현

기관 유형	CP-427 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (화면 크기 조정 사용 시)

글자/화면 크기 조정 기능을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 글자 크기 조정에 ‘글자 크기’ 등 설명 레이블이 있나요(아이콘·배율만 아님)?

□ 각 옵션 버튼에 ‘작게/크게’ 등 설명·접근가능한 이름이 있나요?

□ 스크린 리더에 기능·옵션이 전달되나요?

❓ FAQ

Q1. ‘가’ 아이콘만으로 충분하지 않나요? 익숙한 사용자는 알지만 노인·저시력 등 일부는 무슨 기능인지 모릅니다. 정작 이 기능이 필요한 사용자가 이해 못 하면 무용지물이죠. Q2. 아이콘을 없애야 하나요? 아닙니다. 아이콘·배율에 설명 레이블을 더하는 겁니다. 아이콘(직관)+레이블(명확)이 함께면 모두가 이해하죠. Q3. 왜 노인·저시력 사용자를 강조하나요? 화면 크기 조정의 주 대상입니다. 디지털 아이콘에 덜 익숙할 수 있어, 설명 레이블이 특히 중요하죠.

6. 마무리

CP-427의 메시지:

가·가·가만으론 부족하다 — 글자 크기 조정에 설명적 레이블을 함께 제공하라.

아이콘·배율만으론 노인·저시력 등 일부 사용자가 무슨 기능인지 모릅니다. 설명적 레이블을 더해 모든 사용자가 이해 하게 하는 게 핵심이죠. 다음 편은 옵션 개수 제한입니다.

다음 편 예고 ▶ 「548. (CP-428) 옵션 개수는 5개 이내로 제공하고 있다.」

ViewCheck는 화면 크기 조정에 설명적 레이블이 함께 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 화면 크기 조정(Resize) 가이드 — https://www.krds.go.kr/html/site/component/component_43.html

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

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