4주차

Claude Code와 함께하는 풀스택 개발 마스터

Claude Code를 활용한 완전한 개발 워크플로우 경험

9월 2일(화) 20:00 - 22:00

이번 주 핵심 포인트

현업 개발자가 사용하는 실제 도구와 워크플로우 완전 정복

Claude Code, GitHub, Next.js, Firebase까지 - 실제 개발 현장에서 사용하는 모든 도구를 연결하여 완전한 개발 파이프라인을 구축하고 AI 감정 일기장을 완성합니다.

AI 마음 일기장 프로젝트

감정을 인식하고 공감해주며, 따뜻한 응원의 메시지를 전해주는 개인화된 감정 일기 서비스를 만들어봅니다.

AI 감정 분석

일기 내용을 분석하여 감정 상태를 파악하고 맞춤형 피드백 제공

개인화 인증

Firebase Auth를 활용한 안전한 로그인 시스템

실시간 저장

Firestore를 활용한 실시간 데이터 저장 및 동기화

자동 배포

GitHub과 Firebase를 연동한 자동 배포 파이프라인

Step-by-Step 완전 가이드

Claude Code 소개 및 설치

🤖 Claude Code란?

Claude Code는 Anthropic에서 제공하는 혁신적인 AI 기반 개발 도구입니다. 터미널에서 직접 Claude AI와 대화하며 코드를 작성하고, 파일을 편집하고, 프로젝트를 관리할 수 있습니다.

✨ 주요 기능

AI 코딩 어시스턴트: 자연어로 요청하면 코드 생성, 수정, 리팩토링
프로젝트 이해: 전체 코드베이스를 분석하여 맥락적 도움 제공
터미널 통합: 명령어 실행, 파일 관리를 AI와 함께
실시간 협업: 마치 전문 개발자와 페어 프로그래밍하는 느낌

🆚 경쟁 도구들과의 비교

📌 벤치마크 기준: 동일한 TODO 앱 프로젝트(CRUD 기능, 사용자 인증, 배포)를 각 도구로 완성하는데 걸린 시간과 SWE-bench(소프트웨어 엔지니어링 벤치마크) 정확도를 기준으로 측정

Claude Code

정확도: SWE-bench 72.7% (1위)

완성 속도: 1시간 17분 (동일 프로젝트 기준)

비용: $17-200/월

장점: 최고 품질, 프로덕션 준비 코드

단점: 유료 플랜만 제공

Gemini CLI

정확도: SWE-bench 63.8%

완성 속도: 2시간 2분 (동일 프로젝트 기준)

비용: 무료 제공

장점: 비용 부담 없음, 1M 토큰 컨텍스트

단점: 정확도는 Claude보다 낮음

OpenAI Codex

정확도: SWE-bench 69.1%

완성 속도: 약 1시간 45분 (추정)

비용: 오픈소스

장점: 완전 커스터마이징, 팀 협업

단점: 설정 복잡도 높음

📊 개발자 커뮤니티 반응 (2025년)

전문 개발팀: "복잡한 작업엔 Claude Code가 압도적" (72% 선택)
개인 개발자: "무료인 Gemini CLI로 충분히 실용적" (58% 선택)
오픈소스 팀: "Codex의 커스터마이징 기능이 최고" (45% 선택)

"Claude Code는 품질에서, Gemini CLI는 접근성에서, Codex는 유연성에서 각각 승리" - 2025 Developer Survey

💰 요금제 안내 (2025년 기준)

📝 중요 안내: Claude Code는 현재 무료 플랜이 없으며, 유료 구독이 필요합니다.

Pro 플랜

$17/월 (연간 결제)

• Claude Sonnet 4 포함
• 소규모 프로젝트에 적합
• 짧은 코딩 세션용

Max 5x 플랜

$100/월

• Claude Sonnet 4 + Opus 4.1
• 일상적 개발 업무
• 더 많은 사용량

Max 20x 플랜

$200/월

• 최고 성능 모델
• 파워 유저용
• 대용량 프로젝트

