📍 Insideout - AI 기반 실내외 통합 내비게이션 (User Web App)

건물 입구에서 끊기는 길 안내는 그만

Insideout 사용자 웹앱은 상용 실외 지도(위경도 좌표계)와 AI로 구축된 실내 지도(픽셀 위상 그래프)를 유기적으로 연결하여, 외부 도로에서 건물 내부의 최종 목적지(특정 강의실, 매장 등)까지 단절 없는 하이브리드 턴바이턴 길찾기 경험을 제공하는 모바일 최적화 웹 애플리케이션입니다.

👥 팀원 소개 (Contributors)

Insideout 프로젝트를 이끈 양양양말을 소개합니다.

차승은	이민지	김민준	김세현
🔹 Hybrid Navigation 사용자 웹 - BE, FE	🔹 Auth, Search, Infra 사용자 웹 - BE, FE	🔹 AI Map Builder 관리자 웹 - AI, FE	🔹 Map Editor 관리자 웹 - BE, FE

---

🔗 프로덕션 배포 주소 (Live Demo)

본 서비스는 클라우드 환경에 자동 배포되어 운영 중이며, 아래 링크를 통해 별도의 설치 없이 즉시 체험하실 수 있습니다.

• 🌐 Insideout 웹 앱 바로가기: https://insideout-user-web.vercel.app

💡 본 서비스는 모바일 브라우저 환경에 최적화(Mobile-First)되어 있습니다. 브라우저의 개발자 도구(모바일 뷰)로 접속하시면 가장 이상적인 UX를 경험하실 수 있습니다.

---

🛠️ 기술 스택 (Tech Stack)

Frontend Core

UI & UX

Form / Validation

Map / Search / Network

Deployment

📱 서비스 핵심 기능 및 UI 시연 (Key Features & UI)

🔍 1. Elasticsearch 기반 초단위 자동완성 및 오타 보정 검색

글자 하나만 틀려도 결과가 나오지 않던 기존 검색의 한계를 극복했습니다. Elasticsearch를 도입하여 초단위 자동완성뿐만 아니라, '신세계백화점'을 '신세게백화점'으로 검색해도 유연하게 목적지를 찾아내는 고도화된 오타 보정 기능을 지원합니다. 내부에 실내 지도가 구축된 건물은 검색 결과에 등록됨 배지가 직관적으로 표시됩니다.

| 길찾기 검색 및 장소 선택 페이지 |

609581514-c8e8908a-5fef-4d11-8777-433d7b864b6a.mov

---

🗺️ 2. 실외-실내 통합 하이브리드 길찾기

Tmap/Kakao Map API 기반의 실외 도보 경로와 건물 내부 경로 그래프를 관리자가 매핑한 출입구(Entrance Node) 기준으로 결합하여 하나의 연속된 인터랙션으로 제공합니다.

| 실외에서 실내로 이어지는 단절 없는 길찾기 |

2.mov

| 실내에서 실외로 이어지는 단절 없는 길찾기 |

2-2.mov

| 실내에서 실내로 이어지는 단절 없는 길찾기 |

2-3.mov

---

🚌 3. 대중교통 연동 및 다중 경로 옵션

단순 도보 이동뿐만 아니라, 목적지 건물 내부 POI까지 도달하기 위한 최적의 대중교통(지하철, 버스 등) 경로 옵션을 유기적으로 연동하여 하이브리드 내비게이션의 완성도를 높였습니다.

| 멀티모달 대중교통 경로 옵션 화면 |

3.mov

---

⚡ 4. 다층(Multi-floor) 턴바이턴 안내

수직 이동 수단(엘리베이터, 계단 등)을 통과할 때 지도 레이어가 자동으로 해당 층의 도면으로 전환되며, "엘리베이터로 3층 이동"과 같은 인간 친화적인 단계별 안내 문장을 제공합니다. 다익스트라(Dijkstra) 알고리즘 가중치 제어를 통해 계단 이용이 어려운 사용자를 위한 '편안한 길' 및 '최단 거리' 옵션을 지원합니다.

---

🔥 기술적 도전 및 해결 과제 (Technical Challenges)

