[3주차] G.A.S로 만든 MVP -> Cursor로 상용화 기술Stack Migration 시도

소개

지난 15기에 진행한 GAS로 만든 '초등학교 배정 아파트 단지 안내 서비스'의
로딩 속도 개선 및 추가 기능 확대를 위해
Next.js와 Supabase(혹은 Firebase)를 활용하고자 Cursor를 써보기 했습니다.

중국어 단어가 많은 도시지도
막대 그래프가있는 한국 앱의 스크린 샷

[2주차 후기]
지난 2주차에 Vooster를 통해 호기롭게 만든 PRD와 TRD의 기술스택이 구현되는 꿈을 꾸며,
1주일을 열심히 커서와 클로드와 함께 씨름을 했으나,
너무 많은 파일때문인지, Mock-up 데이터로 지도API없이 마커를 생성하는데는 성공했으나
이후 UX/UI와 DB가 계속 연결이 되지 않는 무한루프에 빠졌습니다.

[3주차 목표]
주체성 없는 개발로는 답이 안 나올 것 같아서, 기초부터 공부를 해야겠다고 마음을 먹었습니다.
기존 프로젝트 내용을 과감하게 포기하고
초기 GAS를 일단 있는 그대로 옮기는 과정을 통해
Cursor와 Supabase/Github에 익숙해지는 것으로 목표를 변경했습니다.


진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

  • 기술스택 최소화 / Task 생성 = Claude (Project)

  • Task 기준 Coding 수행 = Cursor / Claude

  • DB = Supabase

  • 데이터 전처리 = Excel

  • 배포 = github

  1. 기술스택 최소화
    기존의 GAS 코드를 기준으로 최소한의 기술스택의 TRD를 요청
    그래도 계속 react/tailwin/typescript를 얘기해서 계속 더 단순화해달라고 요청.

한국어 텍스트가 포함 된 웹 사이트 스크린 샷
한국 및 중국어 텍스트가있는 페이지의 스크린 샷


2. Task 생성 요청 후, Cursor로 생성
그 과정에서 GAS에서 만든 Code.gs는 필요가 없다고 하여, 그 이유를 공부.

코드 G 한국 -


3. Cursor를 통해 만든 (Vibe Coding이라고 하기도 민망한) 정말 간단한 페이지 구조
(폴더도 없..)

Confidjs Index HTML의 스크린 샷


4. 주요 코드문 생성 후, 전체 DB를 업로드
(2주차때는 테이블 칼럼명만 맞춰서 데이터 10개씩만 추가해서 진행했었음)
- 전체 데이터를 업로드 하다보니 그 과정에서 발생하는
#N/A, N대N 복합구조, 2개의 테이블간의 키값 설정 등 전처리에 생각보다 많은 시간을 소비
- 결론적으로 성공했으나, 전처리 시간이 길어서 4주차때는 API 구조로 변경을 결심하게 됨
(서로 다른 공공데이터 테이블의 키값 매핑 테이블은 직접 작성 필요 예상)

숫자 목록을 보여주는 웹 페이지의 스크린 샷


5. Local에서 Front까지 띄우는 작업 진행 중
- 네이버 클라우드 Map API에 local URL 추가
- 클릭 시 Supabase 정의 이슈 지속 발생 중

위치의 위치를 보여주는지도

(그 쉽다는 Supabase 라이브러리 로드도 이리 어려울 일인가요..)

결과와 배운 점

알지 못하는 기술스택을 활용 시, 코딩의 한계점
- 다만, 이렇게 하나씩 확인하면서 해나가면 상용화 서비스는 언제쯤 손대볼 수 있을지...

DB 전처리 및 관리의 어려움
- 비개발자에게 DB가 연결되어 있는 MVP는 GAS와 구글시트가 편하긴 합니다.

기술스택과 환경을 알아도 어려운 개발과 (아직 하지도 못한) 배포
- 웹페이지 1개, script.js 1개에 DB 1개를 연결하는데도 왜 이리 오류가 많나요ㅠㅜ

해보고 싶은 프로덕트가 Front보다는 Back-end와 DB가 중요한 형태라
좀 더 DB 자체에 대한 기초를 다지고 나서 프로젝트를 키워봐야 겠다는 생각을 했습니다.

[4주차 목표]
1. Github으로 배포
2. DB를 API 호출 구조로 변경하기 (Join 키값 매핑 테이블 추가)
3. Vercel로 배포
4. 인근 학원 정보 DB 추가하기

도움 받은 글 (옵션)

이번 범위가 워낙 협소해서 혼자 맨땅에 헤딩을.ㅠ.ㅜ

1

뉴스레터 무료 구독