AI/바이브코딩2026-05-03

바이브코딩으로 2시간 만에 웹사이트 배포한 후기

코딩 경험 0, Cursor + Claude로 포트폴리오 사이트를 2시간 만에 만들고 배포한 실전 기록

바이브코딩CursorClaudeNext.js1인기업

바이브코딩이란?

코드를 못 쓴다. 그런데 사이트를 만들고 싶다. 이 두 조건이 동시에 성립하는 방법이 있다.

AI한테 원하는 결과물을 말로 설명하고, AI가 코드를 쓰고, 나는 방향과 판단만 하는 것. 이게 바이브코딩이다. 정확한 문법보다 원하는 것을 설명하는 언어가 더 중요하다.

주의할 점은 하나다. 바이브코딩은 코딩을 안 해도 된다는 뜻이 아니라, 코딩보다 사고가 먼저라는 뜻이다.

Cursor: AI가 내장된 코드 에디터. "이 섹션 다시 짜줘"를 채팅으로 할 수 있다. VS Code 기반이라 처음 봐도 낯설지 않다.

Claude (Sonnet 4): Cursor 안에서 연결한 AI 엔진. 코드 생성, 디버깅, 컴포넌트 설계까지 전부 시켰다. 스택도 Claude가 추천했다.

Next.js 16 + TypeScript + Tailwind CSS: "포트폴리오 사이트에 뭐가 적합해?"라고 물었더니 이 조합이 나왔다. 왜 이 스택인지 물어봤더니 SEO, 정적 생성, 배포 편의성을 이유로 들었고 납득했다.

Vercel: 배포 플랫폼. GitHub main 브랜치에 푸시하면 자동으로 빌드하고 라이브된다. 별도 서버 관리 없음. 무료 플랜으로 충분했다.

0~20분: 기획 + 환경 세팅

뭘 만들고 싶은지 Claude한테 먼저 털어놨다. "카페 바리스타인데 AI 자동화 공부 중이고, 포트폴리오 사이트를 만들고 싶다. Soft Brutalism 스타일에 off-white, 잉크 색, 오렌지 포인트로."

Claude가 페이지 구조를 제안했다: 랜딩 → 프로젝트 → 소개 → 연락처. 동의하고, Cursor 설치 + Node.js 설치 + npx create-next-app 실행. 여기까지 20분.

20~50분: 레이아웃 + 디자인 시스템

Tailwind 클래스 기반으로 레이아웃을 잡아가는 구간. 내가 한 건 Cursor 채팅창에 요구사항 입력한 것뿐이다.

"Pretendard로 폰트 바꿔줘" → 즉시 반영. "히어로 섹션 여백이 너무 빡빡해" → 수정됨. "버튼에 호버 효과 넣어줘" → 코드가 나왔고 적용됐다.

50~90분: 컴포넌트 완성

헤더, 히어로, 프로젝트 카드, 푸터. 각 컴포넌트를 하나씩 잡아갔다. 막힐 때마다 에러 메시지나 이상한 부분 스크린샷을 붙여넣고 "뭐가 문제야?"라고 물었다. 대부분 5~10초 안에 원인과 해결책이 나왔다.

90~120분: 배포

Vercel에 GitHub 연동. 처음에 환경 변수 설정 순서를 몰라서 막혔는데 Claude한테 물어보고 해결했다. 이후 git push 한 번에 라이브 전환.

요한 스튜디오 메인 화면

Phase 1 (4/25): 랜딩 + 포트폴리오 섹션 — 2시간 완성. Phase 2 (4/28): 블로그 라우트 + /blog/[slug] 동적 페이지 + SEO 메타 태그 — 하루 완성.

현재 live 상태다. 이 글도 해당 블로그에서 렌더링되고 있다.

좋았던 것 3가지

속도: 2시간이라는 숫자는 과장이 아니다. Phase 1 기준, 실제로 2시간이었다. 비전공자 기준으로도 이 속도가 나온다.
러닝커브 없음: Next.js를 한 줄도 몰라도 됐다. Tailwind 문법도 외울 필요 없다. 원하는 결과물을 말로 설명할 수 있으면 충분하다.
디버깅 공포가 없어진다: 에러 나면 스택 트레이스 통째로 붙여넣으면 된다. 에러가 학습 비용이 아니라 그냥 해결할 현상이 된다.

아쉬운 것 2가지

내 코드가 아니다: Claude가 생성한 코드를 완전히 이해하지 못한 채 쓰고 있다. 작은 규모에서는 문제없지만, 구조적 이슈가 생기면 대응 속도가 확 느려진다.
컨텍스트 관리가 관건: 세션이 길어지면 AI가 앞의 결정을 잊는다. "아까 정한 컬러 팔레트가 뭐였지?"를 반복하게 된다. 세션 시작 전에 요약 문서를 넣어두는 게 필요하다.

비전공자 바리스타가 AI 도구로 어디까지 갈 수 있는지, 계속 기록한다.