오늘의 목표는 기술적 도전이었다. 지금까지는 전부 Next.js 하나로 프론트와 백엔드를 같이 해결했는데, 이번엔 백엔드와 프론트엔드를 분리해보고 싶었다.
MBTI 밸런스 게임을 골랐다. 선택지를 고르면 "같은 MBTI의 몇 %가 나랑 같은 선택을 했는지" 실시간으로 보여주는 게임이다.
기술 스택:
- 프론트엔드: Next.js → Vercel
- 백엔드: Express + TypeScript → Render (무료)
- DB: Supabase
- 실시간성 담보: SSE (Server-Sent Events)
결과:
https://frontend-rouge-kappa-81.vercel.app
Supabase, Render, Vercel 모두 클로드코드가 알아서 처리했다.
Supabase는 MCP가 있다. 터미널에 한 줄 입력하고 API 키 주면 끝이다. 그 다음부터는 그냥 대화로 "DB 만들어줘", "이 SQL 실행해줘", "시드 데이터 넣어줘" 하면 된다. 대시보드에서 SQL 에디터 열 필요가 없다.
Render도 마찬가지다. API 키 하나 주면 서버 생성, 환경변수 설정, 배포 트리거까지 클로드코드가 curl로 직접 처리한다. 나는 API 키만 복사해서 붙여넣었다.
CLI로 배포했더니 Vercel-GitHub 연동이 안 되어 있었는데, 그것도 API로 해결했다.
오늘로 코드, DB, 서버, 배포가 전부 자동화됐다. 내가 직접 한 건 API 키 복사하고, 브라우저에서 게임 플레이해보고, 뭔가 안 된다 싶으면 말한 것 정도다.
버그 2건 해결, UX 개선 1건 모두 클로드코드에 한국어 대화로 코드 수정과 배포까지 해결했다.