클로드 코드 제대로 시작하기를 읽고서

클로드 코드 제대로 시작하기

지난 6월부터 회사에서 '클로드 코드'를 채택하면서 업무에 본격적으로 사용하고 있습니다. 이에 따라서 AI를 통한 프로그래밍 개발은 선택이 아닌 필수가 되었다는 걸 더욱 체감하고 있는 요즘입니다. 이에 발맞춰서 제대로 클로드 코드를 공부해야겠다는 생각이 들었는데 감사하게도 이번에 길벗 출판사에서 도서를 지원해 주셔서 맘 편하고 학습을 진행했습니다. 도서 이름 그대로 클로드 코드를 제대로 한번 시작해 보는 계기가 되었습니다.

 

*해당 책은 출판사로부터 제공받아 직접 읽고 제 개인적인 평을 기록하였습니다.

목차

1장. 바이브 코딩, 개발의 새로운 물결

1.1 개발의 진입 장벽이 사라지고 있다

1.2 바이브 코딩의 탄생

1.3 AI 코딩 도구의 세 가지 유형

1.4 왜 클로드 코드인가?

2장. 클로드 코드, 새로운 개발 파트너

2.1 AI와 에이전틱 코딩

2.2 클로드 코드란 무엇인가?

2.3 클로드 코드 설치

2.4 클로드 코드 기본 사용법

2.5 실습: 첫 프로젝트 만들기

3장. 클로드 코드, 새로운 개발 파트너

3.1 만들 제품 정의하기

3.2 프로젝트 첫 삽 뜨기

3.3 Vercel로 배포하기

3.4 내 정보와 링크 채우기

3.5 MongoDB Atlas로 데이터 저장하기

4장. 오 마이 클로드 코드 (OMC) : 멀티 에이전트 오케스트레이션

5장. PRD와 플랜 모드

5.1 PRD

5.2 플랜 모드란 무엇인가?

6장. 딸깍! 숏폼 자동화 파이프라인 만들기

6.1 프로프팅과 MD 세팅하기

6.2 클로드 코드에 숏폼 생성 요청하기

6.3 미세 조정하기

7장. 딸깍! 디스코드로 만드는 AI 비서, 자비스

7.1 PC 앞을 떠나면 멈추는 에이전트

7.2 시스템 설계

7.3 디스코드 봇 셋업

8장. 프롬프트 엔지니어링

8.1 좋은 프롬프트의 구조

8.2 프롬프트 강화하기

9장. 컨텍스트 엔지니어링

10장. 클로드 코드 심화

10.1 CLAUDE.md, 클로드 코드의 장기 기억

10.2 .claude/ 폴더의 settings.json

10.3 Tools, 클로드 코드의 손과 발

10.4 Hooks, 이벤트 기반 자동화

10.5 Skills, 복잡한 작업을 레시피로

10.6 Custom Agents, 나만의 전문가 팀

10.7 MCP, 외부 세계와 연결하기

10.8 동적 워크플로 오케스트레이션

11장. 스펙 주도 개발 (SDD)

12장. 하네스 엔지니어링

과거와 현재의 개발 과정 비교

과거의 개발 과정

• 아이디어
• 프로그래밍 언어 학습
• 프레임워크 학습
• 환경 설정
• 라이브러리 선택
• 코드 작성
• 디버깅
• 테스트
• 배포
• 완성

현재의 개발 과정

• 아이디어
• 의도를 자연어로 설명
• AI가 구현
• 검토 및 수정 지시
• 완성

시대가 바뀌면서 개발의 과정이 많이 바뀌었습니다. AI가 대신해 주는 것은 '코드를 입력하는 행위'이지 '무엇을 만들어야 하는지 결정하는 판단'이 아닙니다. AI가 만든 코드를 아무 검증 없이 그대로 쓰는 것도 위험합니다. 결과물을 검토하고 개선하는 과정은 여전히 필수적입니다. AI와 관련해서 우선 사전 지식들에 대해서 정리하고 가보도록 하겠습니다.

바이브 코딩 VS 에이전틱 엔지니어링

그렇다면 이 두 가지 중 무엇을 배워야 할까요? 답은 '둘 다'입니다. 그리고 이것은 양자택일이 아니라 성장의 단계입니다. 처음에는 바이브 코딩으로 AI와 상호 작용하는 기본 루프를 익히고, 익숙해지면 "이 코드를 프로덕션에 올려도 되는 수준인가?" 같은 질문이 자연스럽게 따라옵니다. 그 질문에 답하는 것이 에이전틱 엔지니어링입니다.

