Week 2

Mobile Expansion & Market Ready

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

사전 준비사항

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

게스트 강의

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

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

학습 목표

Claude Code 마스터

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

Firebase 백엔드

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

모바일 최적화

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

마케팅 준비

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

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주차로 →