🎨 [웹사이트 제작 2편] AI 바이브코딩으로 웹사이트 뼈대 구축하기

🤔 코딩 지식이 없어도 웹사이트를 직접 만들 수 있을까?

📌 한 줄 요약: HTML, CSS, JavaScript를 처음부터 혼자 작성하지 않아도 AI 바이브코딩을 활용하면 원하는 디자인과 기능을 설명하면서 웹사이트의 기본 코드를 직접 구축할 수 있다.

1편에서는 내가 왜 워드프레스 대신 Notion + GitHub Actions + Cloudflare Pages 구조를 선택했는지 살펴봤다.

그렇다면 이제 한 가지 문제가 남는다.

“그래서 실제 웹사이트는 어떻게 만들지?”

Notion을 콘텐츠 관리 도구로 사용하고 Cloudflare Pages에 웹사이트를 배포하려면, 그 사이에서 실제로 동작할 웹사이트 코드가 필요하다.

처음에는 HTML, CSS, JavaScript 같은 프론트엔드 기술을 모두 직접 공부해서 만들어야 하나 싶었다.

하지만 이번 프로젝트에서는 조금 다른 방법을 선택했다.

바로 AI 바이브코딩(Vibe Coding)이다.

원하는 웹사이트의 모습과 기능을 AI에게 설명하고, AI가 작성한 코드를 실제로 실행해본 뒤 문제가 생기면 다시 수정하는 방식으로 웹사이트를 만들어갔다.

즉, 코드를 전혀 사용하지 않은 것이 아니라 AI를 활용해 코드를 작성하고 수정한 것이다.

이번 편에서는 내가 실제로 웹사이트의 기본 뼈대를 어떻게 만들었는지 그 과정을 정리해보려고 한다.

💡 1단계: 먼저 웹사이트의 구조와 디자인을 정한다

📌 한 줄 요약: AI에게 바로 코드를 만들어달라고 하기보다 웹사이트의 목적, 화면 구성, 필요한 기능과 디자인을 먼저 구체적으로 정리하는 것이 중요하다.

AI 바이브코딩을 시작한다고 해서 처음부터 “블로그 만들어줘.” 라고만 요청하면 원하는 결과를 얻기 어렵다.

AI에게 전달해야 할 정보가 구체적일수록 결과물도 내가 원하는 방향에 가까워진다.

예를 들어 내가 만들고 싶은 웹사이트가 어떤 사이트인지부터 설명해야 한다.

• 콘텐츠 중심의 개인 블로그
• 모바일과 PC 모두 지원
• 깔끔하고 현대적인 디자인
• 게시글 목록과 상세 페이지 필요
• 카테고리 및 검색 기능
• 반응형 레이아웃
• SEO를 고려한 HTML 구조
• 이후 Notion 데이터를 연결할 수 있는 구조

이처럼 웹사이트의 목적과 필요한 기능을 먼저 정리한 뒤 AI에게 전달했다.

그리고 여기서 중요한 점이 하나 있다.

AI에게 한 번에 모든 것을 만들어달라고 하기보다는 웹사이트를 작은 단위로 나눠서 만들어가는 것이 훨씬 편했다.

예를 들어, “먼저 전체 레이아웃을 만들어줘.” 라고 요청한 뒤,

“모바일에서 메뉴가 잘 보이도록 수정해줘.”
“게시글 카드 디자인을 추가해줘.”
“헤더를 이런 형태로 바꿔줘.”

처럼 하나씩 수정해 나가는 방식이다.

이렇게 하면 문제가 발생했을 때 어느 부분에서 문제가 생겼는지도 파악하기 쉽다.

🤖 2단계: AI에게 코드를 만들게 한다

📌 한 줄 요약: 원하는 화면과 기능을 자연어로 설명하고 AI가 작성한 코드를 실행해보면서 웹사이트를 하나씩 완성해 나간다.

내가 사용한 방식은 흔히 이야기하는 AI 바이브코딩에 가깝다.

ChatGPT나 Gemini 같은 AI에게 원하는 결과를 설명하면 AI가 그에 맞는 코드를 작성해준다.

예를 들어,

“콘텐츠 중심의 블로그 홈페이지를 만들어줘.”
“상단에는 로고와 메뉴를 배치하고, 아래에는 최신 게시글 카드가 보이도록 구성해줘.”
“모바일에서는 카드가 한 열로 바뀌도록 반응형으로 만들어줘.”

처럼 사람에게 작업을 설명하듯 요구사항을 전달한다.

그러면 AI가 HTML, CSS, JavaScript 등 필요한 코드를 작성한다.

