클로드 코드를 활용한 바이브 코딩 완벽 입문

히라카와 토모히데 (平川知秀)

주식회사 en-gine 대표. 도쿄와 후쿠오카를 거점으로 생성형 AI, 클라우드 아키텍처, LLM 에이전트 기술을 활용한 업무 시스템과 SaaS의 설계 개발에 종사하고 있다. 도메인 주도 디자인(DDD)이나 클린 아키텍처에 바탕을 둔 견고한 설계 사상과, Firebase Genkit이나 Mastra 같은 도구를 사용한 에이전트 임베디드 업무 애플리케이션 개발 등 최신 AI 개발 기반을 실전적으로 조합하는 기법에 정통하다. 현재는 AI와 인간의 협업을 통한 ‘AI 주도 개발(AI-Driven Development)’의 보급을 목표로 기업 지원 및 교육 활동을 수행하면서, AI 에이전트 기술과 Flow Engineering을 결합한 차세대 개발 프로세스를 탐구하고 있다. gihyo.jp에서 《지금부터 시작하는 클로드 코드 입문》을 연재 중이다.

• 이메일: hirakawa@en-gine.co
• X: @t_hirakawa

최용

한국방송통신대학교에서 컴퓨터과학을 전공하고, 응용 소프트웨어 개발자와 은행 전산실 운영자를 거쳐 소프트웨어 컨설턴트로서 엔터프라이즈 IT 시스템 운영 자동화 솔루션 구축 및 기술 지원 업무를 수행했다. 현재는 IT 전문서의 저술·번역·교정 작업을 이어오고 있으며, 인공지능을 일상 업무와 지식 생산에 도입해 얻은 실무적 효율을 다양한 기술 영역으로 확장하는 데 깊은 관심을 두고 있다. 대표적인 저서로 2025년 세종도서 학술부문에 선정된 《OpenAI, 구글 Gemini, 업스테이지 Solar API를 활용한 실전 LLM 앱 개발》(위키북스)이 있으며, 이를 포함해 인공지능, 파이썬, 보안 등 IT 전반에 걸쳐 다수의 전문서를 집필하고 번역했다. 소프트웨어를 넘어 하드웨어와 결합된 지능형 시스템으로 시야를 넓히고자 서울사이버대학교에서 드론·로봇을 전공하고, 동 대학원 AI융합기술학과 석사 과정에 입학하여 학업을 지속하고 있다.

