AIR PLATFORM / MAP AUTHORING
2026.09 시연 · 개선 진행 중Map Studio NX
실내 지도를 직접 편집하고,
길안내 서비스까지 연결하는 도구
현장에서 지도 서비스를 개발하며 겪은 반복 작업과 배치 실수를 줄이기 위해 제작 도구를 만들었습니다. 화면과 데이터 구조부터 편집, 유효성 검사, 길찾기, 공통 지도 모듈과 서비스 연동까지 단독으로 설계·개발했습니다.
- 프로젝트
- 실내 지도 제작 도구 리뉴얼
- 담당
- 전 과정 단독 설계·개발
- 주요 범위
- 지도 편집 · 검증 · 길안내 연계
01 / BACKGROUND
일부 수정에도 원본 도면을
다시 작업해야 했습니다
기존 키오스크용 PNG 도면은 확대하면 흐려지고, 매장 하나를 바꾸더라도 디자이너의 원본 수정이 필요했습니다. 현장 상황이 바뀔 때마다 도면 이미지를 수정하고 교체해야 했고, 변경이 쌓일수록 이미지 버전을 관리하는 일도 번거로워졌습니다.
한 장의 이미지로 관리
매장과 시설을 개별 객체로 다루기 어려워, 현장 변경 사항을 반영할 때마다 이미지 교체와 버전 관리가 필요했습니다.
객체와 데이터로 관리
구조물과 매장 데이터를 1:1로 연결해 직접 수정하고, 확대 품질을 유지하며 여러 서비스에서 재사용합니다.
- 01
구성
건물과 층, 편집 영역 설정
- 02
편집
매장·구조물·경로 데이터 연결
- 03
검증
연결 오류와 사용자 화면 확인
- 04
발행
공통 지도 데이터로 서비스 적용
02 / 실수를 줄이는 검증
오류를 발견한 자리에서
수정 작업으로 이어지도록
매장이 다른 건물에 배치되거나 경로가 끊겨 있어도 도면만 보면 놓치기 쉽습니다. 현장에서 확인하던 문제를 제작 단계에서 점검할 수 있도록 검사 규칙과 수정 흐름을 만들었습니다.
실제 길찾기와 같은 기준으로 검사
서비스에서 사용하는 길찾기 함수를 재사용해 건물·층별 대표 복도 지점에서 매장까지 도달 가능한지 확인합니다. 연결통로와 층간 이동을 포함해 경로가 없는 출발·도착 조합을 표시합니다.
필수 수정과 확인할 항목을 구분
건물 영역 불일치와 미완성 연결통로, 경로 실패는 필수 수정으로 분류합니다. 미배치 매장, 미등록 구조물, 오픈·종료 예정은 별도로 확인할 수 있게 했습니다.
검사 결과를 편집 동작으로 연결
‘수정하기’와 ‘확인하기’를 누르면 해당 맵과 편집 도구로 이동합니다. 미배치 목록 필터나 구조물 강조 표시도 함께 적용해 수정 대상을 다시 찾는 작업을 줄였습니다.
검사 목록을 확인하고, 해당 맵에서 수정한 뒤 다시 검사하는 흐름을 하나의 도구 안에 구성했습니다.
길찾기 검사구현 과정 펼치기구현 과정 접기
대표 복도 지점에서
각 매장까지 도달할 수 있는지
선이 이어져 보이는지만 확인하면 실제 길찾기와 판정이 달라질 수 있습니다. 현재 편집 데이터로 경로 데이터를 구성하고, 서비스에서 사용하는 findRoute 함수로 도달 여부를 확인합니다.
- 01
출발점 선정
각 맵의 건물 영역마다 중심에 가까운 복도 노드를 대표 출발점으로 선택합니다. 노드가 없으면 건물 단위 오류로 표시합니다.
- 02
매장별 경로 계산
대표 출발점에서 배치된 매장들을 목적지로 검사합니다. 같은 맵뿐 아니라 다른 건물과 층으로 이어지는 경로도 계산합니다.
- 03
실패 조합 표시
경로가 있거나 이동수단 선택이 가능하면 도달 가능한 것으로 봅니다. 실패하면 출발 위치, 도착 매장과 실패 사유를 결과에 남깁니다.
층마다 다른 좌표 기준도 맞추기
검사 전에 각 층 SVG의 좌표 범위를 경로 엔진에 등록합니다. 편집 화면 좌표와 도면 좌표의 차이 때문에 이동시설과 복도가 연결되지 않는 것으로 판정되는 상황을 방지하기 위한 처리입니다.
현장에서 놓치기 쉬운 항목을 규칙으로
| 항목 | 분류 | 확인하는 내용 |
|---|---|---|
| 건물 영역 불일치 | 필수 수정 | 매장·편의시설·이동시설의 위치와 소속 건물 영역이 어긋난 경우 |
| 연결통로 미완성 | 필수 수정 | 연결에 필요한 끝점이 부족해 건물 사이 이동이 성립하지 않는 경우 |
| 경로 노드 없음 | 필수 수정 | 건물 영역에 출발점으로 사용할 경로 노드가 없는 경우 |
| 매장까지 경로 없음 | 필수 수정 | 대표 복도 지점에서 매장까지 실제 경로 계산이 실패한 경우 |
| 미배치·미등록 | 확인 | 배치하지 않은 매장이나 매장 데이터가 연결되지 않은 구조물 |
| 매장 운영 일정 | 확인 | 오픈·종료 예정 상태와 구조물에 연결된 매장 스케줄 |
어느 맵, 어느 도구에서
고칠지 다시 찾지 않도록
오류 메시지에 대상 맵과 실행할 편집 동작을 함께 연결했습니다. 항목을 선택하면 모달을 닫고 맵을 전환한 뒤 도구와 필터, 선택 상태를 맞춥니다.
- 미배치 매장
- 해당 맵의 매장 도구를 열고 미배치 필터 적용
- 건물 영역 불일치
- 대상 맵과 매장·편의시설·이동시설 도구로 이동
- 미등록 구조물
- 해당 맵에서 구조물 강조 표시 활성화
- 매장 운영 일정
- 매장 도구를 열고 해당 구조물 선택
- 경로 실패
- 목적지 맵의 노드 도구로 이동해 경로 확인
맵이 준비된 뒤 대상 선택
다른 맵의 구조물을 선택할 때는 도면이 준비된 뒤 선택을 적용합니다. 같은 맵에서도 도구 전환 과정에서 선택이 초기화될 수 있어, 전환 이후 다시 선택하도록 순서를 맞췄습니다.
제작 중 확인하고,
수정한 뒤 다시 검사하는 흐름
공간 데이터의 불일치와 경로 도달 실패를 한곳에서 확인하고 편집 화면으로 이동할 수 있게 했습니다. 노드 반자동 생성이나 수동 편집 이후에도 같은 검사 흐름으로 연결 상태를 확인할 수 있습니다.
도달성 검사는 건물·층별 대표 복도 지점을 기준으로 합니다. 모든 임의 위치와 운영 시간 조합을 전수 검사하는 것은 아니므로, 발행 전 사용자 화면에서 실제 안내 흐름도 함께 확인합니다.
03 / 반복 작업을 줄이는 경로 제작
복도를 따라 그리던 노드를
도형에서 반자동으로 생성
매장 외곽을 따라 노드와 선분을 하나씩 그리는 작업을 줄이기 위해, SVG 바닥과 매장 형상으로 경로 초안을 생성했습니다. 생성 결과는 미리 확인하고 반영하거나 취소할 수 있습니다.
노드 반자동 생성구현 과정 펼치기구현 과정 접기
외곽선을 그대로 복사하면
이동할 수 없는 곳에도 경로가 생깁니다
도형을 따라 선을 만드는 것만으로는 부족했습니다. 매장과 바닥의 형상을 함께 확인하고, 복도 양쪽에서 생긴 중복 경로와 불필요한 노드를 정리해야 편집 가능한 초안이 됩니다.
SVG 형상으로 이동 영역 제한
바닥과 매장 도형을 기준으로 계산합니다. 바닥 밖과 매장 내부를 제외해 경로 생성 범위를 제한합니다.
초안을 먼저 확인
생성 결과는 임시 미리보기 상태로 보관합니다. 반영하면 기존 노드·선분에 추가하고, 취소하면 초안을 버립니다.
격자에서 시작해 편집 가능한 경로로 정리합니다
- 01
이동 가능한 영역
SVG 바닥 영역 안에서 매장 도형을 제외한 격자를 구성합니다. 바닥 형상을 찾지 못하면 지정한 건물 영역을 기준으로 계산합니다.
- 02
외곽을 따라 스냅
매장 외곽을 샘플링하고 통로 방향의 가까운 격자점에 맞춥니다. 근처에 이동 가능한 격자가 없거나 간격이 너무 크면 억지로 연결하지 않습니다.
- 03
겹치는 경로 정리
매장별 결과를 모으고 겹치는 격자 변을 정리합니다. 세선화로 인접한 경로를 한 줄로 줄인 뒤 노드와 선분으로 변환합니다.
- 04
형태와 여백 보정
직선 중간 노드를 줄이고 직각·대각선 형태를 정리합니다. 초기 격자 크기와 별도로 도형과의 여백을 확보하도록 위치를 보정합니다.
격자 간격과 벽면 여백을 따로 다룬 이유
격자는 외곽을 연결하기 위한 초기 기준입니다. 격자를 촘촘하게 바꿔도 경로가 도형에 붙지 않도록, 생성 후 별도 여백 기준으로 보정합니다. 여백은 지도 좌표의 픽셀 기준이며 실제 보행 폭을 보장하는 수치는 아닙니다.
핸드프리 입력에서도
교차와 연결을 다시 정리하지 않도록
도형 기반 생성과 별도로, 직접 그린 경로를 기존 그래프에 합치는 과정도 보완했습니다. 초안 생성과 핸드프리 병합은 서로 다른 처리 흐름입니다.
가까운 끝점 흡수
기존 노드 근처의 끝점을 합칩니다. 선분 가까이에 도착하면 선분을 나누고 T자 연결점을 만듭니다.
교차점을 연결 노드로
X자로 교차한 선분은 교차점에서 분할합니다. 단순히 겹쳐 보이는 선이 실제 그래프에서도 연결되도록 처리합니다.
짧은 가지 정리
끝에 짧게 남은 새 선분을 조건에 따라 제거합니다. 기존 선분과 양 끝이 독립된 선은 제거 대상에서 제외해 의도한 입력을 보호합니다.
초안을 생성하고,
사람이 확인하는 작업 흐름
도형 기반 경로 초안과 반영·취소 기능을 구현했습니다. 생성된 노드와 선분은 기존 편집 도구로 보완하고, 유효성 검사에서 실제 길찾기 가능 여부를 확인할 수 있습니다.
현재는 다양한 지도 형상에서 안정화 중입니다. 바닥 도형의 품질, 좁은 통로, 여백 보정 이후의 연결 상태를 확인해야 합니다. 기존 경로가 있는 지도에서는 반영 결과가 추가되므로 중복 여부도 확인합니다.
04 / 편집 정확도와 지도 표현
같은 지도에 표현을 더하고,
편집은 익숙한 평면에서
Flat·Soft·2.5D 테마와 색상 설정으로 지도의 표현을 바꿀 수 있습니다. 테마 메뉴에서 입체 표현을 미리 보고, 다른 도구에서는 원본 SVG로 편집하도록 구성했습니다.
표현과 편집구현 과정 펼치기구현 과정 접기
매장명과 로고를 각각 조절
매장 로고를 구조물 위에 워터마크로 표시하고, 텍스트와 위치·크기를 따로 조절할 수 있도록 했습니다. 구조물 크기에 따른 매장명 줄바꿈과 폰트 설정도 지원합니다.
편집 실수는 실행 취소로 복구
맵을 전환한 뒤에도 이전 작업을 되돌릴 수 있도록 좌표와 편집 상태를 관리합니다. 드래그 한 번을 실행 취소 한 단계로 묶어 작업 단위로 복구할 수 있게 했습니다.
시설과 주차 정보는 반복 입력 축소
이동시설 배치 시 층간 연결용 코드를 자동 생성하고, 여러 주차 위치의 코드를 한 번에 등록하도록 구성했습니다.
05 / EDITOR TO SERVICE
한 번 발행한 지도를 여러 화면에서 사용합니다
공통 지도 모듈이 같은 데이터와 길찾기 기능을 제공합니다. 키오스크에서는 층별 안내와 매장 검색으로, 모바일웹에서는 지도와 길안내로 이어집니다.
공통 지도 모듈과 API구현 과정 펼치기구현 과정 접기
공통 지도 모듈과 API
지도 초기화와 층 전환, 현재 위치 설정, 매장 이동, 실내 경로 탐색을 공통 API로 제공합니다. 외부 서비스에서도 같은 호출 기준으로 지도 기능을 연결할 수 있습니다.
연동 기준을 담은 API 명세서 작성
모듈 개발과 함께 SmartMap API 명세서를 작성했습니다. 모듈 구성과 초기화·호출 순서, API별 인자와 이벤트, 실패 사유, 키오스크 연동 예제를 정리해 다른 서비스에서도 문서를 기준으로 지도 기능을 연결할 수 있도록 했습니다.
06 / WAYFINDING DEMO
길안내 데모
길안내 문장 선택구현 과정 펼치기구현 과정 접기
랜드마크 → 통로 → 거리 순으로 안내
경로의 각도와 거리만 읽으면 회전 지점을 현장의 공간과 연결하기 어렵습니다. 경로의 꺾임을 찾고, 접근 방향에서 보이는 시설과 매장을 먼저 선택합니다. 주변에 대상이 없으면 통로 끝과 갈림길을, 마지막으로 거리를 사용합니다.
회전점 주변에서 기준을 고르는 조건
- 같은 건물 안에서 회전점 기준 약 2–8m 범위의 대상을 찾습니다.
- 다가오는 방향에서 보이는 대상 중 정면 → 옆 → 직후 순서로 선택합니다.
- 같은 종류라면 회전점에 더 가까운 대상을 고릅니다.
- 편의시설을 기본으로 하고, 매장은 더 좋은 위치이거나 0.8m 이상 가까울 때 우선합니다.
안내 문장으로 연결
“정면의 화장실 앞에서 왼쪽으로 도세요.”, “오른쪽 안내데스크 옆 통로로 도세요.”처럼 보이는 대상을 기준으로 말합니다. 기준을 찾지 못하면 “약 20m 직진한 뒤 오른쪽으로 도세요.”처럼 거리로 안내합니다. 엘리베이터·에스컬레이터 이동과 도착 안내도 같은 흐름에 포함합니다.
NEXT / 확장 계획
다양한 지도에서 안정화하고,
실외 위치와의 연결을 검토합니다
현재 범위는 실내 지도 제작·검증·길찾기입니다. 앞으로 다양한 지도에서 기능을 테스트하고, 선택한 매장군의 강조·노출 제어를 보완할 계획입니다. GPS와 시설 좌표 매칭, 외부 지도 API 및 GeoJSON 연계는 향후 검토 범위입니다.