구름 바이브코딩 2/3주차: React/Vite 웹앱, iOS, Android 네이티브 앱 빌드

바이브코딩 마스터 2주차 React Vite iOS Android
바이브코딩 마스터 2주차 React Vite iOS Android

25.09.19 / JUN

지난 1주차 교육과정에서는 Cursor를 활용하여 HTML, CSS, JS 기반 웹앱을 빌드하고 Github Page를 통해 웹앱을 성공적으로 배포하고 공유했습니다.

이번 2/3주차에 사용할 바이브코딩 도구 목록은 다음과 같습니다.

  • 바이브코딩 도구: Cursor/Gemini CLI
  • 프론트엔드 디자인: v0/Base44
  • 프론트엔드 개발: React/Vite
  • 네이티브 앱 개발: Xcode, Android Studio
  • 버전관리 및 배포: Git/Github, Netlify/Vercel, AWS/Akamai

이번 2주차에는 위와 같은 다양한 바이브코딩 도구를 활용해서 바이브코딩 입문자를 위한 상업용 웹앱 및 네이티브앱 개발 교육 과정을 진행합니다.

  • D07. 상업용 웹앱 빌드: Cursor/v0/Base44/React/Vite 프레임워크 기반 웹앱 빌드, 터미널 활용, Git & Github 활용
  • D08. 상업용 웹앱 빌드: (유료 Claude Code 대신) Gemini CLI 활용, 터미널 환경에서 앱 빌드, Git & Github 활용
  • D09. 상업용 모바일앱 빌드: Android/iOS 개발 환경 설치, 네이티브 앱 빌드 환경 구성
  • D10. 상업용 모바일앱 빌드: Android/iOS 샘플 프로젝트를 활용한 네이티브 앱 빌드, 커스터마이징, iOS 앱을 웹앱으로 구현
  • D11. 딥러닝 모델 기반 앱 빌드: 딥러닝 모델 기반의 이미지/영상 분석, 딥러닝 모델 기반 애플리케이션 구현

금주의 바이브코딩 산출물

김두리 | 메모리 이모지 게임 (Base44)
https://emoji-memory-mania-d430be78.base44.app/

동준상 | Gemini Photo Calory (Cursor/React/Vite/Netlify)
https://gemcal.netlify.app/

https://gemcal.netlify.app/

D07. React/Vite 기반 웹앱 빌드 시작하기

React? Vite?

바이브코더를 위한 프론트엔드: React, Vite, JSX (25.09.15 / JUN)
https://notebooklm.google.com/notebook/57e3f1d2-bc56-406e-84d5-252b3c37d6e5

바이브코더를 위한 프론트엔드: React, Vite, JSX (25.09.15 / JUN)
https://notebooklm.google.com/notebook/57e3f1d2-bc56-406e-84d5-252b3c37d6e5

바이브코더를 위한 React/Vite 웹앱 아이디어 3가지

🎵 무드 플레이리스트 생성기

컨셉: 현재 기분을 선택하면 어울리는 음악 장르와 색상 팔레트를 추천하는 앱

  • 감정 버튼 선택 (행복, 우울, 집중, 휴식 등)
  • 선택한 감정에 따른 그라데이션 배경 변화
  • 추천 음악 장르와 아티스트 목록 표시
  • 로컬 스토리지로 최근 선택한 무드 히스토리 저장

장점: 시각적으로 화려하고, 상태 관리와 CSS 애니메이션을 자연스럽게 학습

🏠 나만의 가상 펫 키우기

컨셉: 브라우저에서 키우는 간단한 디지털 펫 (다마고치 스타일)

  • 펫 캐릭터 (고양이/강아지) 선택 및 이름 짓기
  • 먹이주기, 놀아주기, 씻기기 버튼으로 상호작용
  • 펫의 배고픔/행복도/청결도 게이지 표시
  • 시간에 따라 자동으로 감소하는 스탯 시스템
  • 펫이 성장하면서 모습이 바뀌는 레벨 시스템

