여행 일정 + 지도 비교 UI/UX 레이아웃 리서치

조사일: 2026-03-15 목적: 여행 루트를 지도 + Day별 경유지로 비교하는 페이지의 레이아웃 개선 참고자료 참고: 이 리서치는 5개 루트 기준으로 작성되었으나, 이후 6조가 추가되어 현재 6개 루트가 존재한다. UI 패턴 분석 내용은 루트 수와 무관하게 유효하다.

1. 지도 + 일정 배치 패턴 (5가지 유형)

패턴 A: Sticky Map + Scrollable Sidebar (가장 보편적)

패턴 B: 지도 전체화면 + 하단 Sheet/Drawer (모바일 우선)

패턴 C: 지도 + 오버레이 패널 (토글 가능)

패턴 D: 탭 전환 (Map View / List View)

패턴 E: 지도 상단 + 일정 하단 (수직 분할)

2. Day가 여러 개일 때 표현 방법

2-1. Day 탭 (Horizontal Tabs)

2-2. 아코디언 (Accordion)

2-3. 세로 스크롤 타임라인

2-4. 스텝퍼/프로그레스 바

2-5. Compact View (Wanderlog)

3. 경유지 표시 방법

3-1. 번호 매긴 리스트 (Numbered List)

3-2. 카드 (Cards)

3-3. 타임라인 (Timeline)

3-4. 칩/태그 (Chips)

4. 지도와 일정의 상호작용 패턴

4-1. Hover/Click 하이라이트 연동

4-2. Day별 필터링

4-3. 지도 이동 시 리스트 필터링

4-4. 경유지 순서 드래그앤드롭

5. 모바일 대응 전략

5-1. 리스트 기본 + 지도 토글 (가장 일반적)

5-2. 하단 시트 (Bottom Sheet)

5-3. 수직 스택

6. 실제 앱별 상세 레이아웃 정리

Wanderlog (https://wanderlog.com)

Roadtrippers (https://roadtrippers.com)

Furkot (https://trips.furkot.com)

Komoot (https://www.komoot.com)

Route4Me (https://route4me.com)

Mappr (https://www.mappr.co)

7. 우리 프로젝트에 대한 권장 레이아웃

현재 문제 분석

권장 해결 방안

방안 1: Day 탭 + Sticky Map (가장 권장)

[루트 선택 탭: 루트1 | 루트2 | 루트3 | 루트4 | 루트5]
┌──────────────────────┬──────────────────────┐
│ Day 탭               │                      │
│ [1][2][3][4][5][6]   │                      │
│                      │                      │
│ Day 3 경유지:        │    Sticky 지도        │
│ 1. 장소A  ★ S등급    │    (해당 Day 핀만     │
│   → 30분/25km        │     하이라이트)       │
│ 2. 장소B  ★ A등급    │                      │
│   → 45분/40km        │                      │
│ 3. 장소C  ★ B등급    │                      │
│                      │                      │
│ [총 이동: 2h 15min]  │                      │
└──────────────────────┴──────────────────────┘

방안 2: 아코디언 Day + Sticky Map

[루트 선택 탭: 루트1 | 루트2 | 루트3 | 루트4 | 루트5]
┌──────────────────────┬──────────────────────┐
│ ▶ Day 1: 시드니 출발  │                      │
│ ▼ Day 2: 블루마운틴   │                      │
│   1. Three Sisters   │    Sticky 지도        │
│   2. Scenic World    │    (펼친 Day 핀만     │
│   3. Echo Point      │     하이라이트)       │
│ ▶ Day 3: 해안도로    │                      │
│ ▶ Day 4: 코프스하버  │                      │
│ ▶ Day 5: 바이런베이  │                      │
│ ▶ Day 6: 골드코스트  │                      │
└──────────────────────┴──────────────────────┘

방안 3: 루트 비교 모드 (5개 루트 한눈에)

[비교 모드 | 상세 모드]
┌────────────────────────────────────────────┐
│              전체 지도 (5개 루트 색상별)      │
│    ── 루트1(빨강) ── 루트2(파랑) ── ...     │
├────────────────────────────────────────────┤
│ Day 탭: [1][2][3][4][5][6]                  │
├────┬────┬────┬────┬────┤
│루트1│루트2│루트3│루트4│루트5│
│장소A│장소D│장소G│장소J│장소M│
│장소B│장소E│장소H│장소K│장소N│
│장소C│장소F│장소I│장소L│장소O│
│2h30│3h00│2h45│3h15│2h50│
└────┴────┴────┴────┴────┘

핵심 개선 포인트 요약

문제 해결책 참고 사례
우측 패널이 너무 길다 Day 탭/아코디언으로 콘텐츠 분할 Wanderlog Day 필터, Furkot Day 컬럼
지도와 패널 비대칭 지도를 position: sticky로 고정 Airbnb 검색결과, CSS sticky sidebar 패턴
5개 루트 동시 비교 어려움 상단 지도 + 하단 비교 테이블 (수직 분할) Route4Me side-by-side
모바일 대응 리스트 기본 + 지도 토글 버튼 NNGroup 권장, Airbnb/Yelp 모바일
경유지 정보 과다 Compact View 옵션 Wanderlog compact view

Sources