항목마다 같은 순서로 정보를

KRDS CP-147 — 항목의 콘텐츠에는 모든 정보를 일관된 분류 체계와 순서로 제공하고 있다.

0. 들어가며 — ‘구조화’ 목록의 핵심

이번 267편은 항목 콘텐츠의 모든 정보를 일관된 분류 체계와 순서로 제공하라는 규칙입니다.

‘구조화 목록’이라는 이름의 핵심이 바로 이 규칙입니다. 각 항목이 같은 정보를 같은 순서·같은 분류로 담아야 — 사용자가 ’제목은 위, 날짜는 오른쪽, 상태는 그 옆’ 식으로 한 항목에서 익힌 구조를 모든 항목에 적용해 빠르게 훑죠. 항목마다 정보 배치가 제멋대로면 매번 새로 읽어야 합니다. CP-147은 이 일관 구조를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 일관된 분류 체계·순서

CP-147 (컴포넌트 > 구조화 목록) “항목의 콘텐츠에는 모든 정보를 일관된 분류 체계와 순서로 제공하고 있다.”

구조화 목록의 각 항목이 담는 정보(제목·날짜·작성자·상태·분류 등)를, 모든 항목에서 같은 분류 체계와 같은 순서·배치로 제공해 일관성을 유지하라는 뜻입니다.

정리: 모든 항목이 같은 정보를 같은 분류·순서로 담게 하라. 이게 CP-147입니다.

2. 왜 일관된 분류와 순서여야 하나

구조화 목록은 같은 형식의 항목들을 반복 나열하는 목록입니다. 사용자는 이 목록을 패턴으로 훑죠 한 항목의 구조를 파악하면, 나머지 항목도 같은 구조라고 가정하고 빠르게 스캔합니다. 예를 들어 게시판 목록에서 ‘제목 작성자 날짜 조회수’ 순서를 한 번 익히면, 모든 행에서 같은 위치의 정보를 즉시 찾죠. 이 패턴 인식이 목록을 효율적으로 읽게 하는 핵심입니다.

이 효율은 일관성에 전적으로 의존합니다. 항목마다 정보 배치가 다르면 패턴이 깨지죠:

① 분류 체계 일관성. 항목들이 담는 정보의 ‘종류’가 같아야 합니다 — 어떤 항목은 작성자가 있는데 어떤 항목은 없거나, 어떤 항목은 ’상태’를 표시하는데 어떤 항목은 안 하면, 사용자는 ’왜 이 항목만 다르지?’ 하고 혼란스럽 습니다. 같은 유형 항목은 같은 정보 필드를 갖춰야 하죠(빈 값이라도 자리는 일관되게).

② 순서·배치 일관성. 정보를 보여주는 순서와 위치도 같아야 합니다 모든 항목에서 제목이 맨 위(또는 맨 왼쪽), 날짜가 오른쪽, 상태가 그 옆처럼 고정돼야 하죠. 항목 A는 ‘제목 날짜’, 항목 B는 ‘날짜 제목’ 순이면 사용자는 매번 어디가 제목이고 날짜인지 다시 확인해야 합니다. 일관된 순서면 시선이 같은 위치를 반복해 빠르게 스캔하죠.

③ 비교 용이성. 목록의 중요한 기능은 ’항목 간 비교’입니다 — 여러 자료의 날짜를 비교하거나, 여러 민원의 상태를 훑거나요. 정보가 일관된 위치에 있으면 같은 종류 정보가 세로로 정렬돼(특히 표 형태), 사용자가 열을 따라 빠르게 비교합니다. 배치가 제각각이면 비교가 불가능하죠.

④ 접근성 — 스크린 리더 일관성. 일관된 구조는 스크린 리더 사용자에게도 중요합니다. 항목들이 같은 순서로 정보를 담으면, 스크린 리더가 항목마다 같은 순서로 낭독해 사용자가 패턴을 익히죠 — “제목, 날짜, 상태”가 반복 되면 비시각 사용자도 구조를 예측합니다. 이를 위해 항목을 시맨틱하게(표는 <table>+<th>, 목록은 <ul>/ <dl> 등) 마크업하면 구조가 보조기술에도 명확히 전달되죠.

그래서 CP-147은 — 모든 항목이 같은 정보를 같은 분류·순서로 담는 ‘구조화’ 를 지키라고 합니다. 이는 구조화 목록의 정체성 그 자체입니다. 구현은 보통 항목 템플릿(공통 컴포넌트)을 정의해 모든 항목에 같은 필드·순서를 강제하는 방식이죠 — 데이터만 바뀌고 구조는 고정됩니다. 도구 막대 일관성(CP-144), 행동 버튼 일관성(CP-146)과 함께 ’예측 가능한 목록’을 완성합니다.

3. 점검 / 개선

무엇을 점검하나

분류 일관성 — 같은 유형 항목들이 같은 정보 필드를 갖는가.

순서·배치 일관성 — 모든 항목에서 정보 순서·위치가 동일한가.

시맨틱 구조 — 항목이 시맨틱하게 마크업돼 스크린 리더에 구조가 전달되는가.

개선 방향

항목 공통 템플릿으로 필드·순서 고정(데이터만 가변).

표 형태는 <table>+<th>, 목록은 <ul>/<dl>로 시맨틱 마크업.

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

역할	책임
기획/IA	항목 정보 분류 체계·순서 표준 정의
퍼블리셔/개발	공통 템플릿·시맨틱 마크업 구현

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

게시판·자료실·내역 등 반복 항목 목록을 가진 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 같은 유형 항목들이 같은 정보 필드를 갖나요?

□ 모든 항목에서 정보 순서·위치가 동일한가요?

□ 항목이 시맨틱하게 마크업돼 구조가 스크린 리더에 전달되나요?

❓ FAQ

Q1. 항목마다 정보량이 다르면요? 정보 ’종류’와 ’순서’는 일관되게 유지하되, 값이 없으면 빈 자리로 둬 위치는 고정합니다. Q2. 왜 순서까지 같아야 하나요? 사용자가 패턴으로 빠르게 훑고 항목 간 비교를 하려면 정보가 일관된 위치에 있어야 합니다. Q3. 어떻게 일관성을 보장하나요? 항목 공통 템플릿을 정의해 모든 항목에 같은 필드·순서를 강제합니다. 데이터만 바뀌죠.

6. 마무리

CP-147의 메시지:

항목마다 같은 순서로 정보를 — 일관된 분류 체계와 순서가 ’구조화’의 핵심.

구조화 목록의 가치는 패턴 인식에 있습니다. 모든 항목이 같은 정보를 같은 분류·순서로 담아야 사용자가 한 번 익힌 구조로 전체를 빠르게 훑고 비교하죠. 공통 템플릿과 시맨틱 마크업으로 일관성을 보장합니다. 다음 편부터는 구조화 목록의 키보드 접근성 — 모든 기능의 키보드 실행입니다.

다음 편 예고 ▶ 「268. (CP-148) 제공되는 모든 기능을 키보드로 실행할 수 있도록 구현하고 있다.」

ViewCheck는 구조화 목록 항목이 일관된 분류 체계·순서로 정보를 제공하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 구조화 목록(Structured list) 가이드 — https://www.krds.go.kr/html/site/component/component_12.html

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

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