사용자가 글자를 키우면 함께 커져야 한다

KRDS DS-035 — 개발 시 코드에서 글자 크기를 rem 단위로 변환해 사용하고 있다.

0. 들어가며 — 단위가 접근성을 가른다

지난 두 편(033·034)에서 본문 크기 기준(16px·17px)을 봤습니다. 이번엔 그 크기를 코드에서 어떤 단위로 표현할지입니다. 작은 차이 같지만, 이 단위 선택이 접근성을 결정적으로 가릅니다.

웹에서 글자 크기를 정하는 단위는 크게 두 가지 — px(고정 픽셀)와 rem(상대 단위)입니다. DS-035는 rem을 쓰라고 규정합니다. 왜일까요? 핵심은 하나 — 사용자가 글자를 키울 때, rem은 함께 커지고 px는 고정되기 때문입니다.

저시력 사용자 중에는 브라우저나 OS 설정에서 글자 크기를 키워 쓰는 사람이 많습니다. 그런데 사이트가 px로 글자를 고정해 두면, 사용자가 아무리 키워도 글자가 안 커집니다. 정작 그 기능이 필요한 사람에게 무용지물이 되는 것이죠. 이번 편은 px와 rem의 차이, 그리고 왜 rem이 접근성의 필수 조건인지를 풀어냅니다.

1. 규칙 원문 — 단위의 지정

DS-035 (디자인 스타일 > 타이포그래피) “개발 시 코드에서 글자 크기를 rem 단위로 변환해 사용하고 있다.”

“개발 시 코드에서”

디자인이 아니라 구현(코드) 차원의 규칙입니다. 디자인 시안의 크기를 코드로 옮길 때의 방법을 규정합니다.

“rem 단위로 변환해”

px로 된 크기를 rem으로 바꿔 쓰라는 뜻입니다. 예: 16px → 1rem, 17px → 약 1.0625rem.

정리: 글자 크기를 코드에서 px가 아니라 rem 단위로 사용하라. 이게 DS-035입니다.

2. px와 rem의 결정적 차이

두 단위의 차이를 명확히 봅시다.

px — 고정된 절대 크기

font-size: 16px은 ’무조건 16픽셀’입니다. 어떤 상황에서도 16px로 고정됩니다. 사용자가 브라우저에서 기본 글자 크기를 키워도, px로 지정된 글자는 그대로입니다. 절대적이고 변하지 않죠.

rem — 기준에 상대적인 크기

font-size: 1rem은 ’브라우저 기본 글자 크기의 1배’입니다. 기본이 16px이면 1rem=16px이죠. 그런데 사용자가 기본 글자 크기를 20px로 키우면, 1rem=20px이 됩니다. 즉 rem은 사용자의 설정에 따라 함께 변합니다.

이 차이가 접근성에서 결정적입니다. 저시력 사용자가 “글자가 작아서 키워야지” 하고 브라우저 설정을 바꿨을 때 — - rem으로 만든 사이트 → 글자가 함께 커져 잘 읽힘 ✅ - px로 만든 사이트 → 글자가 그대로라 도움 안 됨 ❌

사용자가 어렵게 찾아 켠 ‘글자 키우기’ 기능이, px 고정 사이트에서는 무력화됩니다. 정작 그 기능이 필요한 사람을 배신하는 것이죠. 그래서 rem은 단순한 코드 스타일이 아니라 접근성의 필수 조건입니다.

3. WCAG와 ‘텍스트 크기 조정’

DS-035의 배경에는 국제 접근성 기준이 있습니다. WCAG 성공기준 1.4.4(텍스트 크기 조정) 는 사용자가 텍스트를 200%까지 확대해도 내용과 기능이 손실되지 않아야 한다고 규정합니다.

이 기준을 충족하려면 글자가 사용자 설정에 따라 커질 수 있어야 하고, 그러려면 rem 같은 상대 단위를 써야 합니다. px로 고정하면 사용자 확대에 반응하지 못해 이 기준을 위반하게 됩니다. 즉 DS-035의 rem 요구는 WCAG 1.4.4를 충족하기 위한 기술적 수단입니다.

이는 이 시리즈에서 반복된 패턴입니다 — 색의 명도 대비(WCAG 1.4.3), 줄 간격(WCAG 1.4.12), 그리고 텍스트 확대(WCAG 1.4.4). KRDS의 많은 규칙이 국제 접근성 표준을 구체적 구현 지침으로 옮긴 것입니다. DS-035도 ‘WCAG 텍스트 확대 기준을 rem이라는 구체적 방법으로’ 명시한 것이죠.

4. rem을 제대로 쓰는 법

rem을 쓴다고 다 되는 건 아닙니다. 몇 가지 실무 포인트가 있습니다.

기준(root) 크기를 px로 고정하지 않기

rem은 root(html 요소)의 글자 크기를 기준으로 합니다. 그런데 root를 html { font-size: 16px }처럼 px로 고정하면, 사용자가 브라우저 기본 크기를 바꿔도 root가 안 변해 rem의 장점이 사라집니다. root는 100%나 기본값을 유지해, 사용자 설정이 반영되게 해야 합니다.

모든 텍스트 크기를 rem으로

본문만이 아니라 제목·버튼·라벨 등 모든 텍스트 크기를 rem으로 통일합니다. 일부만 rem이고 일부는 px면, 확대 시 일부만 커져 레이아웃이 어그러집니다. 일관되게 rem을 써야 전체가 함께 확대됩니다.

