B1 · E-mart · 2021

Store Digital Map

매장 디지털맵 구축

매장 직원의 반복적인 상품 위치 안내 업무를 줄이기 위해, 매장 공간 정보와 상품 데이터를 연결한 2D·3D 디지털맵을 설계하고 이마트 앱에 상용화했습니다.

30%+

직원 업무 중 상품 위치 안내 비중

2D · 3D

React Three Fiber 지도

App

이마트 앱 상용화

그룹사 DT 홍보영상 — 이마트 점포의 디지털화를 향한 한 걸음

01 Problem

매장 현업 인터뷰에서 고객의 상품 위치 문의와 안내가 직원 전체 업무의 30% 이상을 차지한다는 사실을 확인했습니다.

고객이 상품 위치를 직접 찾을 수 있게 하면 직원의 반복 업무를 줄이고 쇼핑 편의성도 높일 수 있었습니다.

층별 매장지도를 디지털화하고, 상품 정보와 매장 진열 구역을 연결해 검색하면 지도에서 위치를 확인하는 서비스를 기획했습니다.

01매장지도 벡터화와 관리 환경
층별 매장지도를 벡터 데이터로 전환하고, Fabric.js로 관리자가 매대와 카테고리별 위치를 직접 배치·편집하는 환경을 만들었습니다.
02카테고리 기반 위치 매핑
상품마다 좌표를 등록하는 대신, 지도에 카테고리별 진열 위치를 배치하고 기존 상품 데이터의 카테고리와 매핑했습니다.
상품을 검색하면 카테고리를 기준으로 진열 구역을 조회해 지도에 표시합니다. 기존 데이터를 재사용해 상품별 위치 관리 부담을 없앴습니다.
032D·3D 시각화와 영역 분리
React Three Fiber로 2D·3D 지도를 구현했습니다. 지도 관리, 위치 검색, 고객 화면을 API로 분리해 각 영역을 독립적으로 바꿀 수 있게 했습니다.
04Flutter 프로토타입에서 앱 상용화까지
Flutter 프로토타입을 직접 만들어 기획팀과 사용자 흐름을 검증한 뒤, 이마트 앱에 탑재해 상용화했습니다.
오프라인 매장 업무를 디지털로 전환한 사례로 그룹사 DT 홍보영상에 소개되었습니다.

층별 매장지도

Vector 변환

Fabric.js Admin

카테고리 ↔ 진열 구역

Mapping

Search API

FastAPI · Go

React Three Fiber

2D · 3D

이마트 앱

지도 관리 · 위치 검색 · 고객 화면을 API로 분리했습니다.