소개
성장피터 팀의 '비개발자도 Cursor로 바이브 코딩 세션'을 듣고 바이브 코딩을 알게 되었습니다.
*바이브 코딩:
- AI에 의존해 코딩하는 것, 입코딩이라고도 부름
- 감(바이브)에 몸을 맡겨 '코드가 존재한다는 사실' 조차 잊어버리는 그런 느낌~
- 문제 해결의 과정이자 프로덕트를 만드는 과정
코딩이라 큰 기대없이 세션에 참여했다가 업무에 적용할 수 있을 것 같아 시도해보았습니다.
최근 업무에서 하던 고민 중 하나는 이벤트용 웹사이트가 필요하다는 것이었는데요.
1. 오프라인 행사를 준비하면서 현장에서 회원 정보를 받을 수 있는 무언가를 만들고 싶다.
2. Google Form이나 Tally 말고 행사장에 맞게 좀 더 격식있고 웹사이트 느낌 나면 좋겠다.
그래서 수업에서 소개된 도구들을 활용해 직접 제작에 도전해보았습니다.
진행 방법
사용한 도구들
V0: 빠른 디자인 시안 제작
Cursor: 실질적인 웹사이트 코드 작성
Cluely: 실시간 코드 확인 및 피드백
GitHub: 웹사이트 배포
Google Apps Script + Google Sheets: 폼 입력값 기록
디자인
V0에서 텍스트 몇 줄과 서비스 컬러만 입력했는데 괜찮은 디자인이 나왔습니다.
그 디자인을 캡처해서 Cursor에게 보여주며 "이런 무드로 만들어줘"라고 요청하니, 거의 그대로 구현해주었습니다. 덕분에 디자인 관련 고민은 몇 번의 질문만으로 금방 해결됐어요.
디테일한 화면 구현
Cursor에서는 디테일한 주문을 요청했습니다.
아이디는 이메일 형태로 @가 없으면 오류 알럿을 띄워줘
파티클 아이템들이 애니메이션 효과처럼 나타나게 해줘
제출하기 버튼 누르면 "제출이 완료되었습니다" 메시지가 뜨고 3초뒤에 사라지게 해줘 등 실제 행사장에서 활용했을 때의 상황을 가정하며 여러 번 코드를 수정했습니다.
Live Server 확장 프로그램을 사용해 실시간으로 바뀐 화면을 보며 수정했습니다.
Github을 통해 배포
Cluely를 통해 Github 배포를 도와달라고 요청했습니다.
왕초보니까 가이드를 상세하게 달라고 요청했더니 Github 생성에서 배포까지 약 15분도 안 걸려서 웹사이트 배포가 가능했습니다.
* 참고: Github은 아주 예전에 사용해본 적 있지만, 기억은 거의 없는 상태였습니다. 뭔가를 날리면서 저장했던 것 같은데? 하는 수준의 작고 소중한 바이브만 남아있는 상태였어요.
아무튼 Cluely 덕분에 https://kwiseon.github.io/test_sl/ 사이트가 배포되었습니다. (뿌듯)
폼 구현 및 연동 (여기서부터 난이도 상승)
겉으로 보기엔 설문 폼이지만 실제로는 디자인만 된 폼이기 때문에 유저가 입력한 값을 처리하는 과정이 필요했습니다. Cluely에게 물어봤는데, 두 가지 버전을 제안해주었습니다.
쉽고 빠른 방식: 구글 폼을 만들고 iframe으로 웹사이트에 구글 폼 직접 삽입
커스텀 폼: 구글 Apps Script 방식으로 웹앱 코드를 만들어 배포
V0가 만들어준 디자인을 포기하고 싶지 않아 Apps Script를 활용해 제작했습니다.
이때부터 Cluely 의존도 급 상승. 그래서 시행착오가 발생했던 것 같아요.
실제로 연동하고 시트에 기록되는 걸 확인하기 까지 약 1시간 정도 걸렸습니다.
시행착오 중 가장 큰 문제는 Cursor에서 만든 input type과 Apps Script에서 예상한 input type이 달랐다는 것입니다. 구글 시트에 기록되지 않는 삽질을 반복했습니다.
해결방법: Cluely에게 Cursor에 있는 전체 코드를 복사해 붙여넣고, 화면상 Apps Script를 보여주며 어떤 것 때문에 구글 시트에 기록되지 않는지 체크해 해결했습니다.
웹사이트에서 입력 후 시차는 발생했지만 잘 입력되는 것을 확인했습니다.
결과와 배운 점
디자인은 V0가 정말 강력합니다. 키워드 몇 개만 입력해도 만족스러운 UI가 나와요.
Cursor는 개발에 대한 느낌만 있어도 코드를 생성하고 원하는 결과물을 만들어준다는 점에서 활용도가 매우 높은 툴임을 느꼈습니다.
연동에서 시간이 걸렸지만, Apps Script로 시트 자동화까지 완료!
Cluely의 실시간 비교 및 안내 기능 덕분에 막막함 없이 진행할 수 있었어요. (*유료버전)
비개발자도 적절한 도구 조합만 있으면 충분히 만들 수 있겠다는 자신감이 생겼습니다 💡
도움 받은 글
2주차 핵심 강의: 바이브 코딩 따라하기 성장피터
얕고 넓게 학습하는, 문제 해결력으로 접근할 수 있게 도와주셔서 감사합니다. 🙂
미니특강: Cluely를 AI실습 도우미로 활용하기 김다영 PM님
실습 도우미로 써보라고 알려주셔서 이번에 정말 톡톡 활용했어요. 감사합니다. 🙂