Week 1

AI-First 개발의 기초와 마인드셋 전환

"자동차와 달리기 시합을 하지 말자"

전통적인 개발 방식에서 벗어나 AI를 활용한 혁신적인 개발 패러다임을 이해하고, 실전에서 즉시 적용할 수 있는 핵심 도구와 마인드셋을 학습합니다.

Claude Code 빠른 설치 가이드

대부분 nvm, npm, git 설치에서 막히는 문제를 해결한 한번에 설치하는 방법입니다.

🪟Windows 설치 방법

⚡ 자동 설치 (권장)

  • 위의 "Windows 설치 스크립트" 버튼 클릭하여 다운로드
  • PowerShell을 관리자 권한으로 실행
  • 다운로드한 스크립트 파일을 PowerShell 창에 드래그 앤 드롭 후 Enter
  • 자동으로 Git, Node.js, Claude Code 설치 완료!

🔧 수동 설치 (직접 명령어 입력)

# PowerShell 관리자 권한에서 실행
winget install Git.Git OpenJS.NodeJS Anthropic.Claude

💡 Winget이 없다면? Windows 11에는 기본 탑재. Windows 10은 Microsoft Store에서 "App Installer" 설치

🍎Mac 설치 방법

⚡ 자동 설치 (권장)

  • 위의 "Mac 설치 스크립트" 버튼 클릭하여 다운로드
  • Terminal을 실행
  • 다운로드 폴더로 이동 후 실행:
    cd ~/Downloads
    chmod +x install-claude-mac.sh
    ./install-claude-mac.sh
  • 자동으로 Git, Node.js, Claude Code 설치 완료!

🔧 수동 설치 (직접 명령어 입력)

# Terminal에서 실행
brew install git node
brew install --cask claude

💡 Homebrew가 없다면? 스크립트가 자동으로 설치하거나, Terminal에서 직접 실행: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

⚠️ 문제 해결

  • ❌ "명령어를 찾을 수 없습니다" 오류
    → Terminal/PowerShell을 완전히 종료 후 재실행 (환경변수 반영 필요)
    → 그래도 안 되면 컴퓨터를 재시작하세요
  • ❌ PATH 환경변수 문제 (설치했는데도 명령어 안 됨)
    Windows: 설치 스크립트가 자동으로 PATH를 설정합니다. 수동으로 하려면: 시스템 환경변수 편집 → Path 변수 → 새로 만들기 →C:\Program Files\Git\cmd,C:\Program Files\nodejs 추가
    Mac: 설치 스크립트가 .zprofile과 .zshrc에 자동 추가합니다. 수동으로 하려면 Terminal에서: echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
  • ❌ 권한 오류
    → Windows: PowerShell을 관리자 권한으로 실행 (우클릭 → "관리자 권한으로 실행")
    → Mac: 필요시 sudo 사용 (비밀번호 입력)
  • ❌ 이전 버전 충돌
    → Windows: winget uninstall Git.Git 후 재설치
    → Mac: brew uninstall git node 후 재설치
  • ❌ Claude Code가 실행 안 됨
    → 새 Terminal/PowerShell 창에서 다시 시도
    → Mac: Applications 폴더에서 직접 Claude 앱 실행
    → Windows: 시작 메뉴에서 "Claude" 검색 후 실행

💡 자동 설치 스크립트의 장점
설치 스크립트는 PATH 환경변수를 자동으로 설정하고, 중복 설치를 방지하며, 설치 확인까지 한번에 처리합니다. 수동 설치보다 훨씬 안전하고 빠릅니다!

📄CLAUDE.md 개발 가이드

AI-First 개발을 위한 필수 설정 파일입니다. 프로젝트의 개발 규칙, 컴포넌트 구조, 스타일 가이드, 테스트 정책 등을 Claude Code에게 알려주는 가이드 문서입니다. 프로젝트 루트에 이 파일을 추가하면 Claude가 여러분의 코딩 스타일과 규칙을 이해하고 일관된 코드를 생성합니다.

💡 사용 방법: 다운로드한 CLAUDE.md 파일을 프로젝트 루트 디렉토리에 복사한 후, 프로젝트에 맞게 커스터마이징하세요. Claude Code가 자동으로 이 파일을 읽고 지침을 따릅니다.

🎯Part 1: Claude Code 완전 정복60분

AI-First 개발의 핵심 도구인 Claude Code를 완벽하게 마스터합니다. 단순한 기능 소개를 넘어, 실전에서 생산성을 극대화하는 방법을 실습을 통해 체득합니다.

