웹·모바일 안내맵 UX — 층별 맵, 접근성 경로, 포토존·정숙구역 오버레이, 오프라인 연동

1) 원칙(30초 브리핑)

• 3-30 규칙: 3탭 이내로 경로 시작, 30초 내 도착 행동(엘리베이터·계단·문) 지시.
• 레이어드 디자인: 기본 지도(층) 위에 **오버레이(포토존/정숙/시설)**를 켜고 끄는 구조.
• 접근성 우선: 휠체어·유모차 경로를 기본 제안, 일반 경로는 토글로 제공(14·16편 연계).
• 일관성: 23·24편 표지/정책 문구와 동일한 아이콘·톤으로 통일.
• 오프라인 견고성: QR, PWA 캐시, 인쇄 맵까지 백업 체계를 갖춘다.

2) 정보 구조(데이터 모델·네이밍)

엔티티

• Floor: id, 이름(예: “B1/1F/2F”), 축척, 화살표 기준(북/입구 기준).
• Zone: id, floor_id, 타입(전시/열람/로비/포토존/교육/편의/가족실/출구 등), 이름, 설명, 아이콘.
• POI: id, zone_id, 카테고리(엘리베이터/경사로/화장실/수유실/AED/락커/안내데스크 등), 좌표(x,y), 접근성 속성(a11y: 휠체어 가능/문폭/경사도/자동문 여부).
• Route: id, from(POI/Zone), to(POI/Zone), 경로 다각선, 거리, 계단 수, 경사도, 예상시간, a11y_flag(휠체어 가능), 엘리베이터 의존 여부.
• Overlay: id, 타입(포토존/정숙구역/혼잡주의/임시폐쇄/대관), 유효기간(시작·종료), 관련 문구.

네이밍 규칙

• 짧고 행동형: “포토존 A”, “조용한 구역 2”, “가족 화장실”.
• 다국어 키 병기: name_ko, name_en(24편 정책 페이지와 연동).
• 버전: v1.0식으로 엔티티 단위 버전 필드 저장(23편 사인 버전과 맞춤).

3) 층별 맵 제작 가이드(시각 규격)

• 시야 중심: 입구·엘리베이터·계단·안내데스크를 고대비로 강조, 나머지는 로우 콘트라스트.
• 축척/라벨: 1F는 1:600~1:800, 실내 아이콘은 32–48px 터치 타깃(모바일).
• 색상:
  • 기본 배경: 저채도 라이트/다크 한 가지 테마 고정.
  • 강조: 접근성 경로 = 굵은 실선, 일반 경로는 점선.
  • 구역: 전시/열람/교육/로비를 4색 체계로 고정, 정숙구역은 파란 음영.
• 텍스트: 한글 12–14pt, 영어 11–13pt(모바일 최소), 대비비 4.5:1 이상.
• 아이콘: 23편 픽토그램 세트 재사용(선 굵기·코너 반경 통일).

4) 길찾기 UX(접근성 경로 우선)

• 입력 패턴: (1) 검색창 자동완성(‘수유실’, ‘포토존’) (2) 지도 탭 후 “여기로 가기”.
• 기본 제안: 휠체어/유모차 가능 경로를 기본값으로 제시, 일반 경로는 탭으로 전환.
• 경로 카드: 예상시간·엘리베이터 이용 수·경사도(완만/보통/가파름) 아이콘 표시.
• 정밀 안내: “10m 직진 → 엘리베이터 우측 탑승 → 2F 좌측 15m”와 같은 문장형 턴바이턴 제공.
• 상황 대응: 엘리베이터 점검(임시폐쇄 오버레이) 시 자동 우회 경로.
• 조용한 길: 14편 조용한 시간/구역 데이터를 활용해 소음 회피 경로 옵션 제공.

5) 오버레이 시스템(포토존·정숙·임시)

• 포토존: 포토프레임/삼각대 금지 아이콘 + 대기열 길이(혼잡) 색상점(녹/황/적).
• 정숙구역: 파란 음영 + 이어폰 아이콘, 열람실·특정 전시에 기본 ON.
• 가족/돌봄: 수유실·기저귀 교환대·가족 화장실(16편) 아이콘 클러스터.
• 안전·응급: AED·응급키트(15편) 위치 고정 표시, 클릭 시 사용 안내 카드.
• 임시 오버레이: 대관/공사/점검 시 기간·영향과 우회 경로 자동 추천(13편).
• 접근성 토글: ‘휠체어·유모차 길만 보기’, ‘계단 포함 허용’ ON/OFF.

 

6) 검색·필터·즐겨찾기

• 카테고리 필터: (전시/열람/포토존/가족/편의/출구/접근성/응급).
• 자주 찾는 곳: 안내데스크, 락커, 화장실, 엘리베이터를 상단 퀵 버튼으로.
• 즐겨찾기: 내 위치→POI 즐겨찾기 별표 저장, 다음 방문에 자동 노출.
• 오류 신고: “위치/명칭 오류 제보” 버튼(21편 설문과 라우팅).

7) 접근성·국제화 UX

• 터치 타깃: 최소 44×44px.
• 확대/고대비: 핀치 줌 허용, 고대비 테마, 글자 크게 보기 토글.
• 스크린리더: POI에는 대체 텍스트(‘엘리베이터 1—문폭 90cm, 자동문’).
• 언어: 한/영 기본, 필요 시 中/日 추가. 긴 텍스트는 접기/펼치기.
• 오디오 가이드 연동: 지도에서 오디오 가이드 지점에 이어폰 아이콘, 스크립트/자막 페이지 링크(14·24편).

