-
Notifications
You must be signed in to change notification settings - Fork 0
프로젝트 기획서
jj1kim edited this page May 28, 2026
·
1 revision
TravelMapper - 즉흥적인 여행자를 위한 유연한 여행 스케줄러
여행 계획을 세울 때 빡빡한 일정표는 부담스럽고, 무계획은 불안합니다. TravelMapper는 가고 싶은 장소를 위시리스트에 미리 저장해두고, 여행 당일 상황에 맞춰 유연하게 일정을 확정하는 서비스입니다.
- 여행 전에 후보 장소는 모아두되, 당일 기분과 상황에 따라 유동적으로 움직이고 싶은 여행자
- 여러 명이 함께 여행할 때 일정 공유가 필요한 그룹
- 유연함: 확정 전까지는 언제든 변경 가능한 위시리스트 기반 접근
- 즉시성: 빈 시간에 "뭐 하지?" → 가능한 장소 자동 추천
- 실용성: 경로/비용/영업시간을 고려한 현실적인 일정 관리
- 스케줄 생성 (이름 + 비밀번호)
- 비밀번호 기반 접근 제어
- 여행 날짜 범위 설정 (캘린더 UI)
- 참여자 목록 관리
- 스케줄 만료 (기본 90일) 및 연장 기능
- 5개 카테고리 관리: 교통, 숙박, 식사, 카페&디저트, 관광지
- 각 항목에 장소, 영업시간, 비용, 메모 등 상세 정보 저장
- Google Places 자동완성으로 장소 검색
- 카테고리별 탭 전환 UI
- 24시간 30분 단위 그리드 기반 일정표
- Overview 모드: 전체 여행 일자를 한눈에 조망
- Day Detail 모드: 특정 날짜의 상세 일정 확인
- 확정된 일정은 카테고리별 색상으로 표시
- 위시리스트 항목을 타임라인에 드래그하여 시간대 배치
- 교통 항목은 출발/도착 시간으로 자동 확정
- 영업시간 범위 내에서만 배치 가능
- 시간 겹침 방지
- 타임라인에서 빈 시간대를 드래그로 선택
- 해당 시간대와 영업시간이 30분 이상 겹치는 위시리스트 항목 자동 필터링
- 추천 목록에서 바로 일정 확정 가능
- 확정된 2개 이벤트를 선택하여 경로 확인
- Google Maps 기반 대중교통/도보/차량 경로 제공
- 출발 시간 자동 계산
- 이동 가능 여부(feasibility) 시각적 표시
- 항목별 총 비용 입력
- 참여자 수 기반 인당 비용 자동 계산
- 카테고리별 비용 breakdown 툴팁
- 토큰 기반 읽기전용 공유 링크 생성
- 비밀번호 없이 링크로 바로 접근 가능
- 시스템 설정 자동 감지
- 수동 토글 지원
- Next.js App Router: 파일 기반 라우팅과 API Routes를 동일 프로젝트에서 관리 가능. 별도 백엔드 서버 없이 풀스택 구현 가능.
- React: 컴포넌트 기반 UI로 위시리스트, 타임라인, 모달 등 복잡한 인터랙션 관리에 적합.
- TypeScript: 위시리스트 카테고리별 상이한 데이터 구조를 타입으로 안전하게 관리.
- 유틸리티 클래스로 빠른 프로토타이핑. 다크 모드 지원이 CSS 변수 +
dark:프리픽스로 간단.
- Supabase: 무료 티어로 PostgreSQL 사용. 별도 서버 관리 없이 DB 운영 가능.
- SQLite (로컬 개발): 환경변수 없이 바로 개발 시작 가능. DB 추상화 계층으로 런타임에 자동 전환.
- Places API (New): 장소 검색 자동완성. 한국 장소 데이터 커버리지가 가장 넓음.
- Directions API: 대중교통 포함 다양한 이동 수단 경로 제공.
- Maps JavaScript API: 지도 시각화 및 마커 표시.
- Next.js 개발사의 플랫폼으로 zero-config 배포. 무료 티어로 개인 프로젝트 운영 가능.
- 별도 회원가입 없이 스케줄 이름+비밀번호로 간단한 접근 제어. 가볍게 시작하는 MVP에 적합.
┌─────────────────────────────────────────────┐
│ Landing Page │
│ ┌──────────────┐ ┌──────────────────┐ │
│ │ 새 스케줄 만들기 │ │ 기존 스케줄 접속 │ │
│ │ │ │ │ │
│ │ - 이름 입력 │ │ - 이름 입력 │ │
│ │ - 비밀번호 │ │ - 비밀번호 │ │
│ │ - 참여자 추가 │ │ │ │
│ │ - 만료일 설정 │ │ │ │
│ └──────┬───────┘ └────────┬─────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────┐ │
│ │ Calendar Picker │ │
│ │ 여행 시작일 ~ 종료일 선택 │ │
│ │ (2개월 달력 UI, 범위 선택) │ │
│ └──────────────┬───────────────────┘ │
│ ▼ │
│ ┌──────────────────────────────────────┐ │
│ │ Timeline View │ │
│ │ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ Header │ │ │
│ │ │ 스케줄명 | D-day | 참여자 │ │ │
│ │ │ 공유 | 만료정보 | 다크모드 │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ Timeline Grid │ │ │
│ │ │ Overview: 전체 날짜 요약 │ │ │
│ │ │ Day Detail: 30분 단위 그리드 │ │ │
│ │ │ + 확정된 이벤트 블록 표시 │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─── Action Buttons ──────────┐ │ │
│ │ │ 📅날짜변경 📝위시리스트 │ │ │
│ │ │ ❓뭐하지? 📊경로확인 🗺지도 │ │ │
│ │ └─────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
│ │
│ ┌─── Side Panels / Modals ───────────┐ │
│ │ │ │
│ │ Wishlist Panel (슬라이드) │ │
│ │ - 카테고리 탭 │ │
│ │ - 항목 추가/수정/삭제 │ │
│ │ - 일정 확정 버튼 │ │
│ │ │ │
│ │ WhatToDo Panel (빈 시간 추천) │ │
│ │ - 선택한 시간대 표시 │ │
│ │ - 가능한 장소 목록 │ │
│ │ │ │
│ │ ConfirmSchedule Modal (드래그 배치) │ │
│ │ Map View Modal (지도 + 핀) │ │
│ │ Feasibility Modal (경로 확인) │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
- Landing → Calendar: 스케줄 생성 또는 로그인 성공 (날짜 미설정 시)
- Landing → Timeline: 로그인 성공 (날짜 설정 완료된 경우)
- Calendar → Timeline: 여행 날짜 선택 완료
- Timeline ↔ Wishlist Panel: 위시리스트 버튼 토글
- Timeline → WhatToDo Panel: 빈 시간대 드래그 선택
- Wishlist/WhatToDo → ConfirmSchedule Modal: 일정 확정
- Timeline → Map View Modal: 지도 버튼 클릭
- Timeline → Feasibility Modal: 경로 확인 모드에서 2개 이벤트 선택
- 공유 링크 → Timeline: 토큰 기반 자동 로그인 (읽기전용)