비개발자가 바이브 코딩할 때 쓰는 도구 총정리 | 클로드, VSCode, GitHub, Vercel
📌 들어가며
바이브 코딩을 시작하려고 하면 제일 먼저 드는 생각이
"뭐가 필요하지?" 일 거예요.
저도 처음에 강의 들으면서 이것저것 설치하다 보니
어느새 여러 개의 도구를 쓰고 있더라고요.
오늘은 KDT 강의를 들으면서 실제로 사용하게 된 도구들을
비개발자 시각에서 정리해볼게요! 😊
🤖 1. Claude (클로드) - AI 코딩 파트너
용도 : 코드 생성, 에러 해결, 개념 질문
무료 / 유료 : 둘 다 가능 (강의에서는 유료 권장)
👉 https://claude.ai
바이브 코딩의 핵심 도구예요.
"이렇게 만들어줘"라고 말하면 코드를 만들어주고,
에러가 나면 원인과 해결 방법도 알려줘요.
저는 클로드 유료 버전을 사용하고 있는데, 답변이 훨씬 상세하고 정확해서 만족스러워요.
강의에서는 GPT와 그록을 기준으로 설명하셨지만, 클로드도 충분히 활용 가능합니다!
💻 2. VSCode (비주얼 스튜디오 코드) - 코드 편집기
용도 : 코드 작성 및 편집, 터미널 실행, 확장 프로그램 활용
무료 / 유료 : 무료
👉 https://code.visualstudio.com/
AI가 만들어준 코드를 붙여넣고 수정하는 공간이에요.
처음에는 화면이 낯설게 느껴지지만, 쓰다 보면 금방 익숙해져요.
초보자에게 추천하는 필수 확장 프로그램 :
• Korean Language Pack - 한국어 메뉴 지원
• Live Server / Live Preview - 코드 수정 시 브라우저 자동 새로고침
• Prettier - 코드 자동 정렬
🐙 3. GitHub (깃허브) - 코드 저장소
용도 : 코드 버전 관리, 백업, 협업
무료 / 유료 : 둘 다 가능 (개인 프로젝트는 무료로 충분)
👉 https://github.com
내가 만든 코드를 온라인에 저장해두는 공간이에요.
저장만 하는 게 아니라 수정 이력이 전부 남아서
실수로 코드를 날려도 되돌릴 수 있어요.
처음엔 왜 필요한지 몰랐는데, 직접 에러를 겪고 나니
깃허브 없이는 못 살겠다는 생각이 들었어요 😅
🚀 4. Vercel (버셀) - 웹 배포 플랫폼
용도 : 웹사이트 무료 배포, 자동 배포 연동
무료 / 유료 : 개인 프로젝트는 무료로 충분
👉 https://vercel.com
깃허브에 코드를 올리면 버셀이 자동으로 웹사이트를 만들어줘요.
무료로 vercel.app 도메인도 제공해줘서 별도 비용 없이 배포 가능해요.
가입하고 깃허브 연동만 하면 끝이라 생각보다 훨씬 간단했어요!
실제로 배포된 제 웹 명함도 확인해보세요 😊
👉 https://webnamecard-mocha.vercel.app/
gang — 웹 명함
webnamecard-mocha.vercel.app
📋 초보자 추천 세팅 순서
처음 시작할 때 이 순서대로 세팅하면 헤매지 않아요!
1. GitHub 계정 만들기
2. VSCode 설치 + Korean Language Pack, Live Preview 확장 설치
3. Git 설치 (https://git-scm.com/install/windows)
4. Claude 또는 GPT 계정 만들기
5. Vercel 가입 후 GitHub 연동
이 순서대로만 해도 바이브 코딩 시작할 준비 완료예요! 🎉
🙌 마무리
처음에는 이 도구들이 왜 필요한지 몰랐는데,
직접 써보고 나니 각각의 역할이 명확하게 느껴지더라고요.
비개발자라도 이 도구들만 있으면 충분히 바이브 코딩을 시작할 수 있어요.
일단 설치하고 시작해보세요! 😊
앞으로도 강의 내용을 꾸준히 기록할 예정이니, 관심과 응원 부탁드립니다! 🙏