예상한 대로 작동해야

KRDS CP-150 — 제공되는 모든 기능은 사용자가 예측 가능한 방식으로 작동되게 구현하고 있다.

0. 들어가며 — 구조화 목록 그룹의 마지막

이번 270편은 구조화 목록 그룹(CP-144~150, 7개)의 마지막 규칙입니다. 제공되는 모든 기능이 사용자가 예측 가능한 방식으로 작동하게 하라는 내용이죠.

사용자는 버튼·컨트롤을 누르기 전에 ‘이걸 누르면 이렇게 되겠지’ 하고 예상합니다. 그 예상대로 작동하면 안심하고 쓰지만, 예상과 다르게 동작하면(누르자마자 페이지가 바뀌거나, 입력만 했는데 자동 제출되거나) 당황하고 실수 하죠. CP-150은 모든 기능이 예측 가능하게 작동하게 하라고 규정합니다. 이번 편으로 구조화 목록 7개를 마무리 합니다.

1. 규칙 원문 — 예측 가능한 작동

CP-150 (컴포넌트 > 구조화 목록) “제공되는 모든 기능은 사용자가 예측 가능한 방식으로 작동되게 구현하고 있다.”

목록의 모든 기능을, 사용자가 예상하는 대로(관습적이고 일관된 방식으로) 작동하게 구현해, 의외의 동작으로 사용 자를 놀라게 하지 말라는 뜻입니다.

정리: 모든 기능을 사용자 예상대로 작동하게 하라. 이게 CP-150입니다.

2. 왜 예측 가능해야 하나

‘예측 가능성(predictability)’은 웹 접근성·사용성의 핵심 원칙입니다(WCAG의 ’Predictable’ 원칙, SC 3.2 계열). 사용자는 과거 경험과 관습을 바탕으로 ’UI가 어떻게 작동할지’를 예상하고 행동하죠. 그 예상이 맞으면 자신감 있게 쓰지만, 빗나가면 혼란과 불안, 실수가 생깁니다. 특히 인지 장애 사용자, 스크린 리더 사용자에게는 예측 불가능한 동작이 더 큰 장벽이 되죠.

예측 가능성을 깨는 흔한 패턴들:

① 맥락의 갑작스러운 변화(Change on Focus/Input). WCAG SC 3.2.1·3.2.2가 다루는 문제입니다. 요소에 초점이 가는 것만으로 페이지가 바뀌거나(focus 시 자동 이동), 입력하는 것만으로 폼이 자동 제출되거나 페이지가 새로고침되면 — 사용자는 자기가 한 적 없는 일이 일어나 당황하죠. 예를 들어 정렬 드롭다운에서 화살표로 옵션을 ’탐색’만 했는데(아직 선택 확정 전) 목록이 즉시 재정렬되면, 키보드 사용자는 의도치 않은 변화에 혼란스럽습니다. 기능은 사용자의 명시적 실행(클릭/Enter) 에 의해서만 작동해야지, 초점·탐색만으로 작동하면 안 됩니다.

② 일관성 없는 동작(Consistent Behavior). WCAG SC 3.2.3·3.2.4가 다룹니다. 같은 기능이 위치·맥락마다 다르게 동작하거나, 같은 아이콘·레이블이 다른 일을 하면 예측이 깨지죠. 구조화 목록에서 ‘삭제’ 버튼이 어떤 항목에선 즉시 삭제하고 어떤 항목에선 확인 창을 띄우면 — 사용자는 매번 결과를 예측 못 합니다. 같은 기능은 어디서든 같게 작동해야 하죠(CP-144·147의 일관성과 연결).

③ 관습 위반. 사용자가 학습한 일반 관습을 따라야 합니다 — 링크는 클릭하면 이동, 버튼은 동작 실행, 체크 박스는 토글 등. ‘취소’ 버튼이 실제로는 저장을 하거나, ‘X’ 닫기 버튼이 삭제를 하면 — 관습을 어겨 사용자를 배신하죠.

