Week 4: 레거시 코드 완전 정복 & 종합 실전

AI-First Engineering 최종 실전 과정

🎯 기존 시스템을 AI-First로 완전히 재탄생

📚 과정 개요

Week 4에서는 레거시 시스템을 안전하게 현대적 아키텍처로 전환하는 검증된 방법론을 학습합니다. The State of Vibe Coding의 6단계 프로세스를 활용하여 실제 프로덕션 환경에서 위험 없이 시스템을 재구축하는 실전 역량을 완성합니다.

⏱️ 총 학습시간

120분

Part 1 (60분) + Part 2 (60분)

🎯 학습 목표

  • ✅ 안전한 레거시 전환 마스터
  • ✅ 테스트 기반 리팩토링
  • ✅ 팀 프로젝트 완성

🔥 실전 프로젝트

4명 1팀으로 60분 내에 크리에이터 포트폴리오 빌더 MVP를 AI를 활용하여 완성합니다.

🔄 Part 1: AI로 레거시 코드 리팩토링

📖 학습 자료

The State of Vibe Coding에서 제시하는 검증된 레거시 전환 방법론을 학습합니다.

💡 이 방법론은 실제 프로덕션 환경에서 수십 개 프로젝트에 적용되어 검증되었습니다.

🎯 6단계 안전한 레거시 전환 프로세스 (20분)

1

Unit Test 추가

기존 코드의 핵심 비즈니스 로직에 대한 단위 테스트를 작성합니다. 각 함수와 모듈의 현재 동작을 정확히 캡처하는 것이 목표입니다.

// Example: 기존 함수에 대한 테스트 작성
describe('calculateDiscount', () => {
  it('should apply 10% discount for premium users', () => {
    const result = calculateDiscount(1000, 'premium');
    expect(result).toBe(900);
  });

  it('should not apply discount for regular users', () => {
    const result = calculateDiscount(1000, 'regular');
    expect(result).toBe(1000);
  });
});
2

E2E Test 추가 (Playwright)

사용자 시나리오 기반의 엔드투엔드 테스트를 Playwright로 작성합니다. 전체 워크플로우가 정상 동작함을 검증합니다.

// Example: Playwright E2E 테스트
import { test, expect } from '@playwright/test';

test('user can complete checkout process', async ({ page }) => {
  await page.goto('/products');
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout"]');
  await page.fill('[name="email"]', 'user@example.com');
  await page.click('[data-testid="confirm-order"]');

  await expect(page.locator('.success-message')).toBeVisible();
});
3

모든 테스트 Pass 확인

작성한 모든 테스트가 통과하는지 확인합니다. 이는 현재 시스템의 동작을 정확히 캡처했음을 의미합니다.

# 모든 테스트 실행
yarn test

# E2E 테스트 실행
yarn test:e2e

# 테스트 커버리지 확인
yarn test:coverage
⚠️ 중요: 모든 테스트가 통과하지 않으면 다음 단계로 진행하지 마세요. 테스트가 실패한다면 기존 시스템의 동작을 제대로 이해하지 못한 것입니다.
4

Codebase 복사 & 재작성

원본 코드를 보존하면서 새로운 디렉토리에 복사합니다. 이제 Claude Code를 활용하여 현대적 아키텍처로 재작성합니다.

# 안전한 작업을 위한 브랜치 생성
git checkout -b refactor/legacy-to-nextjs

# Claude Code에게 지시
"현재 PHP 기반 시스템을 Next.js + Firebase로 재작성해줘.
기존 비즈니스 로직은 동일하게 유지하되,
다음 기술 스택을 사용해:
- Next.js 15 App Router
- TypeScript
- Firebase (Firestore + Auth)
- Tailwind CSS

기존 테스트가 모두 통과하도록 동일한 API를 제공해야 해."
5

테스트 기반 검증

기존 테스트 스위트를 새로운 코드에 대해 실행합니다. 모든 테스트가 통과해야만 동일한 동작을 보장할 수 있습니다.

# 새 코드에 대해 기존 테스트 실행
yarn test

# 모든 테스트가 통과할 때까지 반복:
# 1. 테스트 실행
# 2. 실패한 테스트 확인
# 3. AI에게 수정 요청
# 4. 1번으로 돌아가기
✅ 성공 기준: 기존에 작성한 모든 Unit Test와 E2E Test가 100% 통과해야 합니다.
6

점진적 배포 (Feature Flag)

한 번에 모든 사용자를 전환하지 않습니다. Feature Flag를 사용하여 5% → 20% → 50% → 100% 순서로 점진적으로 롤아웃합니다.

// Feature Flag 예시 (Firebase Remote Config)
import { getRemoteConfig, getValue } from 'firebase/remote-config';

const remoteConfig = getRemoteConfig();
const useNewSystem = getValue(remoteConfig, 'use_new_checkout').asBoolean();

export function CheckoutPage() {
  if (useNewSystem) {
    return <NewCheckoutSystem />;
  }
  return <LegacyCheckoutSystem />;
}

