바이브코딩으로 웹사이트 만들기 — 코드 몰라도 되는 첫 프로젝트

웹사이트를 만들고 싶은데, 코드가 벽처럼 느껴진다면

포트폴리오 사이트, 제품 소개 페이지, 간단한 예약 폼. 머릿속에는 그림이 있는데 HTML·CSS·JavaScript를 모른다는 이유로 시작조차 못 하는 상황이라면, 이 글이 정확히 그 지점을 위한 것입니다.

2025년부터 개발자 커뮤니티에서 빠르게 확산된 방식이 있습니다. AI에게 "이런 페이지 만들어줘"라고 말하면 AI가 코드를 작성하고, 사람은 결과물을 보며 방향을 조율하는 방식입니다. 이 방식을 바이브코딩(Vibe Coding)이라고 부릅니다.

코딩을 배우지 않고도 웹사이트를 만들 수 있다는 뜻이 아닙니다. 코드를 직접 치는 대신 AI와 대화로 코드를 만들어낸다는 뜻입니다. 이 차이가 핵심입니다.

바이브코딩이란 무엇인가

바이브코딩(Vibe Coding)은 AI 연구자 안드레이 카르파티(Andrej Karpathy)가 2025년 초에 소개한 개념입니다. 정의는 단순합니다. 코드를 직접 작성하는 대신, 원하는 것을 자연어로 설명하고 AI가 생성한 코드를 그대로 사용하는 개발 방식입니다.

핵심은 "이해하고 쓴다"가 아니라 "설명하고 받는다"는 관계 전환입니다. 기존에는 코드를 이해해야만 무언가를 만들 수 있었습니다. 바이브코딩에서는 무엇을 원하는지 설명할 수 있으면 충분합니다.

다만 오해하지 말아야 할 점이 있습니다. AI가 생성한 코드가 항상 완벽하지는 않습니다. 오류가 생기면 그 오류 메시지를 AI에게 다시 붙여 넣어 수정을 요청하는 과정이 반복됩니다. 코드를 이해하지 않아도 되지만, 원하는 결과와 현재 결과의 차이를 명확하게 설명하는 능력은 필요합니다.

바이브코딩은 어떻게 작동하는가

전체 흐름: 대화 → 코드 → 실행 → 수정

바이브코딩의 전형적인 흐름은 네 단계로 구성됩니다.

• 목표 설명: AI에게 원하는 페이지나 기능을 자연어로 설명합니다. "네이비 배경에 흰색 글씨로 이름과 소개를 보여주는 한 페이지짜리 포트폴리오"처럼 구체적일수록 좋습니다.
• 코드 수령: AI가 HTML·CSS·JavaScript 코드를 생성합니다. 이 코드를 복사합니다.
• 실행 확인: 코드를 실행 환경에 붙여 넣고 브라우저에서 결과를 확인합니다.
• 피드백·수정: 원하는 것과 다르면 "버튼 색깔을 파란색으로 바꿔줘", "글씨가 너무 작아"처럼 다시 설명합니다. AI가 수정된 코드를 내놓습니다. 이 과정을 반복합니다.

필요한 도구 두 가지

바이브코딩에는 크게 두 가지 도구가 필요합니다.

• 코드 생성 AI: Claude.ai, ChatGPT 같은 AI 어시스턴트. 또는 v0.dev(Vercel이 운영하는 UI 특화 AI 도구)처럼 웹 UI 생성에 특화된 도구.
• 코드 실행 환경: Replit.com처럼 브라우저에서 바로 코드를 실행하고 배포까지 할 수 있는 클라우드 IDE(통합 개발 환경). 로컬에 별도 설치 없이 사용 가능합니다.

이 두 가지 조합이 바이브코딩의 기본 스택입니다.

AI에게 잘 전달하는 프롬프트 3원칙

바이브코딩에서 결과 품질은 AI에게 얼마나 명확하게 설명하느냐에 달려 있습니다. 다음 세 가지 원칙을 지키면 같은 AI를 사용하더라도 훨씬 정밀한 결과를 얻을 수 있습니다.

• 구체적인 숫자·색상 코드 사용: "예쁜 파란색"보다 "배경색 #2563EB"처럼 명시합니다. 폰트 크기는 "크게"가 아니라 "20px"로 지정합니다.
• 하나의 요청에 하나의 변경: 여러 가지를 한 번에 요청하면 AI가 일부를 누락하거나 코드가 충돌합니다. 변경 사항은 하나씩 순서대로 요청하는 편이 훨씬 안정적입니다.
• 오류 메시지 그대로 붙여넣기: 결과가 이상하면 "안 돼요"가 아니라 브라우저 개발자 도구에 뜨는 오류 문구를 그대로 복사해서 전달합니다. AI는 오류 메시지를 보고 정확한 원인을 파악합니다.