🎓 교육 할인 정보

대학생이나 교육 기관의 경우 Education 플랜을 통해 할인된 가격으로 이용할 수 있습니다. 자세한 내용은 Anthropic 공식 사이트에서 확인해주세요.

사전 준비사항

Claude Code 사용을 위해서는 claude.ai에서 유료 계정 구독이 필요합니다.

🛠️ 대안 도구들 설치하기

Claude Code가 유료라면 무료 또는 저렴한 대안들을 바로 설치해보세요!

Google Gemini CLI (무료)

# 설치
npm install -g @google/gemini-cli

# 실행
gemini

# 버전 확인
gemini --version

Google 계정으로 무료 사용 (60req/min, 1000req/day)

OpenAI Codex CLI (오픈소스)

# 설치
npm install -g @openai/codex@latest

# 실행
codex

# 버전 확인
codex --version

ChatGPT 계정으로 사용, 완전 커스터마이징 가능

빠른 테스트 해보기

# Gemini CLI 테스트
gemini -p "Hello, can you help me with coding?"

# Codex CLI 테스트  
codex exec "Create a simple HTML page"

# 어떤 도구가 설치되었는지 확인
gemini --version && codex --version

첫 실행 시 각각 Google 계정, ChatGPT 계정으로 로그인하세요.

1-1. 터미널 기본 사용법

Windows: Win + R → "cmd" 입력 → 엔터
Mac: Cmd + Space → "터미널" 검색 → 엔터

기본 명령어:

cd Desktop          # 데스크톱 폴더로 이동
ls                  # 현재 폴더의 파일 목록 보기 (Mac/Linux)
dir                 # 현재 폴더의 파일 목록 보기 (Windows)
mkdir my-project    # 새 폴더 생성
pwd                 # 현재 위치 확인

1-2. Claude Code 설치 (유료 구독자만)

# npm을 통한 설치 (2025년 최신)
npm install -g @anthropic-ai/claude-code

# 네이티브 바이너리 설치 (Mac/Linux)
curl -fsSL https://claude.ai/install.sh | bash

# 네이티브 바이너리 설치 (Windows)
irm https://claude.ai/install.ps1 | iex

# 설치 확인 및 진단
claude doctor

무료 대안으로 시작해보세요

Claude Code가 유료라면 위에서 설치한 Gemini CLI나 Codex CLI로 같은 경험을 해보실 수 있습니다.

1-3. Claude Code 실행 방법과 권한 설정

# 프로젝트 폴더 생성
mkdir heart-diary
cd heart-diary

# 기본 실행 (안전 모드, 모든 작업에 권한 요청)
claude

# 이전 대화 재개
claude -c

# 위험한 자동 승인 모드 (주의!)
claude --dangerously-skip-permissions

# 대안 CLI 도구들
gemini         # Gemini CLI (무료) 
codex          # Codex CLI (ChatGPT 계정)

⚠️ 권한 설정 가이드

안전 모드: `claude` - 모든 작업에 권한 요청 (권장)
자동 승인 모드: Shift+Tab으로 토글하여 auto-accept 활성화
위험 모드: `--dangerously-skip-permissions` - 컨테이너 환경에서만!

💀 자동 승인 모드는 데이터 손실, 시스템 손상 위험이 있으니 신중히 사용하세요!

✅ 성공 체크포인트

선택한 도구(claude, gemini, codex)가 터미널에서 정상적으로 실행되면 성공!

각 도구별 특별한 기능들

🤖 Claude Code (2025)

# 기본 실행
claude

# 이전 대화 재개
claude -c

# 세션 내 명령어들
/help          # 도움말
/clear         # 컨텍스트 초기화
/resume        # 대화 재개
/permissions   # 권한 설정

# Shift+Tab으로 모드 전환
# - 일반 모드
# - auto-accept edit 모드  
# - plan 모드

Gemini CLI

# YOLO 모드 (자동 승인)
gemini --yolo

# 샌드박스 모드
gemini --sandbox

# 프롬프트로 바로 실행
gemini -p "질문내용"

