제목은 한눈에 제목답게

KRDS BP-052 — 각 콘텐츠의 제목은 다른 요소들과 구분되도록 표현하고 있다.

0. 들어가며 — 제목인지 본문인지 헷갈리면

이번 618편은 각 콘텐츠의 제목은 다른 요소들과 구분되도록 표현하라는 규칙입니다.

콘텐츠 상세에서 — 제목이 본문·메타 정보와 비슷하게 보이면, 무엇이 제목인지 한눈에 안 들어오죠. BP-052는 제목을 다른 요소와 시각적으로 구분되게 표현하라고 규정합니다. 타이포 위계(DS)의 콘텐츠 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 제목 시각 구분

BP-052 (기본 패턴 > 상세 정보 확인) “각 콘텐츠의 제목은 다른 요소들과 구분되도록 표현하고 있다.”

콘텐츠 제목을 본문·메타 등 다른 요소와 시각적으로 구분되게 표현하라는 뜻입니다.

정리: 콘텐츠 제목을 다른 요소와 구분되게 표현하라. 이게 BP-052입니다.

2. 왜 제목 구분인가

콘텐츠 상세 페이지에는 여러 요소가 있습니다: 제목, 작성자·날짜(메타), 본문, 첨부, 이력 등. 사용자는 페이지를 열자마자 제목을 찾아 ‘무엇에 관한 내용인지’ 파악하죠. 그런데 제목이 다른 요소와 비슷하게 보이면, 무엇이 제목인지 한눈에 안 들어옵니다. BP-052는 제목의 시각적 구분을 요구합니다.

제목이 구분되지 않을 때의 문제:

제목 식별 어려움 제목이 본문과 비슷한 크기·굵기·색이면, 사용자는 무엇이 제목인지 헷갈립니다. 페이지의 주제를 즉시 파악하기 어렵죠.

위계 혼란 제목·소제목·본문의 위계가 안 보이면, 콘텐츠 구조가 평평하게 느껴져 읽기 어렵습니다. 어디서 부터 어디까지가 한 덩어리인지 모호하죠.

스캔 비효율 사용자는 제목을 단서로 콘텐츠를 스캔합니다. 제목이 안 띄면 스캔이 비효율적이죠.

그래서 BP-052는 — 제목을 구분되게 표현하라고 합니다:

시각적 강조 제목을 본문보다 크게, 굵게, 또는 다른 스타일로 표현합니다. 한눈에 ’이게 제목이다’를 알게요. 타이포그래피 위계(글자 크기·굵기·여백)를 활용하죠.

다른 요소와 분리 제목을 메타 정보(작성자·날짜)나 본문과, 여백·구분선·배경 등으로 분리합니다. 제목 영역이 독립적으로 보이게요.

위계 일관성 콘텐츠 내 제목·소제목·본문의 위계를 일관되게 표현합니다(DS 타이포 위계). H1(제목) > H2/H3(소 제목) > 본문처럼요. 시각 위계가 구조를 드러내죠.

시맨틱과의 연계. 제목은 — 시각적 구분만이 아니라 시맨틱(<h1> 등)으로도 표현돼야 합니다(BP-060). 시각 구분 (BP-052) + 시맨틱 마크업(BP-060)이 — 함께 제목을 모두에게 명확히 하죠. 시각 사용자는 보고, 스크린 리더 사용자는 ’제목 레벨 1’로 듣습니다.

타이포 위계(DS)의 콘텐츠 적용. 디자인 스타일의 — 타이포그래피 위계 규칙(글자 크기·굵기로 정보 위계 표현)을, 콘텐츠 상세라는 맥락에 적용한 게 BP-052입니다. 콘텐츠에서 — 제목이 가장 먼저, 명확히 보여야 하죠.

이 규칙은 상세 정보 확인의 ’제목 가독성’을 담당합니다 — 제목을 다른 요소와 구분되게 표현해(052), 사용자가 콘텐츠 주제를 즉시 파악하게 하죠.

정리하면 — 제목이 다른 요소와 비슷하게 보이면 무엇이 제목인지 한눈에 안 들어오므로, 제목을 크기·굵기·여백 등으로 다른 요소와 구분되게 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

시각 강조 — 제목이 본문보다 크게·굵게 등으로 강조되는가.

요소 분리 — 제목이 메타·본문과 여백·구분선으로 분리되는가.

위계 일관 — 제목·소제목·본문 위계가 일관되게 표현되는가.

개선 방향

제목을 본문보다 크게·굵게, 여백·구분으로 분리(타이포 위계).

시맨틱 마크업(BP-060)과 함께 시각+의미 양쪽 명확히.

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

역할	책임
디자이너	제목 타이포 위계 설계
퍼블리셔	제목 스타일 구현

기관 유형	BP-052 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (콘텐츠 상세)

콘텐츠 상세 페이지를 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제목이 본문보다 크게·굵게 등으로 강조되나요?

□ 제목이 메타·본문과 여백·구분선으로 분리되나요?

□ 제목·소제목·본문 위계가 일관되게 표현되나요?

❓ FAQ

Q1. 제목을 어떻게 구분하나요? 크기·굵기·색·여백·구분선 등으로요. 본문보다 크고 굵게 하고, 다른 요소와 분리해 한눈에 제목임을 알게 합니다. Q2. 시각만 구분하면 되나요? 시각 구분(BP-052) + 시맨틱 마크업(BP-060)이 함께여야 합니다. 시각 사용자는 보고, 스크린 리더 사용자는 ’제목’으로 듣게요. Q3. DS 타이포 위계와 같나요? 타이포 위계 규칙을 콘텐츠 상세에 적용한 것입니다. 콘텐츠에서 제목이 가장 먼저 명확히 보여야 하죠.

6. 마무리

BP-052의 메시지:

제목은 한눈에 제목답게 — 콘텐츠 제목을 다른 요소와 구분되게 표현하라.

제목이 다른 요소와 비슷하면 무엇이 제목인지 안 들어옵니다. 제목을 크기·굵기·여백으로 구분되게 표현해 주제를 즉시 파악하게 하는 게 핵심이죠. 다음 편은 계층구조와 간결한 문단입니다.

다음 편 예고 ▶ 「619. (BP-053) 콘텐츠 요소들 사이의 계층구조를 명확하게 구분하고, 문단과 문장은 최대한 간단 명료하게 사용하고 있다.」

ViewCheck는 콘텐츠 제목이 다른 요소와 구분되게 표현되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 상세 정보 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_06.html

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

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