가리킬 곳 옆에, 중요한 건 안 가리게

KRDS CP-366 — 정보를 제공하고자 하는 요소 주변에 배치하며, 팝오버 영역이 본문의 중요 콘텐츠를 가리지 않고 표현하고 있다.

0. 들어가며 — 새 기능을 콕 집어 알려주기

이번 486편부터 코치마크(Coach mark) 그룹입니다(10개). 첫 규칙은 정보를 제공하려는 요소 주변에 배치하고, 팝오버가 본문 중요 콘텐츠를 가리지 않게 표현하라는 규칙입니다.

코치마크는 — 새 기능·UI를 처음 쓰는 사용자에게, 특정 요소를 콕 집어(스포트라이트) 단계별로 안내하는 온보딩 가이드입니다(‘이 버튼으로 검색하세요’ 같은). 이 안내 팝오버가 — 가리키는 요소 옆에 있되 중요한 걸 가리면 안 되죠. CP-366은 배치를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 요소 주변 배치 + 중요 콘텐츠 미가림

CP-366 (컴포넌트 > 코치마크) “정보를 제공하고자 하는 요소 주변에 배치하며, 팝오버 영역이 본문의 중요 콘텐츠를 가리지 않고 표현하고 있다.”

코치마크 팝오버를 안내 대상 요소 가까이에 두되, 본문의 중요한 콘텐츠를 가리지 않게 표현하라는 뜻입니다.

정리: 코치마크를 대상 요소 옆에, 중요 콘텐츠를 안 가리게 배치하라. 이게 CP-366입니다.

2. 왜 요소 주변 배치·미가림인가

코치마크(Coach mark)는 — 새 기능·화면을 처음 만나는 사용자에게, 특정 UI 요소를 강조(스포트라이트) 하며 그것을 어떻게 쓰는지 단계별로 안내하는 온보딩 도구입니다. ‘이 버튼이 새로 생긴 검색입니다, 눌러보세요’ 식으로요. 안내 팝오버가 — 어디에 뜨느냐가 핵심이죠. CP-366은 두 가지를 요구합니다: ①대상 요소 주변 배치, ②중요 콘텐츠 미가림.

① 정보를 제공하려는 요소 주변 배치. 코치마크 팝오버는 — 그것이 안내하는 대상 요소 가까이 있어야 합니다.

가리킴 명확 코치마크는 ’저기 저 요소를 보세요’라고 가리키는 안내입니다. 팝오버가 대상 요소 옆에 있고 화살표·연결선으로 그 요소를 가리켜야, 사용자가 ’아, 이 안내가 저 요소에 대한 거구나’를 압니다. 멀리 떨어져 있으면 무엇을 가리키는지 모르죠.

스포트라이트 — 보통 코치마크는 — 대상 요소만 밝게 비추고(스포트라이트, CP-373) 나머지는 어둡게 해 시선을 집중시킵니다. 팝오버는 그 밝은 요소 옆에 붙죠. 요소-팝오버 연결이 분명해야 합니다.

② 본문의 중요 콘텐츠를 가리지 않음. 팝오버가 — 사용자가 봐야 할 중요한 내용을 덮으면 안 됩니다.

대상 요소 미가림 특히 코치마크가 안내하는 대상 요소 자체를 팝오버가 가리면 안 되죠. ’이 버튼을 보세요’라면서 그 버튼을 팝오버로 덮으면 사용자가 정작 봐야 할 버튼을 못 봅니다. 모순이죠.

중요 정보 미가림 — 작업에 필요한 다른 중요 요소도 — 가능한 한 안 가립니다. 팝오버를 빈 공간이나 덜 중요한 쪽에 띄우죠.

이는 — 맥락적 도움말 팝오버 위치(CP-357)와 같은 정신입니다. 화면을 안 벗어나고(코치마크도 화면 안에 들어와야 함), 중요 콘텐츠를 안 가리게 위치를 조정하죠. 다만 — 코치마크는 ‘대상 요소를 강조하며 가리키는’ 게 본질이라, 대상 요소를 절대 안 가리는 게 특히 중요합니다.

팝오버 위치 자동 조정. 대상 요소 주변에 빈 공간을 찾아(위/아래/좌/우) 팝오버를 띄우고, 화살표로 대상을 가리 킵니다. 대상 요소·중요 콘텐츠를 피하면서 화면 안에 들어오는 위치를 동적으로 계산하죠.

이 규칙은 코치마크의 ’안내 배치’를 담당합니다 — 팝오버를 대상 요소 옆에 둬 무엇을 안내하는지 분명히 하고(366), 대상·중요 콘텐츠를 안 가려 사용자가 안내와 대상을 함께 보게 하죠. 이후 코치마크 규칙들(너비·글자수·개수·단독 표시·링크·버튼·스포트라이트·요청 실행·순서)이 이 위에 쌓입니다.

정리하면 — 코치마크는 특정 요소를 가리키며 안내하므로, 팝오버를 대상 요소 주변에 두되 대상 요소와 중요 콘텐츠를 가리지 않게 배치해 사용자가 안내와 대상을 함께 보게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

요소 주변 배치 — 코치마크 팝오버가 대상 요소 옆에 있고 가리키는가(화살표 등).

대상 미가림 — 팝오버가 안내 대상 요소 자체를 가리지 않는가.

중요 콘텐츠 미가림 — 작업 중요 요소를 가리지 않는가.

개선 방향

팝오버를 대상 요소 주변 빈 공간에 띄우고 화살표로 가리킴.

대상 요소·중요 콘텐츠를 피한 위치 자동 조정. 화면 안 유지.

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

역할	책임
디자이너	코치마크 팝오버 위치·화살표 정의
퍼블리셔/개발	위치 자동 조정 구현

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

새 기능 온보딩 코치마크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 코치마크 팝오버가 대상 요소 옆에 있고 가리키나요(화살표 등)?

□ 팝오버가 안내 대상 요소 자체를 가리지 않나요?

□ 작업 중요 요소를 가리지 않나요?

❓ FAQ

Q1. 코치마크가 뭔가요? 새 기능·UI를 처음 쓰는 사용자에게 특정 요소를 강조하며 단계별로 안내하는 온보딩 가이드입니다. Q2. 맥락적 도움말과 다른가요? 맥락적 도움말은 사용자가 요청 시 그 요소 도움을 주고, 코치마크는 처음 진입 시 새 기능을 단계별로 안내합니다. 둘 다 팝오버를 쓰지만 용도가 다르죠. Q3. 대상 요소를 가리면 왜 안 되나요? ’이 버튼을 보세요’라면서 그 버튼을 덮으면 정작 봐야 할 걸 못 봅니다. 모순이죠.

6. 마무리

CP-366의 메시지:

가리킬 곳 옆에, 중요한 건 안 가리게 — 코치마크를 대상 요소 주변에, 미가림으로 배치하라.

코치마크는 특정 요소를 가리키며 안내합니다. 팝오버를 대상 요소 옆에 두되 대상·중요 콘텐츠를 안 가려 안내와 대상을 함께 보게 하는 게 핵심이죠. 다음 편은 코치마크 팝오버 너비 일관성입니다.

다음 편 예고 ▶ 「487. (CP-367) 하나의 과업에 대한 모든 코치마크 팝오버는 동일한 너비로 표현하고 있다.」

ViewCheck는 코치마크가 대상 요소 주변에·중요 콘텐츠를 안 가리게 배치됐는지를 진단합니다.

📚 참고 출처

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

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

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