# 구마모토 여행 앱 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

### 컴포넌트 일관성
- **버튼**: 둥근 모서리, 그림자 효과
- **카드**: 미니멀 디자인, 호버 효과
- **입력**: 명확한 라벨, 에러 상태
- **아이콘**: 일관된 스타일, 의미 명확