기본은 둘, 상한은 넷

KRDS DS-031 — 글자 두께를 4가지 이하로 사용하고 있다.

0. 들어가며 — 두 규칙이 함께 그리는 그림

지난 30편에서 “글자 두께는 Regular(400)·Bold(700) 두 가지로”라고 했습니다. 그런데 이번 31편은 “두께를 4가지 이하로”라고 합니다. 둘이라더니 넷? 모순처럼 보이지만, 두 규칙은 함께 하나의 그림을 그립니다.

DS-030(기본 둘) + DS-031(최대 넷) = “기본은 두 가지로 충분하되, 어떤 경우에도 네 가지를 넘지 마라.”

DS-030이 ’권장(둘)’이라면, DS-031은 ’절대 상한(넷)’입니다. 화면 대부분은 Regular·Bold 두 가지로 충분하지만, 디스플레이 등 특수한 영역에서 한두 굵기가 더 필요할 수 있습니다. 그렇더라도 전체 굵기 종류는 4개를 넘으면 안 된다는 안전선을 긋는 것이죠. 이번 편은 이 ’기본 둘, 상한 넷’의 구조와, 왜 이런 이중 규칙이 필요한지를 풀어냅니다.

1. 규칙 원문 — 절대 상한

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

“4가지 이하”

사이트 전체에서 쓰는 글자 굵기 종류를 최대 4개로 제한한다는 뜻입니다. 5개 이상은 안 됩니다.

이 규칙은 30편(두 가지)과 함께 봐야 의미가 완성됩니다.

규칙	의미
DS-030	기본은 Regular·Bold 두 가지 (권장)
DS-031	어떤 경우에도 4가지 이하 (절대 상한)

정리: 글자 굵기는 기본 두 가지로, 특수 상황을 포함해도 최대 네 가지까지만 쓰라. 이게 DS-031입니다.

2. 왜 ’둘’과 ’넷’을 따로 두나

두 규칙으로 나눈 데는 현실적 이유가 있습니다. ’이상’과 ’현실’의 균형입니다.

이상적으로는 두 가지(Regular·Bold)가 가장 명확합니다(30편). 하지만 현실의 디자인에는 변수가 있습니다. 디스플레이급 헤드라인에 더 굵은 두께가 필요할 수도 있고, 특정 브랜드 표현에 다른 굵기가 쓰일 수도 있습니다. 이런 현실적 필요를 완전히 막으면 디자인이 경직됩니다.

그래서 KRDS는 두 단계로 규칙을 둡니다 — 권장은 둘(DS-030), 그러나 불가피하면 넷까지 허용(DS-031). ’둘이 기본이되, 넷이 절대 한계’인 것이죠. 이렇게 하면 대부분의 화면은 두 가지로 명확하게 가면서도, 정말 필요한 특수 상황에서는 약간의 유연성을 갖습니다. 그리고 그 유연성에도 ’넷’이라는 분명한 천장이 있어, 굵기가 무한정 늘어나는 것을 막습니다.

이는 색에서 본 구조와 닮았습니다 — 강조색은 10%(DS-009)가 기본이되 핵심 강조는 5% 이하(DS-012)로 더 조이는 식의 이중 규칙. 권장값과 절대 한계를 함께 두면, 일상적 사용은 이상에 가깝게 가면서도 예외 상황에 대한 안전장치가 생깁니다. DS-030·031도 같은 발상입니다.

3. ’넷’이라는 상한의 의미 — 무질서를 막는 천장

왜 하필 넷일까요? 넷은 ‘유연성을 주되 무질서는 막는’ 균형점입니다.

굵기가 5개, 6개로 늘어나면 30편에서 본 문제들이 터집니다 — 위계 모호(인접 굵기 구분 불가), 일관성 붕괴, 성능 저하. 그래서 어딘가에 천장이 필요합니다. 그 천장을 넷으로 둔 것은, 기본 둘(Regular·Bold)에 더해 특수 상황용 한두 굵기까지는 허용하되, 그 이상은 무질서로 본다는 뜻입니다.

핵심은 이 상한이 ’예외의 누적’을 막는다는 것입니다. 디자인을 하다 보면 “이번 한 번만 다른 굵기”라는 요구가 계속 쌓입니다. 천장이 없으면 이 요구들이 누적되어 어느새 굵기가 일곱, 여덟 개가 됩니다. ’4가지 이하’라는 명확한 상한이 있으면, “더 추가하려면 기존 것 중 하나를 빼야 한다”는 압박이 생겨 굵기가 절제 됩니다. 상한은 ’예산’처럼 작동해, 한정된 자원 안에서 정말 필요한 것만 고르게 합니다.

