요즘 유행이라는 바이브 코딩으로 사이트 뚝닥 만들어보기 (feat. 조코딩)

유튜브에서 우연히 조코딩님 영상을 보고 재밌겠다 싶어 따라해봤습니다.

* 결과물도 글 아래에 있으니 한번 확인해보세요!!

 

바이브코딩 영상 바로가기

조코딩님 바이브코딩 영상

영상에 나온 테토에겐녀 테스트처럼, 간단하고 재치있는 아이디어가 뭐가 있을까 고민하다가 "공룡 매칭" 이 떠올랐어요 ㅎㅎ

 

바로 replit 서비스에 구글을 통해 회원가입 후, 딱 세 줄 입력했습니다.

 

나랑 어울리는 공룡 찾기 사이트를 만들고 싶어.
내 성격을 몇가지 설문조사한 뒤에, 나와 잘 어울리는 공룡을 추천해주는거야.
설문조사랑 공룡 16마리 정도 조사해줘.

 

 

 

5분도 안되어서 V1 이 나왔습니다. 

설문조사 갯수가 10개가 넘길래, 줄여달라고 요청했더니 줄여주었습니다. 

나중에 보니 이런 사소한 수정사항은 Agent에게 요청하기는 좀 아까운 것 같습니다. (돈과 시간이 더 나가는 느낌)

 

마찬가지로 10분만에 개발이 완료되었습니다. 

개발 시간도 말도 안되고 비용도 말이 안되네요.. 1달러도 안들어요.

 

- Work time : 11 minutes

- Code changes : +1658 -0

- Cost to you : $0.57

 

구현사항도 아래와 같이 정리해줍니다.

 

 

안녕하세요! 공룡 성격 매칭 웹사이트가 완성되었습니다. 다음과 같은 기능들이 구현되었습니다:

✓ 한국어 인터페이스로 공룡 매칭 웹사이트 제작
✓ 8개 질문으로 구성된 성격 테스트 시스템
✓ 16마리 공룡 데이터베이스 및 매칭 알고리즘
✓ 반응형 디자인과 애니메이션 효과
✓ 결과 공유 기능 및 공룡 도감

웹사이트가 제대로 로드되고 있나요? 홈페이지의 디자인과 레이아웃은 어떠신가요?

 

 

replit 사이트에서 코드 작성과 동시에 미리보기가 제공되어서, 바로 사이트를 테스트 해볼 수 있습니다.

 

왼쪽 네비게이션 바에서 File을 누르면, Agent가 작성한 파일과 코드들을 바로 볼 수 있습니다.

저는 다른 서비스를 이용해 배포를 진행하고 싶어서, 코드를 zip 으로 다운받아 주었습니다.

 

 

 

다운받은 코드를 살짝 원하는대로 수정한 뒤에 깃에 올려주고,  https://render.com/ 이 서비스를 이용해 배포를 진행했습니다.

Cloud Application Platform | Render

 

render 라는 서비스는 처음 써봤는데, 이것도 chat gpt 한테 물어봐서 알려준대로 한겁니다 ㅎㅎㅎ

 

또다른 조력자 chat gpt

 

 

# 결과물

이렇게 해서 바이브 코딩으로 "공룡 매칭" 서비스 하나를 뚝닥 만들어보았습니다.

 

https://dinosaurmatch.onrender.com/

내 공룡 찾기

 

제 공룡은 테리지노사우르스에요~!

 

 

친구들한테 공유도 하고, 같이 결과보니 재미도 있었네요.

 

 

구글 애드센스 해보려고 심사는 올려놨는데 될 지 모르겠네요.

 

기획만 있으면 이렇게 금방 사이트가 만들어진다니 세상 너무 빠르게 변하는거같아요.

다음에는 또 어떤 사이트를 만들어볼까요!