💡 핵심 요약: 단순 기능 구현을 넘어, 사용자 경험(UX) 저하 요소와 이종 데이터 결합 문제를 아키텍처 및 알고리즘 고도화로 해결한 과정입니다.

1. 오타 보정 검색 엔진 구현 (RDBMS ➔ Elasticsearch)

• 문제: 기존 RDBMS의 LIKE 쿼리는 완벽히 일치하는 텍스트만 파싱하여 '신세게백화점' 같은 모음 오타 시 검색 실패율 급증

구분	AS-IS (기존 방식)	TO-BE (개선 방식)
적용 기술	RDBMS LIKE 검색	Elasticsearch + Nori Tokenizer
핵심 알고리즘	단순 문자열 매칭	퍼지 쿼리 (Fuzzy Query) / 레벤슈타인 거리 계산
UX 결과	오타 입력 시 검색 결과 없음	미세 오타 자동 보정 및 초단위 자동완성 제안

---

2. 이종 좌표계 간 단절 없는 하이브리드 매핑 ($WGS84$ ➔ 픽셀)

• 문제: 실외 지도($\text{WGS84}$ 위경도)와 실내 도면(픽셀 상대 좌표 $X, Y$) 결합 시 뷰포트 급격 전환으로 인한 시각적 단절 발생
• 해결: 건물 출입구(Entrance Node)를 두 좌표계가 만나는 **최적의 앵커(Anchor)**로 정의했습니다. 유저가 진입하는 순간 Kakao Map 오버레이 위에 실내 SVG 레이어를 자연스럽게 페이드인(Fade-in) 형태로 중첩 렌더링하여 이질감을 원천 차단했습니다.

---

3. 모바일 웹 환경에서의 고부하 지도 UI 성능 최적화

• 문제: 대용량 도면 이미지, 수많은 POI 마커, 경로선(Polyline) 동시 로드로 인한 프레임 드랍
• 해결: 전체 층 데이터를 메모리에 상시 로드하지 않고 현재 활성화된 층(selectedFloorId) 리소스만 조건부 렌더링(Conditional Rendering) 처리했습니다. 또한 바텀시트 드래그 시 실시간 좌표 연산을 Framer Motion의 GPU 하드웨어 가속 기법으로 이관하여 끊김 없는 인터랙션을 구현했습니다.

---

4. 일관된 Place ID 파이프라인 구축을 통한 데이터 정합성 확보

• 문제: 진입 경로(검색, 지도 직접 터치, 상세 페이지) 마다 장소 데이터 형식이 파편화되어 경로 탐색 오류 가능성 존재
• 해결: Search, Nearest, Detail API가 프론트엔드에 응답할 때 반드시 동일한 구조의 고유 식별자(placeId, poiId) 메타데이터를 공유하도록 **백엔드 파이프라인 데이터 포맷을 단일화(Normalization)**하여 상태 관리의 정합성을 맞추었습니다.

---

5. 모바일 최적화 레이아웃 (가로 375px 고정 / 세로 반응형)

• 문제: 일반 웹 구조는 모바일에서 UI가 깨지고 터치 영역이 작아 가독성 저하
• 해결: 최대 너비를 가로 375px로 고정해 한 손 조작에 최적화하고, 세로는 기기 높이에 맞춘 **반응형(Flexbox)**으로 설계하여 모바일 환경에서 네이티브 앱과 유사한 몰입감을 제공합니다.

---

6. 네이티브 앱 대신 '웹앱(Web App)'을 채택한 이유

• 문제: "강의실/매장 하나 찾으려고 스토어에서 앱을 다운로드해야 한다"는 높은 유저 이탈 장벽

구분	네이티브 앱 (App)	Insideout 웹앱 (Web App)
설치 허들	스토어 검색 및 다운로드 필수 (이탈 유발)	다운로드 없음 (QR 스캔, 링크 클릭 즉시 실행)
접근성	OS 종속적 (iOS/Android 별도 개발)	기기/OS 상관없이 URL 하나로 3초 만에 진입

• 결론: 건물 앞에서 기다림 없이 **3초 만에 즉시 길 안내를 받는 경험(Zero-Install)**을 위해 웹앱 아키텍처를 선택하여 사용자 진입 장벽을 완전히 제거했습니다.