WeniVooks

검색
북마크 이동

바이브코딩 에센셜 with claude code

실습 환경 준비

1. 실습 환경 준비

1.1 Visual Studio Code

마이크로소프트에서 만든 코드를 작성하고 편집하는 도구로, 가장 인기 있는 코드 편집기 중 하나입니다. 확장 기능(extension)을 통해 여러 소프트웨어를 연결하여 다양한 기능을 사용할 수 있습니다. 특히 코파일럿이라는 소프트웨어 개발을 도와주는 AI 등장으로 코딩을 더 쉽고 빠르게 할 수 있습니다. 현재 한 달에 2,000회까지 무료 자동완성을 할 수 있습니다.

Cursor를 사용하고 있으시다면 Cursor를 그대로 사용하셔도 좋습니다. 다만, 이제 바이브 코딩은 사람이 코드를 짜는 단계가 넘어가고 있습니다. Cursor처럼 '수락'을 하여 코드들 짜는 단계도 넘어가고 있죠. 여전히 유효하지만, 굳이 Cursor를 사용하지 않아도 됩니다. 제가 VSCode를 선택한 이유중 가장 큰 이유는 코파일럿이 이제 거의 무료에 가깝기 때문입니다.

1.1.1 설치 방법

  1. 아래 북마크를 클릭하셔서 설치해주세요. 링크는 https://code.visualstudio.com/입니다.

  2. 가운데 있는 버튼 누르시면 페이지가 이동하면서 자동으로 다운로드 됩니다. (OS에 따라 다운로드 글귀가 달라집니다.)

    2.1.3-1

  3. 다운로드 받은 파일을 클릭하셔서 설치하시면 됩니다. 동의합니다, 다음등을 눌러가며 설치해주세요. 이러한 설치가 익숙치 않으신 분들은 바탕화면에 바로가기를 추가하시길 권해드립니다.

    2.1.3-2

    2.1.3-3

1.2 Node.js

Node.js는 컴퓨터에서 코딩을 할 수 있게 도와주는 프로그램입니다. 워드로 문서를 작성하려면 먼저 워드 프로그램을 설치해야 하는 것처럼, 코딩을 하려면 Node.js라는 프로그램이 필요합니다.

특히 바이브 코딩에서는 AI가 코딩을 도와주는 도구들을 사용하기 위해 Node.js가 반드시 필요합니다. 이 프로그램이 있어야 AI 코딩 도구들이 제대로 작동합니다.

Q: Node.js만 깔면 Python도 코딩할 수 있게 도와주고, JAVA도 코딩할 수 있게 도와주는 건가요?

A: 프로그래밍 언어는 매우 다양합니다. Node.js는 그 중에서도 JavaScript 코딩을 할 수 있게 도와주는 프로그램입니다.

Q: Node.js가 왜 필요한가요? 저는 JavaScript라는 언어로 코딩을 할게 아닌데요? 저는 일상생활에서 사용하는 언어로 코딩하고 싶어 온거에요.

A: 우리가 사용할 AI 코딩 도구들이(Claude Code, Gemini CLI) Node.js가 있어야만 작동하도록 만들어졌기 때문입니다. 여러분이 사용하는 것이 아니라, 여러분이 사용하는 도구(Claude Code, Gemini CLI)가 사용할 환경입니다.

JAVA와 JavaScript 언어는 전혀 관련이 없습니다. 짬짜면과 냉면처럼 '면'인 것은 같지만, 아무런 관련이 없죠.

