‹,쉼표1차 MVP 데모

이 데모가 무엇이고, 어떻게 만들어졌는가

고양·파주 마사지샵을 지도에서 찾고 바로 전화하는 모바일 웹의 1차 범위를 실제로 동작하게 만든 데모입니다. 개발을 처음 맡기는 분이 읽어도 알 수 있게 썼습니다. 샵 정보는 시연용으로 만든 가상의 업소입니다.

공고의 필수 과업 — 이 데모에서 동작하는 것

✓
지도와 리스트카카오 지도에 샵을 표시하고 같은 결과를 목록으로도 봅니다. 지도에서 핀을 누르면 목록의 카드가 함께 켜집니다.
✓
동 단위 필터고양시 3개 구와 파주시의 동·읍·면으로 거릅니다. 동마다 샵 수가 보입니다.
✓
샵 상세상호, 사진(여러 장), 주소, 전화번호, 영업시간, 소개, 작은 지도, 카카오맵 길찾기.
✓
전화하기목록의 전화 버튼과 상세 하단의 큰 버튼 모두 바로 전화가 걸립니다. 누른 횟수만 세어 관리자 통계에 씁니다(개인정보 없음).
✓
비회원 열람회원가입과 로그인이 없습니다.
✓
PWA홈 화면에 추가하면 주소창 없이 앱처럼 열리고, 한 번 본 화면과 사진은 오프라인에서도 보입니다. 앱스토어 등록은 하지 않습니다.
✓
관리자 웹샵 등록·수정·숨김, 사진 등록과 순서, 지역(동) 설정. 주소를 검색하면 지도 좌표와 동이 자동으로 채워집니다. 관리자 열기 (시연 비밀번호는 제안서에)
✓
모두 동일하게 노출제휴·비제휴 구분이 없고 정렬은 가나다순 또는 내 위치에서 가까운 순뿐입니다.

덧붙인 것 — 공고에는 없지만 있으면 좋은 것

+
내 주변 가까운 순위치 권한을 허용하면 거리가 표시되고 가까운 순으로 바뀝니다. "가까운 샵을 찾아 바로 전화"라는 목표에 직접 닿는 기능입니다.
+
상호·동·종류 검색샵이 80곳을 넘으면 동 필터만으로는 부족합니다.
+
전화 연결 통계관리자 첫 화면에 이번 주·이번 달 전화 연결 수와 많이 걸린 샵이 보입니다. 나중에 샵에 "이번 달 전화 N건"을 보여주는 근거가 됩니다.

2차 확장을 어떤 구조로 준비해 두었는가

1차 견적에는 들어가지 않지만, 나중에 갈아엎지 않도록 자리를 미리 잡아 두었습니다. 관리자 화면의 "2차 준비" 탭에서 실제 상태를 볼 수 있습니다.

항목1차에 잡아 둔 자리2차 작업 범위(예상)
지역 ON/OFF지역 표에 켜짐/꺼짐 열이 있고 관리자에서 동 단위로 이미 켜고 끌 수 있습니다. 시 단위 스위치는 설정 표에 자리만 있습니다.시·구 단위 스위치 화면. 서울·인천 등 새 지역은 동 목록만 추가하면 됩니다. 약 2~3일
제휴 여부샵 표에 제휴 열이 있으나 1차 화면에서는 읽지도 보여주지도 않습니다.제휴 배지, 정렬 규칙 합의, 관리자 토글. 약 2~3일
예약 요청·알림톡샵 상세의 "전화하기" 자리에 버튼 하나를 더 놓는 구조. 예약 표는 만들지 않았습니다.예약 요청 화면, 사장님 알림톡(카카오 비즈메시지 계약 필요), 관리자 예약 목록. 약 2~3주
PG 결제없음. 예약 요청 위에 얹습니다.PG 가입·심사(토스페이먼츠 등), 예약금 결제·취소·환불 흐름. 약 2~3주 + PG 심사 기간
사용자 앱화면과 데이터가 API로 완전히 분리되어 있어 앱은 같은 API를 씁니다.앱 껍데기(React Native 등)와 스토어 등록. 약 3~4주
별점·동별 탑3전화 클릭 통계가 이미 동별로 집계됩니다.리뷰 표, 별점 UI, 어뷰징 대응 규칙. 약 2주
사장님 앱·로그인샵 표에 사장님 계정 열이 있습니다(비어 있음).사장님 가입·본인 샵 수정·예약 확인. 약 2~3주

어떤 상태가 되어야 "완료"인가

1
사장님 대신 샵을 등록해 보고 10분 안에 끝난다주소 검색 → 사진 3장 → 저장 → 사용자 화면에 바로 보임. 80곳을 확보하려면 등록이 쉬워야 합니다.
2
휴대폰에서 지도 → 상세 → 전화가 3번 터치 안에 된다공고에서 말한 "막힘없이 돌아가는 흐름"의 기준입니다.
3
홈 화면에 추가된 아이콘으로 열린다안드로이드 설치 배너와 아이폰 안내가 모두 동작해야 합니다.
4
소스코드·서버·도메인이 발주자 명의로 옮겨져 있다잔금 전 이전 조건을 그대로 완료 기준에 넣습니다.
5
운영 매뉴얼대로 발주자가 혼자 샵을 등록·숨김·사진 교체할 수 있다

어떻게 만들어졌는가 (비개발자용)

화면

  • 표준 웹(HTML·CSS·JavaScript). 앱 설치 없이 휴대폰 브라우저에서 열리고, 홈 화면 추가(PWA)로 앱처럼 씁니다.
  • 지도는 카카오 지도. 주소 검색은 카카오 우편번호 서비스(무료).

서버·데이터

  • Cloudflare Pages Functions + D1 데이터베이스 + R2 사진 저장소. 서버 컴퓨터를 켜 두지 않고 요청이 온 만큼만 과금됩니다.
  • 1차 규모(샵 수백 곳, 하루 수천 방문)에서 월 운영비는 유료 요금제 약 7,000원 + 도메인 정도입니다.

2차에 바뀌는 것

  • 예약·결제가 붙으면 알림톡 발송비와 PG 수수료가 별도로 생깁니다.
  • 화면과 데이터가 분리돼 있어 앱을 만들 때 서버를 다시 만들지 않습니다.