Claude Code 를 활용한 바이브코딩 시작하기(클로드 코드 설치 및 실행하기)

안녕하세요

오늘은 Claude Code(일명 클로드 코드)를 활용해서 바이브 코딩하는 방법에 대해 알아보려고 합니다.

windows 환경에서 Claude Code 설치 / 계정 연동 후 이를 활용하여 vue3 프로젝트 신규 생성 및 실행까지 진행해 보겠습니다. 

 

이 글의 진행 순서는 다음과 같습니다.

 

1. Claude Code란 무엇인가?
2. 사전 준비사항
3. Claude Code 설치 및 계정 연동
4. 프로젝트 시작하기

---

 

 

1. Claude Code란 무엇인가?

Claude Code는 Anthropic에서 출시한 터미널에서 Claude 모델에 직접 접근할 수 있게 해주는 명령줄 도구로(CLI Tool), 투명성과 제어를 유지하면서 복잡한 코딩 작업을 위임할 수 있습니다(쉽게 말하면 채팅창이 아니라 내 컴퓨터 터미널(검은 화면) 속에 살면서, 내 명령에 따라 직접 코드를 짜고 파일을 수정해 주는 AI Agent 입니다).

Pro 및 Max 플랜 요금제를 사용하면  웹, 데스크톱, 모바일 앱의 Claude와 터미널의 Claude Code에 하나의 통합 구독으로 접근할 수 있습니다. 또한 Pro / Max 플랜 말고 API 요금제로도 이용할 수 있습니다.

 

Claude.ai 웹사이트에서 코딩하던 방식과 비교하면 확연히 다릅니다.

"직접 하느냐, 말로만 하느냐"

구분	Claude.ai (웹사이트)	Claude Code (CLI 도구)
방식	채팅으로 코드 요청 -> 복사 -> 내 파일에 붙여넣기	터미널에 명령 -> AI가 알아서 파일 열고 수정 후 저장
내 컴퓨터 접근	불가능 (파일을 일일이 업로드해야 함)	가능 (내 프로젝트 폴더를 통째로 이해함)
주요 용도	질문/답변, 코드 스니펫 생성, 문서 요약	실전 개발, 리팩토링, 버그 수정, 테스트 실행

 

 

---

 

2. 사전 준비사항

2-1) git-bash 설치

windows 환경에서 리눅스 명령어 등을 통해 원할하게 실습을 하기 위해서는 git-bash 설치가 필요합니다. 아래 설치 url로 들어가서 자신의 OS 버전에 맞는 git-bash를 설치합니다.

설치 url : https://git-scm.com/install/windows

 

 

2-2) node(npm) 설치

이 글에서는 node(npm)로 claude code를 설치하기 때문에 node가 필요합니다. 또한 Claude Code를 통해  vue3 / nuxt 프로젝트를 생성할 것이기 때문에 node 설치가 필요합니다. node는 설치 url로 가서 기본값으로 설정된 버전을 설치합니다(이 글 작성 시점에는 v24.12.0 버전입니다). node가 설치되면 node 명령어를 어디서든 수행할 수 있도록 환경변수 path도 잡아줍니다.

설치 url : https://nodejs.org/ko/download

 

2-3) IDE(vscode) 설치

코딩을 수행하기 위해 vscode를 설치합니다. 아래 설치 url로 들어가서 자신의 OS 버전에 맞는 vscode를 설치합니다.

설치 url : https://code.visualstudio.com/download

 

 

2-4) claude Pro 이상 구독

이 글은 Claude pro 요금제(월 $20) 구독 중인 상태로 작성되었습니다. Claude pro 요금제 말고 API 요금제를 사용할 경우에도 Claude Code 사용은 가능합니다만 본인의 사용량을 고려해서 요금제를 선택하시기 바랍니다.

url : https://claude.ai/

 

 

---

 

3. Claude Code 설치 및 계정 연동

3-1) Claude Code 설치

windows 환경에서 설치하기 위해서는 windows powershell 혹은 windows CMD 로 설치를 할 수 있으나, 이 글에서는 node(npm)를 활용하여 Claude Code를 설치해 보겠습니다. git-bash 를 열어 아래 명령어를 수행합니다. 

 

명령어 & 결과 : 

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

 

3-2) Claude Code 실행 및 계정 연동

Claude Code 설치가 완료되면 Claude Code 명령어를 프롬프트 창에 날려보겠습니다. 

명령어 & 결과 : 

$ claude

Claude Code가 실행되면 우선 텍스트 스타일 선택 창이 뜹니다. 숫자를 눌러서 원하는 텍스트 스타일을 선택합니다(만약 실행되지 않으면 Claude Code가 설치된 위치를 windows 환경변수 path를 잡아줘야 합니다)

 

 

