← 목록으로
🎯
목표를 설정하세요
당신의 목표를 설정하고 추적하여 더 나은 결과를 만들어보세요
← 스와이프하세요
📊
실시간 분석
강력한 분석 도구로 진행 상황을 실시간으로 확인하세요
🤝
팀과 협업
팀원들과 쉽게 소통하고 협업하여 생산성을 높이세요
🚀
시작할 준비가 되셨나요?
지금 바로 시작하여 놀라운 경험을 만들어보세요
54. 온보딩 스크린 시퀀스
Design a mobile onboarding flow:
**Screen Structure**:
- Full screen height
- Skip button: top-right
- Main content: centered
- Pagination dots: bottom
- CTA button: bottom
**Content Layout**:
- Illustration: 40% top, centered
- Title: 24px bold, centered
- Description: 16px gray-600, centered, max 3 lines
- Adequate spacing between elements
**Pagination Dots**:
- Number = screen count (3-5)
- Active: brand color, larger or filled
- Inactive: gray-300, smaller
- Dot size: 8px, gap: 8px
**Navigation**:
- Swipe left/right between screens
- Dots tappable for jump
- Next/Continue button advances
**Screen Progression**:
1. Value proposition
2. Key feature 1
3. Key feature 2
4. Get started (with action)
**Final Screen**:
- Main CTA: "Get Started" / "Create Account"
- Secondary: "Already have an account? Sign in"
- Remove skip button
**Animations**:
- Cross-fade or parallax between screens
- Illustration elements animate on enter
- Dot scale animation on change
**Skip Behavior**:
- Skips to final screen or main app
- Store completion state
- Don't show again
**First-time Only**:
- Check if user completed onboarding
- Redirect returning users to main app
Tech: React Native + react-native-onboarding-swiper + Reanimated