하위는 안으로 들여 써라

KRDS CP-250 — 들여쓰기를 활용하여 계층 구조를 명확하게 구분하고 있다.

0. 들어가며 — 상위와 하위 항목

이번 370편은 들여쓰기를 활용하여 계층 구조를 명확하게 구분하라는 규칙입니다.

목록에는 계층이 있을 수 있습니다 — 상위 항목 아래 하위 항목이 종속되는 구조죠. 이때 상위와 하위가 같은 위치에 나열되면 — 어느 게 상위고 어느 게 하위인지, 어느 하위가 어느 상위에 속하는지 모호합니다. CP-250은 하위 항목을 들여 써서 계층을 시각적으로 명확히 하라고 규정합니다. 사이드 메뉴 계층 구분(CP-095) 정신이죠. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 들여쓰기로 계층 구분

CP-250 (컴포넌트 > 텍스트 목록) “들여쓰기를 활용하여 계층 구조를 명확하게 구분하고 있다.”

목록에 계층이 있을 때, 하위 항목을 상위 항목보다 안쪽으로 들여 써서 상위-하위 관계와 계층을 시각적으로 명확히 하라는 뜻입니다.

정리: 목록 계층을 들여쓰기로 명확히 구분하라. 이게 CP-250입니다.

2. 왜 들여쓰기로 계층을 구분하나

목록은 단순 나열뿐 아니라 계층(중첩) 구조를 가질 수 있습니다 — 상위 항목 아래 그에 속하는 하위 항목이 들어가죠. 예를 들어:

• 신청 대상 • 만 19세 이상 • 국내 거주자 • 신청 방법 • 온라인 신청 • 방문 신청

여기서 ‘만 19세 이상’, ‘국내 거주자’는 ’신청 대상’의 하위 항목이고, ’온라인 신청’, ’방문 신청’은 ’신청 방법’의 하위죠. 이 상위-하위 관계가 시각적으로 명확해야 사용자가 구조를 읽습니다.

들여쓰기의 역할. 하위 항목을 상위보다 안쪽으로 들여 쓰면 — ’이 항목들은 위 상위 항목에 종속된다’는 관계가 직관적으로 읽힙니다. 들여쓰기는 ’종속·하위’를 표현하는 보편적 시각 단서죠(게슈탈트 — 안쪽으로 묶이고 들여진 것은 부모의 자식으로 인지). 사이드 메뉴 계층(CP-095), 콘텐츠 내 탐색 계층(CP-109)에서 본 것과 같은 원리입니다.

들여쓰기가 없으면 — 계층 붕괴. 만약 하위 항목을 상위와 같은 위치에 나열하면:

× 모호한 예: • 신청 대상 • 만 19세 이상 • 국내 거주자 • 신청 방법 • 온라인 신청 • 방문 신청

이러면 — 모든 항목이 동등하게 보여, ’신청 대상’과 ’만 19세 이상’이 같은 수준인지, 종속 관계인지 알 수 없죠. 사용자는 계층을 추측해야 하고, ’만 19세 이상’이 무엇의 조건인지 흐려집니다. 평면 나열은 계층 정보를 잃죠.

그래서 CP-250은 — 하위 항목을 들여 써서 계층을 명확히 합니다. 들여쓰기 + 글머리 기호 차등(상위는 •, 하위는 ◦ 등)으로 더 분명히 하기도 하죠.

시각 + 시맨틱. 핵심은 — 들여쓰기(시각)뿐 아니라 시맨틱 중첩 마크업도 함께여야 한다는 점입니다(CP-252). 계층 목록은 — <ul>/<ol> 안에 또 <ul>/<ol>을 중첩해 마크업하죠:

<ul> <li>신청 대상 <ul> <li>만 19세 이상</li> <li>국내 거주자</li> </ul> </li> </ul>

이렇게 중첩 마크업하면 — CSS 들여쓰기가 자연히 적용되고(시각), 스크린 리더도 ’목록 안의 목록’으로 계층을 인지하죠(시맨틱). 들여쓰기를 CSS로만 흉내 내고 마크업이 평면이면 — 시각적으론 계층처럼 보여도 스크린 리더엔 계층이 안 전달됩니다(사이드 메뉴 CP-099, 표 CP-245 정신). 시각 들여쓰기 + 시맨틱 중첩이 함께여야 모든 사용 자에게 계층이 전달되죠.

계층 깊이 제한. 들여쓰기로 계층을 표현하되 — 너무 깊으면 안 됩니다. 다음 편 CP-251이 ’3수준 이내’를 규정하죠 — 깊은 계층은 들여쓰기가 과해지고 미로가 됩니다(사이드 메뉴 2수준 CP-092, 콘텐츠 내 탐색 3단계 CP-109 정신). CP-250(들여쓰기 구분) + CP-251(3수준 이내)이 계층 목록의 표현과 깊이를 함께 규정합니다.

정리하면 — 목록 계층은 하위 항목을 들여 써서 상위-하위 관계를 시각적으로 명확히 하고, 시맨틱 중첩 마크업으로 스크린 리더에도 전달해, 모든 사용자가 계층을 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

들여쓰기 — 하위 항목이 상위보다 안쪽으로 들여 써져 계층이 보이는가.

시맨틱 중첩 — 계층이 중첩 <ul>/<ol> 마크업으로 표현됐는가(CSS 흉내 아님).

관계 명확 — 어느 하위가 어느 상위에 속하는지 명확한가.

개선 방향

하위 항목을 중첩 목록(<ul> 안 <ul>)으로 마크업 → 들여쓰기·시맨틱 동시 확보.

글머리 기호 차등(상위 •, 하위 ◦)으로 수준 구분 강화. 평면 나열 교정.

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

역할	책임
퍼블리셔/개발	중첩 목록 마크업·들여쓰기 구현
콘텐츠	계층 구조 정의

기관 유형	CP-250 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (계층 목록 사용 시)

계층이 있는 목록을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 하위 항목이 상위보다 안쪽으로 들여 써져 계층이 보이나요?

□ 계층이 중첩 <ul>/<ol> 마크업으로 표현됐나요(CSS 흉내 아님)?

□ 어느 하위가 어느 상위에 속하는지 명확한가요?

❓ FAQ

Q1. 들여쓰기를 CSS로만 하면 안 되나요? 시각적으론 계층처럼 보여도 스크린 리더엔 계층이 안 전달됩니다. 중첩 목록 마크업이 필요하죠. Q2. 계층 없이 평면 나열하면요? 상위-하위 관계가 사라져 ‘이 항목이 무엇의 하위인지’ 모호해집니다. 들여 써야 하죠. Q3. 계층이 깊어도 되나요? 3수준 이내로 제한합니다(CP-251). 깊으면 들여쓰기가 과해지고 미로가 됩니다.

6. 마무리

CP-250의 메시지:

하위는 안으로 들여 써라 — 들여쓰기로 목록 계층을 명확히 구분하라.

목록 계층은 하위 항목을 들여 써서 상위-하위 관계를 명확히 합니다. 중첩 목록 마크업으로 들여쓰기와 시맨틱을 함께 확보해 스크린 리더에도 계층을 전하죠. 평면 나열은 계층을 잃습니다. 다음 편은 계층 깊이 제한 — 3수준 이내입니다.

다음 편 예고 ▶ 「371. (CP-251) 목록은 3수준 이내로 구성하고 있다.」

ViewCheck는 목록 계층이 들여쓰기·중첩 마크업으로 명확히 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 목록(Text list) 가이드 — https://www.krds.go.kr/html/site/component/component_23.html

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

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