끝낼 때까지 끊기지 않게

KRDS CP-349 — 사용자가 중단하기 버튼을 누르기 전까지 콘텐츠가 변경되거나, 따라하기 프로세스가 중단되지 않게 하고 있다.

0. 들어가며 — 따라 하다가 끊기면

이번 469편부터 따라하기 패널(Tutorial panel) 그룹입니다. 첫 규칙은 사용자가 중단하기 버튼을 누르기 전까지 콘텐츠 변경·프로세스 중단이 일어나지 않게 하라는 규칙입니다.

따라하기 패널은 — 사용자가 단계별 안내를 보며 실제 작업을 ‘따라 하도록’ 이끄는 가이드입니다(서비스 사용법 투어, 단계별 작성 안내 등). 이 따라하기가 — 사용자 의도와 무관하게 중간에 끊기거나 내용이 바뀌면, 사용자는 흐름을 잃죠. CP-349는 사용자가 명시적으로 중단하기 전까지 프로세스를 유지하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 중단 버튼 전까지 유지

CP-349 (컴포넌트 > 따라하기 패널) “사용자가 중단하기 버튼을 누르기 전까지 콘텐츠가 변경되거나, 따라하기 프로세스가 중단되지 않게 하고 있다.”

사용자가 명시적으로 중단하기 버튼을 누르기 전에는, 따라하기의 콘텐츠가 바뀌거나 프로세스가 끊기지 않게 하라는 뜻입니다.

정리: 사용자가 중단하기 전까지 따라하기를 끊지 마라. 이게 CP-349입니다.

2. 왜 중단 버튼 전까지 유지인가

따라하기 패널(Tutorial panel)은 도움 패널(CP-335~348)과 비슷하지만, 결정적 차이가 있습니다. 도움 패널은 사용자가 필요할 때 참고하는 수동적 보조죠. 반면 따라하기 패널은 사용자를 단계별로 이끌어 실제 작업을 따라 하게 만드는 능동적 가이드입니다. 단계 1 → 2 → 3을 순서대로 안내하며, 사용자가 각 단계를 수행하도록 유도 하죠. 그래서 이 따라하기 흐름(프로세스) 이 끝까지 유지되는 게 중요합니다.

따라하기가 의도치 않게 끊길 때의 문제:

흐름 단절 — 사용자가 단계 2를 따라 하는 중인데 — 무언가(다른 클릭, 페이지 일부 갱신, 시간 초과 등)로 따라 하기가 중단되거나 콘텐츠가 바뀌면, 사용자는 ‘어디까지 했지? 이제 뭘 하지?’ 하고 흐름을 잃습니다. 따라하기의 연속성이 깨지죠.

진행 손실 — 따라하기를 처음부터 다시 해야 하거나, 중간에 끊겨 작업을 완성 못 합니다.

예상치 못한 변화 사용자가 따라 하던 안내가 갑자기 다른 내용으로 바뀌면 당황하죠. 능동적으로 이끄는 가이드라 흐름 유지가 특히 중요합니다.

그래서 CP-349는 — 사용자가 중단하기 버튼을 누르기 전까지 따라하기를 유지하라고 합니다:

명시적 중단만 따라하기는 사용자가 명시적으로 ‘중단하기’(또는 ‘종료/닫기’) 버튼을 누를 때만 끝나야 합니다. 그 전엔 다른 조작·자동 이벤트로 끊기지 않죠.

콘텐츠 유지 — 따라하기 진행 중 — 안내 콘텐츠가 사용자 의도와 무관하게 바뀌지 않습니다. 사용자가 ‘다음 단계’를 누르는 등 명시적 진행에 따라서만 바뀌죠(도움 패널 CP-342의 ’아이콘 실행 시에만 변경’ 정신).

자동 중단 금지 — 시간 초과로 자동 종료하거나, 다른 페이지 요소 클릭으로 따라하기가 꺼지지 않게 합니다. 사용자가 통제하죠.