장점: 실시간 상태 업데이트, 타이머 활용, 조건부 렌더링 학습

예시: 무드 플레이리스트 생성기 구현 가이드

1단계: 프로젝트 초기 설정

  • v0에서 기본 UI/UX 디자인 생성
  • Cursor에서 React/Vite 프로젝트 생성
  • 필요한 의존성 설치 (framer-motion, lucide-react 등)

2단계: 핵심 컴포넌트 구조 설계

  • MoodSelector (감정 버튼 그리드)
  • PlaylistDisplay (추천 음악 표시)
  • MoodHistory (히스토리 컴포넌트)
  • BackgroundGradient (동적 배경)

3단계: 상태 관리 및 데이터 구조

  • useState로 현재 선택된 무드 관리
  • 무드별 음악 데이터 객체 생성
  • localStorage 연동 함수 구현

4단계: 스타일링 및 애니메이션

  • CSS-in-JS 또는 Tailwind로 그라데이션 구현
  • 부드러운 전환 애니메이션 추가
  • 반응형 디자인 적용

스타트업 비즈니스 생태계로서 노션과 워드프레스 비교

구분Notion 기반 비즈니스WordPress 기반 비즈니스
1. 제품 형태주로 템플릿, 위젯, API 통합 앱 판매/제공플러그인, 테마, SaaS형 서비스 판매/구독
2. 시장 규모비교적 신생 시장 (생산성·협업 툴 사용자 위주, 틈새 공략 가능)거대 시장 (전 세계 웹사이트의 약 40% 이상이 WP 사용)
3. 진입 장벽낮음 → 템플릿 제작·공유만으로도 진입 가능중간 이상 → PHP, JS, WP 구조 이해 필요
4. 수익 모델템플릿 판매(저가/다량), API 활용 미니 SaaS, 커뮤니티 구독유료 플러그인/테마 판매, 유지보수, 클라우드 호스팅·에이전시
5. 확장성기능 확장은 API 한계에 따라 제한적, 커뮤니티는 성장 중오픈소스 기반, 플러그인/테마 무궁무진, 에코시스템 방대
6. 유지보수/리스크비교적 단순, 운영 비용 낮음, 다만 Notion 정책 의존도 높음업데이트/보안/호환성 이슈 관리 필요, 하지만 독립성 높음

D08. 웹앱 빌드 & Notion API 연동

  • 대상: 바이브코딩 입문자 (웹/모바일 앱 개발 기초 경험자)
  • 총 시간: 20시간 (5회차 × 4시간)
  • 도구: Cursor, v0, Gemini CLI
  • 기술 요소: React/Vite, Expo(네이티브), Playwright, Notion API, Google Analytics 4, Toss Payments MCP

주제: React/Vite 웹앱 기초 + Notion API 데이터 연동

학습 목표

  • Cursor에서 React/Vite 프로젝트 생성
  • v0로 UI 구성 및 컴포넌트화
  • Notion API 연결 → 데이터 가져오기

실습 시나리오

  1. npm create vite@latest로 프로젝트 생성
  2. v0로 대시보드 UI 생성 (프로젝트/태스크 카드 뷰)
  3. Notion API 연동: 특정 데이터베이스 → fetch → React 화면 표시
  4. GitHub에 푸시 & Pages 배포

워크북 구성

  • Notion API 키 발급 절차
  • Cursor 프롬프트 예시: “Notion API에서 DB 레코드를 가져와 카드 형태로 표시하는 React 컴포넌트를 작성해줘”
  • 체크리스트: UI 출력, API 데이터 정상 호출, 배포 완료

참고 | 노션 API를 활용하는 가장 쉬운 시작 가이드

노션 API는 새롭게 각광받는 소프트웨어 비즈니스 기회이지만 기존 API 활용 방식과는 매우매우 다르다는 점을 고려하고 API 연동 및 응용 작업을 시작하세요.

