바이브코딩으로 홈페이지 만들기

1. 바이브 코딩으로 홈페이지를 만든 이유

JUN_Kestrel 2026. 6. 27. 20:10

프로젝트를 시작하게 된 계기

문득 요즘 화제가 되고 있는 바이브 코딩(Vibe Coding)을 이용해 경제 관련 홈페이지를 만들고, 실제 서비스로 배포까지 해보자는 생각이 들었다.

과연 AI만으로 얼마나 빠르게 개발할 수 있을지, 그리고 결과물의 완성도는 어느 정도일지 직접 확인해 보고 싶었다. 무엇보다 가장 궁금했던 것은 프로젝트가 커졌을 때도 AI만으로 유지보수가 가능할까? 하는 점이었다.

간단한 예제나 토이 프로젝트는 AI의 도움으로 충분히 만들 수 있다는 이야기가 많다. 하지만 실제 서비스 수준으로 기능이 많아지고 구조가 복잡해졌을 때도 같은 방식이 가능할지는 직접 경험해 본 사람이 많지 않았다.

경제 관련 홈페이지를 선택한 이유는 단순하다. 요즘 가장 관심 있는 분야가 투자와 경제이기 때문이다. 관심 있는 주제를 서비스로 만들어 보면 끝까지 개발할 동기부여도 될 것이라고 생각했다.

 

이번 프로젝트의 규칙

이번 프로젝트에는 하나의 규칙을 정했다.

나는 단 한 줄의 코드도 작성하지 않는다.

기능을 추가할 때도, 오류를 수정할 때도 직접 코드를 수정하지 않는다. 내가 하는 일은 요구사항을 설명하고, AI가 작성한 결과를 확인하는 것뿐이다.

물론 예외는 있다. .env 파일처럼 환경 변수를 입력하거나 API 키, 이메일 주소 등 개인 정보가 필요한 부분만 직접 수정하기로 했다.

과연 이 규칙을 끝까지 지킬 수 있을지, 그리고 AI만으로 어느 수준까지 개발이 가능한지를 실험해 보려고 한다.

 

이번 프로젝트의 목표

이번 프로젝트의 목표는 단순히 홈페이지 하나를 만드는 것이 아니다.

  • AI만으로 실제 서비스를 개발하기
  • 직접 만든 서비스를 인터넷에 공개하기
  • 집에 남는 노트북을 홈서버로 운영하기
  • 광고와 결제 기능을 추가하며 서비스 확장하기

이전에도 학교 프로젝트를 통해 AWS에 서비스를 배포해 본 경험은 있었지만, 이번에는 조금 다른 방식에 도전해 보기로 했다. 클라우드 서버 대신 집에 있는 노트북을 서버로 사용하고, Cloudflare Tunnel을 이용해 외부에서도 접속 가능한 환경을 구성해 볼 예정이다.

개발뿐 아니라 배포와 운영까지 모두 경험해 보는 것이 이번 프로젝트의 또 다른 목표다.

 

완성된 서비스

이번 프로젝트를 통해 만든 서비스의 이름은 Jipyo(지표)이다.

한국 상장기업의 공시, 재무제표, 경제지표, 주가 정보를 한곳에서 확인할 수 있는 투자 정보 플랫폼으로 개발했다.

현재 실제로 운영 중이며 아래 주소에서 확인할 수 있다.

https://jipyo.net/

https://jipyo.net 메인페이지

아직 프로젝트는 진행 중이다. 현재는 투자 정보를 제공하는 기능을 중심으로 구현되어 있으며, 앞으로 광고와 결제 기능 등을 추가해 실제 서비스에 가까운 형태로 발전시켜 나갈 계획이다.

앞으로의 연재

이번 시리즈에서는 단순히 "AI로 홈페이지를 만들었다."에서 끝내지 않고, 실제 서비스를 운영하기까지의 과정을 순서대로 기록해 보려고 한다.

  1. 바이브 코딩으로 홈페이지를 만든 이유
  2. AI에게 홈페이지를 만들게 하기
  3. AI와 함께 프로젝트 구조 설계하기
  4. Docker로 서비스 구성하기
  5. 집 노트북을 서버로 만들기
  6. Cloudflare Tunnel로 외부에 배포하기
  7. 실제 운영하면서 겪은 문제와 해결 과정
  8. 이후 업데이트 노트들

과연 "사람은 코드를 작성하지 않는다."는 규칙을 끝까지 지킬 수 있을지, 그리고 AI만으로 어디까지 서비스를 만들어 갈 수 있을지 앞으로 하나씩 기록해 보겠다.