px 시안을 rem으로 변환

디자인 시안은 보통 px로 작성됩니다. 이를 코드로 옮길 때 rem으로 변환하면 됩니다 — 16px=1rem 기준으로, 크기를 16으로 나누면 rem 값이 나옵니다(예: 24px ÷ 16 = 1.5rem). 이 변환을 자동화하는 도구나 함수를 쓰면 편리합니다.

핵심은 ’rem을 쓰되, root를 px로 묶지 않는 것’입니다. 그래야 사용자 확대가 끝까지 반영됩니다.

5. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① px 고정. 글자 크기를 px로 → 사용자 확대 시 안 커짐, WCAG 1.4.4 위반. → rem으로. 함정 ② root를 px로. html { font-size:16px } → 사용자 설정 무시. → 100% 유지. 함정 ③ px·rem 혼용. 일부만 rem → 확대 시 레이아웃 깨짐. → 전부 rem. 함정 ④ 고정 높이. 글자는 rem인데 컨테이너 높이가 px 고정 → 확대 시 글자 잘림. → 유연한 높이.

무엇을 점검하나

글자 단위 — 글자 크기가 rem으로 설정됐는가.

root 크기 — html root가 px로 고정되지 않았는가.

확대 대응 — 텍스트 200% 확대 시 내용·기능이 유지되는가(WCAG 1.4.4).

일관성 — 모든 텍스트가 rem으로 통일됐는가.

Before / After

/* ❌ Before: px 고정 + root 고정 */ html { font-size: 16px; } body { font-size: 16px; } h1 { font-size: 32px; } /* ✅ After: root 유연 + rem */ html { font-size: 100%; } /* 사용자 설정 반영 */ body { font-size: 1.0625rem; } /* 17px */ h1 { font-size: 2rem; } /* 32px, 확대에 대응 */

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

역할	책임
퍼블리셔/개발	글자 크기를 rem으로 구현, root 유연 유지 — 주관
디자이너	px 시안 제공 시 rem 변환 기준 공유
접근성 담당	텍스트 200% 확대 검증

기관 유형	DS-035 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

글자가 있는 모든 사이트 = 해당. 주로 개발(구현) 차원의 규칙입니다.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 글자 크기를 rem 단위로 쓰나요, px로 고정했나요?

□ html root를 px로 묶지 않았나요?

□ 브라우저에서 글자를 키우면 사이트 글자도 커지나요?

□ 모든 텍스트가 rem으로 통일됐나요?

□ 텍스트 200% 확대 시 내용이 깨지지 않나요?

❓ FAQ

Q1. px가 더 정확하고 편한데 왜 rem인가요? px는 정확하지만 사용자 확대에 반응하지 못해 저시력 사용자를 배제합니다. rem은 사용자 설정에 따라 함께 커져 접근성을 보장합니다. WCAG 1.4.4(텍스트 확대) 충족을 위해 rem이 필요합니다.

Q2. em과 rem은 다른가요? em은 ‘부모 요소’ 기준, rem은 ‘root(html)’ 기준입니다. em은 중첩되면 크기가 누적돼 예측이 어렵지만, rem은 항상 root 기준이라 일관됩니다. 글자 크기에는 rem이 권장됩니다.

Q3. px를 아예 못 쓰나요? 글자 크기는 rem을 쓰세요. 테두리(1px) 같은 일부 미세 요소는 px가 적절할 수 있습니다. 핵심은 ’글자 크기’를 rem으로 하는 것입니다.

Q4. rem 변환이 번거로운데요? 16px=1rem 기준으로 16으로 나누면 됩니다(24px→1.5rem). CSS 함수나 빌드 도구로 자동화할 수 있습니다. 한 번 체계를 잡으면 어렵지 않습니다.

Q5. 모바일에서도 rem이 효과 있나요? 네. 모바일 사용자도 OS·브라우저에서 글자 크기를 키울 수 있고, rem이면 그에 대응합니다. 모든 기기에서 rem의 이점이 작동합니다.

8. 마무리 — 사용자에게 통제권을

DS-035의 메시지는 접근성의 핵심 정신을 담습니다.

글자 크기의 통제권은 사용자에게 있어야 한다 — rem은 그 통제권을 존중하는 단위다.

px는 디자이너가 정한 크기를 고정하지만, rem은 사용자가 자기에게 맞게 키울 여지를 남깁니다. 저시력 사용자가 “글자를 키워야지” 하고 설정을 바꿨을 때, rem으로 만든 사이트는 그 의지에 응답하고, px로 고정한 사이트는 무시합니다. 단위 하나의 선택이 ’사용자를 존중하느냐 무시하느냐’를 가르는 것이죠. 좋은 접근성은 모든 것을 디자이너가 결정하는 게 아니라, 사용자에게 통제권을 남기는 데서 나옵니다.

다음 편은 글자 크기의 ’체계’로 넘어갑니다. DS-036 — “정보 전달과 체계적인 글자 사용을 위해 계층에 맞는 글자 크기를 정의한다.” 제목·본문·보조 텍스트의 크기를 어떻게 체계적으로 정하는지를 다룹니다.

다음 편 예고 ▶ 「036. 정보 전달과 체계적인 글자 사용을 위해 계층에 맞는 글자 크기를 정의하고 있다.」

우리 사이트가 rem 단위를 쓰는지 확인하려면? ViewCheck는 글자 크기가 rem으로 설정됐는지, root가 유연한지, 텍스트 확대 시 내용·기능이 유지되는지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

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

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

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