이후에는 그 코드를 실제 개발 환경에서 실행해보고 결과를 확인한다.

화면이 원하는 모습과 다르다면 다시 AI에게 수정 요청을 한다.

예를 들어,

“카드 간격이 너무 좁아. 여백을 조금 더 넓혀줘.”
“모바일에서 제목이 두 줄을 넘어가니까 레이아웃을 수정해줘.”
“헤더가 화면을 너무 많이 차지하니 높이를 줄여줘.”

이런 식이다.

결국 AI가 한 번에 완성된 웹사이트를 만들어주는 것이 아니라, AI와 대화하면서 결과물을 계속 다듬어가는 과정이라고 생각하면 이해하기 쉽다.

🎨 3단계: 원하는 디자인으로 계속 수정한다

📌 한 줄 요약: 처음 만들어진 결과물을 그대로 사용하는 것이 아니라 실제 화면을 확인하면서 디자인과 사용자 경험을 원하는 방향으로 계속 수정한다.

AI가 처음 만들어준 결과물이 바로 완벽하게 마음에 들었던 것은 아니다.

오히려 실제로 실행해보면 수정할 부분이 계속 보인다.

예를 들어 폰트 크기가 마음에 들지 않거나, 카드 간격이 어색하거나, 모바일 화면에서 특정 요소가 깨지는 경우도 있다.

이때는 직접 코드를 처음부터 수정하기보다 문제가 발생한 화면이나 코드를 AI에게 보여주고 수정하도록 요청했다.

특히 화면을 캡처해서 보여주는 방식이 상당히 유용했다.

예를 들어 이런 식이다.

• “현재 화면에서 모바일 메뉴가 로고와 겹치고 있어. 이 문제를 해결하면서 데스크톱 레이아웃은 그대로 유지해줘.”

AI에게 이렇게 구체적인 상황을 설명하면 해당 문제를 해결하기 위한 코드를 다시 작성해준다.

그리고 수정된 코드를 적용한 뒤 다시 확인한다.

실행 → 확인 → 문제 발견 → AI에게 설명 → 수정 → 다시 실행

이 과정을 반복하면서 웹사이트의 완성도를 높여갔다.

🧩 4단계: 필요한 기능을 하나씩 추가한다

📌 한 줄 요약: 기본적인 화면을 먼저 만든 뒤 게시글 목록, 상세 페이지, 검색, 반응형 UI 등 필요한 기능을 단계적으로 추가한다.

디자인이 어느 정도 완성됐다면 이제 웹사이트에 필요한 기능을 추가한다.

처음부터 모든 기능을 한꺼번에 구현하기보다는 필요한 기능을 하나씩 추가하는 것이 좋다.

내가 구축한 웹사이트 역시 기본 화면부터 시작해서 필요한 기능을 순서대로 만들어갔다.

🏠 홈페이지

방문자가 처음 들어왔을 때 게시글과 콘텐츠를 확인할 수 있는 기본 화면을 구성한다.

📝 게시글 목록

작성한 콘텐츠가 카드나 리스트 형태로 표시되도록 구성한다.

📄 게시글 상세 페이지

각 게시글을 클릭하면 본문을 읽을 수 있도록 상세 페이지를 만든다.

📱 반응형 디자인

PC뿐만 아니라 모바일에서도 화면이 자연스럽게 보이도록 레이아웃을 조정한다.

🔍 검색 및 기타 기능

사이트의 목적에 맞춰 검색, 카테고리, 네비게이션 등의 기능을 추가한다.

이렇게 기본적인 웹사이트가 완성되면 이후 Notion의 콘텐츠를 실제 게시글 데이터로 연결할 준비가 된다.

💻 5단계: 완성된 코드를 GitHub에 저장한다

📌 한 줄 요약: AI 바이브코딩으로 완성한 웹사이트 코드는 GitHub 저장소에 올려두고 이후 자동 빌드와 배포 과정에서 활용한다.

웹사이트 코드를 만들었다면 이제 GitHub 저장소(Repository)에 코드를 저장한다.

GitHub는 단순히 코드를 보관하는 공간만은 아니다.

앞으로 만들 자동화 구조에서는 GitHub에 저장된 코드를 기반으로 GitHub Actions가 웹사이트를 빌드하고 배포하는 작업을 수행하게 된다.

전체 구조를 다시 보면 이해하기 쉽다.

2편에서는 이 중에서 GitHub에 저장할 웹사이트의 기본 코드를 만드는 과정까지 다루는 것이다.

실제 Notion 데이터를 연결하고 자동으로 웹사이트를 생성하는 과정은 다음 편부터 본격적으로 시작한다.

