한 번에 하나만

KRDS CP-370 — 한 화면에 여러 개의 코치마크를 표시하지 않으며, 코치마크가 표시된 상태에서 다른 메시지가 표시되지 않게 구현하고 있다.

0. 들어가며 — 안내 위에 또 안내가 뜨면

이번 490편은 한 화면에 여러 코치마크를 표시하지 않고, 코치마크가 표시된 상태에서 다른 메시지가 표시되지 않게 구현하라는 규칙입니다.

코치마크가 — 한 화면에 여러 개 동시에 뜨거나, 코치마크 위에 또 다른 메시지(알림·토스트·모달)가 겹치면, 사용자는 어디에 집중할지 모르죠. CP-370은 코치마크의 단독 표시를 규정합니다. CP-369(개수 제한)의 표시 방식 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 단독 표시 + 다른 메시지 미표시

CP-370 (컴포넌트 > 코치마크) “한 화면에 여러 개의 코치마크를 표시하지 않으며, 코치마크가 표시된 상태에서 다른 메시지가 표시되지 않게 구현하고 있다.”

한 화면에 코치마크를 한 번에 하나만 표시하고, 코치마크가 떠 있는 동안 다른 메시지(알림 등)가 겹쳐 뜨지 않게 하라는 뜻입니다.

정리: 코치마크는 한 번에 하나만, 다른 메시지와 겹치지 않게. 이게 CP-370입니다.

2. 왜 단독 표시인가

코치마크는 특정 요소를 강조(스포트라이트)하며 시선을 집중시키는 안내입니다. 그 효과는 ’한 번에 하나’에 집중 시킬 때 나오죠. 여러 개가 동시에 뜨거나 다른 메시지와 겹치면 집중이 분산돼 효과가 사라집니다. CP-370은 두 가지를 요구합니다: ①여러 코치마크 동시 표시 금지, ②다른 메시지와 겹침 금지.

① 여러 코치마크 동시 표시 금지. 한 화면에 — 코치마크를 한 번에 하나만 표시합니다.

집중 분산 여러 코치마크가 동시에 뜨면 사용자는 ‘어느 걸 먼저 봐야 하지?’ 하고 시선이 분산됩니다. 스포트 라이트가 여럿이면 어디에 집중해야 할지 모르죠. 코치마크의 ‘한 곳 집중’ 효과가 깨집니다.

순차 표시 CP-369에서 한 페이지 4개 이하를 두되 그 4개를 단계적으로 하나씩 보여줍니다. 단계 1 코치 마크를 보고 ’다음’을 누르면 단계 2로 한 번에 하나씩 순차 진행하죠. 동시에 여러 개를 띄우지 않습니다.

② 코치마크 표시 중 다른 메시지 미표시. 코치마크가 떠 있는 동안 — 다른 메시지(알림, 토스트, 모달, 배너 등)가 겹쳐 뜨지 않게 합니다.

메시지 충돌 — 코치마크로 집중시키는 중에 — 갑자기 토스트 알림이나 모달이 뜨면, 사용자는 어디를 봐야 할지 혼란스럽죠. 두 메시지가 시선을 다투고, 코치마크의 안내가 묻힙니다.

온보딩 보호 — 코치마크 온보딩이 진행되는 동안에는 — 가능하면 다른 알림·메시지를 지연하거나 억제합니다. 온보딩이 끝난 뒤(또는 중단 뒤) 다른 메시지를 보여주죠. 한 번에 한 가지 소통에 집중하게요.

그래서 CP-370은 — 코치마크를 단독으로 표시하라고 합니다. 한 번에 하나의 코치마크만, 그리고 그 동안 다른 메시지 없이요. 사용자가 — 그 하나에 온전히 집중해 안내를 받게 합니다.

개수 제한(CP-369)과의 관계. CP-369는 전체 개수(4개/15단계)를 제한하고, CP-370은 그것들을 한 번에 하나씩 표시하라는 거죠. 즉 적은 개수를(369) 순차 단독으로(370) 보여줍니다. 둘이 함께 코치마크를 절제되고 집중되게 운영하죠.

스포트라이트와도 연결. 코치마크는 — 대상만 밝히고 나머지를 어둡게 하는 스포트라이트(CP-373)로 집중시킵니다. 스포트라이트가 하나면 한 곳에 집중되는데, 여럿이면 그 효과가 깨지죠. 단독 표시(370)가 스포트라이트 집중과 맞물 립니다.

이 규칙은 코치마크의 ’집중 보장’을 담당합니다 — 한 번에 하나의 코치마크만, 다른 메시지 없이 표시해(370), 사용 자가 한 안내에 온전히 집중하게 하죠. 스피너 한 화면 1개(CP-332)처럼, 움직임·집중 요소를 단독으로 두는 정신입니다.

정리하면 — 코치마크가 여럿 동시에 뜨거나 다른 메시지와 겹치면 집중이 분산되어 효과가 사라지므로, 한 번에 하나만 순차 표시하고 표시 중 다른 메시지는 억제해야 합니다.

3. 점검 / 개선

무엇을 점검하나

단독 표시 — 한 화면에 코치마크가 한 번에 하나만 표시되는가(여럿 동시 아님).

순차 진행 — 여러 코치마크를 단계적으로 하나씩 보여주는가.

메시지 미겹침 — 코치마크 표시 중 다른 알림·모달이 겹치지 않는가.

개선 방향

코치마크를 한 번에 하나씩 순차 표시. 동시 다중 표시 제거.

온보딩 중 다른 메시지(토스트·모달) 지연·억제.

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

역할	책임
기획/UX	단독 표시·메시지 억제 정책
퍼블리셔/개발	순차 표시·메시지 제어 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 화면에 코치마크가 한 번에 하나만 표시되나요(여럿 동시 아님)?

□ 여러 코치마크를 단계적으로 하나씩 보여주나요?

□ 코치마크 표시 중 다른 알림·모달이 겹치지 않나요?

❓ FAQ

Q1. 한 페이지 4개(CP-369)인데 동시에 띄우면 안 되나요? 안 됩니다. 4개 이하를 두되 한 번에 하나씩 순차로 보여줍니다. 동시에 띄우면 집중이 분산되죠. Q2. 온보딩 중 알림이 오면요? 가능하면 지연·억제하고, 온보딩이 끝난 뒤 보여줍니다. 코치마크 표시 중엔 다른 메시지를 겹치지 않게요. Q3. 왜 하나만 보여주나요? 코치마크는 한 곳에 집중시키는 안내입니다. 여럿이면 어디 볼지 몰라 효과가 사라지죠.

6. 마무리

CP-370의 메시지:

한 번에 하나만 — 코치마크를 단독으로, 다른 메시지와 겹치지 않게 표시하라.

코치마크가 여럿 뜨거나 다른 메시지와 겹치면 집중이 분산됩니다. 한 번에 하나만 순차 표시하고 표시 중 다른 메시지를 억제해 한 안내에 집중하게 하는 게 핵심이죠. 다음 편은 지시 사항 내부 링크의 새 창 실행입니다.

다음 편 예고 ▶ 「491. (CP-371) 지시 사항 내부 링크는 새 창으로 실행하고 있다.」

ViewCheck는 코치마크가 단독으로·다른 메시지와 겹치지 않게 표시되는지를 진단합니다.

📚 참고 출처

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

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

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