두께는 둘이면 충분하다

KRDS DS-030 — 글자 두께를 regular(400)와 bold(700) 두 가지로 사용하고 있다.

0. 들어가며 — 글꼴의 ’굵기’라는 도구

글꼴(027·028)과 예외(029)를 지나, 이번엔 글자의 두께(굵기, weight) 입니다.

같은 글꼴이라도 굵기는 여러 단계가 있습니다. 아주 가는 Thin(100)부터 Light(300), Regular(400), Medium(500), Bold(700), 아주 굵은 Black(900)까지요. 이 굵기는 글자에 강약을 주는 강력한 도구입니다. 굵은 글씨는 강조되고, 가는 글씨는 물러납니다.

그런데 KRDS는 이 다양한 굵기 중 딱 두 가지 만 쓰라고 합니다 — Regular(400)와 Bold(700). 평범한 두께와 굵은 두께, 단 둘이죠. 왜 이렇게 제한할까요? 굵기를 절제하는 것이 어떻게 더 나은 화면을 만들까요? 이번 편은 ’두께는 둘이면 충분하다’는 원칙의 이유를 풀어냅니다.

1. 규칙 원문 — 두 가지 두께

DS-030 (디자인 스타일 > 타이포그래피) “글자 두께를 regular(400)와 bold(700) 두 가지로 사용하고 있다.”

“regular(400)”

기본 두께입니다. 본문 등 대부분의 텍스트에 쓰는 평범한 굵기죠. 숫자 400은 글꼴 굵기를 나타내는 표준 값(CSS font-weight)으로, 400이 ’보통’입니다.

“bold(700)”

굵은 두께입니다. 강조하거나 위계를 줄 때 쓰죠. 700이 ’굵게’에 해당합니다.

“두 가지로”

이 둘만 쓰라는 뜻입니다. Thin·Light·Medium·Black 같은 다른 굵기는 쓰지 않습니다. 강약은 이 두 단계로만 표현합니다.

정리: 글자 굵기는 Regular(400)와 Bold(700) 두 가지로만 쓰라. 이게 DS-030입니다.

2. 왜 두 가지로 제한하나 — 절제의 힘

다양한 굵기를 다 쓰면 더 풍부한 표현이 될 것 같은데, 왜 둘로 제한할까요? 세 가지 이유입니다.

(1) 명확한 위계

굵기가 둘이면 위계가 명확합니다 — 평범함(Regular)과 강조(Bold), 두 단계뿐이죠. 사용자는 “굵으면 중요, 아니면 보통”을 직관적으로 압니다. 반면 굵기가 다섯 단계(Light·Regular·Medium·SemiBold·Bold)면, 그 미묘한 차이가 무슨 의미인지 사용자가 구분하기 어렵습니다. Medium과 SemiBold의 차이가 무슨 위계를 뜻하는지 누가 알겠어요? 두 단계는 명확하고, 여러 단계는 모호합니다.

(2) 일관성

굵기 종류가 적으면 화면 전체의 일관성이 쉽게 유지됩니다. “강조는 Bold, 나머지는 Regular”라는 단순한 규칙이 사이트 전체에 적용되죠. 굵기가 많으면 같은 위계인데 페이지마다 다른 굵기를 쓰는 혼란이 생깁니다. 적은 선택지가 오히려 일관성을 보장합니다.

(3) 성능

웹폰트는 굵기마다 별도의 파일입니다. Regular·Bold 두 개만 쓰면 폰트 파일 두 개만 불러오면 되지만, 다섯 굵기를 쓰면 다섯 개를 불러와야 합니다. 굵기를 줄이면 로딩 부담이 줄어 페이지가 빨라집니다. 특히 다양한 기기·네트워크 환경의 국민이 쓰는 정부 서비스에서 성능은 중요합니다.

핵심: 굵기를 둘로 제한하는 것은 표현을 빈약하게 만드는 게 아니라, 명확성·일관성·성능을 한 번에 확보하는 절제입니다. 색에서 강조색을 절제한 것(DS-008·012)과 같은 정신입니다.

3. 두 가지로 충분한 이유 — 위계는 두께만의 일이 아니다

“두 가지로 정말 충분할까? 위계 표현이 빈약하지 않을까?” 충분합니다. 위계는 두께만으로 만드는 게 아니기 때문입니다.

화면의 위계는 여러 도구의 조합으로 만들어집니다.

크기 — 큰 글씨 vs 작은 글씨 (제목 vs 본문)

두께 — Bold vs Regular (강조 vs 보통)

색 — 진한 색 vs 연한 색 (중요 vs 보조)

간격·위치 — 여백과 배치

이 도구들을 조합하면, 굵기가 둘뿐이어도 풍부한 위계를 만들 수 있습니다. 예를 들어 제목은 ‘크고 + Bold’, 본문은 ‘보통 크기 + Regular’, 보조 설명은 ‘작고 + Regular + 연한 색’. 두께는 둘이지만 크기·색과 조합되어 여러 층위가 표현되죠. 굵기 다섯 단계 없이도, 크기와 색의 조합으로 충분히 섬세한 위계가 나옵니다.

