f54da90b5f
Tracks planned UI/UX improvements with priorities and completion status. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
4.4 KiB
4.4 KiB
Tasteby UX/디자인 개선 가이드
1. 네비게이션 & 구조
| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| Bottom Navigation | 모바일에서 엄지 닿는 하단에 핵심 탭 (지도/검색/찜/마이) | 현재 상단에 모든 것이 몰려있음 → 하단 탭바 추가 |
| Sticky 검색바 | 스크롤해도 검색은 항상 접근 가능 | 리스트 모드에서 검색바가 스크롤에 묻힘 |
| Progressive Disclosure | 필터는 처음엔 숨기고, 필요할 때 펼치기 | 필터 아이콘 터치 시 바텀시트로 |
| 2탭 이내 도달 | 핵심 기능까지 최대 2번 터치 | 식당 상세 → 마커 탭 → 바로 상세 (현재 OK) |
2. 비주얼 & 레이아웃
| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| 카드 UI | 식당 정보를 그림자+라운드 카드로 구분 | 리스트 아이템을 카드 형태로 |
| 음식 사진 | 텍스트보다 사진이 10배 효과 | Google Places 사진 API로 대표 이미지 추가 |
| 여백(White Space) | 요소 간 충분한 간격 → 시각적 호흡 | 현재 필터/버튼이 빽빽 → 간격 확보 |
| 일관된 색상 체계 | 브랜드 컬러 1개 + 보조 1-2개 | 현재 blue/red/teal/amber 혼재 → 통일 |
| 아이콘 + 텍스트 | 아이콘만은 의미 불명확, 텍스트만은 지루 | 필터 버튼에 아이콘+라벨 조합 |
3. 인터랙션 & 피드백
| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| 마이크로 애니메이션 | 탭 전환, 카드 등장 시 부드러운 전환 | 리스트↔지도 전환에 fade/slide |
| Skeleton Loading | 로딩 중 회색 뼈대 표시 (스피너 대신) | 식당 목록 로딩 시 스켈레톤 |
| Pull to Refresh | 모바일에서 당겨서 새로고침 | 리스트 모드에서 |
| Toast 알림 | 액션 완료 시 하단에 잠깐 표시 | "찜 완료", "리뷰 저장됨" 등 |
4. 모바일 특화
| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| Bottom Sheet | 지도 위 하단에서 올라오는 패널 (Google Maps 스타일) | 식당 상세를 바텀시트로 |
| Swipe 제스처 | 좌우 스와이프로 식당 넘기기 | 상세 화면에서 이전/다음 식당 |
| 한 손 조작 영역 | 핵심 버튼은 하단 60% 안에 | 현재 필터가 최상단 → 접근 어려움 |
| 반응형 지도 크기 | 리스트 모드: 지도 작게 / 지도 모드: 전체 | 현재 고정 비율 → 동적 조절 |
5. 개인화 & 스마트 기능
| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| 최근 본 식당 | 히스토리 자동 저장 | 로컬스토리지로 구현 가능 |
| 맞춤 추천 | "당신이 좋아할 식당" | 찜/리뷰 기반 유사 식당 추천 |
| 위치 기반 기본값 | 현재 위치 근처 식당 우선 | 이미 구현 (geolocation) |
| 검색 자동완성 | 타이핑 중 식당/메뉴 서제스트 | 검색바에 debounced suggestions |
6. 디자인 트렌드 (2025-2026)
| 트렌드 | 설명 |
|---|---|
| Bento Box 레이아웃 | 대시보드형 격자 카드 배치 (Apple 스타일) |
| Glassmorphism | 반투명 유리 효과 배경 (지도 위 오버레이에 적합) |
| 다크모드 | 시스템 설정 연동 자동 전환 |
| 대담한 타이포그래피 | 큰 글씨 + 굵은 폰트로 핵심 정보 강조 |
| Scroll-telling | 스크롤 따라 콘텐츠가 자연스럽게 전개 |
우선 적용 추천 순위
모바일 Bottom Sheet — 지도 위 식당 상세를 Google Maps처럼✅ 완료BottomSheet.tsx컴포넌트: 3단 snap (40%/55%/92%), 드래그 제스처, 속도 감지- 모바일 지도 모드: 전체 화면 지도 + 바텀시트로 상세
- 모바일 리스트 모드: 리스트 유지 + 바텀시트로 상세
- 식당 카드 + 음식 사진 — 시각적 임팩트 (Google Places Photo API)
- 필터를 바텀시트/드롭다운으로 — 상단 필터 줄 정리
Skeleton Loading — 체감 속도 향상✅ 완료Skeleton.tsx: RestaurantListSkeleton (8개 카드), RestaurantDetailSkeleton- RestaurantList: loading prop으로 스켈레톤 표시
- RestaurantDetail: 비디오 로딩 시 스켈레톤
- ReviewSection: 리뷰 로딩 시 스켈레톤
- 초기 로드 + 검색 + 채널 변경 시 모두 스켈레톤 표시
- Toast 알림 — 액션 피드백
- 다크모드 — 트렌드 + 야간 사용성