Lovable와 Make로 만든 페이지를 바이브코딩으로 바꿔보고 있습니다.(..ing)

소개

Lovable과 Make로 만든 페이지에서 Make를 걷어내고, Claude Code로 백엔드를 바이브코딩으로 구현하려고 합니다.

진행 방법

일단 Lovable에서 GitHub와 연동을 해서, 로컬 PC에 다운 받았습니다.

Lovable은 GitHub와 Supabase를 쉽게 연동할 수 있는 점이 장점인 거 같아요!

강조 표시된 설정이있는 WordPress 페이지의 스크린 샷
강조 표시된 설정이있는 WordPress 페이지의 스크린 샷

GitHub와 연결이 되고 난 다음에 git clone을 하면 pc에 쉽게 내려받을 수 있습니다.

저는 한방에 다 구현하는 것이 비극의 시작이라고 생각해서
Claude와 GPT와 함께 Make의 로직을 모듈별로 phase를 나눠서 개발 계획을 세워달라고 했습니다.

적용해야 되는 api 문서를 주고 개발계획을 짜라고 하니까
너무 과하게 짜기 시작하더라고요.

그래서 phase 별로 과하지 않게 만들어달라고 했는데, 이것도 역시 과하게 만들어줘.
지금 하는 게 완료가 되고 나면 간단한 프롬프트로 작동하는지도 시도해볼까 해요!

Phase 1 — 프로젝트 기반 설정 & 유튜브 URL 검증

Objective

Express + TypeScript 초기 골격 구성, .env/설정 계층화, YouTube URL → videoId 추출/검증 API 제공.

Scope (포함/제외)

포함: 서버 부트스트랩, 환경변수/설정 모듈, 공통 에러 미들웨어, POST /api/v1/ingest(URL 검증 전용)

제외: 외부 API 연동, DB I/O, 요약/자막 처리

API Contract (요약 샘플 1개)

POST /api/v1/ingest
Req: { "videoUrl": "https://www.youtube.com/watch?v=XXXX" }
Res(200): { "videoId": "XXXX", "normalizedUrl": "https://www.youtube.com/watch?v=XXXX", "type": "video|short" }
에러: 400 invalid_url, 422 unsupported_platform

Interfaces

YouTubeService.extractVideoId(url:string): { videoId:string, type:'video'|'short', normalizedUrl:string }

Validators.isYouTubeUrl(url): boolean

Rules & Constraints

모바일/짧은 도메인(m.youtube, youtu.be) 포함 정규화

Shorts 포맷(shorts/VIDEOID) 인식

레이트리밋(기초): IP당 5r/10s

Files to Touch

src/app.ts, src/server.ts

src/config/env.ts, src/middlewares/error.ts

src/controllers/IngestController.ts, src/services/YouTubeService.ts

src/utils/validators.ts, src/routes/index.ts

Acceptance Criteria

유효 URL → 200, 정확한 videoId/type/normalizedUrl

무효 URL → 400

단위테스트(정상/비정상/shorts/youtu.be) 통과

Test Plan (케이스 이름만)

valid_watch_url, valid_youtu_be, shorts_path, invalid_domain, missing_query

Deliverables

PR(diff), 실행/테스트 방법 README, Postman 샘플 1개

일단 요거 하나 개발을 붙였는데, 뭔가 열심히 만들어주었는데
아직 검증이 어떻게 되는 건지 모르겠어서 들여다 보고 있는 중이에요!

내일까지 얼마나 작업이 될까? 솔직히 좀 두렵긴 한데
그래도 Claude/GPT/Gemini가 도와주겠지 하고 있습니다 😮

결과와 배운 점

일단 바이브코딩을 시도할 때는 너무 자세하게 지시를 주는 것보다
AI가 잘 알아들을만한 용어로 간단하게 지시하는게 창의적인 결과를 얻을 수 있는 게 아닐까 싶다는 생각을 했습니다.

처음 Make를 잡았을 때만큼이나 뭔가 띵~~ 하고 있지만
또 시간이 해결해줄 걸 알고 있기 때문에 재밌게 즐겨보려고 합니다!

지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만