오늘 따라할 수 있는 첫 프로젝트: 포트폴리오 한 페이지

1단계: 도구 준비

먼저 아래 두 곳에 무료 계정을 만듭니다.

• Claude.ai — 무료 플랜으로 사용 시작 가능 (2026년 4월 기준)
• Replit.com — 무료 플랜으로 프로젝트 생성 및 배포 가능 (2026년 4월 기준)

2단계: AI에게 첫 코드 요청

Claude.ai 대화창에 아래처럼 입력합니다. 이름과 직함은 실제 정보로 바꿔서 사용합니다.

HTML, CSS, JavaScript를 하나의 파일(index.html)로 작성해줘. 조건은 다음과 같아.
- 배경색: 흰색
- 상단에 이름(김구현)과 직함(콘텐츠 기획자) 표시
- 간단한 자기소개 문단 한 개
- 연락처 이메일 버튼
- 모바일에서도 잘 보이도록 반응형으로
완성된 HTML 코드 전체를 출력해줘.

AI가 코드를 출력하면 전체를 복사합니다.

3단계: Replit에서 실행

• Replit.com에 로그인 후 + Create Repl 클릭
• 템플릿에서 HTML, CSS, JS 선택
• 프로젝트 이름 입력 후 생성
• 왼쪽 파일 목록에서 index.html 클릭
• 기존 내용 전체 삭제 후 AI가 생성한 코드 붙여넣기
• 상단 Run 버튼 클릭 → 오른쪽 미리보기 창에서 결과 확인

4단계: 수정 반복

결과가 원하는 것과 다르다면, Claude.ai에 돌아가서 구체적으로 설명합니다.

이메일 버튼이 너무 작아. 버튼 패딩을 늘리고 배경색을 파란색(#2563EB)으로 바꿔줘.

수정된 코드를 받아 Replit에 다시 붙여 넣으면 됩니다. 이 과정을 만족할 때까지 반복합니다.

5단계: 배포

Replit 무료 플랜에서는 Deploy 탭을 통해 내이름.replit.app 형태의 URL로 바로 배포할 수 있습니다. 링크를 공유하면 누구든 접근 가능한 실제 웹사이트가 됩니다.

언제 쓰고, 언제 쓰지 말아야 하는가

바이브코딩이 효과적인 상황과 그렇지 않은 상황은 명확하게 구분됩니다.

적합한 경우

• 포트폴리오, 행사 안내, 제품 소개처럼 기능이 단순한 정적 페이지
• 프로토타입이나 아이디어 검증용 빠른 시제품
• 반복 수정이 가능한 사이드 프로젝트

주의가 필요한 경우

• 로그인·결제·개인정보 처리 등 보안이 중요한 기능: AI 생성 코드에는 보안 취약점이 포함될 수 있습니다. 검증 없이 배포하면 위험합니다.
• 대규모 서비스: 수천 줄 이상의 코드베이스는 AI가 일관성 있게 유지하기 어렵습니다.
• 유지보수가 장기간 필요한 경우: 코드를 이해하지 못한 채로 계속 쌓이면 나중에 수정이 점점 어려워집니다.

바이브코딩은 "코드를 영원히 몰라도 된다"는 방식이 아닙니다. 시작점을 낮춰주는 방식입니다. 프로젝트가 복잡해질수록 기본 원리를 이해하는 쪽이 훨씬 유리해집니다.

여기까지 이해했다면 다음 단계

이 글에서는 Claude.ai + Replit 조합으로 정적 페이지를 만드는 과정을 다뤘습니다. 다음 단계로는 아래를 권장합니다.

• v0.dev 사용해보기: Vercel이 운영하는 UI 특화 AI 도구로, 컴포넌트 단위 생성에 강점이 있습니다. 공식 사이트: v0.dev
• Bolt.new 사용해보기: StackBlitz가 운영하는 AI 코딩 환경으로, 대화창 하나에서 코드 생성부터 실행까지 처리합니다. 공식 사이트: bolt.new
• HTML 기초 훑어보기: MDN Web Docs(공식 한국어 문서)에서 구조를 익혀두면 AI에게 더 정확한 지시를 내릴 수 있습니다.

바이브코딩을 활용한 실제 사이트 제작 흐름은 이 블로그의 관련 시리즈에서 이어집니다.