소개
지난 15기에 진행한 GAS로 만든 '초등학교 배정 아파트 단지 안내 서비스'의
로딩 속도 개선 및 추가 기능 확대를 위해
Next.js와 Supabase(혹은 Firebase)를 활용하고자 Cursor를 써보기 했습니다.
Cursor에 대한 두려움이 있어서 손을 못 대고 있었으나,
GPTaku님께서 알려주신 Vooster를 활용하여 Task 생성에 기반한 바이브코딩을 진행했습니다.
진행 방법
PRD/TRD/Code-Guideline/Task 생성: Vooster
커서맛피아님께서 만드신 Vooster 덕분에 순차적으로 질문만 대답해도, PRD/TRD/Cod-guideline까지 빠르게 생성되었습니다.
이후 Task 생성 과정에서 일부 오류가 있었으나, 해결되어 sub-task까지 생성 완료했습니다.
이후 MCP 연동까지 성공하여 프로젝트 생성까지 되었고, Rules 까지 다운로드완료했으나 작업 진행이 되지 않아서, 일단 넘어온 PRD 등 정보를 기준으로 Cursor에서 다시 Task를 직접 생성해봤습니다.
(Taskmaster를 시도해보고자 했으나, MCP 연동에서 몇 번 실패를 하니 마음이 급해서 일단 한 사이클 들이받아보자 싶어서 쌩으로 찍어봤습니다.)Vooster에서 넘어온 정보들
Task 수행 / 바이브코딩 환경 구성(파일설치) / 코드 수정: Cursor
Task를 단계별로 수행하고, 그 안에서 모듈을 스스로 나눠서 코딩을 시작
1단계 시작하기 전에 개발환경/패키지들 설치하는데 생각보다 시간이 많이 걸림
(npm, supabase 등등)GAS는 2개의 페이지(HTML, Javascript)로 구성하였고, 그 문법도 그래도 보다보니 눈에 익었었는데, 폴더 및 파일 종류도 많아지고 파일 확장자도 모르는 친구들(tsx, mjs, svg...)이 많아서 눈에 익는데 시간이 조금 더 오래 걸렸습니다.
생성된 폴더/파일
뭔지 몰라도 일단 한 싸이클은 돌려보자는 생각으로 계속 생성하는 문장들/파일들 보고, 검색하면서 진행했으나, 뭔가 비슷한 Front가 떠서 기쁜 마음에 한번 더 수정을 했더니 저 세상으로 가버리고 Restore를 해도 돌아오지 않습니다 ㅋㅋㅋㅋ
결과와 배운 점
스터디 OT 때부터 조원들끼리 끈끈함이 느껴지는 스터디라고 생각하던 차에,
GPTaku님이 해주신 말씀, 버디 성진님이 해주신 말씀, 우등졸업생(?) 원혁님이 해주신 말씀, 개발자 출신인 뭉게뭉게님이 해주신 말씀, 승현님을 포함한 스터디원분들이 해주신 말씀까지 어느 하나 빠지지 않고 모두 피가 되고 살이 되었습니다.
일단 1 Cycle을 돌리고 나니 그 말씀들이 어떤 의미인지 이해가 되었습니다.
- PRD/TRD 등 Context를 최대한 자세히 구성할 것 + 생성하면서 눈에 익숙해지게 읽어볼 것
- 기술 스택은 단순화하고, 작은 프로젝트부터 시작할 것
- Task 생성 시, Front 개발부터 요청하여 개발요건의 반영상황을 모니터링 할 수 있도록 할 것
- Rules를 빡세게 관리할 것
- 물리적으로 시간을 때려 박아야 함
- Readibility가 중요함. 등등등
야무지게 2개 서비스를 완성하는 것을 목표로 스터디를 시작했는데,
스터디장님과 버디님, 스터디원분들과 함께 으쌰으쌰 끝장을 보기 위해 불살라보겠습니다.
(목요일 스터디 때 까지는 화면은 정상적으로 표출되게 만들어보는게 목표입니다.)
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.