이는 8편(강조)에서 본 “강조는 색만의 일이 아니다”와 같은 원리입니다. 한 도구(두께)에 모든 위계를 욱여넣을 필요가 없습니다. 여러 도구를 함께 쓰면, 각 도구는 절제하면서도 전체적으로는 풍부한 표현이 가능합니다. 두께를 둘로 줄이는 대신, 크기와 색이 위계의 나머지를 담당하는 것이죠.

실제로 굵기를 여러 단계로 쓰는 것이 오히려 위계를 망치는 경우가 많습니다. 디자이너가 Light·Regular·Medium·SemiBold·Bold를 다 동원해 다섯 단계 위계를 만들려 하면, 인접한 단계(Medium과 SemiBold)는 사람 눈에 거의 구분되지 않습니다. 구분되지 않는 위계는 위계가 아니죠. 게다가 한 화면에서 다섯 굵기가 섞이면, 그 미묘한 차이들이 무슨 의미인지 사용자가 해석할 수 없어 ’그냥 두께가 제각각인 산만한 화면’이 됩니다. 위계를 더 세밀하게 만들려던 시도가 오히려 위계를 흐려버리는 역설입니다.

두 단계는 이 함정을 원천 차단합니다. Regular와 Bold는 누가 봐도 명확히 구분되므로, ’보통 vs 강조’라는 위계가 흔들림 없이 전달됩니다. 그리고 더 세밀한 층위가 필요하면 두께가 아니라 크기로 만듭니다 — 크기는 두께보다 차이를 인지하기 쉽기 때문입니다. 제목 2rem, 소제목 1.5rem, 본문 1rem처럼 크기로 단계를 나누면 명확한 위계가 생기고, 각 단계는 Regular나 Bold 둘 중 하나만 입히면 됩니다. 두께는 강약을, 크기는 층위를 — 이렇게 역할을 나누면 두 굵기만으로도 얼마든지 정교한 타이포그래피가 가능합니다.

4. Regular와 Bold, 각자의 자리

두 두께가 각각 어디에 쓰이는지 정리해 봅시다.

Regular(400) 는 화면의 기본입니다. 본문, 일반 텍스트, 대부분의 정보가 Regular로 표시됩니다. 평범하다는 것은 ’읽기 편하다’는 뜻이기도 합니다. 긴 본문을 Bold로 쓰면 답답하고 피로하지만, Regular는 차분하게 읽힙니다. 그래서 ’읽는 텍스트’의 기본은 Regular입니다.

Bold(700) 는 강조의 자리입니다. 제목, 강조하고 싶은 핵심 단어, 중요한 라벨 등에 씁니다. Bold는 시선을 끄는 힘이 있어, 위계의 ’상위’를 표현하거나 본문 속 핵심을 짚는 데 효과적입니다. 다만 Bold도 색·강조와 마찬가지로 절제해야 합니다 — 본문 전체를 Bold로 하거나, 강조를 남발하면 Bold의 강조 효과가 죽습니다(8편의 강조 인플레이션과 같은 원리). Bold는 ’정말 강조할 곳’에만 써야 빛납니다.

이 두 두께의 역할 분담이 명확하면, 사용자는 글자의 굵기만 보고도 ’이건 강조구나, 이건 보통이구나’를 즉시 압니다. 두께가 단순한 만큼 그 신호가 명료해지는 것이죠.

5. 흔한 위반 패턴

DS-030 위반은 이렇게 나타납니다.

함정 ① 여러 굵기 사용. Light·Medium·SemiBold 등 다양한 굵기 혼용 → 위계 모호, 일관성 붕괴. → Regular·Bold 둘로.

함정 ② 너무 가는 글씨. Light·Thin을 본문에 사용 → 가독성 저하(특히 저시력). → Regular 이상.

함정 ③ Bold 남발. 본문 곳곳을 Bold로 강조 → 강조 효과 희석. → 핵심에만 Bold.

함정 ④ 웹폰트 굵기 과다 로딩. 안 쓰는 굵기까지 로딩 → 성능 저하. → 두 굵기만 로딩.

핵심: 굵기는 Regular·Bold 둘로 충분합니다. 나머지 위계는 크기·색이 담당합니다.

6. 무엇을 점검하나

DS-030은 글자 굵기가 두 가지로 절제됐는지를 봅니다.

굵기 가짓수 — Regular(400)와 Bold(700) 두 가지만 쓰는가.

가는 글씨 여부 — Light·Thin 등 가는 굵기를 본문에 쓰지 않았는가.

Bold 절제 — 강조가 남발되지 않았는가.

웹폰트 로딩 — 안 쓰는 굵기를 불필요하게 로딩하지 않는가.

7. 누가 담당하나

