모바일 앱 개발을 위한 효과적인 프롬프트 패턴을 알아봅니다.
모바일 프롬프트 구조
React Native
기본 컴포넌트
React Native로 커스텀 버튼 컴포넌트를 만들어줘.
컴포넌트: CustomButton
Props:
- title: string
- variant: 'primary' | 'secondary' | 'outline'
- size: 'sm' | 'md' | 'lg'
- loading?: boolean
- disabled?: boolean
- onPress: () => void
요구사항:
- TypeScript
- StyleSheet 사용
- 플랫폼별 스타일 (iOS/Android)
- 접근성 (accessibilityLabel)
- 햅틱 피드백
리스트 컴포넌트
React Native로 무한 스크롤 리스트를 만들어줘.
컴포넌트: InfiniteList
Props:
- fetchData: (page: number) => Promise<Item[]>
- renderItem: (item: Item) => JSX.Element
- keyExtractor: (item: Item) => string
기능:
- FlatList 기반
- 풀 투 리프레시
- 로딩 인디케이터
- 에러 처리
- 빈 상태
성능:
- 메모이제이션
- 적절한 initialNumToRender
- removeClippedSubviews
네비게이션
React Navigation으로 앱 네비게이션을 설정해줘.
구조:
- 인증 스택 (로그인, 회원가입)
- 메인 탭 (홈, 검색, 프로필)
- 상세 화면 (모달)
요구사항:
- TypeScript 타입 정의
- 딥링킹 설정
- 인증 상태에 따른 분기
- 헤더 커스터마이징
- 애니메이션 설정
Flutter
위젯 작성
Flutter로 커스텀 카드 위젯을 만들어줘.
위젯: ProductCard
Properties:
- image: String
- title: String
- price: double
- rating: double
- onTap: VoidCallback
- onFavorite: VoidCallback
요구사항:
- StatelessWidget
- 이미지 캐싱
- 그림자 효과
- 애니메이션 (터치 피드백)
- 반응형 레이아웃
상태 관리
Flutter Riverpod으로 상태 관리를 구현해줘.
기능: 장바구니 관리
상태:
- 장바구니 아이템 목록
- 총 금액
- 아이템 수량
액션:
- 추가
- 삭제
- 수량 변경
- 초기화
포함:
- Provider 정의
- 영속성 (SharedPreferences)
- 테스트 코드
네이티브 연동
Flutter에서 네이티브 코드를 연동해줘.
기능: 생체 인증
요구사항:
- MethodChannel 설정
- iOS (Face ID, Touch ID)
- Android (Fingerprint, Face)
- 에러 처리
- 폴백 (PIN)
포함:
- Dart 코드
- iOS Swift 코드
- Android Kotlin 코드
공통 패턴
오프라인 지원
오프라인 우선 아키텍처를 구현해줘.
플랫폼: React Native
요구사항:
- 로컬 데이터베이스 (SQLite/Realm)
- 네트워크 상태 감지
- 데이터 동기화
- 충돌 해결
- 큐잉 (오프라인 작업)
패턴:
- Repository 패턴
- 동기화 전략
푸시 알림
푸시 알림 시스템을 구현해줘.
플랫폼: React Native (FCM)
기능:
- 포그라운드 알림
- 백그라운드 알림
- 알림 탭 처리
- 딥링크 연동
- 알림 권한 요청
설정:
- Firebase 설정
- iOS APNs 설정
- 핸들러 구현
앱 보안
모바일 앱 보안을 구현해줘.
요구사항:
- 보안 저장소 (Keychain/Keystore)
- 루트/탈옥 감지
- SSL Pinning
- 코드 난독화
- 스크린샷 방지
플랫폼: React Native
각 보안 기능 구현 코드 제공
UI/UX 패턴
제스처
스와이프 삭제 기능을 구현해줘.
플랫폼: React Native
기능:
- 왼쪽/오른쪽 스와이프
- 삭제 확인
- 되돌리기 옵션
- 햅틱 피드백
- 애니메이션
라이브러리: react-native-gesture-handler, Reanimated
애니메이션
앱 시작 애니메이션을 만들어줘.
플랫폼: React Native
애니메이션:
- 로고 페이드인
- 텍스트 슬라이드
- 로딩 프로그레스
- 메인 화면 전환
라이브러리: Reanimated 2
Lottie 통합 (선택)
실전 프롬프트
완전한 화면
React Native로 프로필 편집 화면을 만들어줘.
기능:
- 프로필 이미지 변경 (카메라/갤러리)
- 이름, 이메일, 전화번호 편집
- 폼 유효성 검사
- 저장 API 연동
- 로딩/에러 상태
요구사항:
- TypeScript
- React Hook Form
- 이미지 크롭
- 키보드 회피
- 인증 헤더
앱 스켈레톤
React Native 앱 초기 설정을 만들어줘.
포함:
1. 프로젝트 구조
2. 네비게이션 설정
3. 상태 관리 (Zustand)
4. API 클라이언트 (Axios)
5. 테마 시스템
6. 환경 설정
7. 공통 컴포넌트
디렉토리 구조와 각 파일 내용 제공
팁
| 팁 | 설명 |
|---|---|
| 플랫폼 명시 | RN, Flutter, Native |
| 버전 확인 | 라이브러리 버전 |
| 플랫폼 차이 | iOS/Android 고려 |
| 성능 언급 | 최적화 요구 |
| 접근성 | a11y 요구사항 |
모바일 앱은 플랫폼 특성을 고려해야 합니다.