그래서 DS-031은 DS-030의 보완재입니다. DS-030이 “둘로 가라”는 방향을 제시한다면, DS-031은 “넷을 넘지 마라”는 울타리를 칩니다. 방향과 울타리가 함께 있어야, 대부분은 이상(둘)에 가깝게 가면서도 최악(무질서)을 피할 수 있습니다.

이런 ‘권장값 + 상한값’ 이중 규칙이 단순히 하나의 규칙보다 나은 이유를 생각해 봅시다. 만약 “두 가지로 쓰라”는 규칙 하나만 있으면, 디스플레이에 굵기가 하나 더 필요한 정당한 상황에서 디자이너는 규칙을 어기는 셈이 됩니다. 규칙이 현실을 못 담으니 결국 무시되고, 한 번 무시되기 시작하면 둑이 터지듯 굵기가 무한정 늘어납니다. 반대로 “넷까지 OK”라는 규칙 하나만 있으면, 대부분의 화면이 굳이 둘로 절제할 이유가 없어 습관적으로 서너 개를 쓰게 됩니다. 어느 쪽이든 한 규칙만으로는 ’대부분 절제하되 예외는 허용’이라는 미묘한 목표를 담지 못합니다.

두 규칙을 함께 두면 이 문제가 풀립니다. DS-030이 “기본은 둘”이라고 목표를 분명히 해 습관적 남발을 막고, DS-031이 “최대 넷”이라고 현실적 예외를 허용하되 천장을 둬 무질서를 막습니다. 디자이너는 “둘을 지향하되, 정말 필요하면 넷까지”라는 명확한 운영 원칙을 갖게 되죠. 규칙을 두 겹으로 설계하는 이 방식은, 색의 60:30:10(DS-009)과 강조 5% 상한(DS-012), 명도 대비의 권장(AAA)과 최소(AA) 등 846개 곳곳에서 반복됩니다. 이상과 현실을 동시에 담는 KRDS의 일관된 설계 철학입니다.

4. 실무 적용 — 둘로 시작해 필요할 때만 늘리기

실무에서 이 두 규칙을 어떻게 적용할까요? 순서가 중요합니다.

먼저 둘로 시작합니다. 모든 화면을 Regular·Bold 두 가지로 설계합니다. 위계는 크기·색으로 보완하고요 (30편). 대부분의 화면은 여기서 끝납니다 — 두 가지로 충분하니까요.

정말 필요할 때만 늘립니다. 디스플레이 헤드라인에 더 굵은 두께가 꼭 필요하다거나, 특수한 표현이 불가피 하다면, 그때 세 번째·네 번째 굵기를 추가합니다. 단, 추가하기 전에 “정말 크기·색으로는 안 되나?”를 먼저 자문해야 합니다. 대부분은 굵기를 늘리지 않고도 크기·색으로 해결됩니다.

넷에서 멈춥니다. 어떤 경우에도 다섯 번째 굵기는 추가하지 않습니다. 만약 다섯 번째가 필요하다고 느껴진다면, 그건 굵기로 위계를 과도하게 표현하려는 신호입니다. 위계 도구를 굵기에서 크기·색으로 옮기는 것이 옳은 해법 입니다.

이 ’둘로 시작, 필요할 때만, 넷에서 멈춤’의 원칙을 지키면, 대부분의 사이트는 자연스럽게 두세 가지 굵기에 머물고, 무질서한 굵기 남발은 일어나지 않습니다.

5. 흔한 위반 패턴

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

함정 ① 굵기 5개 이상. Thin·Light·Regular·Medium·Bold·Black 등 다양하게 → 상한 초과, 무질서. → 4개 이하로.

함정 ② 예외 누적. “한 번만”이 쌓여 굵기가 늘어남 → 상한 초과. → 추가 시 기존 것 정리.

함정 ③ 굵기로 과도한 위계. 위계를 다 굵기로 표현하려다 굵기 폭증 → 크기·색으로 분담. → 굵기는 절제.

함정 ④ 웹폰트 굵기 과다. 안 쓰는 굵기까지 로딩 → 성능 저하 + 상한 관리 불가. → 쓰는 굵기만.

핵심: 기본 둘, 절대 넷. 둘로 시작해, 정말 필요할 때만, 넷에서 멈추세요.

6. 무엇을 점검하나

DS-031은 글자 굵기 종류가 4개 이하인지를 봅니다.

굵기 가짓수 — 사이트 전체 굵기 종류가 4개 이하인가.

기본 두 가지 — 대부분이 Regular·Bold 두 가지로 운영되는가(DS-030).

추가 굵기 정당성 — 추가 굵기가 디스플레이 등 정당한 이유로 쓰였는가.

