Week 2

Mobile Expansion & Market Ready

모바일 앱 확장, 디버깅, 마케팅 - Firebase + Claude Code

사전 준비사항

  • Claude Code 설치 (유료 구독 필요)
  • GitHub 계정 생성 (Firebase 배포용)
  • VS Code 설치

게스트 강의

지용구 대표 - 플랫폼 전략 소개

모바일 앱 시장에서 성공하기 위한 플랫폼 전략과 사용자 확보 방법론

학습 목표

Claude Code 마스터

터미널에서 AI와 대화하며 코드를 작성하는 Claude Code 사용법을 익힙니다.

Firebase 백엔드

데이터베이스, 인증, 배포를 한 번에 해결하는 Firebase를 설정합니다.

모바일 최적화

PWA와 반응형 디자인으로 모바일에서도 잘 작동하는 앱을 만듭니다.

마케팅 준비

SEO 설정과 메타데이터로 검색 엔진에 노출될 준비를 합니다.

Replit + Expo 모바일 앱 개발 프로세스

1

사전 준비

Replit과 Expo 환경을 설정합니다

  • Replit Core 요금제 구독 (모바일 앱 빌드 포함)
  • Expo Go 앱 설치 (iOS: App Store / Android: Play Store)
  • 무료 Expo EAS 계정 생성 (expo.dev)
  • 앱스토어 배포용: Apple Developer ($99/년) 또는 Google Play ($25 일회성)
2

Expo 프로젝트 시작

Replit에서 Expo 템플릿으로 프로젝트 생성

  • Replit 홈에서 "Create Repl" 클릭
  • Expo 템플릿 선택 후 "Remix"로 복사
  • "Run" 버튼 클릭하여 프로젝트 실행
  • Console에 QR 코드 표시됨
Tip: Expo는 React Native 기반으로 iOS, Android, Web을 하나의 코드로 빌드합니다
3

실시간 테스트 (QR 코드)

Expo Go 앱으로 실시간 미리보기

  • 스마트폰에서 Expo Go 앱 실행
  • Console에 표시된 QR 코드 스캔
  • 1~2분 내 앱이 폰에서 실행됨
  • 코드 수정 시 실시간으로 반영됨
Tip: 같은 Wi-Fi 네트워크에 있어야 합니다. 연결 문제 시 "Tunnel" 모드 사용
4

AI Agent로 기능 개발

자연어로 앱 기능을 설명하고 AI가 코드 작성

  • Build 모드: 복잡한 기능, 대규모 변경
  • Fast 모드: 작은 조정, 간단한 수정
  • Plan 모드: 브레인스토밍, 전략 논의
  • 예: "버튼을 누르면 랜덤 고양이 이미지를 보여줘"
5

EAS 초기화 및 빌드 설정

앱스토어 배포를 위한 EAS 설정

  • 실행 중인 앱 중지
  • Workspace 드롭다운에서 "EAS init" 선택
  • Expo 계정으로 로그인
  • 프로젝트 생성 또는 기존 프로젝트 선택
6

iOS 배포 준비

iPhone에서 직접 앱 설치 및 테스트

  • 드롭다운에서 "EAS publish preview iOS" 선택
  • 번들 ID 입력 (예: com.yourname.mindiary)
  • App Store Connect 인증
  • 기기 등록: QR 코드 스캔 → 프로필 다운로드 → 설정에서 설치
Tip: 개발자 모드 활성화: 설정 > 개인정보 보호 및 보안 > 개발자 모드
7

앱스토어 제출 (선택)

실제 앱스토어에 앱 등록

  • Expo 대시보드에서 빌드 상태 확인 (10~15분)
  • 빌드 완료 시 QR 코드로 설치 테스트
  • Publish 버튼 클릭으로 앱스토어 제출
  • Replit이 컴파일, 서명, 제출 모두 자동 처리

Claude Code 설치 및 설정

  1. Git 설치 (필수)

    Claude Code는 Git과 함께 작동합니다. 먼저 Git을 설치하세요.

    # Windows (PowerShell에서)