역할	책임
디자이너	굵기를 Regular·Bold로 제한, 위계는 크기·색과 조합
퍼블리셔/개발	두 굵기만 웹폰트 로딩, font-weight 일관 적용

8. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-030 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

글자가 있는 모든 사이트 = 해당. 굵기 사용을 점검합니다.

예외(N/A)

글자가 없는 화면은 없으므로 모든 사이트가 대상입니다. 단, DS-031(굵기 4가지 이하)과 함께 보면, 디스플레이 등 특수 영역에서 약간의 유연성이 있을 수 있습니다(다음 편).

9. 단계별 개선 방법

Before / After

/* ❌ Before: 여러 굵기 혼용 */ h1 { font-weight: 900; } h2 { font-weight: 600; } .lead { font-weight: 300; } /* Light — 가독성 저하 */ /* ✅ After: Regular·Bold 두 가지 */ body { font-weight: 400; } /* Regular 기본 */ h1, h2, strong { font-weight: 700; } /* Bold 강조 */ /* 위계는 크기·색으로 보완 */ h1 { font-size: 2rem; } h2 { font-size: 1.5rem; }

정비 순서

굵기 정리 — 다양한 굵기를 Regular·Bold 둘로 통합.

가는 글씨 제거 — Light·Thin 본문을 Regular로.

위계 보완 — 크기·색으로 위계 표현.

웹폰트 정리 — 두 굵기만 로딩.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 글자 굵기가 Regular·Bold 두 가지인가요?

□ Light·Medium 등 여러 굵기를 섞어 쓰고 있지 않나요?

□ 본문에 너무 가는 글씨(Light·Thin)를 쓰지 않나요?

□ Bold를 강조에만 절제해서 쓰나요?

□ 안 쓰는 굵기 폰트를 불필요하게 로딩하지 않나요?

❓ FAQ

Q1. 두 가지면 표현이 빈약하지 않나요? 위계는 두께만으로 만드는 게 아닙니다. 크기·색·간격과 조합하면 두 굵기로도 풍부한 위계가 나옵니다. 제목은 ‘크고+Bold’, 본문은 ‘보통+Regular’ 식으로요. 두께를 줄이는 대신 다른 도구가 위계를 담당합니다.

Q2. Medium(500)이나 SemiBold(600)는 못 쓰나요? DS-030은 Regular·Bold 두 가지를 명시합니다. Medium·SemiBold 같은 중간 굵기는 위계가 모호하고 일관성을 해칩니다. 강조는 Bold로 확실히, 나머지는 Regular로 통일하는 것이 명료합니다.

Q3. 제목을 더 굵게(Black 900) 하면 안 되나요? 디스플레이 등 특수 영역에서 약간의 유연성이 있을 수 있지만(DS-031), 기본은 Bold(700)입니다. Black은 너무 무겁고, 위계를 위해서라면 크기를 키우는 것이 낫습니다.

Q4. 가는 글씨가 세련돼 보이는데요? Light·Thin은 세련돼 보일 수 있지만 가독성이 떨어집니다. 특히 저시력·고령 사용자에게 가는 글씨는 안 보입니다. 공공서비스는 가독성이 우선이므로 Regular 이상을 씁니다.

Q5. Pretendard GOV가 두 굵기를 제공하나요? Pretendard GOV는 여러 굵기를 제공하지만, DS-030에 따라 그중 Regular·Bold 두 가지만 골라 쓰면 됩니다. 제공되는 모든 굵기를 다 쓸 필요는 없습니다.

11. 마무리 — 적을수록 명확하다

DS-030의 메시지는 절제의 미학입니다.

굵기는 둘이면 충분하다 — 적은 선택지가 더 명확한 위계와 일관성을 만든다.

다양한 굵기를 다 쓰는 것이 풍부함처럼 보이지만, 실제로는 위계를 모호하게 하고 일관성을 깹니다. Regular와 Bold 두 단계로 제한하면, ’보통과 강조’라는 명확한 위계가 서고, 화면이 일관되며, 성능도 좋아집니다. 부족한 위계는 크기·색이 채웁니다. 적은 도구로 더 명확하게 — 이는 색의 절제(DS-008·012)와 같은, 디자인 시스템의 일관된 지혜입니다.

다음 편은 이 두께 원칙을 보완하는 규칙입니다. DS-031 — “글자 두께를 4가지 이하로 사용한다.” 기본은 두 가지지만, 어떤 유연성이 허용되는지 그 상한을 다룹니다.

다음 편 예고 ▶ 「031. 글자 두께를 4가지 이하로 사용하고 있다.」

우리 사이트의 글자 굵기가 절제됐는지 확인하려면? ViewCheck는 사이트에 쓰인 글자 굵기 종류를 집계해, Regular·Bold로 절제됐는지, 가는 글씨나 과도한 굵기 혼용은 없는지를 진단합니다.

📚 참고 출처

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

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

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