구분	바이브 코딩	에이전팅 엔지니어링
목표	빠른 프로토타입, 아이디어 검증	프로덕션 수준의 소프트웨어 개발
AI와의 관계	AI에 맡기고 결과만 확인	AI를 감독하며 품질을 관리
코드 리뷰	생략하거나 최소화	필수 - AI의 출력물도 리뷰 대상
테스트	실행되기만 하면 OK	단위/통합/E2E 테스트 포함
적합한 상황	주말 프로젝트, 데모, 학습	팀 프로젝트, 서비스 운영, 장기 유지 보수
필요한 역량	의도를 설명하는 능력	의도 설명 + 코드 리뷰 + 아키텍처 판단력

AI 코딩 도구의 세 가지 유형 비교

많은 도구가 빠르게 변화하고 있기 때문에 위 세 가지 유형으로 깔끔하게 구분하기 어려울 수 있습니다. 경계를 넘나들며 발전하는 제품도 있습니다.

구분	앱 빌더	IDE 어시스턴트	터미널 에이전트
개발 과정 자율성	낮음 (완성품 생성에 특화)	중간(코드 제안, 보조)	매우 높음(자율 루프 수행)
진입 장벽	매우 낮음	낮음	중간~높음
코딩 지식 필요도	거의 불필요	필수	필수 + 프로젝트 이해
작업 환경	브라우저	에디터(IDE)	터미널
적합한 작업	프로토타입, MVP	코드 작성, 소규모 수정	대규모 리팩토링, 기능 구현
기존 프로젝트 활용	djfudna	자연스러움	자연스러움
대표 도구	v0, Bolt.new, 러버블	깃허브 코파일럿, 커서	클로드 코드, 제미나이 CLI,  코덱스
비유	요리 주문	페어 프로그래밍	주니어 개발자

왜 클로드 코드인가?

SWE-bench Leaderboards

• 첫째, 복잡한 실전 작업에서의 코드 품질 > 특히 다중 파일에 걸친 변경의 일관성이 강점으로 꼽힙니다.
• 둘째, 개발 워크플로 전체를 커버 > 코드를 도와주는 도구가 아니라 개발자의 일과 전체를 도와주는 도구에 가깝습니다.
• 샛째, 확장성 > 서버 에이전트(subagent)를 활용한 병렬 작업, MCP(Model Context Protocol)를 통한 외부 서비스 연동

클로드 코드의 핵심 메커니즘: 에이전틱 루프

클로드 코드를 이해하는 핵심 키워드는 루프입니다. 기존 코파일럿 도구들은 한번 제안하고 멈춥니다. 개발자가 그 제안을 수락하거나 거부한 뒤 다음 단계를 직접 실행해야 합니다. 클로드 코드는 다릅니다. '루프를 도는 주체가 AI로 바뀐다'는 해당 부분이 핵심입니다. 이를 가능하게 하는 것이 아래의 기술적 기반들입니다.

• 파일 시스템에 직접 접근
• 터미널 명령 실행
• 200K 토큰 컨텍스트 윈도우
• 서브에이전트 아키텍처

클로드 코드의 핵심 기능

• 다중 파일 편집
• 자율 디버깅
• 깃 자동화
• CLAUDE.md 컨텍스트 영속화
• MCP 외부 서비스 연동
• 서브에이전트 병렬 처리

윈도우에서 클로드 코드 설치하기

윈도우 사용자는 파워셸에서 설치를 진행합니다. 먼저 시작 메뉴에서 'PowerShell'을 검색하거나 Win + X 키를 누른 뒤 Windows PowerShell을 선택합니다. 그리고 아래의 커맨드를 입력하면 설치가 진행됩니다.

irm https://claude.ai/install.ps1 | iex

무사히 클로드 코드 설치 완료!

시스템 환경변수 편집에서 클로드가 설치된 위치를 Path 변수에 추가해주면 이제 cmd 창과 PowerShell에서 claude 명령어를 사용할수 있습니다.

클로드 코드 설치 전 사전 요건 확인

해당 책 실습에서는 클로드 코드 Pro 플랜을 권장한다. 무료로도 실습이 가능하지만 중간에 토큰을 모두 소진해서 끊기는 경우가 빈번하게 발생하기 때문이다. (현재 환율로 27,000원 정도 한다. Max의 경우는 한화로 15만 원)

실습: 첫 프로젝트 만들기

이번 실습의 목표는 거창하지 않습니다. 자기소개 HTML 페이지 하나를 만들어서 브라우저에서 여는 것입니다. 결과물 자체보다 중요한 것은 클로드 코드가 작동하는 방식을 직접 눈으로 확인하는 경험입니다. 좋은 결과를 원한다면 클로드 코드를 디자이너에게 의뢰서를 건네듯 다루어야 합니다. 머릿속 이미지를 구조화해서 전달하는 것입니다.

디자인 브리프 패턴

