이틀 만에 아이디어 구상에서 최종 배포까지 빠르게 시도해보기
페이지 정보
본문
| AI 도구 | claude, cursor,supabase, lovable |
|---|
오늘은 "불법 현수막 신고 웹서비스"을 48시간 만에 구상부터 배포까지 완성한 경험을 공유해보려고 합니다.
쓰다보니 AI로 인해 개발 도구들이 빠르게 발전했더라고요. 백엔드 서버 없이도 데이터베이스, 실시간 동기화, 배포까지 전부 무료로 해결할 수 있었습니다.
Q. 어떤 문제를 발견했나요?
유튜브를 보다가 어느 국회의원이 동네에 걸린 불법 현수막이 너무 많은 걸 보고 신고접수처를 이메일로 공개했는데, 생각보다 과정이 복잡하더라고요.
기존 이메일 신고 방식의 문제점:
현장에서 사진 촬영 → 나중에 주소 찾기 → 이메일 작성 → 사진 첨부 → 발송
이 과정이 너무 번거로워서 대부분 포기하게 됩니다
중복 신고 확인이 불가능해서 같은 현수막에 계속 신고가 들어옴
담당 공무원도 어디에 신고가 많은지 한눈에 파악하기 어려움
Q. 그래서 어떤 아이디어를 떠올렸나요?
"사진만 찍으면 자동으로 신고되게 만들 수 없을까?"
요즘 스마트폰으로 찍은 사진에는 GPS 정보가 자동으로 저장됩니다. 이걸 활용하면:
사진만 업로드하면 위치 정보 자동 추출
GPS 좌표를 한국 주소로 자동 변환
지도에 실시간으로 표시해서 중복 신고 방지
개발 동기:
시민 입장: 3단계 이내로 신고 완료 (사진 → 설명 → 제출)
담당자 입장: 지도에서 한눈에 신고 현황 파악
기술 입장: 빠른 프로토타이핑으로 검증 가능한지 테스트
"이게 정말 이틀 안에 가능할까?" 싶었지만, 도전해보기로 했습니다.
Q. 어떻게 구현했나요?
모든 개발은 Cursor와 Claude로 구현되었습니다.
Day 1 (퇴근후 수요일): 핵심 기능 구현
30M: Lovable에서 React + TypeScript + Vite로 프로젝트 세팅
30M: 사진 업로드 → EXIF GPS 추출 기능 구현 (exifr 라이브러리)
30M: Kakao Maps API로 GPS를 한국 주소로 변환
1M: Supabase로 데이터베이스 구축 (PostgreSQL, 무료!)
Day 2 (퇴근후 목요일): 지도 & 배포
30M: Kakao Maps에 신고 마커 표시
30M: 실시간 동기화 구현 (Supabase Realtime)
1M: Vercel에 배포 완료 ????
핵심 기술 스택:
Frontend: React 18 + TypeScript + Vite
Backend: Supabase (PostgreSQL + Realtime)
Map API: Kakao Maps (지도 + Geocoding)
UI: shadcn/ui + Tailwind CSS
Deploy: Vercel
결과:
✅ 사진만 찍으면 GPS 자동 추출
✅ 주소 자동 변환 (성공률 98%)
✅ 실시간 지도 동기화 (1초 이내)
✅ 모바일 최적화
✅ 총 개발 비용: 0원
Q. 기존 솔루션과 어떻게 다른가요?
기존 방식 (이메일 신고):
주소 수동 입력 필요
중복 신고 확인 불가
처리 현황 불투명
평균 신고 시간: 10분
위치 공유서비스 :
사진만 찍으면 끝
지도에서 기존 신고 즉시 확인
실시간 처리 현황 공유
평균 신고 시간: 2분 이하
경쟁 우위:
속도: 기존 대비 80% 시간 단축
중복 방지: 지도 시각화로 70% 중복 신고 감소 예상
무료 운영: Supabase Free Tier로 초기 1,000명까지 무료
확장 가능: 다른 시민 신고(불법 주차, 쓰레기 등)로 확장 용이
Q. 개발하는 분들에게 조언한다면?
1. "완벽한 것보다 빠른 것이 낫다"
MVP는 2일이내면 충분합니다
사용자 피드백을 받고 나서 개선하세요
처음엔 "관리자 페이지", "통계 대시보드" 다 만들려고 했는데, 일단 핵심만 구현했습니다
2. "바퀴를 재발명하지 마세요"
Supabase: 백엔드 서버 없이 DB + 실시간 동기화
shadcn/ui: 디자인 고민 없이 예쁜 UI
Kakao Maps: 한국 주소 데이터 완벽 지원
Vercel: 클릭 한 번으로 배포
3. "제약이 창의성을 만든다"
이틀이라는 시간 제약 덕분에 핵심 기능에만 집중
Supabase Free Tier 제약 덕분에 이미지 최적화 고민
결과적으로 더 날렵한 제품이 나왔습니다
4. "문서화는 미래의 나를 위한 것"
CLAUDE.md: 나중에 다시 봐도 이해 가능
PRD.md: 기능 확장 시 판단 기준
SUPABASE_SETUP.md : 스키마 및 DB 구성 및 RLS 정책 정의
앞으로의 계획:
Phase 2: Supabase Storage로 이미지 최적화
Phase 3: 지역별 통계 대시보드
Phase 4: 다른 시민 신고 유형으로 확장
배운 점
속도가 곧 경쟁력: 아이디어가 떠올랐을 때 48시간 안에 검증할 수 있다면, 실패해도 빠르게 배웁니다
도구의 발전이 놀랍다: 2025년에는 혼자서도 풀스택 서비스를 무료로 만들 수 있습니다 (Supabase + Vercel + 무료 API)
사용자 문제가 우선: 복잡한 기술보다 "사진만 찍으면 끝"이라는 단순함이 핵심 가치입니다
제약이 집중을 만든다: 이틀이라는 시간, 0원이라는 예산이 오히려 본질에 집중하게 만들었습니다
오픈소스의 힘: exifr, shadcn/ui, React 등 무료 도구들 덕분에 가능했습니다
여러분도 주말 이틀 동안 빠른 프로토타입에 도전해보시죠. 아이디어가 있다면 일단 만들어보세요. 완벽하지 않아도 괜찮습니다.
데모 페이지 : https://clean-seoul.vercel.app/