바이브코딩으로 웹사이트 만들기

 

최근 하도 바이브코딩이라는 말이 많이 보여서 저도 한번 해봤습니다.

결론부터 말하면,

이야, 이거 너무 재밌네요!

 

생각보다 훨씬 쉽게 웹사이트의 전체 틀을 만들 수 있었고, 아이디어만 어느 정도 정리되어 있다면 “일단 돌아가는 결과물”까지 만드는 속도가 정말 빨랐습니다.

다만 이 글은 제가 조금 예전에 직접 해보고 정리한 내용이라, 지금은 도구나 트렌드가 조금 달라졌을 수도 있습니다. 그리고 바이브코딩을 하는 방식은 사람마다 다르기 때문에, “이렇게 하는 사람도 있구나” 정도로 봐주시면 좋겠습니다.

 

1. ChatGPT 로 요구사항 정리하기

가장 먼저 한 일은 만들고 싶은 웹사이트의 요구사항을 ChatGPT와 함께 정리하는 것이었습니다.

처음부터 Antigravity나 Codex 같은 도구에 바로 “이런 사이트 만들어줘”라고 요청할 수도 있지만, 그러면 생각보다 원하는 결과물이 잘 나오지 않는 경우가 많습니다.

그래서 저는 먼저 ChatGPT에게 제가 만들고 싶은 서비스에 대해 설명하고, 그 내용을 바탕으로 README 형태의 기획 문서를 만들어달라고 했습니다.

최종적으로 README에는 최소한 아래 정도의 내용은 들어가는 것이 좋습니다.

 

# 프로젝트 제목

한줄 소개글 

---

## 소개

자세한 소개글

---

## 주요 기능

기능단위로 소개

---

## 화면 구성

웹사이트 페이지 단위로 정리

---

## 데이터 모델 (개요)

어떤 테이블이 필요할지 대략적으로 작성

---

## 기술 스택 

프론트엔드, 백엔드, 디비는 어떻게 할건지 등에 대한 스펙 작성

--- 

## 디자인 컨셉

모던, 아기자기한, 디자인 라이브러리를 이요할거라면 그것도

 

 

실제 ChatGPT 와 대화한 내용 1.jpg

실제 ChatGPT 와 대화한 내용 2.jpg

 

 

2. Antigravity로 전체적인 틀 만들기

요구사항 정리가 끝나면, 이제 그 내용을 바탕으로 Antigravity에게 프로젝트 생성을 부탁합니다.

제가 여러 도구를 사용해본 결과, 최초 프로젝트 틀을 만드는 용도로는 Antigravity가 꽤 좋았습니다.

Codex, Gemini CLI, Claude 등 여러 AI 도구를 사용해봤는데, 처음부터 전체 프로젝트를 만들게 하면 실행이 안 되거나, 의존성이 꼬이거나, 폴더 구조가 이상해지는 경우가 꽤 있었습니다.

그런데 Antigravity는 적어도 제가 사용했을 때는,

일단 실행은 되는 프로젝트를 만들어주는 편이었습니다.

이게 생각보다 큰 장점입니다.

바이브코딩을 하다 보면 “멋진 코드”보다 먼저 중요한 것이 있습니다.

바로,

일단 켜지는 것.

일단 실행이 되어야 화면을 보고, 버튼을 눌러보고, 마음에 안 드는 부분을 고치면서 앞으로 나아갈 수 있습니다!

Antigravity 의 최대 장점은 실행하기전에 먼저 implemetation plan 이란 문서를 만들어서 전체 실행계획을 알 수 있게 해준 다는 것입니다. 만약 이 단계에서 실행 플랜중에 마음에 들지 않는 부분이 있다면 직접 수정한 후에 실행하도록 할 수도 있습니다. ( 다만 개인적으로는 이 단계에서 너무 많이 수정하는 것은 추천하지 않습니다. 괜히 건드렸다가 전체 흐름이 꼬이는 경우도 있었기 때문입니다.

정말 이상한 부분만 살짝 수정하고, 나머지는 일단 맡겨보는 편이 더 좋았습니다.)

 

이렇게 만든 웹사이트를 처음 실행하면 보통 아무런 디자인이 되어있지 않을 것입니다. 걍 흰바탕에 버튼만 있는 형태일테죠. 이제 디자인을 적용합니다. 디자인은 말로만 설명하는 것보다, 내가 괜찮다고 생각하는 웹사이트나 이미지를 가져와서 이렇게 요청하는 것이 좋습니다.

