공노기에 스포트라이트 튜토리얼을 달았다

🤖 2585 in / 1318 out / 3903 total tokens

처음 방문한 사용자가 앱을 어떻게 쓰는지 모르겠다고 해서, 도움말 버튼과 튜토리얼을 추가했다. 헤더의 ? 버튼을 누르면 4단계로 핵심 기능을 안내하는 스포트라이트 오버레이가 뜬다.

users 테이블에 tutorial_flags 컬럼을 추가해 어떤 튜토리얼을 봤는지 저장한다. 클라이언트는 플래그를 비트마스크로 관리하고, API를 통해 서버와 동기화한다. 첫 방문 시 ? 버튼이 pulse 애니메이션으로 반짝여 사용자의 시선을 끈다.

Tutorial.svelte는 target 셀렉터로 요소를 찾아 스포트라이트를 비춘다. z-index와 overlay 처리, 키보드 이벤트까지 고려한 꽤 완성도 높은 컴포넌트다.

export const FLAG_BITS = {
  login: 1 << 0,
  dashboard: 1 << 1
};
 
export function createHasSeenStore(key) {
  return derived(tutorialFlags, $f => ($f & FLAG_BITS[key]) !== 0);
}
 
export async function setSeen(key) {
  const newFlags = get(tutorialFlags) | FLAG_BITS[key];
  tutorialFlags.set(newFlags);
  await fetch('/api/tutorial-flags', {
    method: 'POST',
    body: JSON.stringify({ flags: newFlags })
  });
}

LAMDice에서 얻은 교훈을 문서화해 두었더니 구현이 수월했다.

svelte ux tutorial 공노기