④ 결과의 명확성. 기능 실행 후 무슨 일이 일어났는지 명확해야 합니다 — 필터를 적용하면 ’필터됨’이 표시되고, 삭제하면 항목이 사라지고 알림이 뜨는 식으로요. 특히 위험한 동작(삭제 등)은 실행 전 확인을 받거나(예측 가능한 보호), 실행 후 되돌릴 수단(실행 취소)을 주는 것이 안전합니다.

그래서 CP-150은 목록의 모든 기능이 — 명시적 실행에만 반응하고, 일관되게 동작하며, 관습을 따르고, 결과가 명확하게 — 즉 사용자 예상대로 작동하게 하라는 것입니다. 이는 키보드 접근성 3종(CP-148 실행 가능, CP-149 초점 가시, CP-150 예측 작동)의 마지막 조각이자, 모든 사용자(키보드·마우스·보조기술)에게 공통으로 적용되는 원칙이죠. 닿고, 보이고, 예측대로 작동해야 비로소 기능이 ‘쓸 수 있는’ 것이 됩니다.

이로써 구조화 목록 7개 규칙(CP-144~150)이 완성됩니다 — 도구 막대 일관 배치(144), CTA(145), 필요 기능 제공 (146), 일관 구조(147), 그리고 키보드·예측 접근성(148~150)까지. 정보를 일관되게 보여주고, 필요한 행동을 예측 가능하게 제공하는 목록이죠.

3. 점검 / 개선

무엇을 점검하나

명시적 실행 — 초점·입력·탐색만으로 페이지 변화·자동 제출이 일어나지 않는가.

일관 동작 — 같은 기능이 위치·맥락과 무관하게 같게 작동하는가.

관습·결과 명확 — 관습을 따르고, 실행 결과가 명확하며, 위험 동작은 확인·취소가 있는가.

개선 방향

기능은 명시적 클릭/Enter에만 반응(focus·input 시 자동 변화 제거).

같은 기능 동작 통일. 위험 동작에 확인·실행 취소 제공.

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

역할	책임
기획/UX	예측 가능한 상호작용 패턴 정의
퍼블리셔/개발	명시적 실행·일관 동작·확인 구현

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 초점·입력·탐색만으로 페이지 변화·자동 제출이 일어나지 않나요?

□ 같은 기능이 위치·맥락과 무관하게 같게 작동하나요?

□ 관습을 따르고, 결과가 명확하며, 위험 동작은 확인·취소가 있나요?

❓ FAQ

Q1. 초점만 가도 작동하면 편하지 않나요? 사용자가 의도치 않은 변화에 당황합니다. 명시적 실행(클릭/Enter) 에만 반응해야 예측 가능합니다. Q2. 같은 기능을 맥락마다 다르게 하면 안 되나요? 예측이 깨져 혼란스럽습니다. 같은 기능은 어디서든 같게 작동해야 합니다. Q3. 삭제 같은 위험 동작은요? 실행 전 확인을 받거나 실행 취소를 제공해 예측 가능한 보호를 둡니다.

6. 마무리

CP-150의 메시지:

예상한 대로 작동해야 — 모든 기능을 예측 가능한 방식으로 구현하라.

사용자는 예상을 바탕으로 행동합니다. 기능이 명시적 실행에만 반응하고, 일관되게 동작하며, 관습을 따르고, 결과가 명확하면 — 사용자는 안심하고 쓰죠. 의외의 동작은 혼란과 실수를 부릅니다. 키보드 접근성 3종(CP-148·149·150)의 마지막으로, 구조화 목록 7개(CP-144~150)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 긴급 공지(Critical alerts) 로 넘어갑니다.

다음 편 예고 ▶ 「271. (CP-151) 긴급 공지 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 구조화 목록의 기능이 예측 가능한 방식으로 작동하는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 Predictable (SC 3.2) — https://www.w3.org/WAI/WCAG21/Understanding/predictable

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

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