노션 생태계에서 비즈니스를 하려면 가장 먼저 노션 마켓플레이스에서 프로필 작성부터 시작하세요.

https://www.notion.so/profile

노션 마켓플레이스에서 팔 수 있는 3대 아이템

  • 템플릿
  • 서비스
  • API통합

노션 서비스란?

노션 응용 소프트웨어 활용 및 개발 파트너로서 컨설팅, 강의 서비스를 제공하는 것을 의미해요.

노션 파트너 신청을 하려는 분들은 먼저 아래 인증 과정을 수료하고 테스트에 통과해주세요.

API 인테그레이션에서 노션 API 키를 생성할 수 있어요.

키 유형은 프라이빗(인터널), 퍼블릭 등 두 가지가 있는데, 바이브코더를 위해서는 일단 프라이빗 키 생성을 권장해요.

노션 API 키 생성 완료!

노션 API 키 권한도 설정

D09. 상업용 모바일앱 빌드: Android/iOS 개발 환경 설치, 네이티브 앱 빌드 환경 구성

1. 안드로이드 앱 비즈니스 현황

  • Google Play 소비자 지출: $55.5~58.1B (2024)
  • 개발자 실제 수익: 수수료 제외 후 약 70% ($38~40B)
  • 앱 다운로드: 매년 수십~수백십억 건
  • 등록 앱 수: 약 3.95M 개
  • 수익 구조: 광고, 인앱 구매, 구독 중심
  • ⚠️ 주의: 소비자 지출 ≠ 개발자 순수익 (세금, 수수료 차감)

2. 개발 시작 준비

  • 필수 도구: Android Studio, SDK, Emulator, USB Driver
  • JDK: 내장(OpenJDK) 포함 → 별도 설치 불필요
  • Google 계정 필요 (Play Console 등록: 유료)
  • OS 지원: Windows, macOS, Linux
  • 설치 마법사에서 SDK Platform 함께 구성

3. 프로젝트 생성 & UI 작성

  • New Project → Empty Activity / Empty Compose Activity
  • 기본 설정: 패키지명, 언어(Kotlin), Minimum SDK(API 24~26)
  • Gradle Sync 후 기본 골격 준비
  • UI 작성 (Jetpack Compose 예시): class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Text("Hello, Android!") } } }

4. 실행 & 배포

  • 실행
    • 에뮬레이터: Pixel 기기 + 최신 이미지
    • 실제 기기: 개발자 옵션 → USB 디버깅 ON → Run ▶️
  • 빌드/배포
    • Generate Signed Bundle / APK
    • 권장: AAB(App Bundle) → Play Store 제출
    • Key store 생성: 비번/별칭 안전 저장

D10. 상업용 모바일앱 빌드: Android/iOS 샘플 프로젝트를 활용한 네이티브 앱 빌드, 커스터마이징, iOS 앱을 웹앱으로 구현

1. iOS 앱 비즈니스 현황

  • 글로벌 iPhone 사용자: 약 14~15억 명
  • Apple 전체 활성 디바이스: 23억 개 이상
  • App Store 생태계 매출(2024): 약 1.3조 달러
    • 디지털 상품/서비스: $131B
    • 물리적 상품/서비스: $1,014B
    • 광고 수익: $150B
  • 개발자 수익: 디지털 상품/구독/광고 중심, Apple 수수료 차감

2. 개발 준비 (1~2단계)

  • 필수 도구
    • Mac, Xcode (App Store 무료 설치), Apple ID
    • 개발자 계정: $99/년 → 실제 기기 배포 & App Store 등록
  • 새 프로젝트 생성
    • Xcode → File > New > Project
    • 템플릿: iOS App
    • 언어: Swift, UI: SwiftUI
    • 프로젝트 이름 & 저장 위치 설정

