[이제와서 시작하는 Claude AI 마스터하기 #16] 실전 프로젝트 - 풀스택 앱 개발

처음부터 끝까지, AI와 함께

이번 편에서는 Claude Code를 활용해 실제 풀스택 애플리케이션을 개발하는 전 과정을 다룹니다. 기획부터 배포까지 모든 단계에서 AI의 도움을 받아 효율적으로 개발해봅시다.

프로젝트 개요

TaskFlow - 스마트 할 일 관리 앱

graph TB
    A[TaskFlow App] --> B[Frontend<br>React + TypeScript]
    A --> C[Backend<br>Node.js + Express]
    A --> D[Database<br>PostgreSQL]
    A --> E[AI Features<br>Claude API]
    
    B --> F[실시간 동기화]
    C --> G[RESTful API]
    D --> H[관계형 데이터]
    E --> I[스마트 추천]

핵심 기능

1. 스마트 태스크 관리: AI가 우선순위 자동 설정
2. 자연어 입력: “내일 오후 3시에 회의” → 자동 파싱
3. 팀 협업: 실시간 동기화와 댓글
4. 분석 대시보드: 생산성 인사이트
5. 멀티 플랫폼: 웹, 모바일 반응형

1단계: 프로젝트 초기화

프로젝트 구조 설계

# Claude에게 요청: "TaskFlow 프로젝트 구조 생성"

taskflow/
├── frontend/                 # React 애플리케이션
│   ├── src/
│   │   ├── components/      # 재사용 가능한 컴포넌트
│   │   ├── features/        # 기능별 모듈
│   │   ├── hooks/          # 커스텀 훅
│   │   ├── services/       # API 통신
│   │   ├── store/          # 상태 관리
│   │   └── utils/          # 유틸리티
│   └── package.json
├── backend/                 # Express 서버
│   ├── src/
│   │   ├── controllers/    # 요청 핸들러
│   │   ├── models/         # 데이터 모델
│   │   ├── routes/         # API 라우트
│   │   ├── services/       # 비즈니스 로직
│   │   ├── middleware/     # 미들웨어
│   │   └── utils/          # 유틸리티
│   └── package.json
├── shared/                  # 공유 타입 및 유틸리티
│   └── types/
├── database/               # DB 마이그레이션 및 시드
├── docker/                 # Docker 설정
└── .github/               # CI/CD 워크플로우

기술 스택 설정

// Claude가 생성한 기술 스택 설정
export const techStack = {
  frontend: {
    framework: 'React 18',
    language: 'TypeScript',
    styling: 'Tailwind CSS',
    stateManagement: 'Zustand',
    routing: 'React Router v6',
    buildTool: 'Vite',
    testing: 'Vitest + React Testing Library'
  },
  backend: {
    runtime: 'Node.js 20',
    framework: 'Express 5',
    language: 'TypeScript',
    orm: 'Prisma',
    authentication: 'JWT + Passport',
    validation: 'Zod',
    testing: 'Jest + Supertest'
  },
  database: {
    primary: 'PostgreSQL 15',
    cache: 'Redis 7',
    search: 'Elasticsearch'
  },
  infrastructure: {
    containerization: 'Docker',
    orchestration: 'Kubernetes',
    ci: 'GitHub Actions',
    monitoring: 'Grafana + Prometheus'
  }
};

2단계: 백엔드 개발

API 아키텍처 플로우

flowchart LR
    Client[클라이언트] --> Gateway[API Gateway]
    Gateway --> Auth[인증 미들웨어]
    Auth --> Router[라우터]
    
    Router --> TaskAPI[Task API]
    Router --> UserAPI[User API]
    Router --> ProjectAPI[Project API]
    Router --> AnalyticsAPI[Analytics API]
    
    TaskAPI --> TaskService[Task Service]
    UserAPI --> UserService[User Service]
    ProjectAPI --> ProjectService[Project Service]
    AnalyticsAPI --> AIService[AI Service]
    
    TaskService --> DB[(PostgreSQL)]
    UserService --> DB
    ProjectService --> DB
    AIService --> Claude[Claude API]
    
    TaskService --> Cache[(Redis)]
    UserService --> Cache
    
    TaskService --> WS[WebSocket]
    WS --> Client

데이터 모델 설계

// Claude가 생성한 schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  password  String
  avatar    String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  tasks     Task[]
  comments  Comment[]
  projects  ProjectMember[]
  
  @@index([email])
}