항목	무엇을 적는가	예시
톤 레퍼런스	어떤 분위기인지, 비슷한 웹사이트가 있다면 함께 언급	Linear, Vercel 같은 모던한 SaaS 랜딩 페이지 느낌
레이아웃	화면을 어떻게 구성할지	화면 정중앙에 카드 한장, 카드 안에 위에서 부터 아바타, 이름, 소개, 관심태, 소셜 링크
구성요소	그안에 정확히 무엇이 들어가는지	관심 태그 4개(독서, 여행, 사진, 커피) 깃허브나 링크드인 아이콘 버튼
디테일	색상, 폰트, 애니메이션 같은 마감 디테일	연한 하늘색 그라데이션 배경, 카드는 흰색 반투명 유리, 호버 시 살짝 떠오르는 애니메이션

해당 패턴을 토대로 실습용 프롬프트를 작성했습니다.

자기소개 페이지를 하나 만들어줘.
파일명은 index.html, CSS는 같은 파일에 포함해줘.

[톤, 레퍼런스]
- Linear, Vercel 랜딩 페이지 처럼 모던하고 깔끔한 라이트 테마
- 배경은 연한 하늘색 그라데이션, 가조색은 스카이블루
- 본문 글자색은 짙은 회색

[레이아웃]
- 화면 정중앙에 카드 한장
- 카드 내부는 위에서부터: 이니셜 아바타 > 이름 > 한줄 소개 > 관심 태그 > 소셜 링크
- 모든 요소는 카드 안에서 가운데 정렬

[구성 요소]
- 이름 : 반토막
- 소개 : 코드와 커피, 책과 산책을 좋아합니다.
- 관심 태그 : 독서, 러닝, 프로그래밍 (각 태그는 알약 모양 chip 배지로 렌더링, 가로로 나란히 배치하고, ul/li 같은 리스트 마커는 절대 표시하지 않음)
- 소셜 링크 : 깃허브 링크 일단 임시로 설정

[디테일]
- 폰트는 Pretendard를 Google fonts CDN으로 로드
- 카드는 흰색 반투명 배경에 부드러운 그림자와 흐린 테두리 (glassmorphism)
- 카드에 마우스를 올리면 부드럽게 살짝 떠오르는 트랜지션
- 관심 태그는 호버시 배경이 강조색으로, 글자가 흰색으로 바뀌는 효과
- 모바일 화면 (480px)에서도 깨지지 않은 반응형

클로드 코드 작업 방식 살펴보기

• 1단계: 할 일 목록 작성
• 2단계: 파일 쓰기 권한 확인
• 3단계: 완료 보고

브라우저에서 결과물 실행하기

파일이 만들어졌다면 브라우저에서 열어 봅시다. 이 또한 클로드 코드에게 부탁하면 됩니다. 명령어를 외우거나 직접 입력할 필요가 없습니다. 결과물을 확인해 봅시다.

클로드 코드가 입력받은 프롬프트를 토대로 멋지게 결과를 만들어주었습니다.

대화형 개발: 한 번 더 수정해 보기

결과물을 보고 욕심이 생긴 부분이 있을 겁니다. 이번에는 디자인 브리프 패턴을 짧게 응용해서 페이지에 움직임 한 가지를 더해봅시다. 이미 만들어진 페이지를 토대로 부탁할 때는 '톤 레퍼런스'는 생략하고 '구성 요소'와 '디테일'만 적어도 충분합니다.

지금 페이지에 다음을 추가해줘.

[구성 요소]

* 카드 뒤쪽 배경에 사선으로 줄을 맞춰서 천천히 한방향으로 떠다니는 작은 점들 (스카이 블루 계열, 은은한 투명도)

[디테일]

* 카드에 마우스를 올리면 관심 태그가 왼쪽부터 순서대로 살짝 떠오르며 나타나는 stagger 애니메이션
* 떠다니는 점은prefers-reduced-motion이 켜져있으면 멈추도록 처리

파일 위치 확인하고 종료하기

이 파일을 더블클릭하면 브라우저에 수정한 자기소개 페이지가 나옵니다.

정리하면서

클로드 코드를 활용해서 정말 '코드 한 줄 없이' 자기소개 페이지를 만들어봤습니다. AI를 통해서 이전에는 해내지 못했던 일들을 보다 쉽고 빠르게 해낼 수 있다는 것은 정말 축복받은 일이라고 생각합니다.. 하지만 동시에 프로그래밍 지식과 AI를 사용하면서 발생할 수 있는 위험에 대해서는 항상 경각심을 가지고 대비를 해야 한다는 사실을 잊지 않도록 해야겠다는 생각도 강해졌습니다.

 

그리고 미래에는 더욱더 프로그래밍 언어 스킬보다는 아키텍처 설계 능력과 프롬프트 스킬이 중요해지는 시대가 올 것 같다는 느낌이 들고 이에 대한 대비를 통해서 모두가 더 나은 프로그래머가 되기를 바랍니다.

도서 링크

클로드 코드 제대로 시작하기 - 교보문고