코치마크(Coach Mark)

코치마크(Coach Mark)는 처음 웹사이트나 앱에 접속한 사용자에게 "이 버튼은 이런 기능을 해요"라고 알려주는 디지털 가이드입니다. 마치 운전면허 연습 때 옆에 앉아 계신 강사님처럼, 사용자가 길을 잃지 않게 도와주는 친절한 온보딩(Onboarding) 도구죠. 프론트엔드 개발자이자 UX/UI 디자이너의 관점에서 코치마크의 핵심을 정리해 드릴게요.

코치마크 이미지 예시

코치마크 예시 이미지

코치마크의 핵심 UX 원칙: "친절함은 딱 한 번만"

코치마크는 사용자에게 매우 강력한 시각적 방해 요소가 될 수 있습니다. 따라서 무분별하게 사용하면 오히려 사용자의 짜증을 유발합니다.

  • 최초 1회 노출: 사용자가 이미 기능을 배웠다면 다시 보여줄 필요가 없습니다. localStorage나 Cookie를 활용해 한 번 본 사용자에게는 다시 노출하지 않는 것이 국룰입니다.
  • 명확한 스포트라이트: 안내하려는 요소만 밝게 비추고(Spotlight), 나머지 영역은 어둡게 처리하여 시선을 집중시킵니다.
  • 쉬운 탈출구: 사용자가 가이드를 보고 싶지 않을 때 언제든 닫을 수 있는 '건너뛰기(Skip)' 혹은 'X' 버튼이 반드시 있어야 합니다.

코치마크를 설계하는 3가지 전략

  • 스포트라이트: 가장 중요한 단일 기능을 강조
    적합한 상황: 복잡한 앱에서 핵심 버튼 하나를 강조할 때
  • 단계별 투어: 1~5단계 순서대로 설명
    적합한 상황: 대규모 대시보드나 복잡한 입력 폼이 있을 때
  • 툴팁형 코치마크: 요소 주변에 말풍선 형태로 설명
    적합한 상황: 메뉴 항목이나 새로운 기능을 살짝 알릴 때

실전 구현 방법 (핵심 원리)

코치마크를 구현할 때 가장 중요한 것은 CSS의 z-index를 이용한 계층 관리입니다. 안내하려는 버튼이 배경보다 위에 있어야겠죠?

간단한 로직 (jQuery)

  1. 사용자가 페이지에 접속합니다.
  2. localStorage를 확인합니다. ('coachMarkShown' 키가 있으면 패스, 없으면 실행)
  3. 어두운 배경(Overlay)을 화면 전체에 덮습니다.
  4. 안내할 버튼의 z-index를 높여서 어두운 배경 위로 튀어나오게 합니다.
  5. 버튼 옆에 설명 말풍선을 띄웁니다.
  6. '닫기'를 누르면 배경을 제거하고, localStorage에 값을 저장합니다.

간단한 CSS 스타일

/* 안내 중인 요소 강조 */
.spotlight {
  position: relative;
  z-index: 9999; /* 오버레이보다 높게 설정 */
}

/* 어두운 배경 오버레이 */
.coach-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
}

실제 데모

아래 버튼을 클릭하면 코치마크 데모를 볼 수 있습니다.

주의: 한 번 닫으면 localStorage에 저장되어 이 페이지를 새로고침할 때까지 다시 나타나지 않습니다.

교수님의 실전 가이드: "왜 코치마크가 필요할까?"

코치마크는 UI가 너무 복잡하다는 반증일 수도 있습니다.

"사실 가장 좋은 UI는 코치마크 없이도 사용자가 직관적으로 기능을 알아챌 수 있는 디자인입니다. 코치마크를 5단계 이상 길게 넣어야 한다면, UI 자체를 더 쉽게 고치는 게 우선입니다. 코치마크는 정말 중요하고, 사용자가 스스로 찾기 어려운 '핵심 기능'을 알려줄 때만 사용하세요."

마지막 체크리스트

  • 모바일 대응: 모바일은 화면이 작아서 코치마크가 화면을 덮어버리면 아주 답답합니다. 모바일에서는 투어 방식보다는 '빈 공간에 힌트 카드'를 띄우는 것이 더 좋습니다.
  • 접근성: 스크린 리더 사용자가 코치마크를 만났을 때 시스템이 멈춘 것으로 오해하지 않도록 적절한 접근성 태그를 꼭 넣어야 합니다.