[책 리뷰] 요즘 바이브 코딩 - 클로드 코드 완벽 가이드 #1

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=370283273

요즘 바이브 코딩 클로드 코드 완벽 가이드 | 요즘 바이브 코딩 | 최지호

얼떨결에 Claude Code 해커톤 본선에 진출했다. 대회의 정식 명칭은 "SK AI SUMMIT 2025 Claude Code Builder Hackathon"이다. SK 그룹에서 매년 개최하는 'SK AI SUMMIT' 컨퍼런스의 여러 이벤트 중 하나다. 본선이 11월3일인데 기본적인 기능만 써왔기 때문에 Claude Code에 대해 여전히 모르는 부분이 많다. 그래서 시간이 좀 촉박하지만 책을 한 권 사서 제대로 공부해 보기로 했다. 아래는 대회 홈페이지다.

https://devocean.sk.com/community/hackathonInfo.do#none

데보션 (DEVOCEAN) 기술 블로그 & 커뮤니티

이번 포스트는 책 리뷰라기 보다는 스터디 기록 성격의 글이 될 것 같다. 마침 최근 노트북(맥북)을 바꿔서 각종 환경설정 및 Claude Code 설치부터 따라 해 볼 수 있었다. 먼저 Node.js와 npm부터 설치했다. 책의 '[챕터3] 클로드 코드 환경 설정'에 해당하는 내용이다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

콘솔에서 curl로 다운로드 받아서 직접 설치하는 방법도 있지만 책에 나온 대로 패키지를 실행해서 설치했다.

Continue 버튼을 계속 누르다 보면 설치가 완료된다.

% node --version
v24.11.0
% npm --version
11.6.1

별 문제 없이 Node.js와 npm 설치가 잘 돼서 터미널 상에서 버전 정보도 잘 뜬다. 이제 Claude Code를 설치할 차례인데 책에는 (앞에서 npm을 설치했으니 당연히) 아래와 같이 npm을 사용해서 설치하는 방법이 적혀있다.

% npm install -g @anthropic-ai/claude-code

하지만 Claude 공식 문서에는 native로 설치하는 것을 권장하고 있어서 나는 Homebrew로 설치했다. 위에서 언급했지만 새 맥북이라 brew도 새로 설치해야 했다. 이미 설치한 Node.js와 npm을 굳이 지우지는 않았다.

https://docs.claude.com/en/docs/claude-code/setup#native-install-recommended

Set up Claude Code - Claude Docs

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
% brew install --cask claude-code
% claude

Claude Code 설치 완료! theme를 선택하게 되는데 나중에 바꿀 수도 있다고 해서 그냥 '1.Dark mode'를 선택했다. 이어지는 내용은 '[챕터4] 클로드 코드 기본 인터페이스 이해하기'에 해당하는 내용이다. 먼저 아래의 예제 프로젝트를 clone 받았다.

https://github.com/codefactory-co/golden-rabbit-yojeum-claude-code-crypto-ranking-board

GitHub - codefactory-co/golden-rabbit-yojeum-claude-code-crypto-ranking-board

반응형

Next.js(처음 들어봄)로 구현한 단순한 코인 랭킹 대시보드 프로젝트라고 한다. 책에 나온대로 터미널에서 아래 명령어를 실행해서 프로젝트를 실행했다.

% npm install -g pnpm
% pnpm install
% pnpm dev

웹브라우저의 주소 창에 'http://localhost:3000/' 입력했더니 위와 같은 페이지가 잘 표시된다.

터미널에서 프로젝트 경로로 들어가서 claude code를 실행시키면 위와 같은 화면이 뜬다. 첫 요청은 프로젝트 분석이다. 개인적으로 터미널에서 한글을 입력하는 것이 어색하고 불안하기도 해서 안 되는 영어지만 꾸역꾸역 영어로만 프롬프트를 입력하고 있다. 이번에는 그냥 책에 나온 대로 한글로 프롬프트를 입력했다.

스크린샷에는 앞 부분 내용이 좀 잘렸지만 프로젝트에 대한 간략한 기본 정보부터 디렉터리 구조, 사용된 기술 스택, 현재 구현 상태, 미완성/문제점 지적까지 거의 보고서 수준의 답변이 표시됐다. 다음으로 claude code에서 '/init'을 입력해서 claude.md 파일이 생성되는 과정을 지켜봤다. 책에는 파일이 새로 생성된다고 돼 있지만 실제로는 예제 프로젝트에 이미 claude.md 파일이 있어서 부족한 부분을 추가하고 일부 수정하는 방식으로 진행됐다.

[챕터04]의 마지막 부분에 3초 꿀팁이라고 소개된 내용이 있다. "/ide" 커맨드를 실행해서 IDE와 연동할 수 있는 기능이다. 개인적으로 주로 사용하는 IDE인 PyCharm을 연동해 봤다.

실제 어떻게 작동하는지는 아직 확인할 수 없었다. 대충 아무 요청(Claude.md 파일의 내용을 한글로 변경해 달라고 해봤다)이나 하고 claude code의 답변을 받은 뒤, IDE 연동이 잘 작동하는 것을 확인했다. 

PyCharm에서 Apply 버튼을 누르면 Claude Code 터미널 상에서 반영되는 것을 확인하 수 있다. 아무래도 터미널 상에서는 코드 변경점(diff)을 확인하는 것이 좀 어려웠는데 유용하게 사용할 수 있을 것 같다. 진짜 꿀팁 맞다.

쓰다보니 글이 좀 길어져서 일단 여기서 마치고 2편에서 이어서 작성하겠다.