개발 도구 설치 및 사용법 (비개발자를 위한 바이브코딩 개발 가이드 1)

개발 도구 설치 및 사용법 (비개발자를 위한 바이브코딩 개발 가이드 1)

원문: https://www.notion.so/259bf506e994803294c4f8b33684a1f0

시작하기 전에 알아야 할 것들

개발 도구는 여러분이 코드를 작성하고 관리하는 작업 공간입니다. 마치 워드 프로세서로 문서를 작성하듯, 개발 도구로 프로그램을 만들어요. 2024년 현재 AI가 내장된 개발 도구들이 등장해서 완전 초보자도 AI의 도움을 받아 코딩을 시작할 수 있게 되었습니다.

[1] Cursor vs VSCode : 초보자를 위한 완벽 비교

(1) 핵심 차이점 한눈에 보기

(2) Cursor 상세 분석

• 특징 : AI 기능이 내장된 독립형 코드 에디터. VS Code와 유사한 인터페이스라 친숙하며, 별도 설정 없이 바로 AI 코딩을 시작할 수 있습니다.

• 장점

• 단점

• 추천 대상 : AI 코딩을 빠르게 시작하고 싶은 분.

(3) VS Code + Claude Code 상세 분석

• 특징 : 전 세계 개발자들이 가장 많이 사용하는 코드 에디터인 VS Code에 Claude Code를 확장 프로그램으로 설치하여 사용합니다.

• 장점

• 단점

• 추천 대상 : 기초부터 탄탄히 배우고 싶은 학생이나 취미 개발자, 예산을 절약하고 싶은 분.

[2] 단계별 설치 가이드

(1) Windows 환경 설치 가이드

1. VSCode 설치하기

1단계 : 다운로드

1. 웹브라우저에서 code.visualstudio.com 접속

2. 파란색 “Download for Windows” 버튼 클릭

3. VSCodeUserSetup-x64-1.xx.x.exe 파일 다운로드 (약 90MB)

2단계 : 설치

1. 다운로드한 파일을 더블클릭

2. “동의합니다” 체크 후 “다음” 클릭

3. 중요 : “PATH에 추가” 옵션 반드시 체크

4. “바탕화면에 아이콘 만들기” 체크 (편의를 위해)

5. “설치” 버튼 클릭 후 3-5분 대기

3단계 : 초기 설정

1. VSCode 첫 실행시 한국어 팩 설치 알림이 나타남 → “Install and Restart” 클릭

2. 테마 선택 (Dark+ 추천 - 눈의 피로 감소)

3. 확장 프로그램 추천 화면에서 “Skip” 클릭 (나중에 설치)

2. Cursor 설치하기

1단계 : 다운로드

1. cursor.com 접속

2. “Download for Windows” 클릭

3. cursor-setup-win.exe 파일 다운로드

2단계 : 설치 및 계정 설정

1. 다운로드한 파일 실행

2. 설치 완료 후 Cursor 실행

3. “Sign Up” 클릭하여 계정 생성 (Google 계정 연동 추천)

4. VSCode 설정 가져오기 옵션 선택 (있는 경우)

(2) macOS 환경 설치 가이드

1. VSCode 설치하기

1. code.visualstudio.com에서 “Download for macOS” 클릭

2. .zip 파일 다운로드 후 압축 해제

3. Visual Studio Code를 Applications 폴더로 드래그

4. Launchpad에서 실행

2. Cursor 설치하기

1. cursor.com에서 “Download for macOS” 클릭

2. .dmg 파일 마운트 후 Applications 폴더로 복사

3. 첫 실행시 “개발자를 확인할 수 없습니다” 경고 → 시스템 환경설정에서 허용

(3) Claude Code 설치 가이드

1. Claude 계정 생성 및 Pro 플랜 결제

Claude Code를 사용하는 방법은 두 가지가 있습니다. 첫째, Anthropic 계정을 만들어 API 키를 받고 사용량에 따라 자동 결제되는 방식과 둘째, Claude 계정을 만들어 Pro 플랜으로 월 결제하고 일일 할당량 내에서 사용하는 방식입니다. 바이브 코딩을 하다가 예상치 못한 큰 금액이 청구될 수 있는 첫 번째 방식보다는 두 번째 방식을 추천합니다. 이제 두 번째 방식을 설명해 드리겠습니다.