🛠️ Codex CLI

# 바로 실행
codex exec "명령어"

# 자동 모드
codex --full-auto

# 웹 검색 포함
codex --search

GitHub 완전 정복

GitHub은 개발자들의 필수 도구입니다. 소스코드를 관리하고 다른 개발자들과 협업할 수 있게 해주는 플랫폼입니다.

2-1. GitHub 계정 생성 및 Repository 만들기

github.com에서 계정 생성
"New repository" 버튼 클릭
Repository 이름: "heart-diary" 입력
"Add a README file" 체크
"Create repository" 클릭

2-2. 로컬 프로젝트와 GitHub 연결

# Git 초기 설정 (처음 한 번만)
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# 현재 폴더를 Git 저장소로 초기화
git init

# GitHub Repository와 연결
git remote add origin https://github.com/yourusername/heart-diary.git

# 첫 번째 커밋
git add .
git commit -m "Initial commit"
git push -u origin main

2-3. GitHub의 주요 기능들

Issues: 버그 리포트나 새 기능 요청을 관리
Pull Requests: 코드 변경사항을 검토하고 병합
Actions: 자동화된 빌드와 배포
Branches: 여러 버전의 코드를 동시에 관리

성공 체크포인트

GitHub Repository 페이지에서 내 프로젝트 파일들이 보이면 성공!

Next.js 프로젝트 셋업

Next.js는 React 기반의 웹 프레임워크로, 서버사이드 렌더링과 정적 사이트 생성을 쉽게 해주는 현대적인 웹 개발 도구입니다.

3-1. Node.js 설치 확인

# Node.js 버전 확인
node --version
npm --version

# 없다면 nodejs.org에서 LTS 버전 설치

3-2. Next.js 프로젝트 생성

# Next.js 프로젝트 생성 (Claude Code와 함께)
npx create-next-app@latest heart-diary --typescript --tailwind --app

# 프로젝트 폴더로 이동
cd heart-diary

# 개발 서버 시작
npm run dev

3-3. 프로젝트 구조 이해하기

src/app/: 페이지 컴포넌트들이 위치하는 폴더
src/components/: 재사용 가능한 컴포넌트들
public/: 이미지 등 정적 파일들
package.json: 프로젝트 설정과 의존성 관리

3-4. Claude Code와 Next.js 연동

# Claude와 자연스럽게 대화하며 개발
claude

# 예시 요청:
"Next.js 프로젝트에 TypeScript로 DiaryEntry 컴포넌트를 만들어줘.
사용자가 일기를 작성할 수 있는 텍스트 영역과 저장 버튼이 있어야 해.
Tailwind CSS로 예쁘게 스타일링해줘."

성공 체크포인트

브라우저에서 http://localhost:3000 접속 시 Next.js 기본 페이지가 보이면 성공!

Firebase 완전 설정

Firebase는 Google에서 제공하는 백엔드 서비스로, 데이터베이스, 인증, 호스팅 등을 쉽게 구축할 수 있게 해줍니다.

4-1. Firebase 프로젝트 생성

console.firebase.google.com 접속
"프로젝트 추가" 클릭
프로젝트 이름: "heart-diary" 입력
Google Analytics 설정 (선택사항)

4-2. Firebase 서비스 설정

Authentication 설정:

Authentication 메뉴 → "시작하기"
"Sign-in method" → Google 활성화

Firestore 설정:

Firestore Database → "데이터베이스 만들기"
테스트 모드로 시작

4-3. Firebase SDK 설치 및 설정

# Firebase SDK 설치
npm install firebase

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

# Firebase 로그인
firebase login

# Firebase 프로젝트 초기화
firebase init

4-4. Firebase 설정 파일 생성

// src/lib/firebase.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  // Firebase 콘솔에서 복사한 설정 정보
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  // ... 나머지 설정
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

보안 주의사항

API 키 등 민감한 정보는 .env.local 파일에 저장하고 .gitignore에 추가해주세요.

성공 체크포인트

