키워도 다 보이고 다 되게

KRDS CP-430 — 화면 크기를 조정했을 때 콘텐츠가 가려지거나 기능이 손실되지 않도록 하고 있다.

0. 들어가며 — 글자를 키웠더니 버튼이 사라지면

이번 550편은 화면 크기를 조정했을 때 콘텐츠가 가려지거나 기능이 손실되지 않도록 하라는 규칙입니다. 시리즈 550편째입니다.

글자·화면을 키웠을 때 — 콘텐츠가 잘리거나, 겹치거나, 버튼·메뉴가 화면 밖으로 사라져 못 쓰게 되면 안 되죠. CP-430은 크기 조정 후에도 모든 콘텐츠·기능이 살아 있게 하라고 규정합니다. WCAG 1.4.4(텍스트 크기 조정) 정신 이죠. 이번 편을 풀어냅니다.

1. 원문 — 콘텐츠 가림·기능 손실 방지

CP-430 (컴포넌트 > 화면 크기 조정) “화면 크기를 조정했을 때 콘텐츠가 가려지거나 기능이 손실되지 않도록 하고 있다.”

화면·글자 크기를 조정한 뒤에도 콘텐츠가 가려지거나 잘리지 않고, 기능이 손실되지 않게 하라는 뜻입니다.

정리: 크기를 조정해도 콘텐츠가 다 보이고 기능이 다 작동하게 하라. 이게 CP-430입니다.

2. 왜 콘텐츠·기능 손실을 막나

화면 크기 조정의 목적은 — 노인·저시력 사용자가 글자를 크게 봐서 더 잘 읽고 쓰게 하는 것입니다. 그런데 — 글자 를 키웠을 때 오히려 콘텐츠가 깨지거나 기능을 못 쓰게 되면, 본말전도죠. CP-430은 크기 조정 후 콘텐츠·기능 보존을 요구합니다.

크기 조정 시 생길 수 있는 손실:

콘텐츠 가림·잘림 글자를 키웠을 때 레이아웃이 안 따라오면(CP-429 위반), 큰 글자가 고정 영역에 갇혀 잘리거나(일부만 보임), 다른 요소에 가려지거나, 영역 밖으로 넘쳐 안 보입니다. 사용자가 키운 글자를 오히려 못 읽죠.

요소 겹침 — 크기가 커지면서 — 인접 요소들이 서로 겹쳐 읽거나 누를 수 없게 됩니다.

기능 손실 버튼·메뉴·링크가 크기 조정 후 화면 밖으로 밀려나거나, 겹쳐서 못 누르거나, 사라지면 그 기능을 못 씁니다. 예: 글자를 키웠더니 ‘제출’ 버튼이 화면 밖으로 나가 안 보이면, 폼을 제출 못 하죠.

가로 스크롤 강제 — 콘텐츠가 화면 폭을 넘어 — 가로 스크롤이 생기면(CP-431 위반), 읽기가 매우 불편합니다.

그래서 CP-430은 — 크기 조정 후에도 콘텐츠가 다 보이고 기능이 다 작동하게 하라고 합니다:

콘텐츠 보존 — 크기를 키워도 — 모든 텍스트·이미지·정보가 잘리거나 가려지지 않고 다 보이게 합니다. 레이아웃이 reflow(재배치)되어, 큰 글자가 들어갈 공간이 확보되게요(상대 단위·유연 레이아웃, CP-429).

기능 보존 — 모든 버튼·메뉴·링크·폼이 — 크기 조정 후에도 보이고 작동하게 합니다. 화면 밖으로 사라지거나 겹쳐서 못 쓰는 일이 없게요.

200%까지 보장 — WCAG 1.4.4 텍스트 크기 조정 기준상, 텍스트를 200%까지 키워도 — 콘텐츠·기능 손실이 없어야 합니다. 이 수준까지 테스트하죠.

