튜토리얼: 실제 화면 위의 안내

플레이어가 보는 것

• 어떤 화면이든 강조된 요소와 어두워진 나머지. 레이아웃이 바뀌면 강조가 요소를 따라갑니다.
• 플레이어가 닫는 단계에는 "다음", 흐름이 허락하면 "건너뛰기"가 있는 안내 말풍선.
• 실제 행동을 기다리는 단계: 플레이어가 게임에서 그것을 할 때까지 안내가 남아 있습니다.
• 흐름 끝의 보상과 허용된 흐름을 다시 보는 "튜토리얼" 목록.

작동 방식

• 단계는 앵커로 요소를 가리킵니다: 어떤 모듈의 어떤 요소에든 붙는 data-tutorial-anchor.
• 타이틀이 정하면 흐름이 저절로 시작할 수 있습니다. 예를 들어 첫 방문 때.
• 표시된 모든 단계가 보고되어 대시보드 분석에서 온보딩 퍼널을 볼 수 있습니다.

개발자용

튜토리얼은 @idosgames/core의 client.tutorial로 작동하며, 오버레이는 앵커로 요소를 찾습니다.

// 어떤 모듈의 어떤 요소든 튜토리얼 앵커가 될 수 있습니다
<button data-tutorial-anchor="play:start">Play</button>
// 로비 탭은 tab:{featureID}, 프로필 버튼은 lobby:profile,
// 게임의 "플레이" 버튼은 play:{modeID}

• 흐름이 가리키는 요소에 표시를 하세요. 요소가 없는 앵커는 나타날 때까지 기다립니다.
• 단계는 reportStepShown으로 보고하고 completeStep으로 끝냅니다. 오버레이가 대신 처리합니다.

모든 필드는 SDK의 MCP 서버가 제공하는 tutorial-system 스킬에 설명되어 있습니다.