다음으로 요금제를 선택합니다. Pro / Max 요금제를 사용할 경우는 1번을, 그렇지 않고 API 요금제를 사용할 경우 2번을 선택합니다. 이 글은 Pro 요금제 기준으로 작성했기 때문에 1을 선택했습니다.

 

 

1을 선택할 경우 Claude chat account 연결 창이 뜹니다. "승인"을 눌러줍니다.

 

 

그리고 엔터키를 눌러주다가, 폴더 선택창이 나오면 2번을 눌러 나가줍니다(2번 선택)

 

 

프로젝트를 생성할 root 디렉토리로 이동 후, Claude Code 를 실행시켜보겠습니다.

그럼 위와 동일한 폴더 선택 창이 나오면 1번을 선택해 줍니다.

그럼 Claude Code가 정상적으로 실행됩니다.

 

 

4. Claude Code로 프로젝트 시작하기

이제 프로젝트를 시작할 준비는 완료되었습니다. 

프로젝트를 생성해 보겠습니다. 

 

4-1) Claude Code로 vue3 신규 프로젝트 생성

Claude Code CLI 창에 아래와 같이 명령을 해보도록 하면 명령어에 맞게 신규 vue 프로젝트가 생성된 것을 확인할 수 있습니다.

명령어 & 결과 : 

> in this directory, create vue3-project2 using vue3

 

4-2) 신규 프로젝트를 vscode로 오픈

그럼 git-bash 창을 한개 더 열고, 새로 생성된 프로젝트 디렉토리로 이동한 후 vscode를 실행해 보겠습니다. 디렉토리로 이동 후 "code ." 명령어를 치면 vscode가 실행되면서 현재 디렉토리가 오픈됩니다. 

명령어 & 결과 : 

$ cd {Claude Code 가 새로 만든 프로젝트 root 디렉토리}
$ code .

 

 

다음과 같이 vscode가 열리면서 Claude Code가 생성해준 디렉토리(vue3-project2) 를 root 디렉토리로 해서 프로젝트 소스코드 창이 열리는 것을 확인할 수 있습니다.

 

4-3) 생성된 소스 코드 실행 

생성된 소스코드를 실행해 보겠습니다. 

우선 vue 프로젝트 수행을 위해 git-bash를 열어보겠습니다.

이번에는 vscode에서도 git-bash 창을 열어보도록 하겠습니다.

git bash 여는 방법 : (우측 상단 Toggle Panel(Ctrl + J) -> "+" 버튼 클릭(Launch Profile...) -> Git bash 선택)

 

 

git-bash가 실행되면 vue 프로젝트 실행 명령어를 실행합니다.

Claude Code가 알려준 대로 아래 2가지 명령어를 프로젝트 디렉토리에서 git-bash를 통해 수행하면 생성된 vue 프로젝트가 수행됩니다.

$ npm install
$ npm run dev

 

Claude Code가 알려준 대로 아래 2가지 명령어를 프로젝트 디렉토리에서 git-bash를 통해 수행하면 생성된 vue 프로젝트가 수행됩니다.

 

 

git-bash에 나온 주소를 인터넷 브라우저에 붙여넣으면 vue3 프로젝트 페이지로 이동합니다(혹은 Ctrl 을 누르고 git-bash 에 표시된 주소 클릭)

 

 

4-4) 소스 수정

이번엔 소스를 조금 수정해 보겠습니다. 아래와 같이 명령어를 입력해 보겠습니다.

> create tab(main, test, about) in this vue3-project2. tab 클릭 시 페이지 이동
main 페이지 현재 main 페이지, test 페이지에는 pinia 테스트 페이지
about에는 프로젝트 소개페이지 생성

 

명령어 입력을 하면 다음과 같이 Claude Code가 여러 질문을 하는데 질문에 맞게 선택을 하면 아래와 같이 소스를 수정합니다.

 

 

소스가 변경이 완료되면 프로젝트를 다시 실행해봅니다.

그러면 프로젝트가 명령어에 맞게 변경된 것을 확인할 수 있습니다.

 

 

 

 

 

 

이것으로 Claude Code 설치 및 Claude Code를 활용하여 코딩하는 방법에 대한 설명을 마치도록 하겠습니다.

앞으로 Claude Code를 활용하여 다양한 프로젝트를 만들어 보시길 바라겠습니다.

감사합니다.

 

 

 

 

 

99. 참고 자료

 

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

Claude Code 설정 - Claude Code Docs

https://support.claude.com/ko/articles/11145838-pro-%EB%98%90%EB%8A%94-max-%ED%94%8C%EB%9E%9C%EC%9C%BC%EB%A1%9C-claude-code-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Pro 또는 Max 플랜으로 Claude Code 사용하기 | Anthropic 지원 센터