winget install --id Git.Git -e --source winget

# macOS (Terminal에서)
brew install git

# 설치 확인
git --version

  2. Claude Code 설치

    # npm으로 전역 설치
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version
    Tip: Claude Code는 Anthropic의 유료 서비스입니다. 구독이 필요합니다.

  3. Claude Code 실행

    # 프로젝트 폴더에서 실행
cd my-project
claude

# 권한 확인 생략하고 실행 (더 빠름)
claude --dangerously-skip-permissions

Firebase 프로젝트 설정

  1. Firebase Console에서 프로젝트 생성

    1. Firebase Console 접속
    2. Google 계정으로 로그인
    3. "프로젝트 추가" 클릭
    4. 프로젝트 이름 입력 (예: mind-diary-app)
    5. Google Analytics 활성화 (추천)
    Tip: Next.js에서 SSR을 사용하려면 Blaze 요금제(종량제)가 필요합니다. 무료 할당량이 충분해서 소규모 프로젝트는 거의 무료입니다.

  2. Firebase CLI 설치 및 로그인

    # Firebase CLI 설치
npm install -g firebase-tools

# 설치 확인
firebase --version

# Firebase 로그인 (브라우저가 열림)
firebase login

# 프로젝트 목록 확인
firebase projects:list

  3. 프로젝트에 Firebase 연결

    # 프로젝트 폴더에서 실행
firebase init

# 선택 사항:
# - Firestore: Yes (데이터베이스)
# - Hosting: Yes (웹 호스팅)
# - Functions: 선택사항 (서버리스 함수)
# - 프로젝트: 방금 만든 프로젝트 선택

마음일기 v2: Firebase 버전

Claude Code로 Firebase 연동하기

Claude Code에게 다음과 같이 요청합니다:

Claude Code 프롬프트

"마음일기 앱에 Firebase를 연동해줘. Firestore에 일기를 저장하고, Firebase Auth로 Google 로그인을 구현해줘. 사용자별로 일기를 분리해서 저장하고, 지난 일기 목록을 볼 수 있게 해줘."

Firestore 데이터 구조

// 컬렉션 구조
users/
  {userId}/
    diaries/
      {diaryId}/
        content: "오늘 일기 내용..."
        emotion: "happy"
        emotionScore: 8
        feedback: "AI 피드백..."
        createdAt: timestamp
        updatedAt: timestamp

Firebase Auth 설정

// Firebase Console에서
// Authentication > Sign-in method > Google 활성화

// 코드에서 Google 로그인
import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const provider = new GoogleAuthProvider();
const result = await signInWithPopup(auth, provider);
const user = result.user;

모바일 최적화

반응형 디자인 체크리스트

  • 뷰포트 메타 태그 설정
  • 터치 타겟 크기 최소 44px
  • 폰트 크기 16px 이상 (확대 방지)
  • 가로 스크롤 제거
  • 이미지 최적화 (next/image 사용)

PWA 설정

manifest.json을 추가하면 앱처럼 설치할 수 있습니다:

// public/manifest.json
{
  "name": "마음일기",
  "short_name": "마음일기",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#667eea",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

배포하기

# 빌드
npm run build

# Firebase 배포
firebase deploy

# 또는 hosting만 배포
firebase deploy --only hosting

# 배포 완료! URL 확인
# https://프로젝트ID.web.app
배포 전 체크리스트:
  • 환경 변수(.env.local)가 .gitignore에 있는지 확인
  • API 키가 코드에 노출되지 않았는지 확인
  • Firestore 보안 규칙 설정

이번 주 과제

  • 마음일기 v2를 Firebase와 연동하여 배포하기
  • Google 로그인 기능 추가하기
  • 모바일에서 테스트하고 문제점 수정하기
  • (도전) 지난 일기를 시각화하는 감정 차트 추가하기
← 1주차로3주차로 →