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 🌟 새로운 기능: - 사용자 인증 및 권한 관리 - 다중 여행 계획 관리 - 여행 템플릿 시스템 - 공유 링크 및 댓글 시스템 - 관리자 대시보드
126 lines
3.9 KiB
Markdown
126 lines
3.9 KiB
Markdown
# 구마모토 여행 앱 UI 개선 계획
|
|
|
|
## 📋 개선 목표
|
|
|
|
### 데스크톱 모드 (계획 수립 중심)
|
|
**목표**: 효율적인 여행 계획 수립을 위한 종합 대시보드
|
|
|
|
### 모바일 모드 (여행 중 사용)
|
|
**목표**: 여행 중 필요한 정보에 빠르게 접근할 수 있는 실용적 인터페이스
|
|
|
|
---
|
|
|
|
## 🖥️ 데스크톱 모드 개선 계획
|
|
|
|
### 1. 레이아웃 최적화
|
|
- **3컬럼 레이아웃**: 지도(50%) | 일정(30%) | 정보(20%)
|
|
- **상단 대시보드**: 여행 개요, 진행률, 예산 요약
|
|
- **탭 기반 네비게이션**: 일정 | 관광지 | 예산 | 체크리스트
|
|
|
|
### 2. 일정 편집 기능 강화
|
|
- **드래그앤드롭**: 일정 순서 변경
|
|
- **시간 슬라이더**: 직관적 시간 조정
|
|
- **관광지 연동**: 관광지 목록에서 일정으로 드래그
|
|
- **자동 시간 계산**: 이동 시간 자동 계산
|
|
|
|
### 3. 정보 통합 및 시각화
|
|
- **진행률 표시**: 계획 완성도 시각화
|
|
- **예산 차트**: 카테고리별 예산 분배
|
|
- **날씨 정보**: 여행 날짜 날씨 예보
|
|
- **교통 정보**: 경로 및 소요 시간
|
|
|
|
### 4. 협업 기능
|
|
- **공유 링크**: 가족과 계획 공유
|
|
- **댓글 시스템**: 일정별 메모/의견
|
|
- **버전 관리**: 계획 변경 이력
|
|
|
|
---
|
|
|
|
## 📱 모바일 모드 개선 계획
|
|
|
|
### 1. 네비게이션 최적화
|
|
- **하단 탭바**: 지도 | 오늘일정 | 전체일정 | 더보기
|
|
- **플로팅 액션 버튼**: 현재위치, 다음장소, 긴급연락
|
|
- **스와이프 제스처**: 날짜 간 빠른 전환
|
|
|
|
### 2. 실시간 여행 지원
|
|
- **현재 진행 상황**: 완료된 일정 체크
|
|
- **다음 목적지**: 현재 위치에서 다음 장소까지 길찾기
|
|
- **실시간 알림**: 일정 시간 알림, 교통 정보
|
|
- **오프라인 모드**: 필수 정보 캐싱
|
|
|
|
### 3. 빠른 액세스 기능
|
|
- **원터치 액션**: 전화걸기, 길찾기, 메모
|
|
- **음성 메모**: 여행 중 간편 기록
|
|
- **사진 연동**: 장소별 사진 자동 분류
|
|
- **체크인 기능**: 방문 완료 체크
|
|
|
|
### 4. 여행 중 편의 기능
|
|
- **언어 지원**: 일본어 기본 문구
|
|
- **환율 계산기**: 실시간 환율 적용
|
|
- **긴급 정보**: 병원, 경찰서, 대사관
|
|
- **교통카드 잔액**: IC카드 사용 기록
|
|
|
|
---
|
|
|
|
## 🔄 공통 개선 사항
|
|
|
|
### 1. 성능 최적화
|
|
- **로딩 시간 단축**: 이미지 최적화, 코드 스플리팅
|
|
- **오프라인 지원**: PWA 적용, 캐싱 전략
|
|
- **배터리 최적화**: 위치 서비스 효율화
|
|
|
|
### 2. 접근성 개선
|
|
- **다국어 지원**: 한국어, 일본어, 영어
|
|
- **다크모드**: 야간 사용 편의성
|
|
- **폰트 크기 조절**: 사용자 맞춤 설정
|
|
|
|
### 3. 데이터 동기화
|
|
- **실시간 동기화**: 데스크톱-모바일 간 즉시 반영
|
|
- **오프라인 동기화**: 연결 복구 시 자동 동기화
|
|
- **백업/복원**: 클라우드 백업 기능
|
|
|
|
---
|
|
|
|
## 📅 구현 우선순위
|
|
|
|
### Phase 1: 핵심 기능 개선 (1주)
|
|
1. 데스크톱 3컬럼 레이아웃 구현
|
|
2. 모바일 하단 탭바 네비게이션
|
|
3. 일정 드래그앤드롭 기능
|
|
4. 진행 상황 표시
|
|
|
|
### Phase 2: 사용성 향상 (1주)
|
|
1. 관광지-일정 연동 기능
|
|
2. 실시간 위치 기반 기능
|
|
3. 오프라인 모드 기본 구현
|
|
4. 성능 최적화
|
|
|
|
### Phase 3: 고급 기능 (1주)
|
|
1. 협업 및 공유 기능
|
|
2. 음성/사진 연동
|
|
3. 다국어 지원
|
|
4. 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
|
|
|
|
### 컴포넌트 일관성
|
|
- **버튼**: 둥근 모서리, 그림자 효과
|
|
- **카드**: 미니멀 디자인, 호버 효과
|
|
- **입력**: 명확한 라벨, 에러 상태
|
|
- **아이콘**: 일관된 스타일, 의미 명확
|
|
|