검증 방법. 글자 크기를 단계별로(특히 최대) 키우고 — ①모든 콘텐츠가 보이는지, ②겹침·잘림이 없는지, ③모든 버튼· 메뉴·폼이 작동하는지 확인합니다. 브라우저 확대(200%)로도 테스트하고요. 다양한 화면 폭(모바일 포함)에서요.

CP-429와의 관계. CP-429(상대 단위 사용값)는 콘텐츠 손실을 막는 기술적 토대고, CP-430은 그 결과 (손실 없음) 를 보장하는 규칙이죠. 상대 단위·유연 레이아웃(429)을 쓰면 크기 조정 시 콘텐츠·기능이 보존(430) 됩니다. 둘이 함께 가죠.

이 규칙은 화면 크기 조정의 ’온전성 보장’을 담당합니다 — 크기를 조정해도 콘텐츠가 다 보이고 기능이 다 작동하게 (430), 사용자가 키운 화면을 온전히 쓰게 하죠. 크기 조정의 목적(잘 읽고 쓰게)을 실제로 달성하는 핵심입니다.

정리하면 — 크기를 조정했을 때 콘텐츠가 잘리거나 기능이 사라지면 크기 조정의 목적이 무색하므로, 200%까지 키워도 모든 콘텐츠가 보이고 모든 기능이 작동하게 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

콘텐츠 보존 — 크기 조정(최대·200%) 후 모든 콘텐츠가 잘림·가림 없이 보이는가.

기능 보존 — 모든 버튼·메뉴·링크·폼이 크기 조정 후에도 작동하는가.

겹침·밀림 없음 — 요소가 겹치거나 화면 밖으로 사라지지 않는가.

개선 방향

상대 단위·유연 레이아웃(CP-429)으로 reflow 보장. 크기 조정 시 콘텐츠·기능 손실 제거.

200% 확대·다양한 화면 폭에서 콘텐츠·기능·겹침 검증(WCAG 1.4.4).

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

역할	책임
퍼블리셔/개발	유연 레이아웃·손실 방지 구현
QA/접근성	크기 조정·확대 시 콘텐츠·기능 검증

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

웹접근성 의무 대상이며 크기 조정을 제공하는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 크기 조정(최대·200%) 후 모든 콘텐츠가 잘림·가림 없이 보이나요?

□ 모든 버튼·메뉴·링크·폼이 크기 조정 후에도 작동하나요?

□ 요소가 겹치거나 화면 밖으로 사라지지 않나요?

❓ FAQ

Q1. 글자를 키웠더니 콘텐츠가 잘리면요? 레이아웃이 안 따라온 겁니다. 상대 단위·유연 레이아웃(CP-429)으로 reflow 되어 콘텐츠가 다 보이게 해야 하죠. Q2. 어디까지 키워도 손실이 없어야 하나요? WCAG 1.4.4상 텍스트 200%까지 콘텐츠·기능 손실이 없어야 합니다. 이 수준까지 테스트하죠. Q3. CP-429와 뭐가 다른가요? CP-429는 손실을 막는 기술 토대(상대 단위), CP-430은 그 결과(손실 없음) 보장 입니다. 함께 가죠.

6. 마무리

CP-430의 메시지:

키워도 다 보이고 다 되게 — 크기 조정 후에도 콘텐츠·기능이 손실되지 않게 하라.

크기를 조정했을 때 콘텐츠가 잘리거나 기능이 사라지면 크기 조정의 목적이 무색합니다. 200%까지 키워도 모든 콘텐츠가 보이고 기능이 작동하게 보장하는 게 핵심이죠. 다음 편은 단일 방향 스크롤입니다.

다음 편 예고 ▶ 「551. (CP-431) 화면을 확대했을 때 화면 스크롤은 단일 방향으로 유지/생성되도록 하고 있다.」

ViewCheck는 크기 조정 후 콘텐츠·기능 손실이 없는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.4.4 Resize Text — https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

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

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