🎯 비전공자가 바이브코딩을 시작하려면

바이브코딩(Vibe Coding)은 AI에게 자연어로 지시해서 코드를 만드는 방식입니다. "회원가입 페이지를 만들어줘"처럼 말하면 AI가 실제 동작하는 코드를 작성해줍니다. 프로그래밍 문법을 외울 필요가 없기 때문에 비전공자에게 특히 적합한 방법입니다.

다만 AI가 코드를 대신 써준다고 해서 아무 준비 없이 시작할 수 있는 건 아닙니다. 코드를 실행하려면 개발 환경이 필요하고, AI에게 원하는 결과를 얻으려면 요청 방법도 알아야 합니다. 이 글에서는 진짜 처음부터, 도구 설치에서 첫 웹사이트 완성까지 순서대로 안내합니다.

🛠️ 개발 환경 준비가 먼저인 이유

AI 도구에게 "웹사이트 만들어줘"라고 하면 코드를 생성해주지만, 그 코드를 내 컴퓨터에서 실행하려면 개발 환경이 갖춰져야 합니다. 개발 환경이란 코드를 편집하고, 실행하고, 관리할 수 있는 도구들의 조합을 말합니다.

비전공자가 바이브코딩을 시작할 때 필요한 도구는 딱 세 가지입니다.

도구	역할	비유
Git	코드 변경 이력을 저장하고 되돌릴 수 있는 버전 관리 도구	문서의 "변경 내역 추적" 기능
Node.js	JavaScript 코드를 실행하는 환경	엑셀이 있어야 .xlsx 파일을 열 수 있는 것과 같음
VS Code	코드를 작성하고 편집하는 프로그램	코딩 전용 메모장

이 세 가지가 설치되면 AI가 만들어준 코드를 바로 실행하고 결과를 확인할 수 있습니다. 터미널에서 node -v, git --version 명령어를 입력했을 때 버전 번호가 나오면 정상적으로 설치된 것입니다.

💡 직접 설치가 어렵다면

각 도구를 하나씩 검색해서 설치하면 최소 30분에서, 문제가 생기면 반나절까지 걸릴 수 있습니다. 특히 Windows 환경변수 설정이나 macOS 권한 문제에서 막히는 경우가 많습니다. VibeStart를 사용하면 OS에 맞는 설치 명령어를 복사 붙여넣기만으로 실행할 수 있어서, 대부분 10분 이내에 모든 설치를 마칩니다.

🤖 AI 도구 선택하기

개발 환경이 준비됐다면 바이브코딩에 사용할 AI 도구를 선택해야 합니다. 현재 가장 많이 사용되는 도구 세 가지를 비교해보겠습니다.

🔵 Claude (claude.ai)

Anthropic이 만든 AI로, 긴 대화 맥락을 잘 유지하고 코드 품질이 높은 편입니다. 웹 브라우저에서 바로 사용할 수 있고, 터미널에서 직접 코딩하는 Claude Code도 있습니다. 복잡한 로직을 설명할 때 특히 강점을 보입니다.

🟢 Cursor (cursor.com)

VS Code를 기반으로 AI 기능을 통합한 코드 편집기입니다. 코드를 직접 수정하면서 AI와 대화할 수 있어서, 기존 프로젝트를 수정하거나 확장할 때 편리합니다. 별도로 설치해야 하지만 VS Code 사용법과 거의 동일합니다.

🟡 ChatGPT (chat.openai.com)

가장 대중적인 AI 도구입니다. 코딩 외에도 다양한 질문에 답해주기 때문에 개발 과정에서 모르는 개념을 물어볼 때 유용합니다. 다만 긴 코드를 다룰 때 중간에 잘리는 경우가 있습니다.

어떤 도구를 선택할지 고민된다면, 처음에는 웹 브라우저에서 바로 쓸 수 있는 Claude나 ChatGPT로 시작하고, 프로젝트가 커지면 Cursor로 옮기는 방식을 추천합니다.

📝 첫 프로젝트 만들기 (5단계)

도구가 준비됐다면 이제 실제로 웹사이트를 만들어봅니다. 아래 단계를 순서대로 따라가면 됩니다.

1단계: 프로젝트 폴더 생성

웹사이트 코드를 담을 폴더가 필요합니다. 터미널을 열고 아래 명령어를 실행하세요.

npx create-next-app@latest my-first-site

설치 옵션을 물어보면 모두 기본값(Enter)으로 진행하면 됩니다. my-first-site 폴더가 생성되고 그 안에 기본 파일들이 자동으로 만들어집니다.

2단계: 개발 서버 실행

생성된 폴더로 이동해서 개발 서버를 켭니다.

cd my-first-site
npm run dev

브라우저에서 http://localhost:3000을 열었을 때 Next.js 기본 페이지가 보이면 성공입니다. 이 상태에서 코드를 수정하면 브라우저에 바로 반영됩니다.

3단계: AI에게 첫 번째 요청하기

AI 도구를 열고 아래와 같이 요청해보세요.

"Next.js 프로젝트의 app/page.tsx 파일을 수정해서, 간단한 자기소개 페이지를 만들어줘. 이름, 한 줄 소개, 취미 3개를 카드 형태로 보여주는 페이지로 만들어줘."

AI가 코드를 생성해주면, app/page.tsx 파일의 내용을 AI가 준 코드로 교체하세요. 저장하면 브라우저에서 바로 결과를 확인할 수 있습니다.

