바이브코딩의 시대 : v0 + Cursor를 활용해 웹사이트를 만들기 사전준비

코딩을 전혀 모르는 사람도 v0 + Cursor를 활용해 웹사이트를 만드는 게 가능할까요?

그것도 2시간 안에!
저는 가능하다고 생각합니다.
단, 원활한 진행을 위해 아래 프로그램들을 미리 설치하는 것이 중요합니다.

사전 설치 프로그램 목록 & 선택 이유

1. Cursor 에디터

왜 필요한가요?

• Cursor는 AI가 코딩을 도와주는 에디터입니다. 기존의 코드 편집기(예: VS Code)와 비슷하지만, ChatGPT 기반의 AI가 실시간으로 코드 작성, 수정, 오류 해결까지 도와줍니다.
• 특히 초보자에게는 “무엇을 어떻게 써야 할지” 고민할 필요 없이, 자연어로 명령을 주면 코드로 바꿔주는 점이 큰 장점입니다.

이 툴을 선택한 이유

• ChatGPT가 내장돼 있어 추가 설치 없이 바로 사용 가능
• 초보자가 “웹사이트 만들고 싶어요”라고 입력만 해도 HTML/CSS/JS 코드를 자동 생성
• 실시간 코드 보완과 설명이 가능해 코딩 지식 없이도 학습 효과가 큼

설치 팁

• 공식 사이트: https://cursor.sh
• 설치 시 기본 옵션만으로 충분

2. Node.js (LTS 버전)

왜 필요한가요?

웹사이트를 로컬에서 테스트하거나 실행하려면 웹 서버가 필요합니다. Node.js는 가볍고 빠른 JavaScript 실행 환경을 제공하며, 특히 프론트엔드 툴 대부분이 Node.js 기반으로 동작합니다.

이 툴을 선택한 이유

• Vite, Next.js 등 현대적인 프론트엔드 도구들이 Node.js 기반
• 로컬 서버를 띄우는 npm run dev 같은 명령어가 작동하려면 필수
• 대부분의 웹 템플릿이나 툴킷이 Node 환경을 전제로 함

설치 팁

• LTS(Long Term Support) 버전 권장: 안정성과 호환성 면에서 우수
• "Automatically install the necessary tools" 체크하면 Git과 연동 시 편리
• 공식 사이트: https://nodejs.org

3. Git

왜 필요한가요?

웹사이트 개발은 단순한 파일 생성이 아니라 버전 관리와 공유가 핵심입니다. Git은 코드 변경 사항을 추적하고, GitHub와 연결하여 손쉽게 웹에 배포할 수 있게 해줍니다.

이 툴을 선택한 이유

• GitHub Pages로 바로 웹사이트를 배포할 수 있음
• 코드의 이전 버전으로 복원 가능 → 실수해도 되돌릴 수 있음
• 협업할 때 필수 도구라 익혀두면 좋음

설치 팁

공식 사이트: https://git-scm.com/download/win

• "Git Bash" 옵션 체크 필수: 명령어 실행이 쉬워짐

4. GitHub 계정

왜 필요한가요?

GitHub는 단순한 저장소가 아니라, 코드를 웹사이트로 변환해주는 플랫폼 역할도 합니다. 특히 GitHub Pages 기능을 이용하면, 복잡한 서버 설정 없이도 무료로 웹사이트 배포가 가능합니다.

이 툴을 선택한 이유

• 무료로 정적 웹사이트 배포 가능 (예: yourname.github.io)
• 팀 프로젝트나 포트폴리오로 활용할 수 있음
• Git과 연동하여 자동 배포도 가능

준비 팁

• 이메일 인증까지 완료할 것
• 저장소 생성, Push/Commit 기본 명령어는 실습 중 설명 예정

5. Chrome 또는 Edge 브라우저

왜 필요한가요?

최신 웹 기술을 제대로 확인하려면 브라우저가 중요합니다. 특히 Chrome/Edge는 **개발자 도구(F12)**를 통해 HTML 구조, CSS, 콘솔 로그 등을 확인할 수 있어 디버깅에 유용합니다.

이 툴을 선택한 이유

• 대부분의 개발자들이 사용하는 표준 브라우저
• v0 또는 웹사이트 미리보기 기능이 잘 작동함
• 실습 중 CSS나 동작 오류가 날 때 확인하기 편함

설치 확인 방법 안내

1. Node.js 설치 확인→ 버전 번호가 출력되면 성공
   → node -v
    
2. Git 설치 확인→ 버전 정보가 나오면 정상
   → git --version
3. Cursor 실행 확인
   → 프로그램 실행 후 시작 화면이 뜨는지 확인

추가 안내사항

• 인터넷 연결은 반드시 안정적으로 유지
• 최소 8GB RAM 이상 권장
• 문제가 생기면 강사/도우미 연락처 미리 공유
• 설치 과정 영상/스크린샷을 미리 제공하면 참석자 만족도 상승