지금 여기

KRDS CP-322 — 현재 단계를 명확하게 인지할 수 있도록 표현하고 있다.

0. 들어가며 — 내가 지금 몇 단계인지

이번 442편은 현재 단계를 명확하게 인지할 수 있도록 표현하라는 규칙입니다.

단계 표시기의 핵심 정보는 — ’지금 내가 어느 단계인가’입니다. 전체 단계가 보여도 — 현재 단계가 다른 단계(완료·예정) 와 구별되지 않으면, 사용자는 자기 위치를 모르죠. CP-322는 현재 단계를 명확히 표현하라고 규정합니다. 페이지네이션 현재 페이지 강조(CP-116), 탭바 현재 위치(CP-145)의 단계 표시기 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 현재 단계 명확 인지

CP-322 (컴포넌트 > 단계 표시기) “현재 단계를 명확하게 인지할 수 있도록 표현하고 있다.”

사용자가 전체 단계 중 자신이 현재 어느 단계에 있는지를 시각적으로 명확히 인지할 수 있게 표현하라는 뜻입니다.

정리: 현재 단계를 명확히 구별되게 표현하라. 이게 CP-322입니다.

2. 왜 현재 단계 표현인가

단계 표시기에서 — 단계는 보통 세 가지 상태를 가집니다: ①완료한 단계(지나온), ②현재 단계(지금), ③예정 단계(아직). 사용자에게 가장 중요한 정보는 — ’내가 지금 어느 단계인가’죠. 이걸 명확히 알아야:

진행 위치 파악 — ’전체 4단계 중 2번째에 있구나’를 알아, 얼마나 왔고 얼마나 남았는지 가늠합니다.

현재 할 일 집중 — 지금 단계가 무엇인지 알아야, 그 단계의 작업에 집중하죠.

현재 단계가 구별 안 될 때:

위치 상실 — 모든 단계가 비슷하게 보이면 — 사용자는 ‘내가 지금 몇 단계인지’ 모릅니다. 전체 흐름은 보여도 자기 위치를 잃죠.

완료/예정 혼동 — 현재 단계가 완료 단계나 예정 단계와 구별 안 되면 — ‘이걸 했나? 해야 하나?’ 헷갈립니다.

그래서 CP-322는 — 현재 단계를 명확히 구별되게 표현하라고 합니다:

시각적 강조 — 현재 단계를 — 색·크기·굵기·테두리 등으로 다른 단계보다 두드러지게. 예: 현재 단계 원을 진한 색으로 채우고, 레이블을 굵게요.

세 상태 구별 — 완료(체크 표시·채운 색)·현재(강조·테두리)·예정(흐린 색·빈 원)을 — 서로 다른 시각으로 구별합니다. 특히 현재 단계가 가장 두드러지게요.

여러 단서 결합 — 색만이 아니라(CP-326의 색만 구분 금지), 형태·아이콘·굵기 등 여러 단서로 현재 단계를 표현하면 더 명확하죠.

색만으로 구분 금지(CP-326 연계). 현재 단계를 — 색만으로 표시하면(현재만 파란색) 색맹 사용자가 못 구별합니다. 색에 더해 — 형태(채움·테두리), 아이콘, 굵기, 위치 표시 등으로도 현재를 구별해야 하죠(CP-326). 즉 명확한 현재 표현(322)은 색 무관 구분(326)과 함께 갑니다.

스크린 리더에도(CP-327 연계). 시각적 현재 표현(322)에 더해 — 스크린 리더 사용자도 현재 단계를 알아야 하죠. 그건 CP-327(aria-current="step" 등)에서 다룹니다. 즉 현재 단계를 시각(322)·색무관(326)·스크린리더(327) 모두에서 전합니다.

이 규칙은 단계 표시기의 ’현재 위치 인지’를 담당합니다 — 현재 단계를 명확히 강조해(322), 사용자가 자기 진행 위치를 즉시 알게 하죠. 단계 표시기의 가장 핵심적인 정보 전달입니다.

정리하면 — 현재 단계가 다른 단계와 구별 안 되면 사용자가 자기 위치를 모르므로, 색·형태·굵기 등 여러 단서로 현재 단계를 완료·예정 단계와 명확히 구별되게 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

현재 강조 — 현재 단계가 다른 단계보다 시각적으로 두드러지는가.

세 상태 구별 — 완료·현재·예정 단계가 서로 구별되는가.

여러 단서 — 색뿐 아니라 형태·아이콘·굵기로도 현재를 구별하는가(CP-326).

개선 방향

현재 단계를 색·크기·굵기·테두리로 강조. 완료(체크)·예정(흐림)과 구별.

색만이 아닌 형태·아이콘 단서 결합(CP-326). 스크린 리더 전달(CP-327).

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

역할	책임
디자이너	현재/완료/예정 단계 시각 구별 정의
퍼블리셔/개발	현재 단계 강조 구현

기관 유형	CP-322 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (단계 표시기 사용 시)

다단계 절차를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 단계가 다른 단계보다 시각적으로 두드러지나요?

□ 완료·현재·예정 단계가 서로 구별되나요?

□ 색뿐 아니라 형태·아이콘·굵기로도 현재를 구별하나요?

❓ FAQ

Q1. 현재 단계만 색을 바꾸면 되나요? 색은 좋지만 색만으론 색맹 사용자가 못 구별합니다. 형태·굵기·아이콘 등 여러 단서를 함께 써야 하죠(CP-326). Q2. 완료 단계는 어떻게 표시하나요? 보통 체크 표시·채운 색으로요. 현재(강조), 예정(흐림)과 구별되게 세 상태를 다르게 표현합니다. Q3. 스크린 리더에도 현재를 알려야 하나요? 네. 시각 표현(322)에 더해 aria-current="step"으로 스크린 리더에 전합니다(CP-327).

6. 마무리

CP-322의 메시지:

지금 여기 — 현재 단계를 완료·예정과 명확히 구별되게 표현하라.

현재 단계가 구별 안 되면 사용자가 자기 진행 위치를 잃습니다. 색·형태·굵기 등 여러 단서로 현재를 강조해 완료·예정과 구별하는 게 핵심이죠. 다음 편은 탐색 모델(순차/적응형)입니다.

다음 편 예고 ▶ 「443. (CP-323) 순차적 탐색 방식과 적응형 탐색 방식 중 과업의 성격에 적합한 탐색 모델을 제공하고 있다.」

ViewCheck는 현재 단계가 명확히 인지되게 표현됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 단계 표시기(Step indicator) 가이드 — https://www.krds.go.kr/html/site/component/component_31.html

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

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