3. 개발 & 실행 (3~4단계)

  • UI & 코드 작성 (SwiftUI)
    • 기본 예시: struct ContentView: View { var body: some View { Text("Hello, iOS!").padding() } }
    • 실시간 미리보기, 버튼·이미지 추가 가능
  • 시뮬레이터 실행
    • iPhone 기기 선택 → ▶️ Run
    • 수정 후 저장 시 자동 리빌드

4. 실제 기기 실행 & 배포 (5~6단계)

  • 실제 iPhone 실행
    • USB/Wi-Fi 연결 → Apple ID 등록 → Run ▶️
    • 개발자 계정 필요
  • App Store 배포
    • Xcode → Product > Archive → 빌드 생성
    • App Store Connect에 업로드
    • 리뷰 승인 후 배포

D11. 딥러닝 모델 기반 앱 빌드: 딥러닝 모델 기반의 이미지/영상 분석, 딥러닝 모델 기반 애플리케이션 구현

TensorFlow | 구글이 만든 머신러닝/딥러닝 플랫폼
https://www.tensorflow.org/

https://www.tensorflow.org/

OpenCV | 세계 최대 컴퓨터 비전 라이브러리
https://opencv.org/

https://opencv.org/

1. 이미지 분석 모델 구현

  • 주제: “고양이 vs 개 분류기” (전형적인 CNN 연습 예제)
  • 활용: TensorFlow/Keras로 사전학습된 모델(MobileNetV2, EfficientNet) 불러오기 → Transfer Learning으로 빠르게 학습
  • 학습 포인트:
    • 데이터셋 불러오기 (tensorflow_datasets 또는 Kaggle 소규모 데이터)
    • 데이터 전처리(리사이즈, 정규화)
    • CNN 아키텍처 이해(합성곱, 풀링, 활성화 함수)
    • 학습/검증 정확도 시각화

2. 영상 분석 모델 구현

  • 주제: “손동작 인식 (예: 가위·바위·보)”
  • 활용:
    • OpenCV로 웹캠 프레임 입력 → TensorFlow 모델로 분류
    • 미리 학습된 모델 불러오기 → 실시간 추론
  • 학습 포인트:
    • 영상 → 프레임 단위 이미지 변환
    • 사전학습 모델을 이용한 실시간 추론
    • FPS(초당 프레임 수)와 모델 경량화의 관계

3. 딥러닝 기반 애플리케이션 구현

  • 실시간 얼굴 표정 인식 → 감정 태그 스티커 앱
    • TensorFlow 모델 + OpenCV → 웃음/놀람/슬픔 감지
    • React/Vite 프론트엔드에서 웹캠 + TensorFlow.js 활용 가능
  • 음식 사진 분석 → 칼로리 추정 앱
    • 음식 데이터셋으로 Transfer Learning
    • 앱에서 사진 업로드 → 모델이 음식 종류 + 칼로리 예측
  • 영상 속 객체 탐지 → 스포츠 경기 분석기
    • YOLO/TensorFlow Object Detection API 활용
    • 농구 경기 영상 → 슛/패스/리바운드 이벤트 태깅

4. 딥러닝 모델 기반 웹앱 구현 3단계

  • 1단계 (2시간): 이미지 분류 모델 구현 (고양이 vs 개)
  • 2단계 (1시간): 실시간 웹캠 영상 분석 체험 (손동작 인식)
  • 3단계 (1시간): 모델 → 간단한 웹앱 연결 (TensorFlow.js + React/Vite)
  • 보너스 아이디어: 앱에 “좋아요/저장” 기능 붙여 서비스화 상상까지 확장

✅ 정리

  • React/Vite + TensorFlow.js 조합으로 브라우저 안에서 실행 → 설치/환경 부담 줄임
  • 입문자는 복잡한 모델 설계보다는 사전학습 모델 활용이 효과적