Firebase 콘솔에서 프로젝트가 생성되고 Authentication, Firestore가 활성화되면 성공!

4-5. 🔧 Firebase 연결 문제 해결 가이드

⚠️ 개발 중 자주 발생하는 문제들

Firebase 연결 오류는 개발 과정에서 매우 흔한 현상입니다. 아래 해결 방법을 따라해보세요.

📡 네트워크 연결 오류

// 일반적인 오류 메시지들:
// - WebChannelConnection RPC 'Write' stream transport error
// - ERR_INTERNET_DISCONNECTED  
// - ERR_CONNECTION_RESET
// - 400 status code responses

// 해결 방법 1: 네트워크 연결 확인
const checkNetworkConnection = () => {
  if (!navigator.onLine) {
    console.log('인터넷 연결을 확인해주세요');
    return false;
  }
  return true;
};

// 해결 방법 2: Firebase 재연결 시도
import { connectFirestoreEmulator, enableNetwork } from 'firebase/firestore';

const reconnectFirestore = async () => {
  try {
    await enableNetwork(db);
    console.log('Firestore 재연결 성공');
  } catch (error) {
    console.log('재연결 실패:', error.message);
  }
};

🏠 오프라인 개발을 위한 Firebase Emulator 설정

# Firebase Emulator Suite 설치 및 실행
firebase init emulators
firebase emulators:start

# 개발용 Firebase 설정 (src/lib/firebase-dev.js)
import { initializeApp } from 'firebase/app';
import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';
import { getAuth, connectAuthEmulator } from 'firebase/auth';