4단계: 수정 요청하기

처음 결과가 마음에 들지 않으면 구체적으로 수정을 요청합니다.

"배경색을 연한 파란색으로 바꾸고, 카드에 그림자 효과를 추가해줘. 그리고 모바일에서도 잘 보이도록 반응형으로 만들어줘."

이렇게 대화하듯 수정을 반복하면서 원하는 결과물을 만들어가는 게 바이브코딩의 핵심입니다.

5단계: 결과 확인

브라우저에서 페이지가 의도한 대로 보이는지 확인합니다. PC와 모바일 크기 모두 확인하려면 브라우저 개발자 도구(F12)에서 기기 모드를 켜서 확인할 수 있습니다.

⚠️ 비전공자가 자주 하는 실수 5가지

1. "웹사이트 만들어줘"처럼 너무 막연하게 요청하기

AI는 구체적인 지시를 받을수록 좋은 결과를 냅니다. "웹사이트 만들어줘" 대신 "카페 메뉴를 보여주는 한 페이지짜리 웹사이트를 만들어줘. 메뉴 이름, 가격, 사진을 카드 형태로 배치해줘"처럼 요청하세요.

2. 에러 메시지를 무시하고 다음 단계로 넘어가기

터미널에 빨간 글씨가 나오면 당황해서 무시하고 넘어가는 경우가 많습니다. 에러 메시지를 그대로 복사해서 AI에게 "이 에러가 나왔는데 어떻게 해결해?"라고 물어보면 대부분 해결할 수 있습니다.

3. 여러 기능을 한꺼번에 요청하기

"로그인, 회원가입, 게시판, 결제를 한 번에 만들어줘"라고 하면 AI도 혼란스러워합니다. 한 번에 한 가지 기능씩 요청하고, 동작을 확인한 뒤 다음 기능을 추가하세요.

4. 코드를 전혀 읽지 않기

바이브코딩이 코딩 문법을 몰라도 된다는 뜻이지, 코드를 전혀 보지 않아도 된다는 뜻은 아닙니다. AI가 만든 코드에서 어떤 파일이 어떤 역할을 하는지 정도는 파악해두면 문제가 생겼을 때 AI에게 더 정확한 질문을 할 수 있습니다.

5. Git으로 저장하지 않고 작업하기

코드가 잘 동작하는 시점에 Git으로 저장(커밋)하지 않으면, 이후 수정에서 문제가 생겼을 때 되돌릴 수 없습니다. 기능 하나가 완성될 때마다 git add .과 git commit -m "설명" 명령어로 저장하는 습관을 들이세요.

✅ 시작 전 준비물 점검

아래 항목을 모두 확인하면 바이브코딩을 시작할 준비가 된 것입니다.

터미널에서 git --version 입력 시 버전 번호가 나오는가?
터미널에서 node -v 입력 시 버전 번호가 나오는가?
VS Code 또는 Cursor가 설치되어 있는가?
AI 도구(Claude, ChatGPT, Cursor 중 하나) 계정이 있는가?
npx create-next-app@latest로 프로젝트를 생성할 수 있는가?
npm run dev 실행 후 localhost:3000에서 페이지가 보이는가?

하나라도 안 되는 항목이 있다면 VibeStart에서 단계별로 해결할 수 있습니다.

🔄 바이브코딩 도구 비교

항목	Claude	Cursor	ChatGPT
사용 방식	웹/터미널	데스크톱 앱	웹/앱
코드 품질	높음	높음	보통
긴 코드 처리	강함	강함	중간에 잘릴 수 있음
파일 직접 수정	Claude Code로 가능	기본 지원	불가
무료 사용	제한적	제한적	제한적
추천 상황	새 프로젝트 시작	기존 코드 수정	개념 학습/질문

완벽한 도구는 없으므로, 상황에 따라 조합해서 사용하는 게 효과적입니다. 예를 들어 Claude로 코드를 생성하고, 세부 수정은 Cursor에서 하고, 모르는 개념은 ChatGPT에 물어보는 방식입니다.

💡 바이브코딩을 더 잘하는 팁

🗂️ 프로젝트 구조를 이해하세요

AI가 만들어준 프로젝트의 폴더 구조를 대략이라도 파악해두면 수정 요청이 훨씬 수월해집니다. Next.js 프로젝트에서 가장 중요한 폴더는 app/(페이지), public/(이미지), components/(재사용 부품)입니다.

📸 스크린샷을 활용하세요

원하는 디자인의 스크린샷이나 참고 이미지가 있다면 AI에게 함께 보여주면서 "이 디자인과 비슷하게 만들어줘"라고 요청할 수 있습니다. 글로만 설명하는 것보다 훨씬 정확한 결과를 얻습니다.

🔄 자주 저장하고 자주 확인하세요

코드를 수정할 때마다 브라우저에서 결과를 확인하고, 잘 동작하면 Git으로 저장하세요. 한 번에 많이 수정하면 문제가 생겼을 때 어디서 잘못됐는지 찾기 어렵습니다.

📚 에러를 두려워하지 마세요

에러는 프로그래밍의 자연스러운 일부입니다. 에러 메시지를 AI에게 그대로 보여주면 원인과 해결법을 알려줍니다. 에러가 난다고 잘못하고 있는 게 아닙니다.

비전공자 바이브코딩 시작 가이드: AI로 첫 웹사이트 만들기