첫 번째 앱 만들기

🔄 Quick Recall: 이전 레슨에서 사용자 여정 매핑과 디자인 시스템으로 앱 인터페이스를 설계했어요. 이번에는 실제로 앱을 만들어요.

5요소 파운데이션 프롬프트

AI 빌더에게 앱을 설명할 때 이 5가지 요소를 포함하세요:

1. 무엇: 앱이 하는 일 (습관 추적 앱)
2. 누구: 대상 사용자 (건강한 습관을 기르고 싶은 직장인)
3. 화면: 필요한 주요 화면 (홈 대시보드, 습관 추가, 통계, 설정)
4. 기능: 핵심 기능 (일일 체크인, 연속 기록, 주간 리포트)
5. 스타일: 디자인 감성 (미니멀, 밝은 초록 톤, 카드 기반)

예시 프롬프트:

습관 추적 앱을 만들어주세요:
- 건강한 습관을 기르고 싶은 직장인용
- 화면: 오늘의 습관 대시보드, 새 습관 추가, 주간/월간 통계, 설정
- 기능: 일일 체크인(탭으로 완료), 연속 기록 표시, 주간 리포트,
  알림 설정
- 스타일: 미니멀, 밝은 초록 톤(#10B981), 카드 기반 레이아웃,
  부드러운 애니메이션
- 모바일 우선 반응형 디자인

✅ Quick Check: 프롬프트에 “모바일 우선 반응형 디자인"을 포함하는 이유는? AI 빌더는 기본적으로 데스크톱 레이아웃을 생성하는 경향이 있어요. 명시적으로 모바일 우선을 지정하면 작은 화면에서 먼저 잘 작동하고, 큰 화면에서는 확장되는 레이아웃이 나와요.

반복 개선 워크플로우

1. 첫 생성 — 5요소 프롬프트로 앱 생성
2. 리뷰 — 80%가 맞는지 확인
3. 구체적 수정 요청 — “홈 화면에 습관 카테고리 필터 추가”, “완료 애니메이션을 체크마크에서 불꽃으로 변경”
4. 3-5회 반복 — 각 반복이 정밀도를 높여요
5. 백엔드 연결 — 데이터 저장, 인증 추가

백엔드 연결

대부분의 AI 빌더가 백엔드 서비스와 통합돼요:

실제 기기에서 테스트

• 웹 앱: 미리보기 URL을 폰 브라우저에서 열기
• 네이티브 앱: Expo Go(Rork) 또는 FlutterFlow Preview 앱 사용
• 시뮬레이터: Xcode(iOS), Android Studio(Android) — 하지만 실제 기기가 가장 정확

흔한 실수

• 한꺼번에 다 만들려는 것: 핵심 기능 먼저, 나머지는 나중에
• 에러 상태 무시: 빈 상태, 로딩, 에러 화면도 디자인해야 해요
• 혼자만 테스트: 다른 사람에게도 써보게 하세요

✅ Quick Check: 왜 “핵심 기능 먼저"가 중요한가요? 모든 기능을 한꺼번에 만들면 AI 빌더가 복잡성에 혼란을 겪고 결과물 품질이 떨어져요. 핵심 1-2개 기능으로 시작해서 작동을 확인한 뒤 기능을 추가하는 게 훨씬 효율적이에요.

핵심 정리

• 5요소 프롬프트(무엇, 누구, 화면, 기능, 스타일)가 AI 빌더에 최적의 입력
• 반복 개선이 핵심 — 3-5회 반복이면 95%+ 일치도 도달
• 인증은 직접 만들지 말고 관리 서비스(Supabase Auth, Firebase Auth) 사용
• 실제 기기에서 테스트 — 브라우저 미리보기는 모바일 경험을 정확히 반영 못 해요
• 핵심 기능을 먼저 만들고, 작동을 확인한 뒤 기능 추가

Up next: 다음 레슨에서 앱에 AI 기능을 추가해요 — 챗봇, 개인화, 추천 엔진.