제목은 제목다워야 한다
지금까지 타이포 계층(36·37·39편)을 통해 제목과 본문의 체계를 봤습니다. 이번 40편은 그 모든 것의 가장 기본이 되는 원칙입니다 — 타이틀(제목)이 본문보다 더 눈에 띄어야 한다.
KRDS DS-040 — 타이틀이 본문보다 더 눈에 띄게 적용하고 있다.
0. 들어가며 — 당연하지만 자주 깨지는 원칙
지금까지 타이포 계층(36·37·39편)을 통해 제목과 본문의 체계를 봤습니다. 이번 40편은 그 모든 것의 가장 기본이 되는 원칙입니다 — 타이틀(제목)이 본문보다 더 눈에 띄어야 한다.
너무 당연해 보이죠? 제목이 본문보다 두드러지는 건 상식입니다. 하지만 이 당연한 원칙이 의외로 자주 깨집니다. 디자인 욕심에 본문을 키우거나 강조하다가, 또는 제목을 너무 절제하다가, 제목과 본문의 위계가 모호해지거나 역전되는 일이 생기죠. DS-040은 이 기본을 명문화해, ’제목은 제목답게 두드러져야 한다’를 못 박습니다. 이번 편은 이 기본 원칙의 의미와, 의외로 자주 깨지는 이유를 풀어냅니다.
1. 규칙 원문 — 기본 위계
DS-040 (디자인 스타일 > 타이포그래피) “타이틀이 본문보다 더 눈에 띄게 적용하고 있다.”
“타이틀이 본문보다 더 눈에 띄게”
제목(타이틀)이 본문보다 시각적으로 두드러져야 한다는 뜻입니다. 크기·두께·색 등으로 제목이 본문보다 강조되어야 합니다.
정리: 제목은 본문보다 더 눈에 띄게 — 위계의 기본을 지켜라. 이게 DS-040입니다.
2. 왜 이 ‘당연한’ 원칙을 규칙으로 두나
제목이 본문보다 두드러져야 하는 건 당연한데, 왜 규칙으로 명문화했을까요? 당연한 것이 자주 깨지기 때문입니다.
위계가 명확하면 사용자는 화면을 빠르게 파악합니다. 제목을 훑어 구조를 잡고, 필요한 섹션의 본문을 읽죠. 이 ’훑어보기(scanning)’는 사용자가 화면을 읽는 기본 방식입니다. 제목이 본문보다 두드러져야 이 훑어보기가 작동합니다. 만약 제목과 본문이 비슷해 보이면, 사용자는 구조를 파악하지 못하고 모든 걸 다 읽어야 하죠. 특히 정보가 많은 정부 서비스에서, 제목의 두드러짐은 사용자가 원하는 정보를 빠르게 찾게 해주는 핵심 장치 입니다.
그런데 이 기본이 깨지는 경우가 의외로 많습니다. 디자인 트렌드를 좇아 제목을 가늘게 처리하거나, 본문을 강조하려고 키우거나, 제목 색을 연하게 하거나… 이런저런 이유로 제목이 본문에 묻히는 일이 생깁니다. DS-040은 이런 ’위계 붕괴’를 막는 안전장치입니다. 화려한 디자인을 하다가도 ’제목은 본문보다 두드러져야 한다’는 기본은 지키라는 것이죠.
3. ’눈에 띄게’는 크기만이 아니다
제목을 본문보다 두드러지게 하는 방법은 여러 가지입니다. 크기 하나에만 의존하지 않습니다.
크기 — 제목을 본문보다 크게(37편의 1.25~1.5배).
두께 — 제목을 Bold(700), 본문을 Regular(400)로(30편).
색 — 제목을 더 진한 색으로(다음 편 DS-041).
여백 — 제목 위아래에 충분한 공간을 둬 도드라지게.
이 도구들을 조합하면 제목이 확실히 두드러집니다. 예를 들어 제목은 ‘크고(1.5배) + Bold + 진한 색 + 넉넉한 여백’, 본문은 ‘보통 크기 + Regular’. 여러 도구가 함께 작동하니, 어느 하나가 약해도 위계가 유지됩니다. 이는 이 시리즈 내내 본 ‘여러 도구를 조합하라’(8·30·37편)는 원리의 연장입니다.
중요한 건 이 도구들이 위계를 강화하는 방향으로 작동해야 한다는 것입니다. 제목을 가늘게(Light) 하거나 연한 색으로 하면, 크기가 커도 본문에 묻힐 수 있습니다. 각 도구가 제목을 두드러지게 하는 쪽으로 일관되게 쓰여야, 제목이 확실히 제목다워집니다.
4. 흔한 위반 패턴 / 점검 / 개선
흔한 위반 패턴
함정 ① 제목이 가늘다. 제목을 Light로, 본문을 Bold로 → 위계 역전. → 제목을 두껍게. 함정 ② 제목 색이 연하다. 제목을 연회색으로 → 본문에 묻힘. → 제목을 진하게. 함정 ③ 크기 차이 부족. 제목과 본문 크기가 비슷 → 위계 모호. → 1.25~1.5배 차이. 함정 ④ 본문 과강조. 본문을 크게/굵게 강조 → 제목과 구분 안 됨. → 본문은 차분히.
무엇을 점검하나
위계 방향 — 제목이 본문보다 두드러지는가.
역전 없음 — 본문이 제목보다 크거나 강하지 않은가.
도구 조합 — 크기·두께·색·여백이 제목 강조 방향으로 작동하는가.
훑어보기 — 제목만 훑어 구조를 파악할 수 있는가.
Before / After
/* ❌ Before: 위계 역전(제목이 가늘고 연함) */ h2 { font-size: 1.1rem; font-weight: 300; color: #aaa; } p { font-size: 1rem; font-weight: 700; } /* ✅ After: 제목이 본문보다 두드러짐 */ h2 { font-size: 1.5rem; font-weight: 700; color: var(--gray-90); } p { font-size: 1rem; font-weight: 400; color: var(--gray-70); }
5. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 디자이너 | 제목이 본문보다 두드러지게 설계 |
| 퍼블리셔/개발 | 크기·두께·색으로 위계 구현 |
| 기관 유형 | DS-040 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 |
제목과 본문이 있는 모든 사이트 = 해당. 사실상 모든 사이트가 대상입니다.
6. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 제목이 본문보다 확실히 두드러지나요?
□ 제목이 본문보다 작거나 가늘지 않나요(역전 없음)?
□ 제목만 훑어 화면 구조를 파악할 수 있나요?
□ 제목 색이 본문에 묻히지 않나요?
□ 크기·두께·색이 제목 강조 방향으로 작동하나요?
❓ FAQ
Q1. 너무 당연한 규칙 아닌가요? 당연하지만 자주 깨집니다. 디자인 트렌드로 제목을 가늘게 하거나, 본문을 강조하다가 위계가 역전되는 일이 많습니다. DS-040은 이 기본을 지키게 하는 안전장치입니다.
Q2. 미니멀하게 제목을 가늘게 하고 싶은데요? 가는 제목은 본문에 묻히기 쉽습니다. 미니멀하더라도 제목이 본문보다 두드러지는 선은 지켜야 합니다. 크기나 색으로 위계를 보완하면 가늘어도 두드러지게 할 수 있습니다.
Q3. 제목을 크게만 하면 되나요? 크기 하나보다 크기·두께·색·여백을 조합하는 것이 효과적입니다. 여러 도구가 함께 작동하면 위계가 더 확실 하고, 각 도구를 절제할 수 있습니다.
Q4. 본문 속 강조(Bold)는 제목보다 두드러져도 되나요? 본문 속 강조 단어가 제목보다 두드러지면 위계가 혼란스러워집니다. 강조는 본문 내에서 절제하고, 제목의 두드러짐을 넘지 않게 하세요.
Q5. KRDS를 채택하면 자동인가요? KRDS 타이포 계층은 제목이 본문보다 두드러지게 설계돼 있습니다. 계층 토큰을 올바르게 쓰면 DS-040이 충족 됩니다.
7. 마무리 — 기본이 무너지면 다 무너진다
DS-040의 메시지는 기본의 중요성을 일깨웁니다.
제목은 제목다워야 한다 — 가장 당연한 위계가 모든 구조의 토대다.
제목이 본문보다 두드러진다는 건 너무 당연하지만, 바로 그래서 방심하다 깨지기 쉽습니다. 이 기본 위계가 무너지면, 앞서 쌓은 모든 타이포 계층(36·37·39편)도 의미를 잃습니다. 사용자는 제목을 훑어 화면을 파악하는데, 제목이 두드러지지 않으면 그 훑어보기가 작동하지 않으니까요. 화려함을 추구하다가도 ’제목은 본문보다 두드러져야 한다’는 기본만은 지키는 것 — 이것이 모든 위계의 토대입니다.
다음 편은 본문의 ’색’을 다룹니다. DS-041 — “본문 글자의 색상을 주로 그레이 계열로 유지하고, 주요 동작에는 primary, secondary, point, system 색상을 적용한다.” 글자 색과 색상 규칙(앞의 26편)이 만나는 자리입니다.
다음 편 예고 ▶ 「041. 본문 글자의 색상을 주로 그레이 계열로 유지하고, 주요 동작에는 primary, secondary, point, system 색상을 적용하고 있다.」
우리 사이트의 제목이 본문보다 두드러지는지 확인하려면? ViewCheck는 제목이 본문보다 크기·두께·색으로 두드러지는지, 위계 역전은 없는지, 훑어보기로 구조 파악이 되는지를 진단합니다.
📚 참고 출처
KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.