8) 오프라인·현장 연동(백업 필수)

• QR 네트워크 의존 최소화: PWA(간이 앱)로 층별 타일/POI JSON을 로컬 캐시.
• 인쇄 맵: A3 한 장에 층 요약 + 접근성 경로 굵게 표기, 색각 이상 대응을 위해 패턴 라인 병행.
• 데스크 키트: ‘길찾기 카드’ 6장 세트(엘리베이터/경사로/수유실/가족실/락커/포토존).
• 사인 연동: 23편 표지 하단 QR → 해당 구역이 하이라이트된 지도로 딥링크.
• 정전/서버 장애: PDF 캐시와 오프라인 전화 내선을 인쇄 맵에 병기.

9) 콘텐츠 운영·버전관리

• 변경 트리거: 대관 일정, 임시 폐쇄, 포토존 이동, 조용한 시간 변경(14·13편).
• 승인 흐름: 에디터 수정 → 리뷰어(접근성/안전 체크) → 퍼블리시(버전 증가).
• 필수 메타: updated_at, updated_by, change_note, version.
• 감사 추적: 과거 버전 재현 가능(22편 대시보드에서 히트맵과 함께 비교).

10) 분석·대시보드·KPI

이벤트 스키마(최소)

• map_open, search(query), filter_apply(category), route_start(from,to,a11y), route_arrive(success, duration), overlay_toggle(type), error_reported(kind).

핵심 지표

• 길찾기 성공률(%): route_arrive.success / route_start.
• 평균 길찾기 시간(초): route_arrive.duration 평균.
• 접근성 경로 사용률(%): route_start(a11y=true) / route_start.
• 포토존 분산효과: 포토존 이용률↑ vs 촬영 민원/천 명↓(23·24편 연계).
• 정숙 민원 변화: 정숙 오버레이 도입 후 열람실 민원/천 명 변화(7·23편).
• 에러 제보 처리시간: 제보→수정 퍼블리시 리드타임.

11) 템플릿(복붙용)

A) POI JSON 스키마(요약)

 

{ "id": "poi_elev_1", "floor": "1F", "name_ko": "엘리베이터 1", "name_en": "Elevator 1", "category": "elevator", "coord": {"x": 342, "y": 118}, "a11y": {"width_cm": 90, "auto_door": true, "slope": 0}, "notes": "로비 오른쪽, 포토존 A 인접" }

 

B) Route 오브젝트(요약)

 

{ "id": "r_entrance_to_nursing", "from": "poi_entrance", "to": "poi_nursing", "polyline": [[120,80],[200,80],[200,160]], "distance_m": 85, "stairs": 0, "elevators": 1, "a11y": true, "eta_sec": 120 }

C) 턴바이턴 문구 템플릿

• “입구에서 10m 직진 후, 오른쪽 엘리베이터를 타세요.”
• “2층에서 내린 뒤 좌측으로 15m 이동하면 수유실이 있습니다.”
• “혼잡 시 대체 경로를 안내합니다: 정면 경사로 이용.”

D) 인쇄 맵 범례

• 굵은 실선=접근성 경로 / 점선=일반 경로 / 파란 음영=정숙 / 카메라 아이콘=포토존 / ♥=AED.

12) A/B 테스트 아이디어

• 포토존 화살표 크기(23편 가설) → 촬영 민원/천 명 변화.
• 접근성 기본값 ON/OFF → 길찾기 성공률·이탈률.
• 정숙구역 음영 농도 → 열람실 민원 변화.
• 검색 자동완성 추천어(‘수유실’ 상위 노출) → 탐색 시간 단축.

13) 운영 스크립트(현장 안내 멘트)

• “휠체어·유모차 경로가 기본으로 안내됩니다. 필요하면 계단 포함으로 바꿀 수 있어요.”
• “포토존까지 1분 거리입니다. 화살표를 따라가 주세요.”
• “열람실은 정숙 구역입니다. 지도에서 파란 영역을 참고하세요.”

14) FAQ

Q1. 실내 GPS가 없어 위치가 부정확합니다.
A. 존 기반(로비/전시/열람) 안내로 충분합니다. 코너·엘리베이터 등 랜드마크 턴바이턴에 집중하세요.

Q2. 맵이 너무 복잡합니다.
A. 오버레이 OFF가 기본이고, 필요한 것만 켜도록 합니다. 즐겨찾기·퀵 버튼으로 자주 쓰는 기능을 끌어올리세요.

Q3. 접근성 경로가 돌아갑니다.
A. 안전·문폭·경사도가 우선입니다. 일반 경로 토글을 제공하되, 기본값은 a11y로 두세요(14·16편).

Q4. 오프라인 환경에서 QR이 작동하지 않으면?
A. 인쇄 맵 + 데스크 카드 + PWA 캐시 3중 백업을 유지하세요.

Q5. 외부 대관 때 동선이 바뀝니다.
A. 임시 오버레이로 기간·영향을 노출하고, 우회 경로 자동 제안을 설정하세요(13편).

 

근거/참고

• 문화시설 내비게이션의 일반 원칙: 층별 지도 + 오버레이 + 접근성 우선 + 오프라인 백업.
• 실무 관행: 포토존/정숙을 지도에서 시각화하여 촬영·소음 민원 감소, 임시 오버레이로 대관 변동 대응.
• 내부 연계 문서: 14편(접근성·배리어프리), 16편(수유·유아 동반), 23편(표지 시스템), 24편(사이트 정책), 21·22편(데이터·대장).

※ 본 글은 일반 정보 제공이며, 구체 사안은 귀 기관 내규와 현장 상황을 우선하세요.