바이브 코딩 해보기

요즘 유명하다는 바이브 코딩을 해보려고 스터디 시간을 할애했다. 목표는 제대로 동작하는 서비스 만들어보기. 

 

프론트는 http://bolt.new/ 로, 백엔드는 chatGPT로 구축했다.

bolt는 프롬프팅만으로 mvp 목업사이트를 만들어주고 배포까지 해주는 서비스이다. 그만큼 완성도가 높고 더미데이터까지 넣어준다! 소개받고 바로 꼬들을 프롬프팅 해봤었는데 너무 잘되서 놀랐던 기억이 났다. 그리고 리액트를 다 까먹었기 때문에 완전히 ai에게 의존하고 싶었다. 그래서 완성도가 높은 bolt를 선택했다. 백엔드는 구독하고있던 gpt를 사용했다.

 

내 전략은 이랬다. bolt는 무료버전이므로 토큰이 얼마 없어 한번에 좋은 결과를 얻어내는게 중요했다. 따라서 내 요구사항을 정리한 후에 gpt와 프롬프트를 만들기 위한 프롬프팅을 진행했다. 이런 과정을 통해 프론트를 완벽히 만들어놓은 후 화면에서 필요한 기능을 추려 백엔드 코딩을 한 후 api연결을 하면 될 것 같았다. 프론트는 잘 몰라서 고치기 힘들지만, 백엔드는 유동적으로 프론트에 맞게 고칠 수 있을 것이라고 생각했다.

 

AI.. 좋은데..?

 gpt에게 롤을 설정해준 후 대화를 통해 프롬프트를 정돈하기 시작했다. bolt로 최초 생성 후 수정사항도 프롬프팅한 프롬프트로 쓱싹 고쳤다.

 

프롬프팅 예시)

로그아웃버튼을 누르면 사용자 입력창으로 돌아가야하는데, 현재 동작하지않음.

-> 로그아웃 버튼을 누르면 현재 사용자 이름 상태를 초기화하고, 사용자 입력 화면으로 돌아가게 만들어줘.상태를 reset하는 로직도 포함해줘.

 

프롬프트를 통해 다음과 같은 화면이 뚝딱 나왔다!

 

예쁜 디자인 원하는 필터링 기능이 잘 들어가있었다. 이것저것 사소하게 고치고 싶은 부분이 있었지만 토큰을 다 사용해 멈췄다. 파일을 다운받아 로컬에서 실행하니 잘 돌아갔다! 

 

AI..완전 좋은..가?

컴포넌트 ts파일을 보여주며 코드를 보고 필요한 기능정리를 부탁했더니 정말 깔끔히 정리해줬다.

2. 지출/수입 등록
	•	기능명: 지출 또는 수입 등록
	•	설명: 사용자 또는 ‘공통’ 소유의 내역을 등록
	•	필드:
	•	type: "expense" 또는 "income"
	•	category: 카테고리 문자열
	•	amount: 숫자 (소수점 가능)
	•	date: 날짜 문자열 (YYYY-MM-DD)
	•	description: 설명 (선택)
	•	owner: 사용자명 또는 "공통"
	•	isShared: true / false
	•	API:
                        POST /api/expenses

                        {
                          "type": "expense",
                          "category": "식비",
                          "amount": 10000,
                          "date": "2025-06-28",
                          "description": "점심 식사",
                          "owner": "공통",
                          "isShared": true
                        }

 

이 기능을 바탕으로 인텔리제이에서 controller-service-repository 기반의 설계를 부탁했다.

이것또한 뚝딱 만들어줬지만 확실히 한계가 있었다. 계층형 설계를 명확히 지시했지만 어느샌가 은근슬쩍 계층을 무시하고 컨트롤러에 모든 로직을 때려박는다던가.. DTO 같은걸 사용하지 않고 Entity를 모든 계층에서 사용한다던지 하는 문제가 있었다. 이런 부분을 지적하니까 개선해주긴 했다.

DTO 만들어 달라는건 절대 수용해주지 않는 모습

메소드 하나하나 고쳐달라는건 들어주는데 '~~하게 만들어줘' 는 잘 해주지않는다. 몇 번 시도해보다가 바이브 코딩의 의미를 되새기고 그냥 짜주는대로 가기로했다. 

 

백엔드 코드도 뚝딱 완성했다. swagger에서 테스트해보니 잘 동작하는것 같았다. swagger에서 api문서를 json으로 받아 gpt한테 프론트 코드에 api연동을 부탁했다. 후루룩 해주는 것 같았지만... 잘 안되는 것 같았다. 비동기를 동기로 바꾸는건 어려운거구나... 이미 목데이터 기준으로 모든걸 짜놔서 api연동을 위해 부분부분 고치는 것이 힘든것 같았다. 에러를 해결하지 못하고 무한루프를 돌았다. 결국 구글링과 기억재생법을 통해 axios 방식으로 코드를 직접 수정했지만, 조금 수정하는걸로는 동작하지 않았다.. 다른 로직들도 수정해줘야하는 것 같았다. 다른 친구들도 프론트에 api연동하는게 안된다고 했다. 결국 바이브로는 해결하지 못하고 api연동을 공부해서 하는게 더 빠르다고 결론내리고 여기서 마무리했다. 

 

후기

4시간 정도 바이브 코딩을 진행해봤다. AI를 코드리뷰나 디버깅에만 사용해서 처음부터 코드를 생성하는것은 처음이었는데 생각보다 잘 되는 부분도 있고 잘 안되는 부분도 많았다. 프롬프팅을 더 정교하게 하거나, 전체 틀은 내가 잡고 메소드나 컴포넌트 단위로 잘라서 코딩을 시킨다던지 하는 전략을 조금만 수정하면 괜찮은 서비스를 바이브 코딩으로 만들 수도 있을 것 같다. 자바(스프링)-JS(리액트) 조합이 바이브코딩에 잘 사용되지 않아 뭔가 성능이 덜 나오나? 하는 의심도 했다. 파이썬이나 노드로 백엔드를 만졌으면 더 자연스럽게 해결됐을지도....?  스터디원들이 모두 공감한 바는, 백엔드 명세를 가지고 프론트를 만드는게 맞는 방향이라는 것이다. 실제 코딩을 할 때도 그렇지만 api명세를 기준으로 프론트를 설계하는게 자연스럽긴 하다. 위에서 설명한 이유로-백엔드를 유연하게 고칠 수 있을 것이라는- 프론트를 기준으로 개발을 했던게 api연동에 실패한 패착일것 같다. 처음부터 기능명세 후 백엔드를 만들고 swagger를 가지고 프론트를 만들었으면? 잘 됐을지도 모르겠다는 생각에 들었다.

 

바이브 코딩을 좀 더 공부해본 다음 다시 시도해보고 싶다.