NXP DL TF Best CNN MNIST (1202 / 동준상).ipynb
https://colab.research.google.com/drive/1oOsEcP4BIbomIcMgid63R-32GPVoiSRO?usp=sharing

  • 이번 코랩 노트북은 MNIST 손글씨 숫자 이미지 데이터셋을 대상으로 텐서플로(TensorFlow) 기반 합성곱 신경망(CNN) 모델을 설계·학습·평가하는 과정을 담고 있습니다.
  • 데이터 전처리, CNN 아키텍처 정의, 학습 과정 시각화, 정확도 측정 및 성능 개선 실험까지 포함해, 딥러닝 입문자가 모델 구현과 성능 최적화의 기본 흐름을 이해할 수 있도록 구성되어 있습니다.
Best CNN MNIST

참고자료

1. Git 및 GitHub 활용

NotebookLM | 바이브코더를 위한 Git 및 GitHub 가이드 (25.09.15 / JUN)
https://notebooklm.google.com/notebook/828887cf-2db3-4b12-becf-80d853e40d1b

2. 웹앱 개발 아이디어

Sync2sheets (데이터 변환) by Leandro

Creator Hunter (마케팅 플랫폼) by Paulius

Waitly (예약 플랫폼) by Joe

Bank Statement Converter (PDf >> Excel 변환기) by Angus

3. 모바일 앱 개발 아이디어

Rootd (iOS 앱) by Ania

Stagetimer (iOS 앱) by Lukas

2025 iOS 베스트 앱 25
https://apps.apple.com/us/story/id1771730364

2025 안드로이드 베스트 앱
https://www.pcmag.com/picks/best-android-apps?test_uuid=03HYOxRLHSGDXtTLiJKLr6U&test_variant=A

2025 안드로이드 (생산성부문) 베스트 앱 17
https://early.app/blog/best-productivity-apps-android/

글로벌 히트 iOS 앱 5선

  • Pocket Champs (Madbox, 프랑스)
    캐주얼 레이싱 게임으로, 수백만 글로벌 유저를 확보하며 소규모 개발사의 성공 사례로 꼽힘.
  • Lapse (영국)
    아이폰을 디스포저블 카메라처럼 사용할 수 있도록 해주는 사진 앱. 유니크한 ‘현상’ 경험으로 젊은 층에 인기가 많으며, 빠르게 해외에서 인지도를 올림.
  • Play (미국)
    SwiftUI 기반 인터랙티브 프로토타입 제작 앱. 접근성이 뛰어나 디자이너 커뮤니티에서 인기를 얻었으며, Apple Design Award 수상 경력이 있음.
  • Moises (브라질)
    AI 기반 음악 트랙 분리 및 리믹스 앱. 머신러닝 기술로 오디오를 분리해주는 혁신성으로 음악 팬과 크리에이터 사이에서 폭발적으로 성장함.
  • HabitKit (독일)
    최소 인력으로 개발된 습관 추적 앱. 인디 개발자가 마케팅에 성공해 유럽·미국 등 글로벌 유료 순위에 진입함.

특징 및 트렌드

  • 전체적으로 소규모 팀, 인디 개발자가 틈새 아이디어나 AI·커뮤니티 기능을 활용해 글로벌 성공을 거두는 사례가 많음.
  • 대부분 초기엔 무료로 출시한 뒤, 부분 유료화나 구독 모델로 빠르게 수익화하는 방식이 많음.
  • 앱스토어의 글로벌 유통 파워 덕분에 적은 인원으로도 수백만 다운로드를 달성한 사례가 다수임.

이 앱들은 참신함과 접근성, 그리고 커뮤니티 중심의 소통 기능을 무기로 삼아 전 세계적으로 화제를 모은 사례들이다.

이 포스트는 교육생 특화 콘텐츠입니다. / 첫 포스팅: 25.09.15 / 포스트 문의: JUN (naebon@naver.com)

Views: 272

Leave a Reply

Related Posts