여러 건은 표·목록으로 정리

KRDS SP-153 — 여러 건의 신청 내역이 있을 경우, 표나 목록으로 구조화하여 알기 쉽게 표현하고 있다.

0. 들어가며 — 신청 내역이 여러 건 뒤섞여 있으면

이번 827편은 여러 건의 신청 내역이 있을 경우, 표나 목록으로 구조화하여 알기 쉽게 표현하라는 규칙입니다.

신청 내역이 여러 건일 때 — 구조 없이 줄글로 나열하면, 사용자가 어느 게 어느 신청인지 못 알아보죠. SP-153은 표·목록 으로 구조화하라고 규정합니다. 구조화 목록·표(CP)의 신청 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 신청 내역 표·목록 구조화

SP-153 (서비스 패턴 > 신청 > 신청 결과 확인) “여러 건의 신청 내역이 있을 경우, 표나 목록으로 구조화하여 알기 쉽게 표현하고 있다.”

여러 신청 내역을 표·목록으로 구조화해 알기 쉽게 표현하라는 뜻입니다.

정리: 여러 신청 내역을 표·목록으로 구조화하라. 이게 SP-153입니다.

2. 왜 구조화인가

신청 이력(SP-152)이 여러 건이면, 이를 어떻게 보여주느냐가 중요합니다. 구조 없이 줄글로 나열 하면, 사용자가 어느 게 어느 신청인지 못 알아보죠. SP-153은 표·목록 구조화를 요구합니다.

구조화가 안 될 때의 문제:

알아보기 어려움 여러 신청 내역이, 구조 없이 평평하게 나열되면, 사용자는 각 건의 정보(서비스명· 날짜·상태)를 구분하기 어렵습니다. 어느 게 어느 신청인지 헷갈리죠.

비교·스캔 어려움 여러 건을 비교(어느 게 진행 중, 어느 게 완료)하려는데, 구조가 없으면 못 합니다.

그래서 SP-153은 — 표·목록 구조화를 요구합니다:

표 또는 목록 여러 신청 내역을, 표(table)나 목록(list)으로 구조화합니다. 각 행(건)에, 서비스명·신청 일·상태·결과 등 정보를 정렬된 열·항목으로요. 사용자가 각 건을 한눈에 구분·비교하게요.

표의 경우 컬럼(서비스명 / 신청일 / 상태 / 결과)을 두고, 각 신청을 행으로요. 정보가 정렬돼 비교하기 쉽죠. 표는 시맨틱(<table>/<th>)으로(BP-060)요.

목록의 경우 카드·리스트 형태로, 각 건의 핵심 정보를 일관되게요(구조화 목록 CP-058~064). 모바일 에선 표보다 카드 목록이 나을 수 있죠(반응형).

알기 쉽게 핵심 정보를, 간결하고 명확하게요(SP-105 간결 정보 정신). 상태는 배지(SP-103)로요.

구조화 목록·표(CP-058064·181189)의 신청 적용. 구조화 목록(CP-058064)·표(CP-181189) 컴포넌트를, 신청 내역에 적용한 게 SP-153입니다. 여러 건을, 시맨틱 표·목록으로 구조화해, 시각·스크린 리더 양쪽에 명확하게요 (BP-060 시맨틱).

여러 건 관리의 효율. 구조화는, 여러 신청을 관리하는 효율을 높입니다. 표·목록으로 정리되면, 사용자가 각 건을 빠르게 구분·비교·선택하죠. 정렬(SP-154)·일괄 선택(SP-156)과 함께, 여러 건을 효율적으로 다룹니다.

이 규칙은 신청(SP)의 ’내역 구조화’를 담당합니다 — 여러 신청 내역을 표·목록으로 구조화해(153), 사용자가 각 건을 알기 쉽게 구분·비교하게 하죠. SP-152(이력)·SP-154(정렬)와 함께 갑니다.

정리하면 — 여러 신청 내역을 구조 없이 나열하면 알아보기·비교가 어려우므로, 표나 목록으로 구조화(시맨틱·간결)해 각 건을 알기 쉽게 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

표·목록 구조화 — 여러 신청 내역이 표·목록으로 구조화되는가.

시맨틱·정보 — 표는 시맨틱(<table>/<th>)이고 핵심 정보가 정렬되는가(BP-060).

알기 쉬움 — 핵심 정보가 간결·명확하고 상태가 표시되는가(SP-103·105).

개선 방향

여러 내역을 표·목록으로 구조화(CP-058064·181189). 시맨틱(BP-060).

컬럼/카드 정렬. 핵심 정보 간결(SP-105). 상태 배지(SP-103). 반응형.

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

역할	책임
퍼블리셔/개발	표·목록 구조화 구현
기획/UX	내역 정보 구조 설계

기관 유형	SP-153 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (여러 신청 내역)

여러 건 신청 내역을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 여러 신청 내역이 표·목록으로 구조화되나요?

□ 표는 시맨틱(<table>/<th>)이고 핵심 정보가 정렬되나요(BP-060)?

□ 핵심 정보가 간결·명확하고 상태가 표시되나요(SP-103·105)?

❓ FAQ

Q1. 구조화가 왜 필요한가요? 여러 신청 내역이 구조 없이 평평하게 나열되면 어느 게 어느 신청인지 못 구분하고 비교도 어렵습니다. 표·목록으로 정리하면 한눈에 구분·비교하죠. Q2. 표와 목록 중 뭘 쓰나요? 표는 컬럼(서비스명·날짜·상태)으로 정렬돼 비교하기 쉽고, 목록(카드)은 모바일에 나을 수 있습니다. 반응형으로 적절히요. 표는 시맨틱(<table>/<th>)으로(BP-060). Q3. CP와 관련 있나요? 구조화 목록(CP-058064)·표(CP-181189) 컴포넌트를 신청 내역에 적용한 것입니다. 시맨틱 표· 목록으로 시각·스크린 리더 양쪽에 명확하게 하죠.

6. 마무리

SP-153의 메시지:

여러 건은 표·목록으로 정리 — 여러 신청 내역을 구조화하여 알기 쉽게 표현하라.

여러 신청 내역을 구조 없이 나열하면 알아보기·비교가 어렵습니다. 표·목록으로 구조화해 각 건을 알기 쉽게 표현하는 게 핵심이죠. 다음 편은 내역 정렬입니다.

다음 편 예고 ▶ 「828. (SP-154) 내역을 신청 일자, 중요도, 마감 기한 등의 기준으로 정렬하여 중요한 내용을 먼저 확인할 수 있게 제공하고 있다.」

ViewCheck는 여러 신청 내역이 표·목록으로 구조화되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 신청 가이드 — https://www.krds.go.kr/html/site/service/service_04.html

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

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