사이드 프로젝트를 시작해 본 적 있나요? 아이디어가 좋아서 주말에 시작했는데, 환경 설정부터 삽질 시작해서 하루가 갑니다. 로그인 구현하다가 또 하루, 프론트엔드 만들다가 또 하루. 결국 데이터베이스 연결도 못 해보고 포기한 경험, 한 번쯤 있으실 겁니다.
오늘은 Vibe Coding이라는 최신 개발 방식으로, 진짜로 동작하는 웹 애플리케이션을 하루 만에 만들어서 VPS에 배포까지 하는 전 과정을 단계별로 정리합니다. 사용하는 도구는 Cursor와 Claude Code입니다.
Vibe Coding이란?
Vibe Coding은 2025년 Andrej Karpathy가 만든 용어입니다. 한마디로, “코드를 직접 타이핑하는 게 아니라, AI에게 자연어로 뭘 만들지 말하고, AI가 코드를 작성하게 하는 방식”입니다. 비유하자면, 예전엔 요리사가 직접 칼을 잡고 재료를 썰었다면, Vibe Coding은 레시피만 말하면 로봇이 요리해주는 시대입니다.
핵심은 “어떤 코드를 짤지 설계하는 능력”이 더 중요해졌다는 점입니다. AI가 타이핑을 대신해주는 거지, 설계까지 대신해주는 게 아닙니다. 프롬프트를 어떻게 쓰느냐에 따라 결과물 품질이 10배 이상 차이가 납니다. AI 프롬프트 작성 팁을 참고하면 더 정확한 결과를 얻을 수 있습니다.
예전 방식으로 “코드를 잘 짜는 사람”이 프로젝트를 성공시켰다면, 이제는 “어떤 코드를 짤지 결정하는 사람”이 프로젝트를 성공시킵니다. 이 변화가 실무에서는 엄청납니다.
Step 1: 프로젝트 요구사항 작성
가장 중요한 단계입니다. AI에게 뭘 만들지 명확하게 설명해야 합니다. 오늘 만들 것은 북마크 관리 앱입니다. 기술 스택은 Python FastAPI + SQLite + Jinja2 템플릿, 배포는 VPS + Nginx + Gunicorn입니다.
요구사항을 작성할 때 핵심 팁: 너무 포괄적으로 쓰지 말고 “요청 단위”를 잘게 나누세요. “URL을 입력하면 북마크로 저장”이라고만 쓰면, AI가 마음대로 URL을 해석합니다. “URL을 입력하면 북마크로 저장. http와 https만 허용하고, 중복 URL은 저장하지 않음”처럼 구체적인 조건까지 적어주면 AI가 훨씬 정확하게 만듭니다.
“FastAPI”라고만 쓰지 말고 “FastAPI 0.104 이상”처럼 버전까지 적어주면, AI가 최신 API를 사용해서 만들어 줍니다. 이런 디테일이 결과의 품질을 크게 바꿉니다.
Step 2: AI로 백엔드 코드 작성
Cursor를 열고 Ctrl+I로 Composer를 열고, 요구사항을 붙여넣습니다. AI가 SQLAlchemy 모델, FastAPI 엔드포인트, Pydantic 스키마를 한 번에 생성합니다.
주의할 점은 한 줄 한 줄 검토하면서 이해하는 것입니다. AI가 짠 코드를 읽으면서 “이 부분은 왜 이렇게 했지?” 하고 이해해야 합니다. 예를 들어, AI가 tags를 쉼표로 구분된 문자열로 저장했다면, 나중에 태그별 필터링이 제대로 될지 확인해야 합니다. 쉼표로 구분하면 검색할 때 LIKE '%python%' 쿼리를 써야 하는데, “python”으로 검색하면 “python3″도 걸려버리는 문제가 생길 수 있습니다.
Cursor와 Claude Code를 둘 다 써봤는데, Cursor는 IDE 안에서 바로 파일을 수정하니까 시각적으로 변경사항이 바로 보여서 빠르게 피드백 루프를 만들 수 있습니다. Claude Code는 터미널에서 실행하니까 서버 설정 같은 작업에 더 편합니다.
Step 3: 프론트엔드 구성 및 디버깅
백엔드가 완성되면 프론트엔드를 만듭니다. Jinja2 템플릿으로 간단하게 합니다. 이때 Vibe Coding의 진짜 가치가 나옵니다. 프론트엔드를 실행했더니 북마크 추가가 안 되고 404 에러가 나면? 예전이면 개발자 도구 열고, 네트워크 탭 확인하고, 라우팅 설정 다시 보고 30분에서 1시간이 걸렸을 겁니다.
지금은 AI에게 에러 메시지를 복사해서 붙여넣습니다. 3초 만에 원인과 해결책을 알려줍니다. 디버깅 시간이 1/10로 줄어듭니다.
에러 로그를 줄 때 “에러 났어”라고만 말하지 말고, 에러 메시지 전문과 어떤 상황에서 발생했는지를 같이 주셔야 합니다. “북마크 추가 버튼 누르면 404 에러 나. Traceback은 이거야” 하고 전체를 주면, AI가 원인을 정확히 찾아줍니다. 이 루프가 익숙해지면 코딩 속도가 비약적으로 올라갑니다.
Step 4: VPS에 배포하기
로컬에서 잘 돌아가면 VPS에 배포합니다. git init → git push → VPS에서 git clone → 가상환경 생성 → pip install → Gunicorn 실행 → Nginx 설정입니다. Git Push to Deploy 가이드를 참고하면 배포 자동화까지 설정할 수 있습니다.
배포하다 보면 자주 생기는 문제가 있습니다. Nginx 설정에서 location /static 경로를 잘못 적으면 CSS가 안 불러와져서 페이지가 깨져 보입니다. Gunicorn 워커 수를 코어가 1개인 소형 VPS에서 4개로 설정하면 과할당이니까 2개로 줄이세요. 이런 세부 튜닝도 AI에게 물어보면 바로 알려줍니다. VPS 셸 스크립팅 자동화 가이드와 함께 보면 서버 관리까지 자동화할 수 있습니다.
전체 과정이 대략 3~4시간이 걸렸습니다. 예전이면 최소 일주일은 걸릴 분량입니다.
핵심 정리
- 요구사항을 명확하게 — 구체적일수록 결과가 좋습니다
- 코드를 검토하기 — AI가 만든 코드를 무조건 믿지 마세요
- 에러도 AI에게 — 에러 메시지를 그대로 주면 해결책을 찾아줍니다
자주 하는 질문 (FAQ)
Q: 코딩 지식이 없어도 Vibe Coding을 할 수 있나요?
기본적인 프로그래밍 개념(변수, 함수, 조건문)은 알아야 합니다. AI가 코드를 짜주지만, 그 코드가 맞는지 검토하고 에러를 해결하려면 최소한의 이해가 필요합니다. 다만, 예전처럼 문법을 외우고 타이핑하는 수고는 크게 줄어듭니다. 처음에는 AI가 만든 코드를 그대로 실행해보고, 하나씩 이해해 나가는 방식으로 학습하면 됩니다.
Q: Cursor와 Claude Code 중 어떤 걸 써야 하나요?
둘 다 훌륭합니다. Cursor는 IDE 안에서 코드를 직접 수정하므로 프론트엔드 작업이나 파일 구조 변경에 유리하고, Claude Code는 터미널 기반이라 서버 설정이나 배포 자동화에 편합니다. 무료 크레딧으로 시작해서 본인에게 맞는 걸 선택하세요. 저는 프로젝트 초기 설계는 Cursor, 배포는 Claude Code로 나눠 씁니다.
Vibe Coding은 코딩을 안 하는 게 아니라, 설계와 검토에 집중하는 코딩입니다. 떠오르는 아이디어가 있으면 미루지 마세요. 예전엔 기술이 안 따라줘서 포기했을 아이디어도, 이제는 하루 만에 만들어서 세상에 내놓을 수 있습니다.