🚨 AI 바이브코딩에서 가장 중요한 것은 '수정 과정'이다

📌 한 줄 요약: AI에게 처음부터 완벽한 코드를 요구하기보다 직접 실행하고 오류를 확인하면서 반복적으로 수정하는 과정이 핵심이다.

AI 바이브코딩을 처음 접하면 이런 기대를 하기 쉽다.

“AI에게 웹사이트를 만들어달라고 하면 완성된 사이트가 바로 나오겠지?”

하지만 실제로는 그렇지 않았다.

AI가 작성한 코드에도 오류가 발생할 수 있고, 내가 원하는 디자인과 전혀 다른 결과가 나올 수도 있다.

그래서 중요한 것은 AI에게 얼마나 정확하게 요구사항을 전달하고 결과물을 얼마나 잘 확인하느냐였다.

특히 다음과 같은 정보를 함께 전달하면 수정하기가 훨씬 쉬워진다.

1. 어떤 부분이 문제인지
2. 현재 화면에서 어떤 현상이 발생하는지
3. 내가 원하는 결과가 무엇인지
4. 기존에 정상적으로 작동하는 부분은 무엇인지
5. 수정 과정에서 유지해야 하는 부분은 무엇인지

예를 들어 단순히 “안 돼. 고쳐줘.” 라고 하는 것보다,

“모바일 화면에서 메뉴 버튼을 누르면 메뉴가 로고 영역과 겹친다. 데스크톱 레이아웃은 변경하지 않고 모바일에서만 수정해줘.”

라고 설명하는 것이 훨씬 정확한 결과를 얻기 쉽다.

결국 AI 바이브코딩은 AI에게 개발을 완전히 맡기는 방식이라기보다, AI를 코딩 파트너처럼 활용하는 방식에 가깝다.

🙋‍♂️ AI 바이브코딩으로 웹사이트 만들기, 궁금했던 점

(👉 질문을 클릭하면 자세한 답변이 펼쳐집니다)

📚 웹사이트 제작 9부작 시리즈 전체 목차

Pixoas에서는 웹사이트 제작을 쉽게 따라 할 수 있도록 9편의 튜토리얼로 쪼개어 연재한다.
차근차근 따라오면 어느새 나만의 개인 웹사이트가 완성되어 있을 것이다.

• 💡 [웹사이트 제작 1편] 유지비 0원? 워드프레스 대신 노션 택한 이유
• 🎨 [웹사이트 제작 2편] AI로 코딩 없이 웹사이트 뼈대 구축하기 (현재 글)
• 📝 [웹사이트 제작 3편] 노션을 웹사이트 CMS로 쓰는 법
• ☁️ [웹사이트 제작 4편] Cloudflare Pages로 웹사이트 배포하기
• ⚙️ [웹사이트 제작 5편] 노션 글 자동 반영! 깃허브 액션 연동법
• 🚨 [웹사이트 제작 6편] 노션 이미지 엑스박스 오류 해결
• 📈 [웹사이트 제작 7편] 검색엔진 등록 & 도메인 연결
• 💰 [웹사이트 제작 8편] 애드센스 승인, 가치 없는 콘텐츠 피하기
• 🤖 [웹사이트 제작 9편] AI로 블로그 방문자 늘리기

이 시리즈는 특정 서비스를 무조건 추천하기 위한 글이 아니다. 내가 직접 여러 방법을 비교하고 구축하면서 선택한 구조를 공유하는 기록에 가깝다. 2편에서는 AI 바이브코딩으로 웹사이트의 기본 뼈대를 만들었고, 이어지는 3편에서 Notion을 연결하여 실제 콘텐츠가 웹사이트에 표시되도록 구성할 계획이다.

✅ 마무리 정리

1. 웹사이트를 만들기 위해서는 방문자에게 보여줄 프론트엔드 코드가 필요하다.
2. 코딩 경험이 많지 않아도 AI 바이브코딩을 활용해 원하는 디자인과 기능을 설명하면서 웹사이트 코드를 직접 만들어갈 수 있다.
3. AI가 한 번에 완성된 결과물을 만들어주는 것이 아니라 실행 → 확인 → 수정 → 재실행을 반복하면서 완성도를 높이는 것이 핵심이다.
4. 완성된 웹사이트 코드는 GitHub 저장소에 저장하고, 이후 GitHub Actions를 통한 빌드 및 자동화에 활용한다.
5. 다음 3편에서는 이렇게 만든 웹사이트에 Notion을 CMS로 연결하고 실제 콘텐츠 데이터를 가져오는 과정을 다룬다.