[Product Tour] 화면 요소를 단계별로 비추며 안내하는 온보딩 코치마크

한 줄 요약 - 처음 들어온 사용자에게 화면의 버튼/메뉴를 하나씩 비추며 "여기는 이런 곳이에요"라고 안내하는 온보딩 투어(코치마크)입니다.

이럴 때 필요해요

기능이 많은 서비스에 처음 들어온 사용자는 어디부터 봐야 할지 막막합니다. 긴 설명서를 따로 두면 아무도 안 읽죠. 그래서 첫 방문 때 화면 위에서 직접 "이 검색창은 이렇게 써요 -> 다음은 이 메뉴예요"라고 손을 잡고 한 바퀴 돌려주는 투어가 가입 직후 이탈을 크게 줄여줍니다.

어떻게 동작하나

1. 안내할 요소마다 표식(data-tour)을 붙여두고, 현재 단계의 대상을 찾으면 그 요소의 화면상 위치와 크기를 잽니다(getBoundingClientRect = 요소가 화면 어디에 얼마만큼 떠 있는지 알려주는 측정값).
2. 잰 위치에 투명한 박스를 겹치고, 그 박스에 아주 큰 그림자(box-shadow: 0 0 0 9999px 어두운색)를 줘서 박스 바깥 전부를 한 번에 어둡게 만듭니다. 결과적으로 대상만 환하게 떠오릅니다(스포트라이트).
3. 대상 옆에 말풍선을 붙여 제목/설명/진행도(2/4)를 보여줍니다. 다음을 누르면 단계 번호만 올리면 되고, 위치 계산은 알아서 따라옵니다.

핵심은 이거예요

"대상을 어둡게 못 만든다"가 아니라 "대상만 빼고 다 어둡게 만든다"로 뒤집는 것 - 거대한 box-shadow 한 줄이면 별도 마스크 없이 스포트라이트가 완성됩니다.

놓치기 쉬운 것

• 창 크기가 바뀌거나 스크롤하면 요소 위치가 달라집니다. resize/scroll마다 다시 재야 하고, 등록한 이벤트는 투어를 닫을 때 꼭 해제(cleanup)해야 누수가 안 생깁니다.
• 말풍선이 화면 밖으로 나가면 글이 잘립니다. 위치를 화면 안으로 끌어당기는 clamp 처리가 필요합니다.
• 키보드(좌/우 화살표/Esc)와 단계 표시(N/총)를 넣어야 누구나 끝까지 따라올 수 있습니다.

이런 곳에 써요

• 가입 직후 첫 진입 시 핵심 기능 3~4개를 짚어주는 온보딩
• 새 기능 출시 후 "여기 새로 생겼어요" 알려주는 스폿 안내