웹폰트 로딩 — 쓰는 굵기만 로딩하는가.

7. 누가 담당하나

역할	책임
디자이너	굵기를 기본 둘, 최대 넷으로 관리
퍼블리셔/개발	쓰는 굵기만 웹폰트 로딩, 굵기 종류 관리
디자인 시스템 담당	굵기 토큰 정의로 상한 강제

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

적용 대상

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

글자가 있는 모든 사이트 = 해당. 굵기 종류 수를 점검합니다.

예외(N/A)

글자가 없는 화면은 없으므로 모든 사이트가 대상입니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 굵기 6개 (상한 초과) */ /* Thin 100, Light 300, Regular 400, Medium 500, Bold 700, Black 900 */ /* ✅ After: 기본 둘, 최대 넷 */ :root { --weight-regular: 400; --weight-bold: 700; /* 필요 시 디스플레이용으로 최대 2개 더, 총 4개 이내 */ } body { font-weight: var(--weight-regular); } strong, h1, h2 { font-weight: var(--weight-bold); }

정비 순서

굵기 종류 집계 — 현재 쓰는 굵기 수 파악.

둘로 통합 — 대부분을 Regular·Bold로.

상한 적용 — 특수 굵기 포함 4개 이하로 정리.

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

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 사이트 전체 굵기 종류가 4개 이하인가요?

□ 대부분이 Regular·Bold 두 가지로 운영되나요?

□ “한 번만” 추가한 굵기가 누적되지 않았나요?

□ 위계를 굵기로 과도하게 표현하지 않나요?

□ 쓰는 굵기만 웹폰트로 로딩하나요?

❓ FAQ

Q1. DS-030(둘)과 DS-031(넷), 뭐가 맞나요? 둘 다 맞습니다. DS-030은 ‘기본 권장(둘)’, DS-031은 ’절대 상한(넷)’입니다. 대부분 둘로 가되, 특수 상황을 포함해도 넷을 넘지 마라는 뜻입니다. 권장값과 한계값을 함께 둔 이중 규칙입니다.

Q2. 왜 넷까지는 허용하나요? 디스플레이 헤드라인 등 특수 영역에서 한두 굵기가 더 필요할 수 있는 현실을 반영한 것입니다. 다만 무한정 늘어나지 않도록 넷이라는 천장을 둡니다. 유연성과 절제의 균형점입니다.

Q3. 우리는 굵기 3개를 쓰는데 괜찮나요? 4개 이하이므로 DS-031은 충족합니다. 다만 3개 중 하나가 정말 필요한지(크기·색으로 대체 불가한지) 점검해 보세요. 둘로 줄일 수 있으면 더 명확합니다.

Q4. 굵기를 줄이면 디자인이 단조롭지 않나요? 위계는 크기·색·간격과 조합해 만듭니다. 굵기가 적어도 다른 도구로 충분히 풍부한 위계가 나옵니다. 단조로움이 아니라 명료함입니다(30편).

Q5. Pretendard GOV의 여러 굵기를 다 쓰면 안 되나요? 글꼴이 여러 굵기를 제공해도, 그중 4개 이하만 골라 쓰면 됩니다. 제공되는 모든 굵기를 다 쓸 필요는 없고, 오히려 절제해야 합니다.

11. 마무리 — 방향과 울타리

DS-031의 메시지는 DS-030과 한 쌍으로 완성됩니다.

이상은 둘, 한계는 넷 — 방향을 제시하고 울타리를 쳐서 절제를 보장한다.

DS-030이 “두 가지로 가라”는 방향이라면, DS-031은 “넷을 넘지 마라”는 울타리입니다. 둘로 시작해 정말 필요할 때만 늘리고, 넷에서 멈추면, 대부분의 화면은 명확한 두 굵기로 운영되면서도 특수 상황의 유연성을 잃지 않습니다. 권장과 한계를 함께 두는 이 이중 구조는, 이상을 추구하되 현실을 담는 디자인 시스템의 성숙한 방식입니다.

다음 편은 글자 사이의 ’공간’으로 넘어갑니다. DS-032 — “줄 간격을 150% 이상으로 설정한다.” 글자가 빽빽하면 왜 읽기 어려운지, 적절한 줄 간격이 가독성에 왜 중요한지를 다룹니다.

다음 편 예고 ▶ 「032. 줄 간격을 150% 이상으로 설정하고 있다.」

우리 사이트의 글자 굵기가 상한을 지키는지 확인하려면? ViewCheck는 사이트에 쓰인 글자 굵기 종류를 집계해, 4가지 이하인지·기본 두 가지로 운영되는지를 진단합니다.

📚 참고 출처

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

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

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