2026.08.04 / Jun
이번 Flutter 모바일 앱 빌드 워크숍에서는 사용자 입력 → 간단한 규칙/랜덤 로직 → 개인화 결과 → 저장/공유라는 모바일 앱의 전체 흐름을 경험에 초점을 두고, 포스텔러형 개인화 콘텐츠, 헬로우봇형 대화 UX, 마이타로·보라형 MBTI 결합형 MVP를 함께 기획-빌드-디버깅-배포합니다.
‘운(Luck)을 주제로 한’ 모바일 앱 워크숍 아이디어 5가지
| 아이디어 | 핵심 로직 | 주요 모바일 기능 | AI 필요 | 난이도 |
|---|---|---|---|---|
| 🔮 Tarot Today | 타로 카드 랜덤 선택 | 카드 애니메이션·저장·공유 | 선택 | ★★ |
| 🧠 MBTI Tarot | MBTI × Tarot | 개인화 결과·History | 추천 | ★★ |
| 💕 Chemistry 16 | MBTI × MBTI 궁합 | 관계 점수·공유 카드 | 선택 | ★★ |
| 🌙 My Destiny | 생년월일 × MBTI | 오늘의 운세·캘린더 | 추천 | ★★★ |
| 🤖 Fortune Agent | 사주 + MBTI + Tarot | Chat UI·AI Agent | 필요 | ★★★★ |
1. Tarot Today — 하루 한 장 타로
가장 빠르게 완성할 수 있는 프로젝트입니다.
사용자가 앱을 열어 **“오늘의 카드 뽑기”**를 누르면 22장의 Major Arcana 가운데 한 장을 선택합니다.
앱 실행
↓
오늘의 질문 입력
↓
카드 Shuffle
↓
1장 선택
↓
The Fool / The Star / The Sun ...
↓
오늘의 메시지
↓
저장 / 공유
여기서 중요한 것은 AI가 없어도 된다는 것입니다. 카드별 positive, caution, love, career 등의 데이터를 JSON으로 만들어 놓으면 완전히 로컬에서 작동합니다.
Flutter에서는 State 관리, Random, Animation, Local Storage, Share를 한 번에 경험할 수 있습니다.
그리고 오늘 이미 카드를 뽑았다면 같은 카드를 보여준다는 규칙을 넣으면 모바일 앱다운 Daily Retention 구조까지 만들어집니다.
2. MBTI Tarot — MBTI × 타로 ★ 가장 추천
오늘 실습 프로젝트로는 이 아이디어가 가장 균형이 좋습니다.
사용자가 자신의 MBTI를 선택합니다.
ENFP
↓
질문 선택
연애
직장
금전
오늘의 조언
↓
Tarot 3장
Past
Present
Future
↓
MBTI × Tarot 해석
예를 들어 같은 The Fool 카드라도 결과를 다르게 만드는 것입니다.
ENFP × The Fool
"새로운 가능성에 끌리는 당신에게
오늘은 도전하기 좋은 날입니다."
ISTJ × The Fool
"계획 밖의 새로운 선택지가
등장할 수 있습니다.
충분히 검토한 뒤 움직여 보세요."
구현도 어렵지 않습니다.
final result = tarotMeaning[card]
[mbtiGroup]
[category];
처음부터 16개 MBTI를 모두 개별 구현하지 않고,
NT → Analyst
NF → Diplomat
SJ → Sentinel
SP → Explorer
처럼 4개 그룹 × Tarot × 질문 Category로 축소하면 됩니다.
이것은 바이브코딩에서 중요한 복잡한 문제를 MVP 데이터 모델로 단순화하는 방법까지 가르칠 수 있다는 장점이 있습니다.
3. Chemistry 16 — MBTI 관계 궁합
젊은 학습자에게는 아마 가장 재미있는 결과물이 될 가능성이 높습니다.
두 사람의 MBTI를 입력합니다.
나
ENFP
상대
INTJ
↓
Compatibility Engine
↓
❤️ 연애 87
💬 대화 92
🤝 협업 81
⚡ 갈등 64
↓
AI 관계 분석
여기서 재미있는 부분은 256개 조합을 일일이 작성할 필요가 없다는 것입니다.
MBTI의 네 축을 비교합니다.
E ↔ I
N ↔ S
T ↔ F
J ↔ P
그리고 간단한 Rule Engine을 만듭니다.
Base Score = 50
N/N match +10
T/F different +8
J/P different +5
E/I different +7
...
최종적으로 AI에게 구조화된 데이터를 넘겨 자연어 설명만 생성하게 할 수도 있습니다.
즉,
Rule Engine → Score → LLM Explanation
구조입니다.
LLM이 궁합 점수까지 마음대로 생성하게 하는 것보다 훨씬 좋은 AI 앱 아키텍처 실습이 됩니다.
4. My Destiny — 생년월일 × MBTI 운세
사주 앱의 느낌을 살리되 2시간짜리 교육에서는 실제 만세력 계산을 구현하지 않는 방식입니다.
사용자가 입력합니다.
생년월일
1990.05.20
출생시간
14:00
MBTI
ENTP
MVP에서는 이를 이용해 간단한 Destiny Profile을 만듭니다.
Birth Data
↓
Simple Rule Engine
↓
Personality Profile
+
MBTI Profile
↓
오늘의 운세
Career ★★★★☆
Money ★★★☆☆
Love ★★★★★
Energy ★★★☆☆
여기에 Calendar를 붙이면 사용자가 매일 기록을 남길 수도 있습니다.
다만 실제 사주팔자 서비스라고 표시하려면 만세력·절기·천간지지 등의 계산 체계를 별도로 정확히 구현해야 합니다. 교육용 MVP라면 이를 “생년월일 기반 엔터테인먼트 운세”로 명확하게 구분하는 것이 좋습니다.
5. Fortune Agent — AI 운세 상담사
이 프로젝트는 이번 과정에서 학습한 AI Agent 개념까지 Flutter와 연결하기 좋습니다.
처음 사용자가 Profile을 만듭니다.
Birthday
+
MBTI
+
관심 분야
연애 / 직장 / 돈 / 인간관계
그리고 AI 상담사에게 질문합니다.
“이번 주에 새로운 프로젝트를 시작해도 될까?”
시스템은 바로 LLM에게 질문하지 않습니다.
User Question
↓
Intent Agent
↓
┌───────────────┐
│ MBTI Profile │
│ Birth Profile │
│ Tarot Tool │
└───────────────┘
↓
Interpretation Agent
↓
Response
예를 들어 Tarot Tool은 실제 LLM이 아니라 Dart 함수여도 됩니다.
Future<TarotCard> drawTarotCard() {
// random card selection
}
Agent는 필요할 때 이 Tool을 호출하고 결과를 해석합니다.
그러면 학습자가 이전에 배운
LLM → Agent → Tool Use → Memory
개념을 모바일 앱에서 다시 경험할 수 있습니다.
오늘 수업용 구성 권장안
공통 프로젝트: MBTI Tarot
전체 구현 구조가 매우 깔끔
Flutter App
│
├── Onboarding
│ └── MBTI 선택
│
├── Home
│ ├── 연애
│ ├── 직장
│ ├── 금전
│ └── 오늘의 운세
│
├── Tarot
│ └── 카드 선택 Animation
│
├── Result
│ └── MBTI × Tarot Interpretation
│
└── History
└── Local Storage
타로·사주·MBTI 모바일 앱 성공 사례 TOP 5
운세 플랫폼 (운칠기삼, 테크랩스, 피플벤처스) 성장 분석
https://brunch.co.kr/@markinnoforest/298
| 앱 | 핵심 포인트 | 성공 신호 |
|---|---|---|
| 포스텔러 | 사주, 타로, 궁합, 별자리, 손금 등 폭넓은 콘텐츠를 제공하고, 자체 분석 시스템(FAS)으로 개인화 풀이를 강화함 | 2023년 5월 기준 누적 가입자 750만 명, MAU 140만 명, 해외 MAU 40만 명 brunch.co |
| 점신 | AI 딥러닝 기반으로 개인별 운세를 제공하고, 역학전문가 연결도 지원함 | 2024년 말 MAU 96만7363명으로 전년 대비 증가 biz.chosun |
| 헬로우봇 | 타로챗봇과 성격·심리 분석 등 “대화형 운세” 경험이 강점 | 3개월 만에 50만 좋아요, 누적 100만 사용자 사례가 소개됨 brunch.co |
| 마이타로 | 신년운세, 사주, 궁합에 더해 MBTI 성향 분석 타로를 전면에 내세움 | MBTI 기반 관계 분석 리포트를 핵심 메시지로 제시 play.google |
| 보라 | 사주와 MBTI를 결합해 소개팅, 고백, 데이트, 이별 같은 상황별 스토리형 운세를 제공 | 앱 소개에서 “사주와 MBTI 조합”을 차별점으로 강조 apps.apple |
참고 1: React Native 베스트 프랙티스
React 유저를 위한 오류 최소화 방법
1. 환경 설정: Expo로 시작하기
바이브코딩 실습에서 가장 많은 오류가 나는 지점이 초기 환경 설정
**Expo (특히 Expo Router 기반)**로 시작 강력히 권장
- Xcode/Android Studio 없이 Expo Go 앱으로 실기기에서 즉시 확인 가능
- 네이티브 빌드 문제(CocoaPods, Gradle 등)를 초반에 회피
npx create-expo-app@latest로 시작하면 최신 SDK + TypeScript + Expo Router가 기본 세팅
React 학습자에게는 Expo Router의 파일 기반 라우팅이 Next.js App Router와 거의 동일해서 진입 장벽이 낮습니다.
2. React 지식을 재활용
“React와 뭐가 같고 뭐가 다른가”를 빨리 파악하게 하는 게 오류 감소의 핵심
- 같은 것: 컴포넌트, props,
useState/useEffect, JSX, 상태 관리 패턴 - 다른 것:
div→View,p/span→Text(텍스트는 반드시Text로 감싸야 함),onClick→onPress, CSS 문자열 → StyleSheet 객체(camelCase, 단위 없음)
가장 흔한 초보 오류가 “텍스트를 Text 밖에 두는 것”과 “웹 CSS 습관으로 스타일 작성”입니다. 이 둘을 미리 짚어주면 실습 중 막히는 시간이 크게 줄어듭니다.
3. 스타일링
- NativeWind (Tailwind for RN)을 쓰면 Tailwind에 익숙한 바이브코딩 학습자가 스타일을 그대로 재활용할 수 있어 학습 곡선이 완만합니다.
- 다만 설정에서 오류가 나기 쉬우니, 시간이 빠듯하면 StyleSheet.create() 기본형으로 진행하고 NativeWind는 심화로 남기는 걸 권합니다.
- Flexbox가 기본이며 웹과 달리
flexDirection이 기본값column이라는 점을 명시하세요.
4. 핵심 기능 구현 스택 (검증된 조합)
오류가 적고 문서가 풍부한 조합으로 고정하는 게 좋습니다.
- 내비게이션: Expo Router
- 서버 상태/데이터 페칭: TanStack Query (React 지식 그대로 사용)
- 로컬 저장: AsyncStorage 또는 expo-secure-store
- 디바이스 기능: expo-camera, expo-location, expo-notifications 등 Expo SDK 모듈 (직접 네이티브 링킹 불필요)
- 폼: React Hook Form
5. 오류 최소화 비법
- 버전 고정: 실습 시작 전 하나의 Expo SDK 버전으로 통일. 버전 불일치가 실습장 오류의 가장 큰 원인입니다.
npx expo install사용:npm install대신 이걸 쓰면 SDK 호환 버전을 자동 선택해 의존성 충돌을 예방합니다.- 실기기 우선: 에뮬레이터 세팅에서 시간을 뺏기지 말고, 각자 휴대폰 + Expo Go로 진행하면 준비 시간이 짧습니다.
- 점진적 빌드: 화면 하나 → 상태 하나 → 기능 하나 순으로 작은 단위로 확인. AI에게 한 번에 앱 전체를 생성시키면 디버깅이 어려워집니다.
- 에러 읽는 법 안내: RN의 Metro 번들러 에러 메시지와 Red Screen 읽는 법을 초반에 5분 정도 다루면 이후 자립 디버깅이 가능해집니다.
추천 실습 흐름
create-expo-app → 탭 내비게이션 확인 → 리스트 화면(로컬 데이터) → API 연동(TanStack Query) → 디바이스 기능 1개(카메라 등) → AsyncStorage로 상태 영속화
참고 2: Flutter 베스트 프랙티스
! Flutter, React Native를 포함, 하이브리드 및 네이티브 개발 도구를 사용한 모바일 앱 빌드 및 배포 과정에서는 전형적인 React 기반 웹앱 빌드 과정과는 다른 수준의 다양한 오류가 발생할 수 있습니다. 학습자 여러분의 집중력과 끈기가 요구됩니다.
본격적인 학습에 앞서 아래 학습 페이지 링크를 통해 기본적인 사전 학습을 진행하세요.
Flutter로 모바일 앱 빌드
https://nextplatform.net/flutter-vibecoding-best-practices/
Flutter 웹앱의 Vercel 배포 시 발생한 오류와 해법
https://nextplatform.net/flutter-vercel-deployment-error-handling/
Flutter 예시 프로젝트
https://github.com/junsang-dong/vibe_1224_saju_flutter