🔄Claude Code vs 전통적 개발 도구 비교20분

실습: 동일한 Todo 앱을 각각 만들어보기

같은 기능의 Todo 애플리케이션을 두 가지 방식으로 구현하며 극명한 차이를 체감합니다.

👨‍💻전통적 방식 (VSCode + 직접 코딩)

  • 프로젝트 구조 설계부터 시작
  • 컴포넌트별로 코드 직접 작성
  • 스타일링 일일이 구현
  • 상태 관리 로직 직접 구현
  • 버그 디버깅에 시간 소요
  • 예상 소요시간: 2-3시간

🤖Claude Code 방식

  • 자연어로 요구사항 설명 ("할일 관리 앱 만들어줘")
  • Claude가 전체 구조 자동 생성
  • 스타일까지 포함된 완성된 컴포넌트
  • 상태 관리 로직 자동 구현
  • 버그 발견 시 즉시 수정 요청
  • 실제 소요시간: 10-15분

💡 핵심 차이점 체감

  • 시간: 10배 이상의 속도 차이
  • 완성도: Claude Code는 edge case 처리, 접근성, 반응형 디자인까지 자동 적용
  • 문제 해결 방식: 구글 검색/Stack Overflow vs 대화형 문제 해결
  • 학습 곡선: 문법/API 암기 vs 요구사항 명확화 능력

⚔️Claude Code vs REPLIT 심층 비교20분

두 가지 AI 기반 개발 도구를 실전 데모를 통해 비교하고, 각각의 강점과 적합한 사용 시나리오를 파악합니다.

🚀Claude Code의 강점

  • 로컬 개발 환경 - 빠른 성능, 무제한 리소스
  • 파일 시스템 전체 접근 - 대규모 프로젝트 관리
  • Git 통합 - 전문적인 버전 관리
  • 프로덕션 배포 - Firebase, Vercel 등 자유로운 선택
  • 비용 효율 - 사용량 기반 과금 없음

REPLIT의 강점

  • 즉시 시작 - 설치/설정 없이 브라우저에서 바로 개발
  • 원클릭 배포 - 공유 링크 즉시 생성
  • 협업 용이 - 실시간 페어 프로그래밍
  • 교육 친화적 - 초보자에게 진입장벽 낮음
  • 프로토타입 제작 - 빠른 아이디어 검증

🎬 실전 데모: 같은 기능을 두 플랫폼에서 구현

간단한 날씨 앱을 Claude Code와 REPLIT 양쪽에서 구현하면서 워크플로우 차이를 실시간으로 비교합니다.

  • 프로젝트 생성부터 배포까지 전 과정 시연
  • 각 도구의 UI/UX 차이점 분석
  • 실제 사용 시나리오별 추천 도구 가이드

🎨프롬프트 엔지니어링의 진짜 비밀20분

"좋은 프롬프트는 단순히 명확한 지시가 아니라, AI가 실패할 수 있는 모든 경우를 미리 예측하고 방어하는 것입니다."
- State of Vibe Coding 중에서

좋은 프롬프트 vs 나쁜 프롬프트

❌ 나쁜 프롬프트 예시:
"로그인 기능 만들어줘"
✅ 좋은 프롬프트 예시:
Firebase Authentication을 사용한 이메일/비밀번호 로그인 기능을 구현해줘. 요구사항: - 이메일 형식 검증 (정규표현식 사용) - 비밀번호 강도 체크 (최소 8자, 영문+숫자 포함) - 로그인 실패 시 구체적 에러 메시지 표시 (계정 없음/비밀번호 틀림 구분) - 로딩 상태 표시 및 중복 클릭 방지 - 성공 시 홈 화면으로 리다이렉트 - 접근성 고려 (aria-label, 키보드 네비게이션) - 모바일 반응형 디자인

🎯 The State of Vibe Coding의 핵심 인사이트

  • 데모는 만들 수 있는데 프로덕션이 어려운 이유
    AI는 "행복한 경로(happy path)"는 완벽하게 구현하지만, edge case 처리가 약합니다. 프롬프트에서 명시적으로 예외 상황을 지정해야 합니다.
  • Edge case 예측 능력의 중요성
    시니어 엔지니어와 주니어의 차이는 코딩 속도가 아니라 "무엇이 잘못될 수 있는지" 예측하는 능력입니다. AI 시대에는 이 능력이 더욱 중요해집니다.
  • 맥락(Context)을 주는 기술
    프로젝트 구조, 기존 컨벤션, 사용 중인 라이브러리 등의 맥락을 제공할수록 AI의 출력 품질이 기하급수적으로 향상됩니다.

