도구는 늘 같은 자리·같은 순서

KRDS CP-144 — 도구 막대를 구성하는 사용자 인터페이스는 모든 화면에서 일관된 위치에 동일한 순서로 배치하고 있다.

0. 들어가며 — 구조화 목록 그룹의 첫 규칙

이번 264편부터 구조화 목록(Structured list) 그룹(CP-144~150, 7개)으로 들어갑니다. 첫 규칙은 도구 막대를 구성하는 UI를 모든 화면에서 일관된 위치·동일한 순서로 배치하라는 내용이죠.

먼저 ’구조화 목록’을 짚겠습니다. 구조화 목록은 여러 항목을 일정한 구조(분류·필드·도구)로 나열하는 목록 입니다 — 게시판 목록, 자료실, 신청 내역처럼 각 항목이 같은 형식(제목·날짜·상태·버튼 등)을 가진 목록이죠. 이 목록 위/주변에는 정렬·필터·검색 같은 ’도구 막대(toolbar)’가 붙습니다. CP-144는 그 도구 막대의 배치 일관성을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 도구 막대 일관 위치·동일 순서

CP-144 (컴포넌트 > 구조화 목록) “도구 막대를 구성하는 사용자 인터페이스는 모든 화면에서 일관된 위치에 동일한 순서로 배치하고 있다.”

구조화 목록의 도구 막대(정렬·필터·검색·보기 전환 등 컨트롤 묶음)를, 모든 화면·목록에서 같은 위치에 같은 순서로 배치해 일관성을 유지하라는 뜻입니다.

정리: 도구 막대 UI는 모든 화면에서 같은 위치·같은 순서로 배치하라. 이게 CP-144입니다.

2. 왜 도구 막대를 일관 배치하나

도구 막대는 목록을 다루는 컨트롤 묶음입니다 — 정렬 기준 바꾸기, 필터 걸기, 검색하기, 목록/카드 보기 전환, 개수 선택(CP-120) 등이죠. 사용자는 이 도구들을 자주 씁니다. 그래서 예측 가능한 위치·순서가 중요합니다 (브레드크럼 위치 CP-081, 페이지네이션 순서 CP-132에서 반복된 원리).

① 일관된 위치 — 찾지 않아도 된다. 사용자가 ‘정렬을 바꾸자’ 생각했을 때, 정렬 컨트롤이 어디 있는지 이미 알고 있어야 바로 누르죠. 도구 막대가 어떤 목록에선 상단, 어떤 목록에선 측면, 어떤 목록에선 하단에 있으면 — 사용자는 매번 도구를 찾아 헤맵니다. 위치를 고정하면(예: 목록 상단 우측) 한 번 학습한 패턴이 모든 목록에서 통하죠.

② 동일한 순서 손이 기억한다. 도구 막대 안 컨트롤들의 순서도 일관돼야 합니다 예를 들어 ‘검색 필터 정렬 보기전환’ 순서가 모든 목록에서 같으면, 사용자는 ‘정렬은 오른쪽에서 두 번째’ 식으로 위치를 손이 기억하죠. 순서가 목록마다 다르면 매번 어느 게 정렬이고 필터인지 확인해야 합니다.

③ 학습 전이. 공공 사이트는 게시판·자료실·민원내역 등 여러 구조화 목록을 갖습니다. 도구 막대가 일관되면, 사용자가 한 목록에서 익힌 사용법을 다른 모든 목록에 그대로 적용하죠. 매 목록을 새로 배울 필요가 없습니다. 이는 사이트 전체의 학습 부담을 크게 줄입니다.

④ 접근성 초점 순서 일관. 일관된 시각 순서는 키보드 초점 순서(CP-148·149에서 다룸)와도 맞물려야 합니다. 도구들이 시각적으로 ’검색 필터 정렬’이면 Tab 초점도 그 순서로 흘러야 하죠. 시각 순서와 초점 순서가 일관되면 키보드·스크린 리더 사용자도 예측 가능하게 도구를 씁니다.

그래서 CP-144는 도구 막대를 공통 컴포넌트로 만들어 모든 구조화 목록에 같은 위치·순서로 적용하라는 뜻을 담습니다. 목록마다 도구 막대를 따로 만들면 일관성이 깨지기 쉽죠. 한 번 정의한 도구 막대 배치를 사이트 전역 에서 재사용하면, 일관성이 자동으로 보장됩니다.

이 규칙은 구조화 목록 그룹의 출발점입니다. 도구 막대(목록을 다루는 컨트롤)의 배치를 정한 뒤, 이어지는 규칙 들이 항목의 행동 버튼(CP-145·146), 콘텐츠 구조(CP-147), 키보드 접근성(CP-148~150)을 다루죠.

3. 점검 / 개선

무엇을 점검하나

일관 위치 — 도구 막대가 모든 목록에서 같은 위치에 있는가.

동일 순서 — 도구 막대 안 컨트롤 순서가 모든 목록에서 같은가.

초점 순서 일치 — 시각 순서와 키보드 초점 순서가 일치하는가.

개선 방향

도구 막대를 공통 컴포넌트화해 위치·순서를 사이트 전역 통일.

시각·DOM·초점 순서를 일치시킴(CP-148 연계).

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

역할	책임
디자이너	도구 막대 위치·순서 표준 정의
퍼블리셔/개발	공통 컴포넌트로 일관 배치 구현

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

여러 목록(게시판·자료실 등)에 도구 막대를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도구 막대가 모든 목록에서 같은 위치에 있나요?

□ 도구 막대 안 컨트롤 순서가 모든 목록에서 같은가요?

□ 시각 순서와 키보드 초점 순서가 일치하나요?

❓ FAQ

Q1. 도구 막대가 뭔가요? 목록을 다루는 컨트롤 묶음입니다 — 정렬·필터·검색·보기 전환·개수 선택 등. Q2. 목록마다 도구가 다른데 어떻게 일관하나요? 공통 도구는 같은 위치·순서로, 목록 특유의 도구만 추가 하는 식으로 기본 골격을 통일합니다. Q3. 왜 순서까지 같아야 하나요? 사용자가 ‘정렬은 여기쯤’ 식으로 위치를 손이 기억하게 해 빠르게 쓰도록 합니다.

6. 마무리

CP-144의 메시지:

도구는 늘 같은 자리·같은 순서 — 도구 막대를 모든 화면에서 일관 배치하라.

도구 막대는 자주 쓰는 컨트롤 묶음이라 예측 가능해야 합니다. 모든 목록에서 같은 위치·같은 순서로 두면 사용자가 찾지 않고 바로 쓰고, 한 목록에서 익힌 법을 다른 목록에 그대로 적용하죠. 공통 컴포넌트화가 일관성을 보장합니다. 다음 편은 항목의 콜투액션(CTA)입니다.

다음 편 예고 ▶ 「265. (CP-145) 콜투액션(Call to Action)은 항목과 관련된 가장 중요한 행동을 유도하기 위해 사용되고 있다.」

ViewCheck는 구조화 목록 도구 막대가 일관된 위치·순서로 배치되는지를 진단합니다.

📚 참고 출처

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

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

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