1. https://claude.ai/ 접속 및 계정 생성.

2. https://claude.ai/upgrade 접속 후 Pro 플랜 결제

2. Node.js 설치 및 설치 확인

Claude Code는 Node.js 기반 CLI로 동작하므로, Node.js가 설치되어 있어야 합니다

1. https://nodejs.org 접속

2. 파일 다운로드

3. 설치 확인

3. Claude Code 설치 및 설치 확인

1. 터미널(맥) 또는 파워셸(윈도우)을 엽니다.

2. 명령어 입력 후 엔터 : npm install -g @anthropic-ai/claude-code

3. Claude Code 실행 : claude 입력 후 엔터

4. 테마 선택

5. 인증 방법을 선택하는 화면이 나타납니다

6. 온보딩 완료

7. Claude Code 테스트

3. Claude Code를 Cursor나 VS Code에 설치하는 방법

• 2번에서 Claude Code 를 설치하지 않고 Cursor나 VS Code의 마켓플레이스에서 Claude Code를 설치하면 Claude Code가 실행이 되지 않습니다.

• Cursor에서 Claude Code 설치방법입니다.

• VS Code에서 Claude Code 설치방법입니다.

• 노란색 박스에서 “Do you trust the files in this folder?” 이 물음은 Claude Code가 해당 폴더를 쓰고, 읽고, 실행해도 되는 신뢰하는 폴더인지 물어보는 것입니다. 이런 질문이 나올 경우 1. Yes, proceed를 선택하고 엔터키를 누르면 됩니다.

• 간단한 동작 테스트 : 테스트할 폴더를 만들고, VS Code나 Cursor에서 해당 폴더를 열어주고, 오른쪽 사이드바의 Claude 패널(또는 Claude 터미널)에 “현재 열려있는 폴더에 Hello World 출력하는 파이썬 코드 작성해줘” 라고 입력해봅니다. Claude AI가 반응하여 코드를 생성하고, 에디터에 해당 코드가 나타나거나 제안으로 제공되면 성공입니다! 

[3] Cursor, VSCode 필수 기능 사용법

(1) Cursor의 AI 채팅 창 활용하기

1. 기본 사용법

1. Ctrl+L (Windows) 또는 Cmd+L (Mac)으로 채팅 창 열기

2. 자연어로 질문 입력 : “React로 간단한 투두리스트 만들어줘”

3. 생성된 코드 검토 후 “Accept” 또는 “Reject”

**2. 효과적인 프롬프트 입력 팁 **

• 구체적으로 요청 : “버튼” 대신 “파란색 로그인 버튼”

• 맥락 제공 : “이메일 입력 폼 아래에 빨간색 에러 메시지 표시”

• 단계별 요청 : 복잡한 기능은 여러 단계로 나누어 요청

**3. MCP 연결 상태 확인 **

• 우측 하단의 연결 상태 아이콘 확인 (초록색=정상, 빨간색=연결 오류)

• 연결 문제시 Settings → Model → Refresh 클릭

(2) VSCode의 GitHub Copilot 설정

**1. 확장 프로그램 설치 **

1. 좌측 사이드바의 확장 프로그램 아이콘 클릭 (네모 4개)

2. “GitHub Copilot” 검색 후 설치

3. “GitHub Copilot Chat” 확장도 함께 설치

**2. GitHub 계정 연결 **

1. 우측 하단 “Sign in to GitHub” 클릭

2. 브라우저에서 GitHub 로그인

3. VSCode에서 인증 완료

**3. AI 코딩 기본 사용법 **

• Tab키로 AI 제안 수락

• Ctrl+Enter로 더 많은 제안 보기

• Ctrl+Shift+P → “Copilot Chat” 입력하여 채팅 창 열기

(3) 공통 기능들(Mac은 Ctrl 대신 Cmd)

**1. 파일 및 프로젝트 관리 **