💪 실습 과제

  • 나쁜 프롬프트로 기능 구현 → 발생하는 문제점 파악
  • 동일 기능을 개선된 프롬프트로 재구현 → 품질 차이 비교
  • 본인의 프로젝트에서 자주 사용할 프롬프트 템플릿 작성

👔역할별 프롬프트 전략: CEO, PM, EM, Engineer25분

"같은 버그를 고칠 때도 CEO, PM, EM, Engineer는 완전히 다른 방식으로 AI에게 물어봅니다. 각자의 역할에 맞는 프롬프트 전략을 이해하면 AI 활용 효율이 10배 높아집니다."

🎯 시나리오: 결제 시스템 버그 발생

상황: 전자상거래 플랫폼에서 일부 사용자들이 결제 완료 후에도 "결제 실패" 메시지를 받고 있습니다. 실제로는 결제가 완료되었지만, 사용자에게 잘못된 메시지가 전달되어 고객 불만이 증가하고 있습니다.

👔CEO의 프롬프트: 비즈니스 임팩트 중심

결제 시스템에서 사용자들이 실제로는 결제 성공했는데
"결제 실패" 메시지를 받고 있어.

다음을 분석해줘:
1. 이 문제가 매출과 브랜드 신뢰도에 미치는 영향
2. 즉시 취해야 할 비즈니스 조치 (고객 안내, 환불 정책)
3. 장기적 해결 방안과 예상 비용
4. 경쟁사는 이런 문제를 어떻게 방지하는지
5. 이 문제를 SLA 위반으로 봐야 하는지

30분 안에 이사회에 보고해야 해.
핵심만 bullet point로 정리해줘.
CEO의 관심사:
  • 💰 비즈니스 임팩트 (매출 손실, 고객 이탈)
  • 📊 즉시 실행 가능한 대응 전략
  • 🔮 장기적 해결책과 투자 필요 여부
  • 🏆 경쟁사 벤치마킹

📋PM(Product Manager)의 프롬프트: 사용자 경험 중심

결제 성공했는데 "실패" 메시지가 표시되는 버그가 발생했어.

사용자 관점에서 분석해줘:
1. 이 버그가 사용자 경험에 미치는 영향 (불안감, 혼란)
2. 사용자가 겪을 수 있는 모든 시나리오 매핑
   - 결제는 됐는데 실패 메시지
   - 중복 결제 시도 가능성
   - 고객센터 문의 급증
3. 임시 해결책 (hotfix)과 장기 개선안 구분
4. 이 문제를 방지하기 위한 UX/UI 개선 제안
5. 테스트 시나리오 작성 (이런 버그를 놓치지 않으려면)

내일 오전 스프린트 플래닝에서 우선순위 논의할 거야.
User Story 형식으로 정리해줘.
PM의 관심사:
  • 👥 사용자 경험과 페인 포인트
  • 📝 구체적인 User Story와 Acceptance Criteria
  • ⚡ 빠른 임시 해결책 vs 근본적 개선
  • 🧪 재발 방지를 위한 테스트 전략

👨‍💼EM(Engineering Manager)의 프롬프트: 시스템과 팀 관리 중심

결제 완료 후 "실패" 메시지가 사용자에게 전달되는 버그 발생.

시스템 아키텍처 관점에서 분석해줘:
1. 가능한 원인들 (race condition, timeout, API 응답 불일치)
2. 영향받는 컴포넌트들 (결제 게이트웨이, DB, 메시징 큐)
3. 디버깅 전략과 필요한 로그/모니터링
4. 팀 리소스 배분 계획
   - 긴급 hotfix팀 (2명, 4시간)
   - 근본 원인 분석팀 (1명, 1일)
   - 테스트 보강팀 (1명, 2일)
5. 향후 유사 문제 방지를 위한 시스템 개선 로드맵
6. Postmortem 작성 가이드라인

팀원들에게 명확한 액션 아이템을 전달해야 해.
각 작업의 우선순위와 담당자 배정 기준도 제안해줘.
EM의 관심사:
  • 🏗️ 시스템 아키텍처와 컴포넌트 간 의존성
  • 👥 팀 리소스 배분과 작업 우선순위
  • 🔍 디버깅 전략과 모니터링 강화
  • 📈 장기적 시스템 개선 로드맵

👨‍💻Engineer의 프롬프트: 코드 레벨 구현 중심

결제 API에서 이상한 동작을 발견했어.
PaymentController의 processPayment() 메서드를 보면:

```javascript
async processPayment(orderId, amount) {
  try {
    const result = await paymentGateway.charge(orderId, amount);
    await db.updateOrderStatus(orderId, 'completed');
    return { success: true, message: '결제 완료' };
  } catch (error) {
    logger.error('Payment failed:', error);
    return { success: false, message: '결제 실패' };
  }
}
```

문제점:
- paymentGateway.charge()는 성공했는데
- db.updateOrderStatus()에서 타임아웃 발생
- 사용자에게 "실패" 메시지 전달됨

다음을 분석하고 코드 수정해줘:
1. 현재 코드의 정확한 문제점 (race condition, error handling)
2. 트랜잭션 처리 개선 방법 (ACID 보장)
3. 재시도 로직 추가 (exponential backoff)
4. 로깅과 모니터링 강화 포인트
5. 단위 테스트 코드 작성 (edge case 포함)
6. 리팩토링된 최종 코드

코드는 TypeScript로 작성하고,
주석으로 왜 이렇게 수정했는지 설명해줘.
Engineer의 관심사:
  • 💻 구체적인 코드 레벨 버그와 수정 방법
  • 🔧 Error handling, 트랜잭션, 재시도 로직
  • 🧪 단위 테스트와 edge case 커버리지
  • 📝 코드 리팩토링과 best practice 적용

🎯 핵심 인사이트: 같은 문제, 다른 레벨, 다른 질문

  • CEO: "이 버그가 회사에 얼마나 피해를 주나?"
    → 비즈니스 임팩트, 대응 전략, 경쟁력
  • PM: "사용자가 이 상황에서 어떤 기분일까?"
    → 사용자 경험, User Story, 재발 방지
  • EM: "어떤 시스템이 관련되어 있고, 누가 고칠 수 있나?"
    → 아키텍처 분석, 리소스 배분, 장기 개선
  • Engineer: "코드 어디가 잘못됐고, 어떻게 고치지?"
    → 버그 원인, 코드 수정, 테스트 작성

💪 실습 과제: 나의 역할에 맞는 프롬프트 전략 세우기

  • 본인의 현재 역할(혹은 목표 역할)을 선택하고, 그에 맞는 프롬프트 템플릿 3개 이상 작성
  • 실제 프로젝트의 문제를 다양한 레벨 관점에서 AI에게 물어보고 답변 차이 비교
  • 팀원들과 역할별 프롬프트 전략 공유 및 피드백

🧠Part 2: 마인드셋 혁명60분

AI-First 개발에서 성공하려면 기술 습득보다 더 중요한 것이 마인드셋의 전환입니다. 코딩하는 사람에서 엔지니어링 매니저로 역할을 전환하는 방법을 학습합니다.

💪"부끄럼 없는 AI 활용" 철학20분

"AI를 사용하는 것은 부정행위가 아닙니다. 마치 계산기를 쓰는 것이 수학 실력의 부족이 아니듯이, AI는 당신의 능력을 증폭시키는 도구입니다."

많은 개발자들이 가진 잘못된 믿음

  • "AI 도움 없이 코딩해야 진짜 실력이다" → ❌
  • "AI를 쓰면 기본기가 약해진다" → ❌
  • "모든 코드를 직접 작성해야 이해할 수 있다" → ❌
  • "AI 코드는 신뢰할 수 없다" → ❌

✅ 올바른 관점

  • 가치는 '어떻게' 만들었느냐가 아니라 '무엇을' 만들었느냐
    사용자는 코드를 직접 작성했는지 관심이 없습니다. 제품이 문제를 해결하는지만 중요합니다.
  • AI는 반복 작업을 대신하고, 당신은 창의적 문제 해결에 집중
    보일러플레이트 코드 작성에 시간 쓰지 말고, 비즈니스 로직과 아키텍처 설계에 집중하세요.
  • 기본기는 '코드 작성 능력'이 아니라 '문제 정의 능력'
    문법을 외우는 것보다 요구사항을 명확히 정의하고, edge case를 예측하는 능력이 진짜 기본기입니다.

📊최고의 일꾼 +100% vs 최고의 매니저 ×2000%20분

생산성 증폭의 수학

한 명의 뛰어난 개발자가 평균 개발자보다 2배 빠르다면 (+100%), 뛰어난 매니저는 10명의 개발자를 관리해 각각 2배씩 생산성을 올릴 수 있습니다 (×2000%).