model Project {
  id          String   @id @default(cuid())
  name        String
  description String?
  color       String   @default("#3B82F6")
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  
  tasks       Task[]
  members     ProjectMember[]
  
  @@index([name])
}

model Task {
  id          String    @id @default(cuid())
  title       String
  description String?
  status      TaskStatus @default(TODO)
  priority    Priority   @default(MEDIUM)
  dueDate     DateTime?
  completedAt DateTime?
  
  projectId   String
  project     Project   @relation(fields: [projectId], references: [id])
  
  assigneeId  String?
  assignee    User?     @relation(fields: [assigneeId], references: [id])
  
  tags        Tag[]
  comments    Comment[]
  attachments Attachment[]
  
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
  
  @@index([status, priority])
  @@index([assigneeId])
  @@index([projectId])
}

enum TaskStatus {
  TODO
  IN_PROGRESS
  REVIEW
  DONE
  ARCHIVED
}

enum Priority {
  LOW
  MEDIUM
  HIGH
  URGENT
}

model Tag {
  id    String @id @default(cuid())
  name  String @unique
  color String @default("#6B7280")
  
  tasks Task[]
}

model Comment {
  id        String   @id @default(cuid())
  content   String
  createdAt DateTime @default(now())
  
  taskId    String
  task      Task     @relation(fields: [taskId], references: [id])
  
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  
  @@index([taskId])
}

model ProjectMember {
  id        String   @id @default(cuid())
  role      Role     @default(MEMBER)
  joinedAt  DateTime @default(now())
  
  projectId String
  project   Project  @relation(fields: [projectId], references: [id])
  
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  
  @@unique([projectId, userId])
}

enum Role {
  OWNER
  ADMIN
  MEMBER
  VIEWER
}

model Attachment {
  id        String   @id @default(cuid())
  filename  String
  url       String
  size      Int
  mimeType  String
  createdAt DateTime @default(now())
  
  taskId    String
  task      Task     @relation(fields: [taskId], references: [id])
}

API 엔드포인트 구현

// Claude가 생성한 Express 라우터
import { Router } from 'express';
import { z } from 'zod';
import { authenticate } from '../middleware/auth';
import { validate } from '../middleware/validation';
import { TaskService } from '../services/TaskService';
import { AIService } from '../services/AIService';

const router = Router();
const taskService = new TaskService();
const aiService = new AIService();

// 태스크 생성 스키마
const createTaskSchema = z.object({
  title: z.string().min(1).max(200),
  description: z.string().optional(),
  projectId: z.string().cuid(),
  dueDate: z.string().datetime().optional(),
  assigneeId: z.string().cuid().optional(),
  priority: z.enum(['LOW', 'MEDIUM', 'HIGH', 'URGENT']).optional(),
  naturalLanguage: z.string().optional() // AI 파싱용
});

// 자연어로 태스크 생성
router.post('/tasks/natural', 
  authenticate, 
  validate(z.object({ input: z.string() })),
  async (req, res) => {
    try {
      const { input } = req.body;
      const userId = req.user.id;
      
      // AI로 자연어 파싱
      const parsed = await aiService.parseTaskInput(input);
      /*
      입력: "내일 오후 3시까지 프레젠테이션 준비하기 #urgent"
      파싱 결과: {
        title: "프레젠테이션 준비하기",
        dueDate: "2025-08-01T15:00:00Z",
        priority: "URGENT"
      }
      */
      
      const task = await taskService.create({
        ...parsed,
        createdBy: userId
      });
      
      res.status(201).json({ task });
    } catch (error) {
      res.status(400).json({ error: error.message });
    }
  }
);

