단계마다 같은 자리, 같은 이름

KRDS CP-372 — 모든 단계에서 액션 버튼을 일관성 있는 순서로 배치하고, 적절한 강조 수준과 동일한 레이블을 사용하고 있다.

0. 들어가며 — 단계마다 ‘다음’ 버튼이 옮겨다니면

이번 492편은 모든 단계에서 액션 버튼을 일관된 순서로 배치하고, 적절한 강조 수준과 동일한 레이블을 사용하라는 규칙입니다.

코치마크는 — 각 단계에 ‘다음’, ‘이전’, ‘건너뛰기’, ‘완료’ 같은 액션 버튼이 있습니다. 이 버튼들이 — 단계마다 위치·이름·강조가 바뀌면, 사용자는 매번 새로 찾아야 하죠. CP-372는 액션 버튼의 일관성을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 일관 순서 + 강조 + 동일 레이블

CP-372 (컴포넌트 > 코치마크) “모든 단계에서 액션 버튼을 일관성 있는 순서로 배치하고, 적절한 강조 수준과 동일한 레이블을 사용하고 있다.”

코치마크의 모든 단계에서 액션 버튼(다음·이전·건너뛰기 등)을 일관된 순서·위치로 두고, 강조 수준과 레이블을 동일 하게 유지하라는 뜻입니다.

정리: 액션 버튼을 단계마다 같은 순서·강조·레이블로 유지하라. 이게 CP-372입니다.

2. 왜 액션 버튼 일관성인가

코치마크는 여러 단계로 진행되며, 각 단계 팝오버에 액션 버튼이 있습니다: ‘다음’(다음 단계로), ‘이전’(앞 단계로), ‘건너뛰기’(온보딩 종료), ‘완료’(마지막 단계) 등이죠. 사용자는 이 버튼들로 단계를 넘기며 온보딩을 진행합니다. 그래서 이 버튼들이 모든 단계에서 일관돼야 하죠. CP-372는 세 가지 일관성을 요구합니다.

① 일관성 있는 순서·배치. 액션 버튼의 위치·순서를 — 모든 단계에서 동일하게 합니다.

위치 고정 ‘다음’ 버튼이 단계 1에선 오른쪽, 단계 2에선 왼쪽으로 옮겨다니면, 사용자는 매 단계 버튼을 새로 찾아야 하죠. 모든 단계에서 같은 위치(예: ‘이전’ 왼쪽, ‘다음’ 오른쪽)에 둡니다. 한 번 익히면 매 단계 같은 자리를 누르면 되죠.

순서 일관 — 버튼들의 배열 순서(‘건너뛰기 … 이전 다음’ 등)를 모든 단계에서 동일하게 유지합니다.

② 적절한 강조 수준. 버튼의 시각적 강조를 — 중요도에 맞게, 일관되게 합니다.

주 액션 강조 — 가장 핵심 액션(‘다음’ 또는 ‘완료’)은 — primary 버튼(채운 색, 강조)으로. 사용자가 다음으로 진행할 주 동작을 분명히 알게요.

보조 액션 약하게 — ‘이전’, ’건너뛰기’는 — secondary/text 버튼(약한 강조)으로. 주 액션과 구별되게요.

일관 적용 — 이 강조 체계를 — 모든 단계에서 동일하게. 단계마다 강조가 바뀌면 혼란스럽죠. 버튼 강조 위계 (버튼 CP-266~277 정신)를 코치마크에 일관 적용합니다.

③ 동일한 레이블. 같은 동작의 버튼은 — 모든 단계에서 같은 레이블을 씁니다.

레이블 통일 — ‘다음’을 — 어떤 단계는 ’다음’, 어떤 단계는 ‘계속’, ‘넘어가기’로 다르게 쓰면 사용자가 헷갈 리죠. 모든 단계에서 ’다음’으로 통일합니다. ’건너뛰기’·’이전’도 마찬가지요.

예외: 마지막 단계 — 마지막 단계의 주 버튼은 — ‘다음’ 대신 ‘완료’/’시작하기’가 자연스럽죠. 이건 의미가 달라 허용됩니다(진행 vs 종료). 단, 같은 의미의 버튼은 같은 레이블이어야 합니다.

일관성의 효과. 액션 버튼이 일관되면 — 사용자는 첫 단계에서 ’다음은 여기, 건너뛰기는 저기’를 익혀 — 모든 단계에 그대로 적용합니다. 매 단계 버튼을 새로 찾는 부담 없이, 안내 내용에 집중하죠. 토글 레이아웃 일관(CP-315), 캐러셀 컨트롤 일관 위치(CP-215)의 코치마크 적용입니다.

이 규칙은 코치마크의 ’조작 일관성’을 담당합니다 — 액션 버튼의 순서·강조·레이블을 모든 단계에서 통일해(372), 사용자가 단계를 일관되게 넘기며 온보딩에 집중하게 하죠.

정리하면 — 액션 버튼이 단계마다 위치·강조·레이블이 바뀌면 사용자가 매번 새로 찾아 혼란스러우므로, 모든 단계에서 일관된 순서·적절한 강조·동일한 레이블로 액션 버튼을 유지해야 합니다.

3. 점검 / 개선

무엇을 점검하나

순서·위치 일관 — 액션 버튼이 모든 단계에서 같은 위치·순서인가.

강조 일관 — 주 액션(다음/완료)은 강조, 보조(이전/건너뛰기)는 약하게 일관되는가.

레이블 동일 — 같은 동작 버튼이 모든 단계에서 같은 레이블인가.

개선 방향

액션 버튼 위치·순서를 모든 단계에서 고정. 주/보조 강조 위계 일관.

같은 동작 버튼 레이블 통일(마지막 단계 ’완료’만 예외).

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

역할	책임
디자이너	액션 버튼 배치·강조·레이블 표준 정의
퍼블리셔/개발	일관 버튼 구현

기관 유형	CP-372 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (코치마크 사용 시)

코치마크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 액션 버튼이 모든 단계에서 같은 위치·순서인가요?

□ 주 액션(다음/완료)은 강조, 보조(이전/건너뛰기)는 약하게 일관되나요?

□ 같은 동작 버튼이 모든 단계에서 같은 레이블인가요?

❓ FAQ

Q1. ‘다음’ 버튼 위치를 단계마다 바꾸면 안 되나요? 안 됩니다. 매 단계 새로 찾아야 해 혼란스럽습니다. 모든 단계에서 같은 위치에 두죠. Q2. 마지막 단계는 ‘다음’이 아니라 ’완료’인데요?** 의미가 다르니(진행 vs 종료) 허용됩니다. 단, 같은 의미(’다음’) 는 모든 단계에서 같은 레이블이어야 하죠. Q3. 강조는 어떻게 하나요?** 주 액션(다음/완료)은 primary(강조), 보조(이전/건너뛰기)는 약한 버튼으로 일관되게 구별합니다.

6. 마무리

CP-372의 메시지:

단계마다 같은 자리, 같은 이름 — 액션 버튼을 일관 순서·강조·레이블로.

액션 버튼이 단계마다 바뀌면 사용자가 매번 새로 찾아 혼란스럽습니다. 모든 단계에서 일관된 순서·강조·레이블로 유지해 온보딩에 집중하게 하는 게 핵심이죠. 다음 편은 스포트라이트 명도 대비입니다.

다음 편 예고 ▶ 「493. (CP-373) 스포트라이트와 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.」

ViewCheck는 코치마크 액션 버튼의 순서·강조·레이블 일관성을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 코치마크(Coach mark) 가이드 — https://www.krds.go.kr/html/site/component/component_36.html

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

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