단계별 안내엔 코치마크·따라하기

KRDS BP-030 — [코치마크/따라하기 패널] 작업을 완료하는 방법에 대한 단계별 안내가 필요한 복잡한 과업에 사용하고 있다.

0. 들어가며 — 도움 그룹의 마지막, 단계별 안내

이번 596편은 코치마크/따라하기 패널을 단계별 안내가 필요한 복잡한 과업에 사용하라는 규칙입니다. 도움 그룹 (BP-017~030)의 마지막이죠.

처음 쓰는 복잡한 기능·절차는 — ’이렇게 하세요’를 단계별로 이끌어줘야 하죠. 코치마크(새 기능 안내)·따라하기(단계 가이드)가 그 역할입니다. BP-030은 단계 안내 도움의 용도를 규정합니다. 코치마크(CP-366375)·따라하기(CP-349354)의 도움 패턴 정리이죠. 이번 편을 풀어냅니다.

1. 원문 — 단계별 안내에 코치마크/따라하기

BP-030 (기본 패턴 > 도움 [코치마크/따라하기 패널]) “[코치마크/따라하기 패널] 작업을 완료하는 방법에 대한 단계별 안내가 필요한 복잡한 과업에 사용하고 있다.”

코치마크/따라하기 패널을, 작업 완료 방법을 단계별로 안내해야 하는 복잡한 과업에 사용하라는 뜻입니다.

정리: 단계별 안내가 필요한 복잡한 과업엔 코치마크/따라하기를. 이게 BP-030입니다.

2. 왜 코치마크/따라하기를 단계 안내에 쓰나

도움 방식 선택 체계(BP-026~030)에서 코치마크·따라하기는 단계별로 이끄는 능동적 가이드입니다. 앞의 방식들 (인라인·툴팁·맥락적 도움말·도움 패널)이 사용자가 참고하는 도움이라면, 코치마크·따라하기는 사용자를 단계 별로 안내하죠. BP-030은 이를 단계별 안내가 필요한 복잡한 과업에 쓰라고 합니다.

코치마크·따라하기의 특성:

코치마크(CP-366~375) — 새 기능·UI를 처음 쓰는 사용자에게, 특정 요소를 강조(스포트라이트)하며 단계별로 안내 하는 온보딩 도구죠. ’이 버튼이 새 검색입니다 → 다음 → 이 메뉴는…’처럼요.

따라하기 패널(CP-349~354) — 사용자가 단계별 안내를 보며 실제 작업을 ‘따라 하도록’ 이끄는 가이드죠. ’1단계: ○○ 입력 → 2단계: △△ 선택…’처럼 단계 진행을요.

둘 다 — 단계별로 사용자를 이끄는 능동적 도움입니다.

코치마크/따라하기에 적합한 경우 — 단계별 안내가 필요한 복잡한 과업:

복잡한 절차 여러 단계로 순서대로 진행해야 하는 복잡한 과업(처음 쓰는 복잡한 신청, 새 기능 사용법). 사용자가 어디서 무엇을 어떤 순서로 해야 할지 모를 때, 단계별로 이끌어주죠.

처음 쓰는 기능 — 새로 도입된 기능·UI를 — 사용자가 처음 만났을 때, 코치마크로 ’여기를 보세요, 이렇게 쓰세요’를 안내합니다.

‘방법’ 안내 — 단순 ‘이게 무엇이다’(정보)가 아니라, ‘어떻게 하는가’(방법)를 단계별로 보여줘야 할 때요.

이런 — 단계별 방법 안내가 코치마크·따라하기의 영역이죠.

도움 방식 선택 체계 완성(BP-026~030):

인라인 텍스트(BP-026) — 필수 중요 정보(항상 보임).

툴팁(BP-027) — 짧은 추가 정보.

맥락적 도움말(BP-028) — 상태·상세 정보.

도움 패널(BP-029) — 많거나 복잡한 도움.

코치마크/따라하기(BP-030) — 단계별 방법 안내(능동적 이끌기).