1.2.1 설치 방법

  1. https://nodejs.org/ko/download 링크로 이동합니다. 역시나 OS에 따라서 알아서 추천을 해주니 그대로 받으시면 됩니다.

    2.1.3-4

  2. 다운로드 받은 파일을 더블클릭하여 설치합니다. 카카오톡이나 크롬 설치하는 것처럼 동의합니다, 다음 등을 클릭하며 설치하시면 됩니다.

    2.1.3-5

  3. 제대로 설치되었는지 확인하기

    제대로 설치되었는지 각 OS 별로 확인해보도록 하겠습니다. 터미널을 열어 작업을 할 것입니다.

    터미널은 '컴퓨터와 글자로 대화하는 창'입니다. 평소에는 마우스로 폴더를 클릭하고, 아이콘을 더블클릭해서 프로그램을 실행하죠? 터미널은 마우스 대신 키보드로 글자를 입력해서 컴퓨터에게 명령을 내리는 방법입니다.

    • Windows:

      Window 파워쉘과 명령 프롬프트는 '실행 권한'이 다릅니다. 반드시 파워쉘이 아니라 명령 프롬프트를 사용해주세요.

      1. 시작 버튼 → cmd 검색 → 명령 프롬프트 실행

        2.1.3-6

      2. 검은 화면이 나타나면 node --version이라고 입력하고 엔터를 누르세요. 띄어쓰기가 중요하니 주의해주세요. 아래처럼 숫자가 나오면 설치가 잘 된 것입니다. 숫자가 나오지 않는다면 터미널을 닫았다가 다시 열어보세요. 숫자가 꼭 저랑 동일할 필요는 없습니다.

        2.1.3-7

      3. 터미널 끄지 마시고 챕터 3으로 넘어가세요.

    • Mac

      1. 런치패드를 클릭합니다.

        2.1.3-8

      2. 터미널을 검색하고 클릭합니다.

        2.1.3-9

      3. 검은 화면이 나타나면 node --version이라고 입력하고 엔터를 누르세요. 아래처럼 숫자가 나오면 설치가 잘 된 것입니다. (어떤 숫자든 상관 없습니다.)

        2.1.3-10

      4. 터미널 끄지 마시고 챕터 3으로 넘어가세요.

1.3. Claude Code 설치

바이브 코딩에서 사용할 AI 코딩 도우미를 설치합니다. Claude Code나 Gemini CLI, Cursor CLI 무엇이든 상관 없습니다. 다만 25년 8월 기준으로 가장 편리하게 개발하고 성능이 좋으며 생태계가 활성화 되어 있는 것은 Claude Code라고 생각합니다. 책에서는 Claude Code로 진행합니다. 다만 Claude Code가 PRO 버전부터 사용할 수 있기 때문에 책을 구매하신 분들이 무료로 해보실 수 있도록 Gemini CLI도 함께 소개합니다. 가능하면 Claude Code를 권합니다.

2.1.3-11
1.3.1 Gemini CLI

유료인 Claude Code를 설치하실 분들은 이 챕터를 건너뛰어 주세요.

앞서 말씀드린 것처럼 Gemini CLI, Cursor CLI, Claude Code를 사용하는 것은 현재 큰 차이가 나지 않습니다. 다만 모두 '유료'로 사용했을 때 큰 차이가 나지 않는다는 것입니다.

무료로 Gemini CLI를 사용하게 되면 코딩을 조금 잘하는 고등학생 수준의 코드를 짜게 됩니다. 무료로는 만족스러운 서비스를 만들기가 매우 어렵습니다. 이 점을 참고하셔서 진행해주세요.

설치는 2장에서 연 터미널에서 아래 명령어를 입력하시면 됩니다.

  • Windows: npm install -g @google/gemini-cli 입력하고 엔터
  • Mac: sudo npm install -g @google/gemini-cli 입력하고 엔터 - PC의 비밀번호 입력

애러는 3.3장에 별도 정리를 해두었습니다. 검은색 창에 Ok to proceed? 라고 물어보면 y를 입력하고 엔터를 치시면 됩니다. 그러면 아래와 같은 화면이 떴을 것입니다.

2.1.3-12

여기서 1번 Login with Google 을 선택해주세요. 그러면 인터넷 브라우저가 열리면서 구글 로그인 창이 나타납니다. 구글 계정으로 로그인하면 설치가 완료된 것입니다.

설치 확인은 열려있는 터미널에서 gemini라고 입력하면 됩니다. 종료는 열려있는 gemini에서 /quit을 입력하면 됩니다.

1.3.2 CodeX

GPT 유료 사용자 분들은 Codex를 사용하세요.

  • Window: npm install -g @openai/codex
  • Mac: sudo npm install -g @openai/codex

