★★★★★
#UI·디자인 · claude-code
Onboarding 화면 (3~5 페이지 슬라이드)
앱 첫 실행 시 주요 기능 소개. PageView로 스와이프 가능.
#onboarding#pageview#first-launch
변수 2개 — 여기 채우면 아래 프롬프트에 바로 들어가요
앱 첫 실행 시 주요 기능 소개. PageView로 스와이프 가능.
요구사항:
- 슬라이드 개수: {{SLIDE_COUNT}} (보통 3~5)
- 각 슬라이드 제목/설명: {{SLIDES}} (줄바꿈)
- 마지막: "시작하기" 버튼
구현 (핵심):
```dart
class OnboardingScreen extends StatefulWidget {
@override
State<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
late PageController _pageController;
int _currentPage = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: PageView.builder(
controller: _pageController,
onPageChanged: (index) => setState(() => _currentPage = index),
itemCount: 3,
itemBuilder: (context, index) => Center(
child: Text('페이지 $index'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(
3,
(index) => Container(
width: 10,
height: 10,
margin: EdgeInsets.symmetric(horizontal: 4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentPage == index ? Colors.blue : Colors.grey,
),
),
),
),
ElevatedButton(
onPressed: () {
if (_currentPage == 2) {
Navigator.pushReplacementNamed(context, '/main');
} else {
_pageController.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
},
child: Text(_currentPage == 2 ? '시작하기' : '다음'),
),
],
),
);
}
}
```
{{SLIDE_COUNT}}개 슬라이드로 만들어줄까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.