중단하기 수단은 제공. 유지하되 — 사용자가 따라하기를 그만두고 싶으면 중단할 수단(‘중단하기’ 버튼) 은 명확히 제공해야 합니다. 즉 — ‘강제로 끝까지 가두기’가 아니라, ’사용자가 끝낼 때까지 시스템이 멋대로 안 끊기’ 입니다. 사용자 통제권이 핵심이죠. 정지 수단 제공(캐러셀 CP-209 정신)과 통합니다.

이 규칙은 따라하기 패널의 ’프로세스 연속성·통제권’을 담당합니다 — 사용자가 명시적으로 중단하기 전까지 따라하기를 유지해(349), 흐름이 끊기지 않게 하고 중단은 사용자가 결정하게 하죠. 따라하기 패널 6개 규칙(중단·간결·링크·모바일· 초점·DOM순서) 중 가장 특징적인 규칙이며, 이후 규칙들은 도움 패널과 평행합니다.

정리하면 — 따라하기는 사용자를 단계별로 이끄는 능동적 가이드라 흐름 유지가 중요하므로, 사용자가 명시적으로 중단 하기 버튼을 누르기 전까지 콘텐츠 변경·프로세스 중단이 일어나지 않게 하고 중단 수단은 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

명시적 중단만 — 따라하기가 사용자의 ‘중단하기’ 버튼 클릭에만 끝나는가.

콘텐츠 유지 — 진행 중 안내가 의도 없이 바뀌지 않는가.

자동 중단 없음 — 시간 초과·다른 조작으로 자동 종료되지 않는가. 중단 수단은 제공되는가.

개선 방향

따라하기 종료를 ‘중단하기’ 버튼 클릭에만 바인딩. 자동 종료·외부 클릭 종료 제거.

콘텐츠는 명시적 ’다음/이전’에만 변경. 명확한 중단하기 버튼 제공.

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

역할	책임
기획/UX	따라하기 흐름·중단 정책 설계
퍼블리셔/개발	프로세스 유지·중단 버튼 구현

기관 유형	CP-349 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (따라하기 패널 사용 시)

단계별 따라하기 가이드를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 따라하기가 사용자의 ‘중단하기’ 버튼 클릭에만 끝나나요?

□ 진행 중 안내가 의도 없이 바뀌지 않나요?

□ 시간 초과·다른 조작으로 자동 종료되지 않고, 중단 수단은 제공되나요?

❓ FAQ

Q1. 따라하기 패널과 도움 패널 차이가 뭔가요? 도움 패널은 필요 시 참고하는 수동적 보조, 따라하기 패널은 단계 별로 이끄는 능동적 가이드입니다. 그래서 흐름 유지가 중요하죠. Q2. 시간이 지나면 자동으로 닫으면 안 되나요? 안 됩니다. 사용자가 따라 하는 중일 수 있어 흐름이 끊깁니다. 명시적 중단 전까지 유지하죠. Q3. 사용자가 그만두고 싶으면요? 명확한 ‘중단하기’ 버튼을 제공합니다. 유지는 하되 사용자가 끝낼 수단은 줘야 하죠.

6. 마무리

CP-349의 메시지:

끝낼 때까지 끊기지 않게 — 사용자가 중단하기 전까지 따라하기 프로세스를 유지하라.

따라하기는 단계별로 이끄는 능동적 가이드라 흐름 유지가 중요합니다. 사용자가 명시적으로 중단하기 전까지 콘텐츠 변경·중단이 없게 하고 중단 수단은 제공하는 게 핵심이죠. 다음 편은 따라하기 정보의 간결성입니다.

다음 편 예고 ▶ 「470. (CP-350) 사용자가 패널 영역을 스크롤 하지 않고 정보를 훑어볼 수 있도록 필요한 내용을 간결한 문장으로 제공하고 있다.」

ViewCheck는 따라하기가 사용자 중단 전까지 유지되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 따라하기 패널(Tutorial panel) 가이드 — https://www.krds.go.kr/html/site/component/component_34.html

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

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