• ▣ 01장: 클로드 코드 입문과 개발 환경 구축
• 1.1 _ AI 지원 개발의 새로운 시대
• __클로드 코드란
• __클로드 코드 이전의 AI 지원 개발
• __지금까지의 AI 지원 개발의 한계
• __AI 지원 개발 등장에 따른 엔지니어의 새로운 스트레스
• __클로드 코드가 CLI로 태어난 배경
• __클로드 코드의 특징
• __클로드 코드 덕분에 가능해진 ‘AI 주도 개발’
• 1.2 _ 클로드 코드의 요금 체계
• __클로드 코드 ‘구독’과 ‘API 종량제’ 비교
• __플랜 전환
• __플랜 선택 기준
• __메시지 제한 및 세션
• __프롬프트에 관해
• __모델 선택과 전환
• __비용 관리 팁
• __정리
• 1.3 _ 계정 등록
• __구독 사용자(클로드 계정) 등록 방법
• __API 사용자(클로드 콘솔 계정) 등록 방법
• __정리
• 1.4 _ 클로드 코드 환경 구축과 설정
• __권장 환경
• __클로드 코드 설치 방법
• __초기 실행 및 인증
• __계정 유형 선택
• __브라우저에서 로그인하기
• __계정 연결과 인증
• __터미널 설정
• __폴더 신뢰 여부 확인
• __터미널 환경과의 호환성
• __리포지터리 생성 방법
• __클로드 코드로 개발할 때 창 배치
• __정리
• 1.5 _ 클로드 코드 시작하기
• __첫 번째 단계: 기본 명령어 익히기
• __특정 파일을 컨텍스트에 포함(@ 표기)
• __CLAUDE.md 활용법
• __처음 알아두면 편리한 명령어
• __명령 실행 허가
• __권한 작성 방법
• __클로드 코드의 4가지 권한 모드
• __디렉터리의 종류
• __확장 사고 모드
• __클로드 코드 업데이트 방법
• __정리
•  
• ▣ 02장: 클로드 코드를 활용한 AI 주도 개발의 기초
• 2.1 _ 5분 만에 애플리케이션 만들기
• __첫 번째 프롬프트
• __로컬 서버 시작하기
• 2.2 _ 작은 애플리케이션 배포하기
• __클라이언트 측 애플리케이션 배포
• __깃허브 페이지에 배포하기
• __Vercel에 배포하기
• 2.3 _ UI 디버깅하기
• __Next.js로 TODO 앱 만들어보기
• __표시 오류 수정하기
• __정리
• 2.4 _ 테스트 코드 생성하기
• __테스트 코드의 오류 예시
• __CLAUDE.md에 테스트 주의 사항 작성하기
• __정리
•  
• ▣ 03장: MCP를 활용한 AI 챗봇 개발
• 3.1 _ MCP 서버에 개발 지원받기
• __MCP 서버란?
• __추천 MCP 서버
• 3.2 _ AI 챗봇 요구사항 정의
• __요구사항 정의
• __개발 환경 구축 및 요구사항 정의
• 3.3 _ 태스크 관리와 구현
• __실행 계획 수립과 TODO 리스트 작성
• __체크박스를 활용한 진척 관리
• __작업 단위 설정과 단계적 구현
• 3.4 _ 오류 수정과 관리·배포
• __구글 클라우드의 무료 요금제
• __개발 서버 실행하기
• __클로드 코드에 오류 전달하기
• __문자 변환 도중에 전송되는 문제 해결
• __개발에 편리한 명령 정리
• __클로드 코드에 작업 내용을 돌아보게 하기
• __구글 클라우드에 배포하기
• __배포 오류 해결
• __Atlas(몽고DB) 설정하기
• __클라우드 런 공개 설정
• __UI에 나타나는 오류를 확인하고 수정하기
• __깃허브 액션 오류 해결하기
• __클라우드상의 오류 로그를 직접 확인시키기
• 3.5 _ 깃허브 액션에서 추가 구현 수행
• __깃허브 액션에서 구현하기
• __Claude Code GitHub Actions 설정의 전체적인 구조와 주의사항
• __Claude Code GitHub Actions의 특징과 차이점
• __스마트폰용 깃허브 앱으로 개발하기
• __정리
•  
• ▣ 04장: 병렬 처리와 서브에이전트를 활용한 개발 - 3시간 만에 완성하는 사내 시스템 개발
• 4.1 _ 컨텍스트 윈도 이해하기
• 4.2 _ 대규모 시스템 개발을 위한 지식
• __백그라운드 작업
• __실행 시간이 오래 걸리는 Bash 프로세스를 백그라운드로 보내기
• __워크스페이스 추가하기
• 4.3 _ 요구사항 검토
• __일일 보고 시스템의 요구사항 정의
• __@임포트로 CLAUDE.md에 파일 추가하기
• __임포트할 때 주의할 점
• 4.4 _ 가드레일 준비
• __가드레일의 예
• __명세를 기반으로 한 코드 생성
• __사용하는 기술 추가하기
• __허스키로 코드 보호하기
• __CI/CD 구성하기
• __정리
• 4.5 _ 작업을 분할해서 구현하기
• __깃허브 이슈 생성 요청
• __이슈 구현하기
• __클로드 코드의 리뷰를 받는 3가지 방법
• __정리
• 4.6 _ 병렬 처리와 서브에이전트
• __깃 워크트리를 활용한 병렬 처리
• __깃 워크트리의 기초 지식
• __병렬 처리 팁
• __lint-staged를 하위 디렉터리에서도 실행하기
• __여러 터미널에 출력하기
• __Git 워크트리 정리
• __다중 세션과 관련된 기타 주의 사항
• __서브에이전트를 전문가로 활용하기
• __언제 서브에이전트를 사용할까?
• __서브에이전트로 코드 생성하기
• __정리
• 4.7 _ 커스텀 슬래시 커맨드와 훅
• __커스텀 슬래시 명령어 활용하기
• __훅 활용
• __프롬프트를 이용한 고급 기능 활용
• __병렬 처리 활용
• __이슈를 대략적으로 구현한 후의 디버깅
• __에이전트 스킬 활용하기
• __정리
•  
• ▣ 05장: 보안과 응용
• 5.1 _ 클로드 코드의 보안 설계
• __보안 대책
• __클로드 코드의 보안 분석 기능
• __보안 검토용 깃허브 액션 통합
• __사용자가 알아야 할 데이터 프라이버시
• __컨테이너 실행
• __샌드박스
• __사용자의 책임
• 5.2 _ 팀 개발에서 필요한 지식
• __설정 공유
• __AWS 베드록·구글 버텍스 AI 활용
• __디자인으로부터 컴포넌트를 만드는 피그마 MCP 서버
• 5.3 _ 클로드 코드 응용 활용법
• __병렬 터미널 처리에 특화된 라이브러리
• __클로드 코드를 헤드리스 모드로 사용하기
• __명세 기반 개발
• __클로드 웹에서 클로드 코드 사용
• 5.4 _ 클로드 코드의 향후 전망
•  
• ▣ 부록
• A _ 슬래시 명령 목록
• B _ 클로드/클로드 코드 변경 사항 정리

• 2장 TODO 앱(2.1, 2.2)

  • 코드: https://github.com/ychoi-kr/todo
  • 사이트: https://ychoi-kr.github.io/todo/

• 2장 Next.js로 만든 TODO 앱(2.3)

  • 코드: https://github.com/ychoi-kr/todo-app
  • 사이트: https://todo-app-tan-seven-22.vercel.app/

• 3장 AI 챗봇

  • 코드: https://github.com/ychoi-kr/ai-chat
  • 사이트: https://ai-chat-493816547312.asia-northeast1.run.app/

• 4장 영업 일일 보고 시스템

  • 코드: https://github.com/ychoi-kr/daily-report
  • 사이트: https://daily-report-148824603932.asia-northeast3.run.app/

• 101쪽, 페이지 상단 첫 번째 코드 블록

  claude mcp add Playwright npx @Playwright/mcp@latest

  ==>

  claude mcp add playwright npx @playwright/mcp@latest

• 306~308쪽, 머리말

  목차

  ==>

  찾아보기