바이브코딩 3편｜AI로 홈페이지 직접 만들어보기
바이브코딩 1편에서는 Vibe Coding이 무엇인지 알아봤고, 2편에서는 AI에게 홈페이지 제작을 어떻게 요청해야 하는지 살펴봤습니다.
이번 3편에서는 드디어 실제로 홈페이지를 만들어보겠습니다.
코딩을 잘 모르는 사람도 이해할 수 있도록 복잡한 기능은 잠시 미뤄두고, AI에게 홈페이지를 요청하고 결과물을 만든 뒤 수정하는 전체 과정을 하나씩 살펴보겠습니다.
1. 이번에는 어떤 홈페이지를 만들까?
바이브코딩을 배우는 가장 좋은 방법 중 하나는 작은 홈페이지를 직접 만들어보는 것입니다.
이번 예제에서는 이해하기 쉽도록 가상의 중소기업 홈페이지를 만들어보겠습니다.
회사명 : ABC TECH
업종 : 산업용 기계 제조업
주요 고객 : 국내외 기업 고객
홈페이지 목적 : 회사 및 제품 소개, 고객 문의 확보
디자인 : 깔끔하고 신뢰감 있는 기업형 디자인
주요 색상 : 흰색 + 네이비 + 블루
형태 : PC·태블릿·스마트폰 반응형 홈페이지
처음부터 쇼핑몰이나 회원제 사이트처럼 복잡한 서비스를 만드는 것보다 이 정도 규모의 홈페이지부터 시작하는 것이 좋습니다.
2. 바로 만들기 전에 홈페이지 구조부터 정한다
AI에게 곧바로 “홈페이지 만들어줘”라고 요청할 수도 있습니다.
하지만 2편에서 설명했듯이 먼저 홈페이지의 구조를 정하면 훨씬 좋은 결과를 얻을 수 있습니다.
이번 예제에서는 다음과 같이 구성해보겠습니다.
HOME
회사소개
제품소개
기술력
납품실적
문의하기
여기서 중요한 점은 이 메뉴가 정답은 아니라는 것입니다.
어떤 메뉴가 필요한지 모르겠다면 AI에게 먼저 다음처럼 물어볼 수도 있습니다.
산업용 기계를 제조해서 국내외 기업에 판매하는 중소기업 홈페이지를 만들려고 해.
주요 목적은 회사의 기술력과 제품을 소개하고 고객의 견적 문의를 받는 것이야.
이 회사에 적합한 홈페이지 메뉴와 각 페이지에 들어가야 할 내용을 먼저 제안해줘.
AI가 제안한 내용을 보고 필요 없는 메뉴는 빼고 필요한 메뉴를 추가하면 됩니다.
3. 첫 화면에 무엇을 보여줄지 결정한다
홈페이지를 방문했을 때 가장 먼저 보이는 화면은 매우 중요합니다.
방문자는 첫 화면을 보고 몇 초 안에 “이 회사가 무엇을 하는 회사인지” 이해할 수 있어야 합니다.
이번 예제의 첫 화면은 다음과 같이 구성해보겠습니다.
상단 : 회사 로고 + 메뉴
메인 이미지 : 산업용 기계 또는 생산시설
메인 제목 :
Technology for a Better Industry
설명 :
산업 현장의 미래를 만드는 ABC TECH의 기술을 만나보세요.
버튼 :
제품 알아보기 / 견적 문의하기
처음에는 완벽한 문구가 아니어도 괜찮습니다. AI에게 나중에 문구를 개선해달라고 요청할 수 있기 때문입니다.
4. 이제 AI에게 홈페이지 제작을 요청해보자
기본적인 구조가 정해졌다면 이제 AI에게 홈페이지 제작을 요청합니다.
아래 프롬프트는 ChatGPT를 비롯한 여러 AI 코딩 환경에서 기본 틀로 활용할 수 있습니다. 사용하는 도구에 따라 세부적인 요청 방식은 달라질 수 있습니다.
산업용 기계를 제조하는 가상의 회사 ABC TECH의 홈페이지를 만들어줘.
주요 고객은 국내외 기업 구매 담당자이고, 홈페이지의 목적은 회사의 기술력과 제품을 소개하고 견적 문의를 받는 것이야.
상단 메뉴는 다음과 같이 구성해줘.
HOME
회사소개
제품소개
기술력
납품실적
문의하기
첫 화면에는 산업용 기계나 공장을 연상할 수 있는 큰 이미지 영역을 넣어줘.
메인 문구는
“Technology for a Better Industry”
로 만들어줘.
전체 디자인은 흰색을 기본으로 하고 네이비와 블루를 포인트 컬러로 사용해줘.
기업 고객에게 전문적이고 신뢰감이 느껴지는 디자인으로 만들어줘.
회사소개, 주요제품, 기술력, 납품실적, 문의하기 영역을 한 페이지에서 자연스럽게 볼 수 있도록 구성해줘.
PC, 태블릿, 스마트폰에서 모두 잘 보이는 반응형 홈페이지로 만들어줘.
각 영역에는 나중에 실제 사진과 문구를 쉽게 교체할 수 있도록 구조를 단순하고 명확하게 만들어줘.
5. AI가 홈페이지를 만들면 무엇부터 확인해야 할까?
AI가 첫 번째 결과물을 만들었다고 바로 완성된 것은 아닙니다.
이제부터가 바이브코딩의 중요한 부분입니다.
결과물을 직접 확인하고 마음에 들지 않는 부분을 하나씩 수정합니다.
| 확인 항목 | 확인 내용 |
|---|---|
| 첫 화면 | 무슨 회사인지 바로 알 수 있는가? |
| 메뉴 | 필요한 메뉴가 빠짐없이 들어갔는가? |
| 디자인 | 업종과 고객에게 적합한 분위기인가? |
| 내용 | 회사·제품·기술 정보가 이해하기 쉬운가? |
| 버튼 | 제품 보기나 문의하기 버튼을 쉽게 찾을 수 있는가? |
| 모바일 | 스마트폰에서도 글과 이미지가 자연스럽게 보이는가? |
6. 마음에 들지 않는 부분은 대화로 수정한다
바이브코딩의 재미있는 부분이 바로 여기입니다.
결과물이 마음에 들지 않더라도 처음부터 다시 만들 필요가 없습니다. AI에게 원하는 부분만 구체적으로 수정해달라고 하면 됩니다.
“첫 화면의 메인 제목을 조금 더 크게 만들어줘.”
“상단 메뉴 높이가 너무 높아. 약간 줄여줘.”
“제품 사진이 너무 작아. 제품 이미지가 더 잘 보이게 해줘.”
“회사소개 부분이 너무 길어. 핵심 내용만 3줄 정도로 줄여줘.”
“견적 문의하기 버튼을 눈에 잘 띄게 만들어줘.”
“전체적인 느낌이 너무 가벼워 보여. 기업 홈페이지답게 조금 더 전문적인 분위기로 수정해줘.”
7. 한꺼번에 수정하지 말고 하나씩 수정하자
수정해야 할 부분이 많더라도 한 번에 수십 가지를 요청하는 것은 좋은 방법이 아닐 수 있습니다.
특히 처음 바이브코딩을 해본다면 화면을 보면서 중요한 부분부터 하나씩 수정하는 편이 이해하기 쉽습니다.
① 전체적인 화면 구성
↓
② 메인 화면
↓
③ 메뉴
↓
④ 색상과 디자인
↓
⑤ 이미지
↓
⑥ 글과 설명
↓
⑦ 버튼과 문의 기능
↓
⑧ 모바일 화면
이렇게 하면 어느 수정 요청 때문에 화면이 바뀌었는지도 파악하기 쉽습니다.
8. 이미지와 글은 처음부터 완벽할 필요가 없다
홈페이지를 처음 만들 때 회사소개 문구나 제품 사진이 모두 준비되어 있지 않을 수도 있습니다.
그렇다고 홈페이지 제작을 멈출 필요는 없습니다.
처음에는 임시 이미지와 예시 문구를 넣어 전체 구조를 만든 뒤, 나중에 실제 회사 자료로 교체하면 됩니다.
“현재 실제 제품 사진이 준비되지 않았으니 임시 이미지 영역을 만들어줘. 나중에 사진만 쉽게 교체할 수 있도록 해줘.”
“회사소개 내용은 아직 작성 중이야. 우선 산업용 기계 제조기업에 어울리는 임시 소개문을 작성해서 넣어줘.”
이렇게 먼저 뼈대를 만든 다음 실제 자료를 하나씩 넣는 방법이 효율적입니다.
9. 반드시 스마트폰 화면도 확인한다
홈페이지가 PC에서 멋지게 보인다고 끝난 것이 아닙니다.
스마트폰에서 접속했을 때 제목이 잘리거나, 이미지가 화면 밖으로 튀어나오거나, 메뉴가 너무 작아서 누르기 어려울 수도 있습니다.
따라서 PC 화면과 함께 모바일 화면도 확인해야 합니다.
“PC 화면은 그대로 유지하고 스마트폰 화면만 개선해줘.
제목이 화면 밖으로 나가지 않게 하고, 메뉴는 햄버거 메뉴로 바꿔줘.
버튼은 손가락으로 누르기 편하도록 조금 크게 만들어줘.
제품은 모바일에서는 한 줄에 하나씩 보이게 해줘.”
10. 바이브코딩은 ‘한 번 생성’이 아니라 ‘반복 제작’이다
바이브코딩을 처음 접하면 AI에게 프롬프트를 입력하면 완성된 홈페이지가 한 번에 나타나는 모습을 기대하기 쉽습니다.
실제로는 조금 다릅니다.
↓
AI에게 요청
↓
홈페이지 생성
↓
결과 확인
↓
수정 요청
↓
다시 확인
↓
추가 수정
↓
완성
이 과정이 여러 번 반복됩니다.
그래서 바이브코딩의 핵심은 “AI에게 한 번 잘 시키는 것”보다 “결과를 보고 다음 요청을 잘하는 것”에 더 가깝습니다.
11. AI가 만든 코드는 무조건 믿어도 될까?
여기서 중요한 주의사항이 있습니다.
AI가 코드를 빠르게 만들어준다고 해서 항상 정확하거나 안전한 것은 아닙니다.
단순한 소개 홈페이지에서는 문제가 비교적 적을 수 있지만, 회원가입, 개인정보, 데이터베이스, 관리자 기능, 결제와 같은 기능이 들어가기 시작하면 보안과 오류 검토가 훨씬 중요해집니다.
회원가입 및 로그인
개인정보 저장
결제 기능
관리자 페이지
데이터베이스 연결
외부 API 연결
파일 업로드
사용자 권한 관리
따라서 AI는 매우 강력한 제작 도구이지만, 실제 서비스를 운영할 때는 테스트와 보안 검토가 필요합니다.
12. 이번 단계에서 홈페이지가 완벽할 필요는 없다
이번 3편의 목표는 완벽한 회사 홈페이지를 만드는 것이 아닙니다.
가장 중요한 목표는 다음 과정을 직접 이해하는 것입니다.
무엇을 만들지 정한다.
↓
사이트 구조를 정한다.
↓
AI에게 구체적으로 요청한다.
↓
결과물을 직접 확인한다.
↓
마음에 들지 않는 부분을 수정한다.
↓
PC와 모바일에서 다시 확인한다.
이 흐름을 이해하면 다른 종류의 홈페이지를 만들 때도 같은 방법을 적용할 수 있습니다.
13. 다음 단계는 디자인을 제대로 다듬는 것
이제 홈페이지의 기본적인 뼈대가 만들어졌습니다.
하지만 AI가 처음 만든 홈페이지는 기능적으로는 괜찮아도 색상, 글꼴, 이미지 크기, 여백, 버튼 등의 디자인이 마음에 들지 않을 수 있습니다.
다음 4편에서는 AI와 대화하면서 홈페이지의 디자인을 실제로 수정하는 방법을 알아보겠습니다.
“조금 더 고급스럽게 만들어줘”라는 막연한 요청을 넘어, 어떤 부분을 어떻게 요청해야 원하는 디자인에 가까워지는지 구체적으로 살펴보겠습니다.
바이브코딩 FAQ
간단한 회사 소개 홈페이지나 랜딩페이지라면 코딩 경험이 거의 없어도 시작할 수 있습니다. 다만 복잡한 기능을 추가하거나 실제 서비스를 운영하려면 기본적인 웹 구조와 보안에 대한 이해가 도움이 됩니다.
간단한 초안은 한 번에 만들 수 있지만 실제로 사용할 홈페이지는 결과를 확인하고 디자인, 문구, 이미지, 메뉴, 모바일 화면 등을 여러 차례 수정하는 것이 일반적입니다.
반드시 직접 정해야 하는 것은 아닙니다. 사업 내용과 홈페이지 목적을 AI에게 설명하고 적절한 사이트 구조와 메뉴를 먼저 제안해달라고 요청할 수도 있습니다.
가능합니다. 우선 임시 이미지와 예시 문구로 사이트 구조를 만든 뒤 실제 사진과 회사 자료가 준비되면 나중에 교체하는 방식으로 제작할 수 있습니다.
제작 방식에 따라 바로 배포할 수 있는 서비스도 있고 별도의 호스팅 과정이 필요한 경우도 있습니다. 이 시리즈의 후속편에서 배포와 도메인 연결 방법을 단계별로 다룰 예정입니다.
바이브코딩 완전정복 시리즈
AI를 활용해 홈페이지를 기획하고 제작한 뒤 실제 인터넷에 공개하기까지, 바이브코딩의 전 과정을 단계별로 소개합니다.
현재 글
(준비중)
(준비중)
(준비중)
(준비중)
(준비중)
(준비중)