실행 명령어는 터미널에서 codex라고 입력하면 됩니다.

1.3.3 Claude Code

claude code는 25년 8월 기준으로 현재 나온 여러가지 바이브 코딩 툴 중 성능이 가장 좋습니다. 코딩을 좀 해본 박사급이라고 생각됩니다. 실무 경험도 있고요. 다만 '지시를 제대로' 해주지 않으면 먼 길을 혼자 가있는 경우가 종종 있습니다.

Claude Code와 Gemini CLI를 함께 써도 됩니다. 종종 '왜 2개를 쓰시죠?'라고 물으시는 경우가 있으신데, 토큰 사용량 때문에 그렇습니다. 간단한 문서 정리 등은 Gemini CLI로도 충분히 해낼 수 있습니다. 이런 토큰을 아끼는 방법 등은 뒤에 챕터에서 다룹니다.

설치는 2장에서 연 터미널에서 아래 명령어를 입력하시면 됩니다. 윈도우의 경우 2장에서 연 것은 파워쉘이 아닙니다. 현재 명령 프롬프트가 열려있는 상태여야 합니다.

  • Windows: npm install -g @anthropic-ai/claude-code 입력하고 엔터
  • Mac: sudo npm install -g @anthropic-ai/claude-code 입력하고 엔터 - PC의 비밀번호 입력

설치가 다 되었다면 이제 claude라고 입력하면 됩니다.

2.1.3-13

모드는 색 표시를 나타내는 것입니다. 1번을 그대로 선택하도록 하겠습니다.

2.1.3-14

로그인을 어디서 할 것인지 물어봅니다. 1번을 선택하도록 하겠습니다. 2번을 선택하면 쓴 만큼 지불할 수도 있는데 경험상 코드 한 줄에 5원정도 지출이 되더군요. 1번을 선택하시길 권해드립니다.

2.1.3-15

웹 브라우저가 열렸을 것입니다. 승인 버튼을 클릭해주세요.

2.2.3-16

설치가 완료된 것입니다. 엔터를 누르라고 나옵니다.

2.1.3-17

안내가 나옵니다. 엔터를 누르겠습니다.

2.1.3-18

이 폴더를 신뢰하는지 뜹니다. 이 안내는 매번 실행할 때마다 묻는 내용이기도 합니다. 역시 엔터를 눌러 진행하겠습니다.

2.1.3-19

아래와 같이 나왔다면 이제 클로드를 사용할 준비가 된 것입니다. 우선 종료시켜주겠습니다. 나가는 명령은 exit입니다.

2.1.3-20

혹시 명령 프롬프트에서 작동하지 않았다면, 파워쉘을 열어 똑같은 절차를 진행해주세요. 실행하면서 생기는 애러가 있을 수 있는데 3.3장을 참고해주세요.

2.1.3-21

2. 에러 정리

윈도우나 맥에서 다양한 에러를 만나실 수 있습니다. 이러한 에러를 만나는 상황을 익숙하게 받아들이셨으면 좋겠어요. 앞으로 우리는 개발을 해야 하는데 개발자로서는 매우 자주 마주치는 현상입니다. 대부분의 에러는 ChatGPT나 Claude가 알고 있지만 Claude Code, Gemini CLI, Cursor CLI를 통한 바이브 코딩은 최신 개념이어서 잘 나오지 않을 수 있습니다.

여기 나와있지 않은 에러는 디스코드에 제보 부탁드립니다. 디스코드 안에 별도로 정리를 해놓겠습니다.

2.1 Window 보안설정 문제

Windows에 npm 명령어 또는 gemini를 실행했을 때 아래와 같은 메시지가 나올 수 있습니다.

  • npm is not recognized as an internal or external command...
  • npm: 이 시스템에서 스크립트를 실행할 수 없으므로...
  • gemini: 이 시스템에서 스크립트를 실행할 수 없으므로...

모두 아래와 같은 형태의 빨간색 글자 형태입니다. 현재 gemini라고만 되어 있으나 gemini, claude 모두 마찬가지입니다.

2.1.3-22