const firebaseConfig = {
  projectId: "heart-diary-dev", // 개발용 프로젝트 ID
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

// 개발 환경에서만 emulator 연결
if (process.env.NODE_ENV === 'development') {
  try {
    connectFirestoreEmulator(db, 'localhost', 8080);
    connectAuthEmulator(auth, 'http://localhost:9099');
  } catch (error) {
    console.log('이미 emulator에 연결됨');
  }
}

export { db, auth };

🛡️ 에러 핸들링과 재시도 로직

// 강력한 에러 핸들링 함수
const firestoreOperation = async (operation, retries = 3) => {
  for (let i = 0; i < retries; i++) {
    try {
      return await operation();
    } catch (error) {
      console.log(`시도 ${i + 1}/${retries} 실패:`, error.message);
      
      if (i === retries - 1) {
        // 마지막 시도 실패시 사용자에게 친화적 메시지
        if (error.code === 'unavailable') {
          throw new Error('인터넷 연결을 확인하고 다시 시도해주세요');
        } else if (error.code === 'permission-denied') {
          throw new Error('권한이 없습니다. 로그인을 확인해주세요');
        } else {
          throw new Error('일시적인 오류입니다. 잠시 후 다시 시도해주세요');
        }
      }
      
      // 재시도 전 잠시 대기
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
};

// 사용 예시
const saveDiary = async (diaryData) => {
  return firestoreOperation(async () => {
    const docRef = await addDoc(collection(db, 'diaries'), diaryData);
    return docRef.id;
  });
};

💾 오프라인 지원 설정

// Firestore 오프라인 지원 활성화
import { initializeApp } from 'firebase/app';
import { getFirestore, enableIndexedDbPersistence } from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 오프라인 데이터 지속성 활성화
enableIndexedDbPersistence(db)
  .then(() => {
    console.log('오프라인 지원 활성화됨');
  })
  .catch((err) => {
    if (err.code === 'failed-precondition') {
      console.log('여러 탭이 열려있어 오프라인 지원을 사용할 수 없습니다');
    } else if (err.code === 'unimplemented') {
      console.log('브라우저가 오프라인 지원을 제공하지 않습니다');
    }
  });

// 연결 상태 모니터링
import { onSnapshot, doc } from 'firebase/firestore';

const monitorConnection = () => {
  const docRef = doc(db, '.info/connectivity');
  
  onSnapshot(docRef, (snapshot) => {
    if (snapshot.exists()) {
      console.log('Firebase 연결 상태: 온라인');
    } else {
      console.log('Firebase 연결 상태: 오프라인');
    }
  });
};

🔧 환경변수 설정 문제 해결

// .env.local 파일 올바른 설정
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key-here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123:web:abc123

// Firebase 설정에서 환경변수 사용
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
};

// 환경변수 검증 함수
const validateFirebaseConfig = () => {
  const required = [
    'NEXT_PUBLIC_FIREBASE_API_KEY',
    'NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN',
    'NEXT_PUBLIC_FIREBASE_PROJECT_ID'
  ];
  
  for (const key of required) {
    if (!process.env[key]) {
      console.error(`누락된 환경변수: ${key}`);
      return false;
    }
  }
  
  console.log('Firebase 환경변수 설정 완료');
  return true;
};

✅ 개발 베스트 프랙티스

오프라인 우선: 항상 네트워크 오류를 가정하고 개발하세요
에러 처리: 사용자 친화적인 에러 메시지를 제공하세요
재시도 로직: 일시적 오류에 대한 자동 재시도를 구현하세요
상태 표시: 로딩, 성공, 실패 상태를 명확히 표시하세요
Emulator 활용: 개발 중에는 Firebase Emulator를 적극 활용하세요

🚨 자주 하는 실수들

환경변수에 NEXT_PUBLIC_ 접두사 빼먹기
Firebase Rules를 너무 제한적으로 설정
에러 핸들링 없이 Firebase 함수 호출
개발 중 실제 Firebase 프로젝트에 테스트 데이터 저장
여러 탭에서 동시에 개발하여 오프라인 지원 충돌

🔧

Firebase 연결 오류가 발생하나요?

걱정하지 마세요! Firebase 연결 오류는 개발 중 매우 흔한 현상입니다. 네트워크 연결 문제, WebChannelConnection 오류, ERR_INTERNET_DISCONNECTED 등이 자주 발생합니다.

👆 위의 Firebase 섹션에서 "🔧 Firebase 연결 문제 해결 가이드"를 확인하여 해결 방법과 오프라인 개발 환경 설정 방법을 익혀보세요.

마음 일기장 개발하기

이제 모든 준비가 완료되었습니다! AI가 공감해주고 응원해주는 감정 일기장을 만들어봅시다.

5-1. 기본 페이지 구조 만들기

# Claude에게 자연어로 요청
claude

# 대화 시작 후 다음과 같이 요청:
"Next.js 앱에 다음 컴포넌트들을 만들어줘:
1. DiaryEntry - 일기 작성 컴포넌트
2. EmotionAnalyzer - 감정 분석 컴포넌트  
3. AIFeedback - AI 응답 표시 컴포넌트
4. /diary 페이지 - 메인 일기 페이지

TypeScript와 Tailwind CSS 사용해서 만들어줘"

5-2. Firebase AI Logic으로 감정 분석 AI 연동

Firebase AI Logic을 활용하여 Gemini API로 일기 내용을 분석하고 감정 상태를 파악하는 기능을 구현합니다.

🔥 Firebase AI Logic 장점

✅ 무료 티어 제공: 프로토타입 개발에 비용 부담 없음
✅ Firebase 통합: Authentication, Firestore와 완벽 연동
✅ 최신 Gemini 모델: 2025년 출시된 강력한 AI 모델 사용
✅ 보안: API 키가 클라이언트에 노출되지 않음

Step 1: Firebase AI Logic 설정

# Firebase AI Logic SDK 설치
npm install firebase/ai-logic

# 기존 Firebase 설정에 AI Logic 추가

Step 2: AI Logic 초기화

// src/lib/firebase.js (기존 파일에 추가)
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
import { getAILogic } from 'firebase/ai-logic';

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);
export const aiLogic = getAILogic(app);

Step 3: 감정 분석 함수 구현

// src/lib/emotion-analyzer.js
import { aiLogic } from './firebase';
import { getGenerativeModel } from 'firebase/ai-logic';

export async function analyzeEmotion(diaryText) {
  try {
    // Gemini 모델 초기화
    const model = getGenerativeModel(aiLogic, { 
      model: "gemini-1.5-flash",
      generationConfig: {
        temperature: 0.7,
        topP: 0.8,
        topK: 40,
        maxOutputTokens: 1024,
      }
    });
    
    const prompt = `
당신은 공감능력이 뛰어난 AI 상담사입니다. 다음 일기를 분석하여 JSON 형식으로 응답해주세요:

일기 내용: "${diaryText}"

응답 형식 (JSON):
{
  "emotion": "기쁨|슬픔|분노|불안|평온|혼합",
  "intensity": 1-5 (1=매우약함, 5=매우강함),
  "keywords": ["키워드1", "키워드2", "키워드3"],
  "empathy_message": "공감 메시지 (50-80자)",
  "support_message": "응원 메시지 (50-80자)",
  "suggested_activity": "추천 활동"
}
    `;
    
    const result = await model.generateContent(prompt);
    const response = await result.response;
    const text = response.text();
    
    // JSON 파싱
    const analysisResult = JSON.parse(text);
    
    return {
      success: true,
      data: analysisResult
    };
    
  } catch (error) {
    console.error('감정 분석 오류:', error);
    return {
      success: false,
      error: '감정 분석 중 오류가 발생했습니다.'
    };
  }
}

// 사용 예시
export async function saveDiaryWithAnalysis(userId, diaryContent) {
  const analysis = await analyzeEmotion(diaryContent);
  
  if (analysis.success) {
    // Firestore에 일기와 분석 결과 함께 저장
    await addDoc(collection(db, 'diaries'), {
      userId,
      content: diaryContent,
      emotion: analysis.data.emotion,
      intensity: analysis.data.intensity,
      keywords: analysis.data.keywords,
      empathy_message: analysis.data.empathy_message,
      support_message: analysis.data.support_message,
      suggested_activity: analysis.data.suggested_activity,
      createdAt: new Date(),
    });
    
    return analysis.data;
  } else {
    throw new Error(analysis.error);
  }
}

5-3. 사용자 인증 구현

// src/components/Auth.js
import { auth } from '@/lib/firebase';
import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

export function LoginButton() {
  const signInWithGoogle = async () => {
    const provider = new GoogleAuthProvider();
    try {
      await signInWithPopup(auth, provider);
    } catch (error) {
      console.error('로그인 실패:', error);
    }
  };

  return (
    <button onClick={signInWithGoogle}>
      Google로 로그인
    </button>
  );
}

5-4. 데이터베이스 연동

// src/lib/diary-service.js
import { db } from '@/lib/firebase';
import { collection, addDoc, query, orderBy, getDocs, where } from 'firebase/firestore';

export async function saveDiary(userId, content, emotion) {
  try {
    await addDoc(collection(db, 'diaries'), {
      userId,
      content,
      emotion,
      createdAt: new Date(),
    });
  } catch (error) {
    console.error('일기 저장 실패:', error);
  }
}

export async function getDiaries(userId) {
  const q = query(
    collection(db, 'diaries'),
    where('userId', '==', userId),
    orderBy('createdAt', 'desc')
  );
  
  const snapshot = await getDocs(q);
  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
}

최종 완성

일기 작성 → AI 감정 분석 → 응원 메시지 → Firebase 저장 → GitHub 자동 배포까지 완전한 파이프라인 구축 완료!

AI 감정 분석 프롬프트 완전 가이드

Firebase AI Logic 기본 감정 분석 프롬프트

// Firebase AI Logic용 프롬프트 (Gemini 모델 최적화)
const emotionAnalysisPrompt = `
당신은 따뜻하고 공감적인 AI 심리 상담사입니다. 
사용자의 일기를 분석하여 정확한 JSON 형식으로 응답해주세요.

일기 내용: "${diaryContent}"

응답 규칙:
1. 반드시 올바른 JSON 형식으로만 응답
2. 감정은 정확히 하나만 선택 (기쁨|슬픔|분노|불안|평온|혼합)
3. 모든 메시지는 따뜻하고 공감적인 톤 유지
4. 구체적이고 실행 가능한 활동 제안

{
  "emotion": "감정_타입",
  "intensity": 1-5,
  "keywords": ["감정키워드1", "감정키워드2", "감정키워드3"],
  "empathy_message": "공감과 이해를 표현하는 메시지 (50-80자)",
  "support_message": "격려와 희망을 주는 메시지 (50-80자)", 
  "suggested_activity": "현재 감정에 맞는 구체적 활동 제안"
}
`;

// Firebase AI Logic 모델 설정
const modelConfig = {
  model: "gemini-1.5-flash",
  generationConfig: {
    temperature: 0.7,        // 창의적이지만 일관된 응답
    topP: 0.8,              // 다양성과 정확성의 균형
    topK: 40,               // 적절한 선택지 범위
    maxOutputTokens: 1024,   // 충분한 응답 길이
    responseMimeType: "application/json"  // JSON 응답 보장
  },
  safetySettings: [
    {
      category: "HARM_CATEGORY_HARASSMENT",
      threshold: "BLOCK_MEDIUM_AND_ABOVE"
    }
  ]
};

상황별 맞춤 프롬프트

😢 슬픈 감정일 때

사용자가 슬픔을 표현하고 있습니다. 
- 감정을 받아주고 공감해주세요
- 슬픔을 느끼는 것이 자연스러운 일임을 알려주세요  
- 작은 위로가 되는 따뜻한 말을 건네주세요
- 혼자가 아님을 느낄 수 있도록 해주세요

😠 화난 감정일 때

사용자가 분노를 표현하고 있습니다.
- 화가 나는 감정을 인정하고 이해해주세요
- 분노의 원인을 파악해서 공감해주세요
- 건강한 감정 표출 방법을 제안해주세요
- 진정할 수 있는 활동을 추천해주세요

😊 기쁜 감정일 때

사용자가 기쁨을 표현하고 있습니다.
- 함께 기뻐해주고 축하해주세요
- 긍정적인 감정을 더 오래 느낄 수 있도록 격려해주세요
- 이 순간을 기억하고 간직하도록 제안해주세요
- 감사함을 표현하도록 도와주세요

😰 불안한 감정일 때

사용자가 불안감을 표현하고 있습니다.
- 불안한 마음을 충분히 이해한다고 전해주세요
- 현재 순간에 집중할 수 있도록 도와주세요
- 작고 실천 가능한 단계를 제안해주세요
- 스스로를 보살피는 방법을 알려주세요

AI 응답 품질 향상 팁

개인화: 사용자의 이름이나 언급한 특정 상황을 활용
구체성: 막연한 위로보다는 구체적인 공감과 제안
일관성: 이전 일기 내용을 참고하여 연결성 있는 응답
적절한 길이: 너무 길지 않고 핵심이 있는 메시지
긍정적 마무리: 항상 희망적이고 격려하는 톤으로 마무리

실습 과제: 완전한 마음 일기장 완성하기

📋 과제 요구사항

✅ Claude Code 설치 및 프로젝트 설정 완료
✅ GitHub Repository 생성 및 코드 업로드
✅ Next.js 기반 웹 애플리케이션 개발
✅ Firebase Authentication으로 사용자 로그인 구현
✅ Firestore를 활용한 일기 데이터 저장/조회
✅ AI 감정 분석 및 응원 메시지 기능
✅ Firebase App Hosting으로 배포
✅ 반응형 디자인으로 모바일 지원

🎯 추가 도전 과제

📊 감정 변화 그래프 시각화
🏷️ 일기 태그 및 검색 기능
📅 달력 형태의 일기 목록
🎨 사용자 맞춤형 테마 변경
📱 PWA(Progressive Web App) 기능

📤 제출 방법

GitHub Repository URL 제출
배포된 웹사이트 URL 제출
프로젝트 설명 README.md 작성
개발 과정에서 겪은 어려움과 해결 방법 정리