// 태스크 목록 조회 (스마트 정렬)
router.get('/tasks',
  authenticate,
  async (req, res) => {
    try {
      const { projectId, status, sort = 'smart' } = req.query;
      const userId = req.user.id;
      
      let tasks = await taskService.list({
        userId,
        projectId,
        status
      });
      
      // AI 기반 스마트 정렬
      if (sort === 'smart') {
        tasks = await aiService.prioritizeTasks(tasks, {
          userContext: await getUserContext(userId),
          currentTime: new Date(),
          workload: await getWorkload(userId)
        });
      }
      
      res.json({ tasks });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  }
);

// 태스크 업데이트
router.patch('/tasks/:id',
  authenticate,
  validate(updateTaskSchema),
  async (req, res) => {
    try {
      const { id } = req.params;
      const updates = req.body;
      
      // 권한 확인
      const canEdit = await taskService.canEdit(id, req.user.id);
      if (!canEdit) {
        return res.status(403).json({ error: 'Forbidden' });
      }
      
      const task = await taskService.update(id, updates);
      
      // 실시간 알림
      await notifyTaskUpdate(task);
      
      res.json({ task });
    } catch (error) {
      res.status(400).json({ error: error.message });
    }
  }
);

// 생산성 분석
router.get('/analytics/productivity',
  authenticate,
  async (req, res) => {
    try {
      const { startDate, endDate } = req.query;
      const userId = req.user.id;
      
      const analytics = await aiService.analyzeProductivity({
        userId,
        dateRange: { startDate, endDate }
      });
      
      /* 응답 예시:
      {
        completionRate: 0.78,
        averageCompletionTime: "2.5 days",
        productiveHours: [14, 15, 16], // 오후 2-5시
        suggestions: [
          "높은 우선순위 작업을 오후 시간대에 배치하세요",
          "금요일 오전은 완료율이 낮습니다"
        ],
        strengths: ["마감일 준수율 95%"],
        improvements: ["작업 예상 시간을 더 정확히 설정하세요"]
      }
      */
      
      res.json({ analytics });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  }
);

export default router;

실시간 기능 구현

// WebSocket을 통한 실시간 동기화
import { Server } from 'socket.io';
import { authenticate } from './middleware/socketAuth';

export function setupRealtimeHandlers(io: Server) {
  io.use(authenticate);
  
  io.on('connection', (socket) => {
    console.log(`User ${socket.userId} connected`);
    
    // 프로젝트 룸 참가
    socket.on('join:project', async (projectId: string) => {
      const hasAccess = await checkProjectAccess(socket.userId, projectId);
      if (hasAccess) {
        socket.join(`project:${projectId}`);
        socket.emit('joined:project', { projectId });
      }
    });
    
    // 태스크 업데이트 브로드캐스트
    socket.on('task:update', async (data) => {
      const { taskId, updates } = data;
      
      // 권한 확인 및 업데이트
      const task = await updateTask(taskId, updates, socket.userId);
      
      // 같은 프로젝트의 모든 사용자에게 전송
      io.to(`project:${task.projectId}`).emit('task:updated', {
        task,
        updatedBy: socket.userId,
        timestamp: new Date()
      });
    });
    
    // 실시간 타이핑 인디케이터
    socket.on('typing:start', ({ taskId }) => {
      socket.to(`project:${getProjectId(taskId)}`).emit('user:typing', {
        userId: socket.userId,
        taskId
      });
    });
    
    // 실시간 커서 위치 (협업 편집)
    socket.on('cursor:move', ({ taskId, position }) => {
      socket.to(`project:${getProjectId(taskId)}`).emit('cursor:update', {
        userId: socket.userId,
        taskId,
        position
      });
    });
  });
}

3단계: 프론트엔드 개발

컴포넌트 아키텍처

// Claude가 생성한 주요 컴포넌트
// TaskBoard.tsx - 칸반 보드 컴포넌트
import { DndContext, closestCorners } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { useTaskStore } from '@/store/taskStore';
import { TaskColumn } from './TaskColumn';
import { TaskCard } from './TaskCard';

export function TaskBoard() {
  const { tasks, moveTask, updateTask } = useTaskStore();
  const columns = ['TODO', 'IN_PROGRESS', 'REVIEW', 'DONE'];
  
  const handleDragEnd = async (event) => {
    const { active, over } = event;
    
    if (over && active.id !== over.id) {
      const taskId = active.id;
      const newStatus = over.data.current?.status || over.id;
      
      // 낙관적 업데이트
      moveTask(taskId, newStatus);
      
      try {
        await api.updateTask(taskId, { status: newStatus });
      } catch (error) {
        // 롤백
        moveTask(taskId, active.data.current.status);
        toast.error('Failed to update task');
      }
    }
  };
  
  return (
    <DndContext 
      collisionDetection={closestCorners}
      onDragEnd={handleDragEnd}
    >
      <div className="grid grid-cols-4 gap-4 h-full">
        {columns.map(column => (
          <TaskColumn key={column} status={column}>
            <SortableContext
              items={getTasksByStatus(tasks, column)}
              strategy={verticalListSortingStrategy}
            >
              {getTasksByStatus(tasks, column).map(task => (
                <TaskCard key={task.id} task={task} />
              ))}
            </SortableContext>
          </TaskColumn>
        ))}
      </div>
    </DndContext>
  );
}

// NaturalLanguageInput.tsx - AI 입력 컴포넌트
import { useState } from 'react';
import { useAI } from '@/hooks/useAI';
import { Loader2, Sparkles } from 'lucide-react';

export function NaturalLanguageInput() {
  const [input, setInput] = useState('');
  const [preview, setPreview] = useState(null);
  const { parseTaskInput, createTask } = useAI();
  
  const handleInputChange = async (value: string) => {
    setInput(value);
    
    // 디바운스된 AI 파싱
    if (value.length > 10) {
      const parsed = await parseTaskInput(value);
      setPreview(parsed);
    }
  };
  
  const handleSubmit = async () => {
    if (!preview) return;
    
    await createTask(preview);
    setInput('');
    setPreview(null);
  };
  
  return (
    <div className="relative">
      <div className="relative">
        <Sparkles className="absolute left-3 top-3 text-purple-500" />
        <input
          type="text"
          value={input}
          onChange={(e) => handleInputChange(e.target.value)}
          placeholder="오늘 오후 5시까지 보고서 작성하기..."
          className="w-full pl-10 pr-4 py-3 rounded-lg border"
          onKeyPress={(e) => e.key === 'Enter' && handleSubmit()}
        />
      </div>
      
      {preview && (
        <div className="absolute top-full mt-2 w-full bg-white rounded-lg shadow-lg p-4">
          <h4 className="font-medium mb-2">AI가 이해한 내용:</h4>
          <div className="space-y-1 text-sm">
            <p>📝 제목: {preview.title}</p>
            {preview.dueDate && <p>📅 마감: {formatDate(preview.dueDate)}</p>}
            {preview.priority && <p>🚨 우선순위: {preview.priority}</p>}
            {preview.tags && <p>🏷️ 태그: {preview.tags.join(', ')}</p>}
          </div>
          <button
            onClick={handleSubmit}
            className="mt-3 w-full bg-purple-600 text-white rounded-md py-2"
          >
            작업 생성
          </button>
        </div>
      )}
    </div>
  );
}

// ProductivityDashboard.tsx - 분석 대시보드
import { useAnalytics } from '@/hooks/useAnalytics';
import { LineChart, BarChart, PieChart } from '@/components/charts';

export function ProductivityDashboard() {
  const { data, loading } = useAnalytics();
  
  if (loading) return <LoadingSpinner />;
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {/* 완료율 추이 */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold mb-4">완료율 추이</h3>
        <LineChart
          data={data.completionTrend}
          xKey="date"
          yKey="rate"
          color="#10B981"
        />
      </div>
      
      {/* 시간대별 생산성 */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold mb-4">생산적인 시간대</h3>
        <BarChart
          data={data.productiveHours}
          xKey="hour"
          yKey="productivity"
          color="#3B82F6"
        />
      </div>
      
      {/* AI 인사이트 */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold mb-4">AI 인사이트</h3>
        <div className="space-y-3">
          {data.insights.map((insight, idx) => (
            <div key={idx} className="flex items-start gap-2">
              <span className="text-2xl">{insight.emoji}</span>
              <div>
                <p className="font-medium">{insight.title}</p>
                <p className="text-sm text-gray-600">{insight.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

상태 관리

// Claude가 생성한 Zustand 스토어
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

interface TaskStore {
  tasks: Task[];
  filters: TaskFilters;
  selectedTask: Task | null;
  
  // Actions
  setTasks: (tasks: Task[]) => void;
  addTask: (task: Task) => void;
  updateTask: (id: string, updates: Partial<Task>) => void;
  deleteTask: (id: string) => void;
  moveTask: (id: string, newStatus: TaskStatus) => void;
  
  // Filters
  setFilter: (key: keyof TaskFilters, value: any) => void;
  clearFilters: () => void;
  
  // Computed
  filteredTasks: () => Task[];
  tasksByStatus: () => Record<TaskStatus, Task[]>;
}

export const useTaskStore = create<TaskStore>()(
  devtools(
    persist(
      immer((set, get) => ({
        tasks: [],
        filters: {
          status: null,
          assignee: null,
          priority: null,
          search: ''
        },
        selectedTask: null,
        
        setTasks: (tasks) => set(state => {
          state.tasks = tasks;
        }),
        
        addTask: (task) => set(state => {
          state.tasks.push(task);
        }),
        
        updateTask: (id, updates) => set(state => {
          const index = state.tasks.findIndex(t => t.id === id);
          if (index !== -1) {
            Object.assign(state.tasks[index], updates);
          }
        }),
        
        deleteTask: (id) => set(state => {
          state.tasks = state.tasks.filter(t => t.id !== id);
        }),
        
        moveTask: (id, newStatus) => set(state => {
          const task = state.tasks.find(t => t.id === id);
          if (task) {
            task.status = newStatus;
          }
        }),
        
        setFilter: (key, value) => set(state => {
          state.filters[key] = value;
        }),
        
        clearFilters: () => set(state => {
          state.filters = {
            status: null,
            assignee: null,
            priority: null,
            search: ''
          };
        }),
        
        filteredTasks: () => {
          const { tasks, filters } = get();
          return tasks.filter(task => {
            if (filters.status && task.status !== filters.status) return false;
            if (filters.assignee && task.assigneeId !== filters.assignee) return false;
            if (filters.priority && task.priority !== filters.priority) return false;
            if (filters.search && !task.title.toLowerCase().includes(filters.search.toLowerCase())) return false;
            return true;
          });
        },
        
        tasksByStatus: () => {
          const tasks = get().filteredTasks();
          return tasks.reduce((acc, task) => {
            if (!acc[task.status]) acc[task.status] = [];
            acc[task.status].push(task);
            return acc;
          }, {} as Record<TaskStatus, Task[]>);
        }
      })),
      {
        name: 'task-store',
        partialize: (state) => ({ tasks: state.tasks, filters: state.filters })
      }
    )
  )
);

4단계: AI 통합

AI 기능 통합 아키텍처

sequenceDiagram
    participant U as 사용자
    participant F as Frontend
    participant B as Backend
    participant AI as AI Service
    participant C as Claude API
    participant DB as Database
    
    U->>F: "내일 오후 3시 회의 준비"
    F->>B: POST /api/tasks/natural
    B->>AI: parseTaskInput(input)
    AI->>C: 자연어 파싱 요청
    C-->>AI: 파싱 결과
    AI-->>B: {title, dueDate, priority}
    B->>DB: 태스크 저장
    DB-->>B: 저장 완료
    B-->>F: 생성된 태스크
    F-->>U: 태스크 표시
    
    Note over B,DB: 백그라운드에서 우선순위 재계산
    B->>AI: prioritizeTasks()
    AI->>C: 우선순위 분석
    C-->>AI: 추천 순서
    AI-->>B: 업데이트된 순서
    B->>F: WebSocket으로 실시간 업데이트

Claude API 연동

// AI 서비스 구현
import Anthropic from '@anthropic-ai/sdk';

export class AIService {
  private client: Anthropic;
  
  constructor() {
    this.client = new Anthropic({
      apiKey: process.env.CLAUDE_API_KEY
    });
  }
  
  async parseTaskInput(input: string): Promise<ParsedTask> {
    const response = await this.client.messages.create({
      model: 'claude-3-sonnet-20240229',
      max_tokens: 500,
      temperature: 0.3,
      system: `You are a task parsing assistant. Extract task information from natural language input.
Return JSON with: title, description, dueDate (ISO string), priority (LOW/MEDIUM/HIGH/URGENT), tags (array).
Current time: ${new Date().toISOString()}`,
      messages: [{
        role: 'user',
        content: input
      }]
    });
    
    return JSON.parse(response.content[0].text);
  }
  
  async prioritizeTasks(tasks: Task[], context: UserContext): Promise<Task[]> {
    const response = await this.client.messages.create({
      model: 'claude-3-opus-20240229',
      max_tokens: 1000,
      temperature: 0.5,
      system: `You are a productivity AI. Prioritize tasks based on:
- Due dates and urgency
- User's work patterns (productive hours: ${context.productiveHours})
- Current workload
- Task dependencies
Return task IDs in optimal order with brief reasoning.`,
      messages: [{
        role: 'user',
        content: JSON.stringify({ tasks, context })
      }]
    });
    
    const prioritized = JSON.parse(response.content[0].text);
    return sortTasksByIds(tasks, prioritized.orderedIds);
  }
  
  async generateProductivityInsights(
    userData: UserAnalytics
  ): Promise<ProductivityInsights> {
    const response = await this.client.messages.create({
      model: 'claude-3-sonnet-20240229',
      max_tokens: 1500,
      temperature: 0.7,
      system: `Analyze user productivity data and provide actionable insights.
Focus on patterns, strengths, and specific improvements.
Be encouraging but honest. Use data to support recommendations.`,
      messages: [{
        role: 'user',
        content: JSON.stringify(userData)
      }]
    });
    
    return JSON.parse(response.content[0].text);
  }
}

5단계: 테스트 및 배포

배포 파이프라인 플로우

flowchart TB
    subgraph Development
        Dev[개발자] --> Commit[Git Commit]
        Commit --> PR[Pull Request]
    end
    
    subgraph CI/CD
        PR --> Tests[자동 테스트]
        Tests --> Build[Docker 빌드]
        Build --> Security[보안 스캔]
        Security --> Registry[레지스트리 푸시]
    end
    
    subgraph Deployment
        Registry --> Staging[Staging 배포]
        Staging --> E2E[E2E 테스트]
        E2E --> Production[Production 배포]
        Production --> Monitor[모니터링]
    end
    
    Tests -->|실패| Dev
    Security -->|취약점 발견| Dev
    E2E -->|실패| Dev
    Monitor -->|이슈 감지| Alert[알림]
    Alert --> Dev

종합 테스트

// E2E 테스트 시나리오
import { test, expect } from '@playwright/test';

test.describe('TaskFlow E2E Tests', () => {
  test('Complete task creation flow with AI', async ({ page }) => {
    // 로그인
    await page.goto('/login');
    await page.fill('[name="email"]', 'test@example.com');
    await page.fill('[name="password"]', 'password123');
    await page.click('button[type="submit"]');
    
    // 대시보드 확인
    await expect(page).toHaveURL('/dashboard');
    
    // AI 입력으로 태스크 생성
    await page.fill('[placeholder*="오늘"]', '내일까지 프레젠테이션 준비 #중요');
    await page.press('[placeholder*="오늘"]', 'Enter');
    
    // AI 파싱 결과 확인
    await expect(page.locator('.preview')).toContainText('프레젠테이션 준비');
    await expect(page.locator('.preview')).toContainText('우선순위: HIGH');
    
    // 태스크 생성
    await page.click('button:has-text("작업 생성")');
    
    // 칸반 보드에서 확인
    const newTask = page.locator('.task-card:has-text("프레젠테이션 준비")');
    await expect(newTask).toBeVisible();
    
    // 드래그 앤 드롭으로 상태 변경
    await newTask.dragTo(page.locator('.column-IN_PROGRESS'));
    
    // 실시간 동기화 확인 (다른 브라우저 시뮬레이션)
    const context2 = await browser.newContext();
    const page2 = await context2.newPage();
    await page2.goto('/dashboard');
    await expect(page2.locator('.column-IN_PROGRESS')).toContainText('프레젠테이션 준비');
  });
});

배포 파이프라인

# docker-compose.yml
version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - VITE_API_URL=http://backend:5000
    depends_on:
      - backend

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "5000:5000"
    environment:
      - DATABASE_URL=postgresql://postgres:password@db:5432/taskflow
      - REDIS_URL=redis://redis:6379
      - CLAUDE_API_KEY=${CLAUDE_API_KEY}
    depends_on:
      - db
      - redis

  db:
    image: postgres:15-alpine
    environment:
      - POSTGRES_DB=taskflow
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    command: redis-server --appendonly yes
    volumes:
      - redis_data:/data

volumes:
  postgres_data:
  redis_data:

프로젝트 완성

성능 최적화 결과

최적화 항목	적용 전	적용 후	개선율
초기 로딩 시간	4.2s	1.8s	57% ↓
Lighthouse 점수	72	95	32% ↑
번들 크기	850KB	320KB	62% ↓
API 응답 시간	250ms	95ms	62% ↓
이미지 최적화	-	WebP 변환	45% ↓
캐싱 효율	0%	85%	-
코드 스플리팅	❌	✅	3 chunks
Tree Shaking	❌	✅	180KB 제거

최종 기능 체크리스트

✅ 핵심 기능

• 자연어 태스크 입력
• AI 기반 우선순위 설정
• 실시간 협업
• 드래그 앤 드롭 칸반 보드
• 생산성 분석 대시보드

✅ 기술적 성과

• 타입 안전성 (TypeScript)
• 테스트 커버리지 85%+
• 성능 최적화 (Lighthouse 95+)
• 접근성 준수 (WCAG 2.1)
• 반응형 디자인

✅ 배포 및 운영

• CI/CD 파이프라인
• 컨테이너화
• 모니터링 설정
• 자동 백업

학습 포인트

1. AI 통합: Claude API를 실제 제품에 통합하는 방법
2. 풀스택 아키텍처: 현대적인 웹 앱 구조 설곈4
3. 실시간 기능: WebSocket을 활용한 협업 기능
4. 최적화: 성능과 사용자 경험 개선

기술 스택 비교

구분	기술	선택 이유	대안
Frontend	React + TypeScript	타입 안전성, 커뮤니티, 생태계	Vue.js, Angular
상태 관리	Zustand	간단함, 빠른 학습 곡선	Redux, MobX
스타일링	Tailwind CSS	유틸리티 클래스, 빠른 개발	Styled-components
Backend	Node.js + Express	JavaScript 통일, 빠른 프로토타이핑	Nest.js, Fastify
ORM	Prisma	타입 안전성, 자동 마이그레이션	TypeORM, Sequelize
DB	PostgreSQL	관계형 데이터, 복잡한 쿼리	MongoDB, MySQL
캐시	Redis	성능, 다양한 데이터 구조	Memcached
실시간	Socket.io	WebSocket 추상화, 폴백	Native WebSocket
AI	Claude API	강력한 자연어 처리	OpenAI API

다음 편 예고

다음 편에서는 고급 활용편 “API 활용과 자동화”를 다룰 예정입니다. Claude API를 활용한 더 깊이 있는 통합 방법을 알아보겠습니다.

---

💡 오늘의 과제: TaskFlow의 일부 기능을 직접 구현해보세요. 특히 자연어 입력 기능을 Claude API와 연동해 만들어보세요!