해결 방법은 아래와 같습니다.

  1. PowerShell을 관리자 권한으로 열기

    • 시작 버튼 → PowerShell 검색 → Windows PowerShell 우클릭 → 관리자 권한으로 실행

      관리자 권한이란 컴퓨터의 모든 권한을 가지고 프로그램을 실행하는 것입니다. 마치 사장님 권한으로 프로그램을 설치하는 것과 같다고 생각하시면 됩니다.

  2. 아래 명령어를 입력하세요.

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

해당 명령어를 쳐서 아무것도 출력이 안될 수도 있고, 아래와 같은 선택지가 나올 수도 있습니다.

[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)  [?] 도움말 (기본값은 "N"임):
[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)  [?] 도움말 (기본값은 "N"임):

선택지가 나오면 대문자 A 를 입력하고 엔터를 치세요. 이제 그 창에서 그대로 아래 설치를 재시도 해보세요. 만약 Gemini CLI를 설치하실 것이라면 아래 명령어를 입력하시고 다시 위로 올라가 절차대로 진행해주세요.

npm install -g @google/gemini-cli
npm install -g @google/gemini-cli

만약 Claude Code를 설치하실 것이라면 아래 명령어를 입력하시고 다시 위로 올라가 절차대로 진행해주세요.

npm install -g @anthropic-ai/claude-code
npm install -g @anthropic-ai/claude-code
2.2 Mac 관리자 권한 문제

npm ERR! Error: EACCES: permission denied, mkdir '파일경로' 이런 에러메시지를 만나면 관리자 권한이 필요한 경우이므로 설치 명령어 앞에 sudo 를 추가해주세요.

이 경우 관리자 권한에 접근하기 위해 mac 계정의 비밀번호를 입력해야 합니다. 터미널에 입력을 요구하는 메시지가 나타납니다.

2.1.3-23

비밀번호를 입력할 때는 터미널에 사용자가 입력중인 비밀번호가 터미널창에 나타나지 않습니다. 이는 보안상의 이유이므로 당황하지 마시고 오탈자 없이 잘 입력하신 후 엔터키를 누르면 다음으로 넘어갑니다.

2.3 터미널에서 텍스트가 입력되지 않는 문제

sonnet 4.5 업데이트 이후 터미널에서 텍스트가 입력되지 않는 문제가 발생되고 있습니다. 곧 해결이 될 것으로 보이지만 동일한 문제를 겪고 있으신 분들을 위해 기입해놓습니다. 현재 이 문제를 해결하는 방법이 나온 것은 아니고, 우회하는 방법은 3가지가 있습니다. 이 중 1번과 2번을 권합니다.

  1. VSCode Extension 사용: VSCode에서 익스텐션을 사용하면 텍스트 입력을 하실 수 있습니다. 사용방법은 10.1에 있습니다.
  2. 명령프롬프트로 사용: 명령 프롬프트로 claude를 실행할 경우 입력을 할 수 있습니다.
  3. WSL을 설치하여 연결합니다.
2.4 Git을 설치하라는 애러

windows에서 git을 설치하라는 애러가 발생할 수 있습니다. 이 경우 Git 공식 사이트에서 Git을 다운로드하여 설치해주세요. 설치 과정에서 기본 설정을 그대로 유지하시면 됩니다.

2.5 User 특수 문자 애러

윈도우에서 사용자 계정 이름에 특수 문자가 포함된 경우, Claude Code 또는 Gemini CLI 실행 시 에러가 발생할 수 있습니다. 이 문제를 해결하려면 User 명을 변경해야 합니다. User 명을 변경하는 방법은 https://weniv.link/kZngFi 이 글을 참고하면 됩니다.

2.6 기타 에러

현재 정리된 애러 외에도 OS에 따라, 사용자 환경에 따라 다양한 에러가 발생할 수 있습니다. 기타 에러는 디스코드에 제보 부탁드립니다. 대부분의 애러는 ChatGPT나 Claude가 해결할 수 있으니 애러명을 그대로 복사해서 질문하기를 권고해드립니다.

2.2 바이브 코딩 프로세스2.4 바이브 코딩 실습