feat: 인터랙티브 튜토리얼 /tutorial — 8챕터 12스크린·랜딩 CTA 교체 (PR1)

[mindongdong]

요약

디스코드 봇이 처음 쓰는 사람에게 어렵다는 실사용자 피드백 대응. sang-se.com 인터랙티브 튜토리얼을 레퍼런스로, 웹에서 봇 사용법을 한 번 영상처럼 따라가 보는 /tutorial 페이지를 신설한다. grill 8결정(D1~D8)·작업지시서 = docs/tutorial-work-order.md (본 PR 에 동봉).

이 PR 은 2단계 중 PR1 = 전체 구현(녹화 영상 자리는 CSS 목업/스샷 폴백으로 자체 완결). PR2 는 운영자 촬영 mp4 5개로 media.src 만 교체.

구현

• /tutorial 풀스크린 골격 (D7) — 문서 크롬 위 오버레이, 챕터 프로그래스바(8칸), "약 5분이면 끝" 배지, ?step=N 딥링크(범위 밖 클램프), 키보드 ←→, X=랜딩 복귀. localStorage 재개는 의도적 생략.
• 스텝 정본 site/data/tutorial-steps.tsx — 8챕터 12스크린. 커리큘럼은 기능 나열이 아닌 실행 조건·결과물 중심 기조(§3): 초대 → / 패턴 → 등록 없이 되는 것 → 캐릭터 등록+열리는 문 → API 키 발급/등록+열리는 문 → 대상 지정 기조 → 공개/비공개 총정리 → 완료 CTA.
• 공개/비공개 라벨 — "다같이 봐요"/"나만 봐요" 두 값, §3.1 정본 매핑(봇 코드 ephemeral 실태) 기준. 열리는 문(6·9)·총정리(11) 스크린에서 명령 칩과 병기.
• CSS 목업 폴백 (TutorialDemos.tsx) — 슬래시 자동완성·캐릭터등록/키등록 실행 장면(ephemeral 안내줄 포함)·넥슨 키 발급 폼·대상 지정 비교 등. 실데이터 금지 원칙 준수(가짜 닉).
• 랜딩 주 CTA 교체 (D5) — 5분 만에 시작하기 → /tutorial, 봇 초대는 보조 버튼 강등. getting-started 상단 배너 한 줄.
• 드리프트 가드 확장 — check-command-drift.mjs + tests/test_website_command_drift.py: 튜토리얼 참조 명령의 봇 트리 실재 + visibility 라벨의 §3.1 정본 일치 검증.
• 초대 캡처 2장(invite-1/2.png)은 feat: 사이트 초대 온보딩 개선 — /가이드 카드 삭제·초대 캡처 안내·API 키 안심 카피 #52 브랜치와 동일 바이너리 재사용 — 어느 쪽이 먼저 머지돼도 무충돌.

검증

• npm run build 그린 (/tutorial 정적 라우트 2.07 kB)
• check:drift 확장분 포함 그린 (17명령·튜토리얼 28참조)
• pytest 전체 799 passed (드리프트 신규 2 테스트 포함) · ruff format/check 클린
• 라이트/다크/모바일(500px) 스크린샷 눈확인 — 12스크린 전수 + 랜딩 + getting-started
• CDP 자동 순회 9항목 PASS — 랜딩 CTA→튜토리얼, 다음×11→완료 CTA, 키보드 ←→, ?step=7 딥링크, ?step=99 클램프, step1 이전 비활성, X→랜딩
• (PR2) 영상 5개 자동재생·루프·용량 ≤4MB — 촬영 후

남은 것 (PR2·운영자)

• §5 샷리스트대로 PC 디스코드 다크로 5클립 촬영 → site/public/tutorial/ 에 invite.mp4 등 5개+poster 배치 → tutorial-steps.tsx 의 media.src/poster 채우기 (각 스텝 주석에 경로 명시됨)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
maple-mate	Ready	Preview, Comment	Jul 3, 2026 5:11pm