px 말고 rem·em으로

KRDS CP-429 — 반응형 레이아웃 사용을 고려하여 사용값을 제공하고 있다.

0. 들어가며 — 글자를 키워도 레이아웃이 안 따라오면

이번 549편은 반응형 레이아웃 사용을 고려하여 사용값을 제공하라는 규칙입니다.

글자 크기를 키웠을 때 — 레이아웃이 그에 맞춰 자연스럽게 늘어나야 콘텐츠가 안 깨지죠. 그러려면 — 고정 단위(px)가 아니라 상대 단위(rem·em)로 값을 줘야 합니다. CP-429는 반응형을 고려한 사용값(단위)을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 반응형 고려 사용값

CP-429 (컴포넌트 > 화면 크기 조정) “반응형 레이아웃 사용을 고려하여 사용값을 제공하고 있다.”

화면 크기 조정 시 반응형 레이아웃이 자연스럽게 작동하도록, 적절한 단위·값을 사용하라는 뜻입니다.

정리: 반응형 레이아웃이 작동하게 적절한 단위(상대 단위)로 값을 제공하라. 이게 CP-429입니다.

2. 왜 반응형 고려 사용값인가

화면 크기 조정(글자 키우기)이 — 제대로 작동하려면, 글자가 커질 때 그 글자를 담는 레이아웃(영역·간격·컨테이너) 도 함께 자연스럽게 늘어나야 합니다. 그러려면 — CSS 값을 어떤 단위로 주느냐가 핵심이죠. 고정 단위(px)와 상대 단위(rem·em)의 차이입니다.

고정 단위(px)의 문제:

레이아웃 안 따라옴 글자 크기를 px로 고정하고, 컨테이너 크기·간격도 px로 고정하면, 사용자가 글자를 키워도(또는 브라우저 확대해도) 레이아웃이 그에 맞춰 안 늘어납니다. 큰 글자가 고정된 작은 영역에 갇혀, 글자가 잘리거나 넘치거나 겹치죠. 콘텐츠가 깨집니다(CP-430의 콘텐츠 손실).

확대 무효 — 모든 걸 px로 고정하면 — 글자 크기 조정 자체가 잘 안 먹히거나, 일부만 커지고 레이아웃은 그대로 라 어색하죠.

상대 단위(rem·em)의 효과:

함께 늘어남 글자 크기·간격·컨테이너를 상대 단위(rem, em) 로 주면, 기준 글자 크기가 커질 때 그에 비례해 함께 커집니다. 글자가 1.5배 커지면 그것을 담는 영역·여백도 1.5배로 늘어, 레이아웃이 자연스럽게 확장되죠. 콘텐츠가 안 깨집니다.

rem — 루트(html)의 글자 크기 기준. 사이트 전체 크기 조정에 적합.

em — 부모 요소 글자 크기 기준.

반응형 조화 — 상대 단위를 쓰면 — 화면 크기 조정(글자 키우기)과 반응형 레이아웃(화면 폭 변화)이 조화롭게 작동하죠. 글자가 커지면 콘텐츠가 reflow(재배치)되어, 작은 화면에서도 가로 스크롤 없이 보입니다(CP-431).

그래서 CP-429는 — 반응형 레이아웃을 고려한 사용값을 쓰라고 합니다:

상대 단위 사용 글자 크기·여백·컨테이너 등을 rem·em·% 같은 상대 단위로 줍니다. 사용자가 크기를 조정 하면 레이아웃이 비례해 따라가게요.

유연한 레이아웃 — 고정 폭·고정 높이 대신 — 유연한(flexible) 레이아웃(flexbox·grid + 상대 단위)을 써, 글자 크기·화면 폭 변화에 자연스럽게 적응하게요.

WCAG 1.4.4 / 1.4.10. 이는 — WCAG 1.4.4 텍스트 크기 조정(Resize Text, 200%까지 손실 없이) 과 1.4.10 리플로우(Reflow, 확대 시 가로 스크롤 없이 재배치) 기준과 직결됩니다. 상대 단위 + 유연한 레이아웃이 — 이 기준을 충족하는 기술적 토대죠.

브라우저 확대와 사이트 조정 공통. 상대 단위를 쓰면 — 사이트 자체 크기 조정(이 컴포넌트)뿐 아니라 브라우저 기본 확대·사용자 글꼴 설정도 잘 반영됩니다. 모든 확대 수단에 유연하게 대응하죠.

이 규칙은 화면 크기 조정의 ’레이아웃 적응 토대’를 담당합니다 — 상대 단위 사용값으로(429), 글자 크기 조정 시 레이 아웃이 함께 늘어나 콘텐츠가 안 깨지게 하죠. 화면 크기 조정이 실제로 작동하는 기술적 기반입니다.

정리하면 — 고정 단위(px)로 값을 주면 글자를 키워도 레이아웃이 안 따라와 콘텐츠가 깨지므로, 상대 단위(rem·em)와 유연한 레이아웃으로 반응형을 고려한 사용값을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

상대 단위 — 글자 크기·여백·컨테이너가 rem·em·% 등 상대 단위인가(px 고정 아님).

레이아웃 적응 — 글자 크기 조정 시 레이아웃이 함께 늘어나는가.

WCAG 충족 — 200% 확대 시 콘텐츠 손실 없고 가로 스크롤 없이 reflow되는가.

개선 방향

글자·여백·컨테이너를 rem·em·% 상대 단위로. flexbox·grid 유연한 레이아웃.

px 고정 제거. WCAG 1.4.4(200% 조정)·1.4.10(reflow) 검증.

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

역할	책임
퍼블리셔/개발	상대 단위·유연 레이아웃 구현
QA/접근성	확대 시 레이아웃·콘텐츠 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 글자 크기·여백·컨테이너가 rem·em·% 등 상대 단위인가요(px 고정 아님)?

□ 글자 크기 조정 시 레이아웃이 함께 늘어나나요?

□ 200% 확대 시 콘텐츠 손실 없고 가로 스크롤 없이 reflow되나요?

❓ FAQ

Q1. px로 하면 안 되나요? px 고정이면 글자를 키워도 레이아웃이 안 따라와 콘텐츠가 깨집니다. rem·em 상대 단위로 함께 늘어나게 하죠. Q2. rem과 em 차이가 뭔가요? rem은 루트(html) 글자 크기 기준, em은 부모 요소 기준입니다. 사이트 전체 조정엔 rem이 적합하죠. Q3. 어떤 WCAG 기준인가요? 1.4.4 텍스트 크기 조정(200% 손실 없이)·1.4.10 리플로우(확대 시 가로 스크롤 없이 재배치)입니다.

6. 마무리

CP-429의 메시지:

px 말고 rem·em으로 — 반응형 레이아웃이 작동하게 상대 단위로 값을 제공하라.

고정 단위(px)면 글자를 키워도 레이아웃이 안 따라와 콘텐츠가 깨집니다. 상대 단위와 유연한 레이아웃으로 함께 늘어 나게 하는 게 핵심이죠. 다음 편은 크기 조정 시 콘텐츠 보존입니다.

다음 편 예고 ▶ 「550. (CP-430) 화면 크기를 조정했을 때 콘텐츠가 가려지거나 기능이 손실되지 않도록 하고 있다.」

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컴포넌트,웹표준