1. 새 프로젝트 폴더 만들기

2. 파일 생성 : Ctrl+N (새 파일) → 내용 작성 → Ctrl+S (저장)

3. 폴더 구조 보기 : 좌측 Explorer 창에서 전체 프로젝트 파일 확인

**2. 코드 저장 및 관리 **

• 자동 저장 : File → Auto Save 체크 (추천)

• 수동 저장 : Ctrl+S

• 전체 저장 : Ctrl+K, S

**3. 오류 확인 및 수정 **

• 오류 표시 : 빨간 밑줄이 그어진 부분이 오류

• 오류 상세보기 : 오류 부분에 마우스 올리기

• AI에게 수정 요청 : “이 오류를 수정해줘”라고 채팅창에 입력

(4) 초보자 꿀팁 모음

**1. 개발 도구 선택 가이드 **

• 예산 월 3-5만원 : VSCode + GitHub Copilot Pro 16x Prompt

• 예산 월 5만원 이상 : Cursor Pro 검토

**2. 생산성 향상 팁 **

1. 단축키 익히기

2. 테마 설정 : Dark+ 또는 One Dark Pro 추천 (눈 보호)

3. 폰트 크기 : 14-16px 권장 (Settings → Font Size)

3. 문제 해결 가이드

**VSCode가 느릴 때 **

1. 불필요한 확장 프로그램 비활성화

2. 큰 파일이나 폴더 제외 설정

3. 하드웨어 가속 비활성화 (File → Preferences → Settings → “hardware acceleration” 검색)

**Cursor AI가 작동하지 않을 때 **

1. 인터넷 연결 확인

2. 계정 로그아웃 후 재로그인

3. 월간 사용량 한도 확인

4. 앱 재시작

**한국어가 깨질 때 **

1. VSCode : Korean Language Pack 설치

2. 시스템 지역 설정 확인

3. UTF-8 인코딩 설정 (하단 상태바에서 인코딩 클릭)

[4] 자주 묻는 질문 (FAQ) – 문제 상황별 해결 팁

Q1. 채팅에 프롬프트를 보냈는데 AI가 반응이 없어요.

A: 먼저 인터넷 연결을 확인하세요. Cursor의 AI나 Claude Code 모두 온라인을 통해 동작합니다. 인터넷이 정상이라면 로그인/인증 상태를 점검합니다. Cursor라면 우상단 계정 아이콘이 로그인 되어있는지, VS Code+Claude라면 터미널에 오류 메시지가 없는지 보세요. API 사용 한도 초과일 가능성도 있어요 – Cursor는 에디터 하단에 잔여 사용량 경고를 표시하고 , Claude Code는 터미널에 오류를 뱉기도 합니다. 이러한 경우 월간 한도를 늘리거나 다음 날까지 기다려야 할 수 있습니다.

Q2. Cursor에서 “AI 응답이 너무 깁니다” 또는 “토큰 한도 초과” 같은 에러가 나요.

A: Cursor 무료 모드에선 한 번에 긴 답변을 못할 수 있습니다. 해결법: 프롬프트를 더 잘게 쪼개어 묻거나, Cursor Pro 플랜을 고려해볼 수 있어요. 또는 Claude Code는 더 큰 컨텍스트를 허용하니 전환을 생각해볼 수도 있습니다 .

Q3. VS Code 터미널에서 Claude Code 명령어가 안 먹혀요 (“command not found: claude”).

A: 이는 Claude Code CLI 설치가 제대로 안 되었거나 PATH 설정 문제가 있을 때 나옵니다. 우선 npm install -g @anthropic-ai/claude-code를 관리자 권한으로 다시 실행해보세요. 설치 로그에 에러가 없었는지도 확인합니다. Windows에서는 간혹 재부팅 후 인식될 때도 있고, Mac은 터미널 재시작이 필요할 수 있어요. 그래도 안 되면 Node/NPM이 올바르게 설치되었는지 (npm -v 확인)와 전역 모듈 경로가 PATH에 포함됐는지 점검해야 합니다.

Q4. AI가 코드 수정 후 Cursor 에디터에 반영되지 않아요.

