이 단계가 무엇인지 한눈에

KRDS CP-319 — 단계 레이블은 해당 프로세스에 대한 간결하고 명확한 내용으로 제공하고 있다.

0. 들어가며 — 어디까지 왔고 무엇을 하는지

이번 439편부터 단계 표시기(Step indicator) 그룹입니다. 첫 규칙은 단계 레이블이 프로세스에 대해 간결하고 명확하게 제공되라는 규칙입니다.

단계 표시기는 — 여러 단계로 이뤄진 절차(회원가입 1·2·3단계, 민원 신청 절차 등)의 진행 상황을 보여주는 컴포넌트 입니다. 각 단계에 붙는 레이블이 — ‘이 단계가 무엇인지’ 간결·명확하게 알려야, 사용자가 전체 흐름과 현재 위치를 파악하죠. CP-319는 단계 레이블의 간결성·명확성을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 단계 레이블 간결·명확

CP-319 (컴포넌트 > 단계 표시기) “단계 레이블은 해당 프로세스에 대한 간결하고 명확한 내용으로 제공하고 있다.”

각 단계의 레이블을, 그 단계가 무엇인지 짧으면서도 분명하게 전달하는 내용으로 제공하라는 뜻입니다.

정리: 단계 레이블은 각 단계를 간결하고 명확하게 전달하라. 이게 CP-319입니다.

2. 왜 간결하고 명확한 단계 레이블인가

단계 표시기(Step indicator)는 — 여러 단계로 이뤄진 절차의 진행을 보여줍니다(예: ‘약관 동의 → 정보 입력 → 확인 → 완료’). 사용자가 — ’전체 절차가 어떻게 되고, 지금 어느 단계이며, 각 단계가 무엇인지’를 파악하게 하는 게 목적 이죠. 그러려면 각 단계 레이블이 ①간결하고 ②명확해야 합니다.

① 간결성. 단계 레이블은 — 짧아야 합니다.

공간 제약 단계 표시기는 여러 단계를 가로(또는 세로)로 나란히 보여줍니다. 각 레이블이 길면 단계들이 자리를 너무 차지하거나, 좁은 화면(모바일)에서 겹치고 줄바꿈되죠. 단계가 5개인데 각 레이블이 길면 한 줄에 안 들어갑니다.

빠른 파악 — 단계 표시기의 목적은 ’전체 흐름을 한눈에’입니다. 레이블이 길면 — 각 단계를 읽느라 전체 흐름 파악이 느려지죠. 짧을수록 흐름이 한눈에 들어옵니다.

② 명확성. 짧되 — 그 단계가 무엇인지 분명해야 합니다.

모호한 레이블의 문제 레이블이 애매하면(예: ‘단계 1’, ‘진행’, ‘입력’) 사용자가 그 단계에서 무엇을 하는지 모릅니다. ’단계 1, 2, 3’처럼 번호만 있으면 각 단계의 내용을 알 수 없죠.

명확한 레이블 — 각 단계가 무엇인지 정확히 전하는 내용. ‘약관 동의’, ‘정보 입력’, ‘결제’, ’완료’처럼 — 그 단계의 핵심 행동·내용을 분명히. 사용자가 레이블만 보고 ’이 단계에선 정보를 입력하는구나’를 알게요.

간결 + 명확의 균형. 핵심은 둘의 균형입니다 — 너무 줄여 모호하거나(번호만), 명확하려고 길어지면 안 되죠. 짧은 명사구로 각 단계의 핵심을 담습니다. ‘본인 인증 절차를 진행합니다’ → ‘본인 인증’.

전체 프로세스 맥락. 원문이 ’해당 프로세스에 대한’이라 한 것처럼 — 각 단계 레이블이 모이면 전체 절차의 흐름이 보여야 합니다. ’동의 → 입력 → 확인 → 완료’처럼 — 레이블들을 순서대로 읽으면 절차 전체가 이해되게요. 단계 간 레이블이 일관된 형식(모두 명사구 등)이면 흐름 파악이 더 쉽죠.

이 규칙은 단계 표시기의 ’내용 전달력’을 담당합니다 — 각 단계 레이블을 간결·명확하게 해(319), 사용자가 전체 흐름과 각 단계 내용을 한눈에 파악하게 하죠. 이후 단계 표시기 규칙들(전개 방향·개수·현재 단계·탐색 모델·건너뛰기· 마크업·색·SR)이 이 위에 쌓입니다.

정리하면 — 단계 표시기는 전체 흐름과 각 단계 내용을 한눈에 파악하게 하는 컴포넌트이므로, 단계 레이블을 짧으면서도 그 단계가 무엇인지 분명한 내용으로 간결·명확하게 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

간결성 — 단계 레이블이 짧아 전체 흐름이 한눈에 들어오는가(모바일 겹침 없음).

명확성 — 각 레이블이 그 단계 내용을 분명히 전하는가(번호·모호함 배제).

흐름 일관 — 레이블들이 모여 전체 절차 흐름이 이해되고 형식이 일관되는가.

개선 방향

단계 레이블을 핵심 명사구로 간결화(‘본인 인증’, ‘정보 입력’).

번호만·모호한 레이블 지양. 단계 간 형식 일관화.

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

역할	책임
콘텐츠/UX	단계 레이블 용어 설계
퍼블리셔/개발	단계 레이블 적용

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

다단계 절차(가입·신청·결제)를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 단계 레이블이 짧아 전체 흐름이 한눈에 들어오나요(모바일 겹침 없음)?

□ 각 레이블이 그 단계 내용을 분명히 전하나요(번호·모호함 배제)?

□ 레이블들이 모여 전체 절차 흐름이 이해되나요?

❓ FAQ

Q1. ‘단계 1, 2, 3’처럼 번호만 쓰면 안 되나요?** 번호만으론 각 단계가 무엇인지 모릅니다. ’약관 동의’, ’정보 입력’처럼 내용을 명확히 해야 하죠. Q2. 단계 표시기가 뭔가요?** 여러 단계 절차(가입·신청)의 진행 상황을 보여주는 컴포넌트입니다. 전체 흐름과 현재 위치를 알리죠. Q3. 얼마나 짧아야 하나요? 핵심 명사구 정도로요. 모바일에서 겹치지 않고 한눈에 흐름이 보일 길이가 기준입니다.

6. 마무리

CP-319의 메시지:

이 단계가 무엇인지 한눈에 — 단계 레이블을 간결하고 명확하게.

단계 표시기는 전체 흐름과 각 단계 내용을 한눈에 파악하게 합니다. 레이블을 핵심 명사구로 간결·명확하게 해, 번호 만·모호함을 피하는 게 핵심이죠. 다음 편은 단계 전개 방향입니다.

다음 편 예고 ▶ 「440. (CP-320) 단계는 좌에서 우 또는 상에서 하의 순서로 논리적으로 전개될 수 있도록 구성 하고 있다.」

ViewCheck는 단계 레이블이 간결·명확하게 제공되는지를 진단합니다.

📚 참고 출처

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

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

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