👷일꾼 개발자 (과거)

  • 직접 코드를 작성
  • 한 번에 하나의 기능만 구현
  • 시간 = 생산량의 한계
  • 본인의 코딩 속도에 의존
  • 생산성 상한선: 개인의 능력

👔매니저 개발자 (현재)

  • AI에게 코드 작성 위임
  • 여러 기능을 병렬로 진행
  • 아키텍처와 품질 관리에 집중
  • AI 팀을 효율적으로 관리
  • 생산성 상한선: 관리 능력

📚 실전 사례 분석

  • Case 1: 스타트업 CTO
    3명의 개발팀으로 6개월 걸릴 MVP를 혼자서 2개월 만에 완성. Claude Code로 기본 기능 구현 후, 핵심 비즈니스 로직만 직접 검토.
  • Case 2: 대기업 시니어 개발자
    레거시 시스템 현대화 프로젝트에서 AI로 80%의 보일러플레이트 마이그레이션 자동화. 테스트 작성과 edge case 처리에만 집중.
  • Case 3: 프리랜서 개발자
    동시에 5개의 프로젝트 진행. 각 프로젝트의 초기 셋업과 반복 작업은 AI가, 커스터마이징과 통합은 본인이 담당.

🔄엔지니어 → 엔지니어링 매니저 전환의 의미20분

🎯 역할 전환 가이드

1. 코드 작성자 → 요구사항 정의자
  • 기존: "이 기능을 어떻게 구현하지?" → 구글 검색, 문서 읽기
  • 현재: "이 기능이 해결해야 할 문제는 무엇인가?" → 명확한 스펙 작성
2. 구현자 → 검토자
  • 기존: 모든 코드를 직접 작성
  • 현재: AI가 생성한 코드를 리뷰하고 개선 방향 제시
3. 세부 작업자 → 아키텍트
  • 기존: 각 함수와 컴포넌트의 세부 로직에 집중
  • 현재: 전체 시스템 구조, 데이터 흐름, 확장성 고려
4. 혼자 일하기 → 팀 관리
  • 기존: 한 번에 하나의 작업만 처리
  • 현재: 여러 AI 인스턴스에 작업 분산, 우선순위 관리

🛠️ 매니저로서 개발하는 구체적 방법

Step 1: 프로젝트 분해

큰 기능을 독립적으로 구현 가능한 작은 단위로 나눕니다. "사용자 인증 시스템"을 → "회원가입 UI", "로그인 로직", "세션 관리", "비밀번호 재설정" 등으로 분해.

Step 2: 각 작업에 명확한 스펙 작성

AI에게 줄 프롬프트를 작성하듯이 요구사항을 구체화합니다. 입력값, 출력값, edge case, 에러 처리 방법까지 명시.

Step 3: AI에게 작업 위임

Claude Code에게 작성한 스펙을 주고 구현을 맡깁니다. 동시에 여러 채팅 창을 열어 병렬 작업도 가능.

Step 4: 결과물 검토 및 피드백

생성된 코드를 실행해보고, 버그나 개선점을 발견하면 구체적인 피드백을 제공합니다. "이 부분을 이렇게 수정해줘."

Step 5: 통합 및 품질 관리

각 부분을 합쳐서 전체 시스템이 잘 작동하는지 확인. 테스트 작성, 성능 최적화, 보안 검토는 직접 수행하거나 AI와 협업.

💪 실전 워크샵

  • 간단한 블로그 프로젝트를 매니저 관점에서 진행
  • 작업 분해 → 스펙 작성 → AI 위임 → 검토 → 통합 과정 체험
  • 본인의 프로젝트에 적용할 "매니저 워크플로우" 설계

🎓Week 1 학습 목표 정리

🛠️기술적 역량

  • Claude Code 능숙하게 사용하기
  • 효과적인 프롬프트 작성 능력
  • AI가 생성한 코드 리뷰하기
  • REPLIT과의 비교를 통한 도구 선택 능력

🧠마인드셋

  • AI 활용에 대한 부끄러움 극복
  • 일꾼에서 매니저로 역할 전환
  • 문제 정의 능력의 중요성 인식
  • 생산성 증폭에 대한 새로운 관점

💼실전 적용

  • 기존 프로젝트에 즉시 적용 가능
  • 개발 시간 50% 이상 단축
  • 더 많은 프로젝트 동시 진행
  • 팀에 AI-First 문화 전파

Week 1을 마쳤다면

축하합니다! AI-First 개발의 기초와 올바른 마인드셋을 갖추셨습니다.
이제 Week 2에서 프로덕션 레벨 개발을 시작해보세요.