fd5a68e44a
✨ 주요 변경사항: - 프로젝트 이름: kumamoto-travel-planner → travel-planner - 버전 업그레이드: v1.0.0 → v2.0.0 - 멀티유저 시스템 구현 (JWT 인증) - PostgreSQL 마이그레이션 시스템 추가 - Docker 컨테이너 이름 변경 - UI 브랜딩 업데이트 (Travel Planner) - API 서버 및 인증 시스템 추가 - 여행 공유 기능 구현 - 템플릿 시스템 추가 🔧 기술 스택: - Frontend: React + TypeScript + Vite - Backend: Node.js + Express + JWT - Database: PostgreSQL + 마이그레이션 - Infrastructure: Docker + Docker Compose 🌟 새로운 기능: - 사용자 인증 및 권한 관리 - 다중 여행 계획 관리 - 여행 템플릿 시스템 - 공유 링크 및 댓글 시스템 - 관리자 대시보드
3.9 KiB
3.9 KiB
구마모토 여행 앱 UI 개선 계획
📋 개선 목표
데스크톱 모드 (계획 수립 중심)
목표: 효율적인 여행 계획 수립을 위한 종합 대시보드
모바일 모드 (여행 중 사용)
목표: 여행 중 필요한 정보에 빠르게 접근할 수 있는 실용적 인터페이스
🖥️ 데스크톱 모드 개선 계획
1. 레이아웃 최적화
- 3컬럼 레이아웃: 지도(50%) | 일정(30%) | 정보(20%)
- 상단 대시보드: 여행 개요, 진행률, 예산 요약
- 탭 기반 네비게이션: 일정 | 관광지 | 예산 | 체크리스트
2. 일정 편집 기능 강화
- 드래그앤드롭: 일정 순서 변경
- 시간 슬라이더: 직관적 시간 조정
- 관광지 연동: 관광지 목록에서 일정으로 드래그
- 자동 시간 계산: 이동 시간 자동 계산
3. 정보 통합 및 시각화
- 진행률 표시: 계획 완성도 시각화
- 예산 차트: 카테고리별 예산 분배
- 날씨 정보: 여행 날짜 날씨 예보
- 교통 정보: 경로 및 소요 시간
4. 협업 기능
- 공유 링크: 가족과 계획 공유
- 댓글 시스템: 일정별 메모/의견
- 버전 관리: 계획 변경 이력
📱 모바일 모드 개선 계획
1. 네비게이션 최적화
- 하단 탭바: 지도 | 오늘일정 | 전체일정 | 더보기
- 플로팅 액션 버튼: 현재위치, 다음장소, 긴급연락
- 스와이프 제스처: 날짜 간 빠른 전환
2. 실시간 여행 지원
- 현재 진행 상황: 완료된 일정 체크
- 다음 목적지: 현재 위치에서 다음 장소까지 길찾기
- 실시간 알림: 일정 시간 알림, 교통 정보
- 오프라인 모드: 필수 정보 캐싱
3. 빠른 액세스 기능
- 원터치 액션: 전화걸기, 길찾기, 메모
- 음성 메모: 여행 중 간편 기록
- 사진 연동: 장소별 사진 자동 분류
- 체크인 기능: 방문 완료 체크
4. 여행 중 편의 기능
- 언어 지원: 일본어 기본 문구
- 환율 계산기: 실시간 환율 적용
- 긴급 정보: 병원, 경찰서, 대사관
- 교통카드 잔액: IC카드 사용 기록
🔄 공통 개선 사항
1. 성능 최적화
- 로딩 시간 단축: 이미지 최적화, 코드 스플리팅
- 오프라인 지원: PWA 적용, 캐싱 전략
- 배터리 최적화: 위치 서비스 효율화
2. 접근성 개선
- 다국어 지원: 한국어, 일본어, 영어
- 다크모드: 야간 사용 편의성
- 폰트 크기 조절: 사용자 맞춤 설정
3. 데이터 동기화
- 실시간 동기화: 데스크톱-모바일 간 즉시 반영
- 오프라인 동기화: 연결 복구 시 자동 동기화
- 백업/복원: 클라우드 백업 기능
📅 구현 우선순위
Phase 1: 핵심 기능 개선 (1주)
- 데스크톱 3컬럼 레이아웃 구현
- 모바일 하단 탭바 네비게이션
- 일정 드래그앤드롭 기능
- 진행 상황 표시
Phase 2: 사용성 향상 (1주)
- 관광지-일정 연동 기능
- 실시간 위치 기반 기능
- 오프라인 모드 기본 구현
- 성능 최적화
Phase 3: 고급 기능 (1주)
- 협업 및 공유 기능
- 음성/사진 연동
- 다국어 지원
- PWA 완성
🎨 디자인 시스템
색상 팔레트
- Primary: 구마모토 레드 (#DC2626)
- Secondary: 구마모토 그린 (#059669)
- Accent: 구마모토 블루 (#2563EB)
- Neutral: 회색 계열 (#F3F4F6 ~ #1F2937)
타이포그래피
- 제목: Inter/Noto Sans KR Bold
- 본문: Inter/Noto Sans KR Regular
- 캡션: Inter/Noto Sans KR Medium
컴포넌트 일관성
- 버튼: 둥근 모서리, 그림자 효과
- 카드: 미니멀 디자인, 호버 효과
- 입력: 명확한 라벨, 에러 상태
- 아이콘: 일관된 스타일, 의미 명확