온보딩 플로우은(는) 무엇을 하나요?
규칙
- 다단계 위자드: 단계를 배열로 정의합니다. 상태에서
currentStep을 추적하고 단계 수와 함께 진행률 표시줄을 표시합니다. - 진행률 표시기: 상단에 단계 번호 또는 진행률 표시줄을 표시합니다. 완료된 단계, 현재 단계, 남은 단계를 표시합니다. 남은 단계 수를 절대 숨기지 않습니다.
- 진행 상황 저장: 완료된 단계를 데이터베이스에 저장합니다. 사용자가 떠났다가 중단한 지점에서 다시 시작할 수 있습니다.
- 활성화 체크리스트: 주요 작업을 정의합니다 (예: "첫 번째 프로젝트 만들기", "팀원 초대", "통합 연결"). 대시보드에 완료율을 표시합니다.
- 환영 이메일 시퀀스: 가입 직후, 그리고 1일, 3일, 7일 후에 전송합니다. 내용은 사용자가 완료하지 않은 체크리스트 항목과 일치합니다.
- 건너뛰기 옵션: 사용자가 중요하지 않은 단계를 건너뛸 수 있도록 허용합니다. 건너뛴 단계는 완료되지 않은 것으로 표시하고 나중에 완료할 수 있도록 제안합니다.
- 데이터 수집: 필요한 것만 요청합니다. 개인 정보, 작업 공간 설정, 환경 설정을 별도의 단계로 나눕니다.
- 완료 축하: 마지막 단계에서 폭죽이나 성공 애니메이션을 표시하고 메인 제품 보기로 리디렉션합니다.
위자드 패턴
const ONBOARDING_STEPS = [
{ id: "profile", title: "프로필", required: true },
{ id: "workspace", title: "작업 공간 만들기", required: true },
{ id: "invite", title: "팀 초대", required: false },
{ id: "integrations", title: "도구 연결", required: false },
] as const;
// 데이터베이스에서 추적
interface OnboardingState {
userId: string;
currentStep: number;
completedSteps: string[];
skippedSteps: string[];
completedAt: Date | null;
}
활성화 체크리스트 패턴
모든 항목이 완료되거나 사용자가 닫을 때까지 대시보드에 표시합니다:
const ACTIVATION_ITEMS = [
{ key: "first_project", label: "첫 번째 프로젝트 만들기", check: (user) => user.projectCount > 0 },
{ key: "invite_member", label: "팀원 초대", check: (user) => user.teamSize > 1 },
{ key: "first_deploy", label: "프로덕션에 배포", check: (user) => user.deployCount > 0 },
];
피해야 할 것
- 처음에 너무 많이 요구하지 마세요 — 위자드 단계는 최대 3~5개로 유지하고 나머지는 나중으로 미룹니다.
- 진행 상황을 저장하지 않는 것 — 사용자는 페이지 새로고침 시 진행 상황을 잃으면 이탈합니다.
- 모든 단계를 강제하지 마세요 — 사용자가 선택적 단계를 건너뛸 수 있도록 허용합니다.
- 활성화 추적을 하지 않는 것 — 온보딩 완료율을 측정해야 합니다.