순서가 없으면 점으로

KRDS CP-247 — 모든 항목이 동등한 수준의 중요도를 갖는 경우에는 순서 없는 목록을 사용하고 있다.

0. 들어가며 — 텍스트 목록 그룹의 첫 규칙

이번 367편부터 텍스트 목록(Text list) 그룹(CP-247~253, 7개)으로 들어갑니다. 첫 규칙은 모든 항목이 동등한 중요도면 순서 없는 목록(<ul>)을 사용하라는 내용이죠.

텍스트 목록은 — 여러 항목을 나열하는 가장 기본적인 콘텐츠 형식입니다. 글머리 기호(•)로 나열하는 순서 없는 목록과 번호(1, 2, 3)로 나열하는 순서 있는 목록이 있죠. CP-247은 — 항목들이 순서·우선순위 없이 동등하면 순서 없는 목록을 쓰라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 동등 중요도면 순서 없는 목록

CP-247 (컴포넌트 > 텍스트 목록) “모든 항목이 동등한 수준의 중요도를 갖는 경우에는 순서 없는 목록을 사용하고 있다.”

목록의 항목들이 서로 순서나 우선순위 없이 동등한 경우, 글머리 기호로 나열하는 순서 없는 목록(<ul>)을 사용 하라는 뜻입니다.

정리: 항목들이 동등하면 순서 없는 목록(<ul>)을 써라. 이게 CP-247입니다.

2. 왜 동등 항목에 순서 없는 목록인가

목록에는 두 종류가 있습니다 — 순서 없는 목록(unordered list, <ul>, 글머리 기호 •)과 순서 있는 목록 (ordered list, <ol>, 번호 1·2·3). 이 둘은 단순히 ’점이냐 번호냐’의 디자인 차이가 아니라, 항목 간 관계의 의미를 표현합니다. CP-247(순서 없는 목록)과 다음 편 CP-248(순서 있는 목록)이 이 의미 구분을 정하죠.

순서 없는 목록의 의미 동등·무순서. 순서 없는 목록은 항목들이 서로 순서·우선순위 없이 동등함을 뜻합니다. 항목의 나열 순서가 의미를 갖지 않죠 순서를 바꿔도 의미가 같습니다. 예를 들어:

준비물 목록: “신분증 · 도장 · 통장 사본” — 어느 것이 먼저랄 게 없죠. 셋 다 필요한 동등한 항목.

특징 나열: “무료 · 24시간 · 모바일 지원” — 순서가 의미 없는 동등한 특징들.

관련 링크: “공지사항 · 자료실 · FAQ” — 동등한 메뉴 항목들.

이런 ’순서가 의미 없는 동등한 항목들’은 — 글머리 기호(•)로 나열하는 순서 없는 목록이 맞습니다. 글머리 기호는 ’각 항목이 독립적이고 동등하다’는 시각 신호죠.

순서 있는 목록을 쓰면 안 되는 이유. 만약 동등한 항목에 번호(순서 있는 목록) 를 매기면 — 사용자는 ‘1번이 가장 중요한가? 1번부터 순서대로 해야 하나?’ 하고 잘못된 순서·우선순위를 읽습니다. 번호는 ’순서가 의미 있다’는 신호라, 동등한 항목에 쓰면 거짓 정보를 주죠. 준비물 “1. 신분증 2. 도장 3. 통장”이면 — 신분증을 먼저 챙겨야 하는 것처럼 오해됩니다. 그래서 동등한 항목엔 번호가 아니라 글머리 기호를 씁니다.

의미와 마크업의 일치. 핵심은 항목 간 관계의 의미에 맞는 목록 유형을 쓰는 것입니다(CP-252에서 태그 일치를 다룸). 동등하면 <ul>, 순서 있으면 <ol>(CP-248). 이는 시각적으로(점 vs 번호)뿐 아니라 시맨틱 적으로도 중요하죠 스크린 리더가 <ul>은 ’목록’으로, <ol>은 ’순서 있는 목록, N개 중 M번째’로 읽어, 비시각 사용자에게 순서 유무를 전합니다. 동등 항목을 <ul>로 마크업하면 비시각 사용자도 ’순서 없는 동등한 항목들’임을 알죠.

이 규칙은 텍스트 목록의 ’의미 표현’을 시작합니다 — 순서 없음(247)·순서 있음(248)을 구분하고, 일관된 어투 (249), 계층(250·251), 적합한 태그(252), 접근성(253)으로 이어지죠. 브레드크럼이 순서가 의미 있어 <ol>을 쓴 것(CP-086)과 대비됩니다 — 경로는 순서가 있으니 <ol>, 동등 나열은 <ul>.

정리하면 — 항목들이 순서·우선순위 없이 동등하면, 그 의미에 맞게 순서 없는 목록(<ul>, 글머리 기호)을 써서 잘못된 순서 인식을 막고 시각·시맨틱으로 ’동등함’을 전해야 합니다.

3. 점검 / 개선

무엇을 점검하나

동등 항목 ul — 순서·우선순위 없는 동등한 항목이 순서 없는 목록(<ul>)인가.

번호 오용 없음 — 동등한 항목에 번호(순서 있는 목록)를 잘못 쓰지 않았는가.

시맨틱 — <ul>/<li>로 마크업되어 스크린 리더에 ’목록’으로 전달되는가.

개선 방향

동등·무순서 항목을 <ul>/<li>로(글머리 기호). 번호 오용 제거.

순서가 의미 있으면 <ol>로(CP-248). 의미에 맞는 태그 사용.

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

역할	책임
콘텐츠/퍼블리셔	항목 관계 판단(동등/순서)·목록 유형 선택
개발	<ul>/<li> 시맨틱 마크업

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 순서·우선순위 없는 동등한 항목이 순서 없는 목록(<ul>) 인가요?

□ 동등한 항목에 번호를 잘못 쓰지 않았나요?

□ <ul>/<li>로 마크업되어 스크린 리더에 ’목록’으로 전달되나요?

❓ FAQ

Q1. 점이냐 번호냐는 디자인 차이 아닌가요? 아닙니다. 점(<ul>)은 ‘동등·무순서’, 번호(<ol>)는 ‘순서 있음’ 이라는 의미를 표현합니다. Q2. 동등한 항목에 번호를 쓰면요? 사용자가 잘못된 순서·우선순위를 읽습니다. 동등하면 글머리 기호를 씁니다. Q3. 순서가 의미 있는 항목은요? 순서 있는 목록(<ol>)을 씁니다(CP-248).

6. 마무리

CP-247의 메시지:

순서가 없으면 점으로 — 동등한 항목은 순서 없는 목록(<ul>)을 쓴다.

목록 유형은 항목 간 관계의 의미를 표현합니다. 순서·우선순위 없이 동등한 항목은 순서 없는 목록(글머리 기호)으로 써야, 번호가 주는 잘못된 순서 인식을 막고 시각·시맨틱으로 ’동등함’을 전하죠. 다음 편은 순서 있는 목록입니다.

다음 편 예고 ▶ 「368. (CP-248) 모든 항목에 순서를 지정할 수 있거나 순위를 매기는 것이 가능하다면 순서 있는 목록을 사용하고 있다.」

ViewCheck는 동등한 항목이 순서 없는 목록으로 마크업되는지를 진단합니다.

📚 참고 출처

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

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

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