이 이미지의 스타일을 참고해서 현재 웹사이트 UI를 다시 다듬어줘.
전체적으로 비슷한 분위기의 레이아웃, 색감, 카드 스타일, 버튼 스타일을 적용해줘.

 

기가막히게 잘해줍니다.

 

3. 직접 실행하면서 버그 수정하기

이제 프로젝트가 적당히 만들어졌다면 직접 실행해봅니다.

그리고 실제 사용자처럼 하나씩 눌러봅니다.

• 버튼이 잘 동작하는지
• 저장이 되는지
• 삭제가 되는지
• 새로고침해도 데이터가 유지되는지
• 날짜가 제대로 표시되는지
• 화면이 깨지는 곳은 없는지

이 단계에서는 먼저 눈에 보이는 큰 문제부터 수정하는 것이 좋습니다.

예를 들어 버튼을 눌렀는데 아무 동작도 하지 않거나, 저장이 되지 않거나, 화면 이동이 깨지는 것처럼 기능적으로 동작하지 않는 부분을 우선적으로 확인합니다. 폰트 크기나 여백처럼 세부적인 UI 조정은 나중에 해도 괜찮습니다. 처음부터 이런 부분에 시간을 많이 쓰면, 정작 중요한 기능 오류를 놓치기 쉽습니다.

문제가 생기는 부분이 있다면 이러이러하게 동작해야하는데 현재는 저러저러하게 동작하고 있다고 직접적으로 설명하거나 에러 내용을 그대로 복사해서 Antigravity에게 수정해달라고 요청합니다. 

(에러 내요은 프론트엔드 에러는 브라우저 개발자 도구의 Console 탭에서 확인할 수 있고, 백엔드 에러는 서버를 실행한 터미널 로그에서 확인할 수 있습니다.)

 

Antigravity에도 한계는 있다

하지만 어느 정도 진행하다 보면 Antigravity만으로는 잘 해결되지 않는 순간이 옵니다.

예를 들어 이런 요청을 했다고 해봅시다.

화면에 표시되는 날짜는 KST 기준으로 보여주고,
실제 데이터 저장은 UTC 기준으로 되게 해줘.

 

이런 요구사항은 개발자 입장에서는 꽤 흔한 요구사항입니다.

그런데 AI가 이걸 계속 애매하게 처리하는 경우가 있습니다.

• 화면 표시도 KST, 저장도 KST로 해버리거나
• 화면 표시도 UTC, 저장도 UTC로 해버리거나
• 일부 화면만 제대로 되고 다른 화면은 깨지거나
• 날짜 변환 함수가 여기저기 중복으로 생기거나

같은 요청을 몇 번이나 다시 해도 비슷한 문제가 반복됩니다. 아주 열이 받죠.

자, 이렇게 되면 이제 Antigravity 의 효용가치는 끝난 것입니다. 이제는 VS Code를 열 때입니다.

 

4. VS Code에서 Codex로 마이크로 수정하기

전체 프로젝트의 틀이 어느 정도 잡혔다면, 그 다음부터는 VS Code에서 Codex를 이용해 자잘한 버그를 수정합니다. 

Antigravity가 전체 틀을 만드는 데 강하다면, Codex는 이미 만들어진 코드 안에서 구체적인 문제를 해결하는 데 강합니다.

예를 들면,

• 날짜 포맷이 잘못 나오는 문제
• 특정 컴포넌트의 props가 꼬인 문제
• 특정 화면에서의 동작 수정
• 작은 UI 수정
• DB 필드 추가 및 연관 API 동작 수정 

이전까지 Antigravity 붙잡고 힘들게 하고 있었던것이 고속도로 뚫린것처럼 시원시원하게 수정되는 모습을 확인할 수 있습니다. 최고입니다. 

 

5. 완성

이런 방식으로 바이브코딩을 진행해서 웹사이트 하나를 완성했습니다.

바이브 코딩으로 완성한 프로젝트를 첨부합니다. 아직도 크고 작은 버그가 남아 있습니다만, 제가 말씀드리고 싶은것은 이제는 너무 쉽게 웹사이트 하나를 뚝딱 만들 수 있게 되었다는 것입니다.

아이디어만 있다면 누구나 개발할 수 있는 시대!

 

추가로 궁금한 부분이 생기시면 댓글로 부탁드립니다.  

오늘 할일 페이지 스크린샷

 

월간 캘린더 스크린샷

https://github.com/cykei/tasche-frontend

GitHub - cykei/tasche-frontend

 

https://github.com/cykei/tasche-backend

GitHub - cykei/tasche-backend