앞 넷이 ’참고용’이라면, 코치마크/따라하기는 ’단계별 이끌기’로 — 가장 능동적이죠. 과업의 성격(정보 참고 vs 단계 안내)에 맞는 방식을 고릅니다.

규칙 준수. 코치마크·따라하기를 쓸 땐 — 그 컴포넌트 규칙을 따릅니다: 코치마크 요청 시 실행(CP-374, 강제 금지)· 4개 이하·15단계 이내(CP-369), 따라하기 중단 가능(CP-349) 등. 능동적 가이드라 — 사용자 통제권이 특히 중요하죠 (강제하지 않고, 중단·재실행 허용).

과하지 않게. 코치마크·따라하기는 — 정말 단계별 안내가 필요한 복잡한 과업에만 씁니다. 간단한 작업에 단계 가이드를 띄우면 — 방해되고 과하죠.

이 규칙은 도움 패턴의 ’단계 안내 도움 용도 정의’를 담당합니다 — 코치마크/따라하기를 단계별 안내가 필요한 복잡한 과업에 써(030), 사용자를 단계별로 이끌죠. 도움 방식 선택 체계의 가장 능동적 방식이며, 도움 그룹(BP-017~030)을 마무리합니다.

정리하면 — 코치마크·따라하기는 단계별로 이끄는 능동적 가이드이므로, 작업 완료 방법을 단계별로 안내해야 하는 복잡한 과업에 사용하고 단순 참고 정보는 다른 방식(인라인·툴팁·맥락적 도움말·도움 패널)으로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

단계 안내 용도 — 코치마크/따라하기가 단계별 방법 안내가 필요한 복잡한 과업에 쓰이는가.

과하지 않게 — 간단한 작업에 단계 가이드를 과하게 띄우지 않는가.

통제권 규칙 — 요청 시 실행·중단 가능 등 규칙(CP-349·374)을 따르는가.

개선 방향

단계별 방법 안내가 필요한 복잡한 과업·새 기능에 코치마크/따라하기. 단순 참고는 다른 방식.

강제 금지·중단 가능·개수 제한 등 규칙 준수(CP-349·369·374). 사용자 통제권.

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

역할	책임
기획/UX	도움 방식 선택(단계 안내 용도)
퍼블리셔/개발	코치마크/따라하기 구현

기관 유형	BP-030 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (복잡한 과업 온보딩 시)

복잡한 과업·새 기능 온보딩이 필요한 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 코치마크/따라하기가 단계별 방법 안내가 필요한 복잡한 과업에 쓰이나요?

□ 간단한 작업에 단계 가이드를 과하게 띄우지 않나요?

□ 요청 시 실행·중단 가능 등 규칙을 따르나요?

❓ FAQ

Q1. 코치마크와 따라하기 차이가 뭔가요? 코치마크는 새 기능을 강조하며 단계 안내(온보딩), 따라하기는 단계별로 실제 작업을 따라 하게 이끄는 가이드입니다. 둘 다 단계 안내죠. Q2. 다른 도움 방식과 뭐가 다른가요? 인라인·툴팁·도움 패널은 ‘참고용’, 코치마크/따라하기는 ‘단계별 이끌기’ 입니다. 가장 능동적이죠. Q3. 언제 쓰나요? 단계별 방법 안내가 필요한 복잡한 과업·새 기능에요. 단순 작업엔 과하니 다른 방식으로요.

6. 마무리

BP-030의 메시지:

단계별 안내엔 코치마크·따라하기 — 단계별 방법 안내가 필요한 복잡한 과업에 사용하라.

코치마크·따라하기는 단계별로 이끄는 능동적 가이드입니다. 단계별 방법 안내가 필요한 복잡한 과업에 쓰고 단순 참고는 다른 방식으로 주는 게 핵심이죠. 이로써 도움 그룹(BP-017~030)이 마무리됩니다. 다음 편부터는 ‘동의’ 패턴입니다.

다음 편 예고 ▶ 「597. (BP-031) [동의] 동의 패턴의 첫 규칙부터 시작합니다.」

ViewCheck는 코치마크/따라하기가 단계 안내에 적절히 사용되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 도움 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_02.html

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

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