// Firebase Console에서 비율 조정:
// Day 1: 5% 사용자에게 새 시스템 노출
// Day 3: 문제없으면 20%로 증가
// Day 7: 50%로 증가
// Day 14: 100% 전환 완료
💡 모니터링: 각 단계에서 에러율, 성능 지표, 사용자 피드백을 면밀히 모니터링합니다. 문제 발견 시 즉시 롤백할 수 있도록 준비합니다.

💼 실전 케이스: 레거시 시스템 전환 (40분)

📋 시나리오

현재 시스템: PHP 5.6 기반의 10년 된 전자상거래 플랫폼
문제점: 느린 성능, 보안 취약점, 유지보수 어려움, 모바일 최적화 부족
목표: Next.js + Firebase로 완전 재구축하되, 비즈니스 로직은 100% 유지

실습 단계

1️⃣
Claude에게 현재 코드 분석 요청
"첨부한 PHP 코드베이스를 분석해줘. 다음 내용을 정리해줘:
1. 핵심 비즈니스 로직 (상품 관리, 주문 처리, 결제)
2. 데이터베이스 스키마
3. 외부 API 통합 (결제 게이트웨이 등)
4. 사용자 인증 플로우
5. 주요 기능별 파일 구조

각 기능이 어떻게 동작하는지 상세히 설명해줘."
2️⃣
테스트 코드 자동 생성
"분석한 비즈니스 로직을 기반으로 다음 테스트를 작성해줘:

1. Unit Tests:
   - 할인 계산 로직
   - 재고 관리 로직
   - 배송비 계산 로직

2. Integration Tests:
   - 주문 생성 플로우
   - 결제 처리 플로우
   - 주문 취소/환불 플로우

3. E2E Tests (Playwright):
   - 회원가입 → 상품 검색 → 장바구니 → 결제 → 주문 완료
   - 주문 내역 조회 → 주문 취소

테스트는 기존 PHP 시스템의 동작을 정확히 검증해야 해."
3️⃣
새로운 아키텍처 설계
"다음 기술 스택으로 새로운 시스템을 설계해줘:

Frontend:
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- React Query (데이터 페칭)

Backend:
- Firebase Functions (서버리스)
- Firestore (NoSQL DB)
- Firebase Auth (인증)
- Stripe (결제)

다음 내용을 포함해서 설계 문서를 작성해줘:
1. 폴더 구조
2. 데이터베이스 스키마 (Firestore collections)
3. API 엔드포인트 설계
4. 상태 관리 전략
5. 보안 설정 (Firestore Rules)"
4️⃣
단계별 마이그레이션 플랜
"마이그레이션 계획을 단계별로 작성해줘:

Phase 1 (Week 1-2): 기반 구축
- Next.js 프로젝트 셋업
- Firebase 프로젝트 생성 및 설정
- 인증 시스템 구현
- 기본 UI 컴포넌트 라이브러리

Phase 2 (Week 3-4): 핵심 기능 구현
- 상품 카탈로그
- 장바구니
- 주문 시스템
- 결제 통합

Phase 3 (Week 5): 데이터 마이그레이션
- MySQL → Firestore 데이터 이관 스크립트
- 데이터 무결성 검증

Phase 4 (Week 6): 테스트 & QA
- 모든 테스트 통과 확인
- 성능 테스트
- 보안 감사

Phase 5 (Week 7-8): 점진적 배포
- Feature flag 설정
- 5% → 20% → 50% → 100% 롤아웃
- 모니터링 및 버그 수정"

🎯 Part 1 완료 체크리스트

  • ✅ 6단계 레거시 전환 프로세스 이해
  • ✅ Unit Test 및 E2E Test 작성 능력
  • ✅ AI를 활용한 코드 분석 및 재작성
  • ✅ 테스트 기반 검증 프로세스
  • ✅ Feature Flag를 통한 안전한 배포 전략

🎓 AI-First Engineering 과정 완료!

축하합니다! 4주간의 여정을 통해 여러분은 이제 AI를 활용한 현대적 개발의 모든 것을 마스터했습니다.

💪

개발 생산성 200% 향상

AI를 활용한 효율적인 개발 프로세스

🏗️

Production-Ready 아키텍처

실전에서 바로 적용 가능한 설계 능력

🔄

레거시 전환 마스터

안전한 리팩토링과 마이그레이션

👥

팀 리더십

조직을 AI-First로 전환하는 역량

🚀 이제 여러분의 차례입니다!

배운 내용을 현업에 적용하고, 팀을 이끌고, 차세대 엔지니어링 리더가 되어보세요.

📚 참고 자료

🎓 추가 학습

  • The State of Vibe Coding (레거시 전환 방법론)
  • Test-Driven Development 심화
  • Feature Flag 전략

🛠️ 도구 & 플랫폼

💬 커뮤니티

  • 코스 카카오톡 채널 (질문 & 토론)
  • 주간 오피스 아워
  • 프로젝트 쇼케이스