A: Cursor에서 Apply를 눌렀는데 가끔 적용이 안 되는 버그가 보고되곤 합니다 . 이럴 땐 우선 해당 파일을 수동으로 저장(Ctrl+S)해보거나, 편집기 탭을 다시 열어봅니다. 최후의 방법으로 Cursor를 재시작하면 채팅 기록은 날아가지만, 파일 시스템 변경은 적용되어 있을 수도 있어요. 혹은 같은 요청을 다시 한번 해보면 두 번째는 제대로 될 때도 있습니다.

Q5. Claude Code가 “Rate limit exceeded” 또는 에러를 뱉으며 중단돼요.

A: Anthropic API의 요청 제한에 걸린 경우입니다. 너무 단기간에 많은 요청을 보내면 생길 수 있어요. 잠시 기다렸다 다시 시도하거나, 응답을 나누어 받아보세요. (/next 명령 등으로 다음 부분 이어받기 기능도 고려). 또한 유료 플랜 업그레이드로 한도를 늘릴 수 있습니다. 간혹 Claude Code CLI 버그일 수도 있으니, npm update -g @anthropic-ai/claude-code로 최신 버전으로 올려보는 것도 방법입니다.

Q6. 프로젝트를 진행하다가 뭔가 잘못되어 되돌리고 싶어요.

A: 가장 쉬운 방법은 Undo(Ctrl+Z) 여러 번 누르기입니다 😅. Cursor나 VS Code 모두 여러 단계 실행 취소가 돼요. 만약 AI가 대거 코드를 엉망으로 만들어놨다면, 침착하게 파일 단위로 이전 상태 복구를 생각해보세요. Cursor에는 Timeline 기능은 없지만, VS Code는 파일 우클릭 Local History 확장 등을 쓰면 기록을 볼 수 있어요. 애초에 Git에 커밋을 해뒀다면 금상첨화로, 이전 커밋으로 Reset 가능하겠죠.

Q7. AI한테 물어보기가 애매한 간단한 개발 지식(예: 터미널 명령어)이 필요해요.

A: 이런 건 굳이 AI에 안 물어봐도 됩니다. 구글 검색이나 Stack Overflow 검색이 빠를 수 있어요. 예컨대 npm 초기화 명령어가 궁금하면, 브라우저에 검색해보세요. 물론 Cursor 자체에도 웹 검색 MCP가 있지만 초보땐 활용이 어려우니, 친숙한 검색엔진을 병행하세요.

Q8. 커서에서 클로드 코드를 눌렀는데 밑에 빨간 글씨가 생겼어요.

A: 아래 빨간 박스와 같이 빨간 글씨가 뜨면 당황하지 마세요. 클로드 코드 자동 업데이트가 실패했다는 알림이에요. 노란색 부분을 드래그 해서 복사 후 그대로 입력창에 붙여넣어 엔터를 치면 알아서 업데이트 해줍니다. 그리고 클로드코드가 켜있는 창을 닫고 다시 창을 열면 아래 빨간 글씨가 바뀌어 있을거에요.

글로벌하게 클로드코드를 업데이트 할건지, 아니면 실행하고 있는 폴더에서만 업데이트 할 건지 물어보는 것이라 1번을 선택하시면 됩니다.

업데이트가 완료되면 클로드코드 창 닫가 버튼을 누르면 이런 Terminate 하겠냐는 경고창이 뜰건데 Terminate 하시면 됩니다. 대화창을 아예 끄는 것이기 때문에 현재 대화를 계속 이어가고 싶을 경우 Cancel을 누르시면 됩니다. 저는 첫 대화창이라 부담없이 Terminate 를 누릅니다.

이렇게 다시 켜면 빨간 글씨부분이 사라지는 것을 볼 수가 있습니다.

이 밖에도 막막한 부분이 있다면 커뮤니티의 도움을 받아보세요. Cursor 공식 포럼이나 개발자 Q&A사이트에 질문을 남기면 선배 개발자들이 답을 줄 수 있습니다. 혼자 끙끙 앓지 말고 물어보는 용기, 개발에서 정말 중요합니다! 😄