바이브 코딩으로 브랜드 페이지 만들어 보기

2026-03-06

앱과 게임을 수십 종 만들어온 20년 경력 개발자지만, 웹 개발은 거의 해본 적이 없습니다. HTML이 뭔지는 알지만 직접 웹페이지를 처음부터 만들어 본 경험은 사실상 없는 수준이었습니다.

친구 팀의 외주 영업을 위한 브랜드 페이지를 만들기로 했는데, 원래는 노션으로 빠르게 만들 계획이었습니다. 하지만 마침 대두되고 있는 바이브 코딩 흐름에 올라타 보자는 생각이 들어, Gemini를 활용해 직접 웹페이지를 만들어 보기로 했습니다.

8단계 개발 프로세스

만들고 싶은 페이지의 목적, 포함될 내용, 전반적인 분위기를 메모장에 정리했습니다. 텍스트로 전달했을 때 형식이 깨지는 경우가 있어 캡처 이미지로 전달했습니다.

소스 코드를 바로 짜는 것보다 먼저 페이지에 들어갈 핵심 문구들을 AI와 상의해 확정했습니다. 코드보다 텍스트를 먼저 다듬는 것이 훨씬 효율적이었습니다.

확정된 문구를 바탕으로 본격적인 웹 소스 코드 작성을 AI에게 요청했습니다. 이때 "정보성 이미지나 유튜브 링크도 직접 찾아서 넣어달라"고 했는데, 이미지는 적용 안 했고 유튜브 링크는 전부 깨진 것들만 왔습니다. 결국 링크는 직접 선별해서 수정했습니다.

생성된 코드를 HTML 파일로 더블클릭하면 바로 볼 수 있을 줄 알았지만, 그렇지 않았습니다. 제대로 된 확인을 위해 로컬 서버를 띄워야 했습니다. 맥북의 기본 환경이 개발에 우호적이어서, AI의 안내를 따라 어렵지 않게 구성했습니다.

초반 5차 정도까지는 프롬프트 입력만으로 수정이 가능했습니다. 하지만 디테일한 개선이 필요해지면서 AI가 자꾸 엉뚱한 결과물을 내거나, 이전 작업 내용을 날려버리는 일이 생겼습니다. 결국 코딩 방법을 AI에게 물어가며 직접 수정했습니다.

완성된 소스 파일을 GitHub 저장소에 올렸습니다. 알고 보니 GitHub에 올려두면 이를 바로 웹 서비스로 배포해주는 플랫폼이 많이 있었습니다.

AI가 강력 추천한 Cloudflare Pages를 통해 배포를 시도했습니다. GitHub 연동 방식으로 손쉽게 배포되었으며, 대부분의 경우 추가 비용 없이 사용할 수 있었습니다.

친구에게 PC와 모바일에서 각각 접속해 보라고 했습니다. 두 곳 다 정상적으로 잘 나온다는 확인을 받았습니다. 내 컴퓨터가 아닌 다른 기기에서도 정상 동작하면 배포 성공입니다.

웹 개발 경험이 거의 없는 사람도 AI의 도움을 받으면 하루 만에 완성도 있는 브랜드 페이지를 만들 수 있다는 것을 직접 확인했습니다.

단, AI에게만 의존하다 보면 디테일한 개선 단계에서 한계가 생깁니다. 코드를 전혀 모르더라도 기본적인 로직 흐름은 이해하고 있을 때, AI와의 협업이 훨씬 원활해집니다.

바이브 코딩은 기술의 문제가 아니라 의지와 문제 해결력의 문제입니다. 시작해 보지 않으면 절대 알 수 없습니다.