Smart Cargo Monitoring System

Work: 대량 수출입 트래킹 데이터를 ‘읽히는 화면’으로 구조화해, 핵심 관리 UI를 0→1로 설계·구현; 2018 - 2019

Role: UX Planning(100%)ㆍUI Design(100%)ㆍPublishing(100%)

Platform: WebㆍMobileㆍResponsive

Summary

실시간 화물·선박 트래킹을 위한 통합 모니터링 UI를 0→1로 설계·구현

화물과 선박의 이동 경로를 실시간으로 리스트와 지도에서 직접 보여줌으로써

화물의 현재 위치와 딜레이 상황등을 예측할 수 있는 실시간 트래킹 서비스인 쉽고는,

현재 위치와 ETA/지연 상황을 빠르게 파악할 수 있도록 화면 구조를 설계·구현하는 것에 중점을 두었으며,

대량 데이터를 다루는 환경에서도 복잡도가 드러나지 않게 UI 구조를 단순화했습니다.

엑셀 그리드 기반 입력 구조로 정보가 자동으로 매핑되도록 구성해 초기 세팅 시간을 줄였으며,

리스트와 지도에서 동시에 데이터를 확인할 수 있도록 연결했습니다.

[KRPUS] Busan

[JPOSA] Osaka

Internal & User Research

🤦‍♂️

박OO
CEO

서비스 기획

"정보를 최대한 심플하게 보여줄 수 없을까요?"
ㆍ사용자가 가장 익숙한 방식이면 좋겠어요.
ㆍ입력 과정이 너무 복잡하면 사용하지 않을 것 같아요.

🙋‍♂️

구OO
기획팀

시스템 기획

"데이터가 많아도 화면은 깔끔했으면 해요."
ㆍ화면이 복잡하지 않게 핵심만 잡아주는 구조가 필요해요.
ㆍ운항 스케줄과 통관을 어떻게 보여줘야 할지 모르겠어요.

💁‍♂️

정OO
영업팀

영업/제휴 담당

"입력할게 많으면 사용자들이 사용을 안할 것 같아요."
ㆍ기존 엑셀 데이터를 다시 옮기는 건 부담이에요.
ㆍ운항 스케줄과 선박 위치를 한눈에 볼 수 있으면 좋겠어요.

💁‍♂️

김OO
포워더

운영 담당
트레드링스 사용자

"오늘 확인해야 할 건만 빠르게 걸러보고 싶어요."
ㆍ지연 나는 건이 있으면 먼저 보였으면 좋겠어요.
ㆍ상세까지 안 들어가도 중요한 정보는 리스트에서 보이면 좋아요.

💁‍♂️

이OO
포워더

수출입 담당
트레드링스 사용자

"매번 선사 사이트 들어가서 찾는 게 제일 귀찮아요."
ㆍ링크도 다르고, 화면도 다 달라서 헷갈려요.
ㆍ한 번에 모아서 보여주면 진짜 편할 것 같아요.

💁‍♂️

최OO
포워더

수출입 담당
트레드링스 사용자

"급할 때는 결국 전화부터 하게 돼요."
ㆍ지금 상황이 ‘정상인지’만 알아도 판단이 빨라져요.
ㆍ해당 선박 홈페이지에도 업데이트가 늦거나 누락되면 바로 사고 나요.

Pain Points & Approach

Pain Points
Approach

엑셀로 관리되던 데이터를 다시 입력하기엔 사용자 부담이 큼.
엑셀 복사/붙여넣기가 가능한 그리드 입력 방식을 적용해, 한 번에 데이터 등록이 가능하도록 구성.

선박 정보를 하나씩 입력해야 해 초기 세팅이 오래 걸림.
필수 정보 1~3개만 입력하면 나머지 데이터가 자동 생성되도록 흐름을 단순화.

선박 일정과 현재 위치를 한 화면에서 함께 확인하기 어려움.
리스트 + 지도 기반 화면 구조로 재구성해, 일정/위치를 동시에 비교할 수 있도록 설계.

텍스트가 과밀해 사용자가 핵심 정보에 집중하기 어려움.
여백과 대비를 적극 활용하고, 중요한 텍스트만 강조해 시각적 우선순위를 명확히 설정.

첫 화면에 정보가 과도하게 노출되어 화면이 빠르게 복잡해짐.
초기 화면은 핵심 정보만 노출하고, 상세 데이터는 그리드/디테일 화면에서 단계적으로 확인하도록 구성.

지도 위 레이어 팝업이 시야를 가려 조작과 확인이 불편함.
팝업을 드래그 가능한 레이어로 변경해, 지도를 보면서 동시에 정보를 확인할 수 있도록 개선.

IA & User Flow

화면은 단순하게 유지하고, 데이터는 ‘필요할 때만 깊게’ 확인하도록 구조화

복잡한 운항 데이터를 한 화면에서 처리할 수 있도록 핵심 동선을 ‘운항 디테일’로 단일화하고

등록·조회·설정 기능을 역할별로 분리해 화면을 단순하게 유지했습니다.

등록된 선박 혹은 선적이 없습니다.

추적이 필요한 선박과 선적을 등록해보세요.
운항 로그, 현재 위치, 출, 도착 시간 등의 다양한 상태를
실시간으로 편리하게 확인하실 수 있습니다.

Icon Fonts

더 쉽고 빠르게 사용 가능하도록, 모든 아이콘은 폰트로 제작

이미지가 깨지거나 흐려지는 것을 방지하고, 반응형에 대응하기 쉽고 편하도록

모든 아이콘은 폰트로 제작하여 font-size로 조절할 수 있도록

가이드를 제공하였습니다.

icon-manual
\e900
icon-door
\e902
icon-cargo-ship
\e904
icon-logistics
\e905
icon-order
\e906
icon-stored
\e90a
icon-ship2
\e90b
icon-airport-tower
\e90d
icon-airplane-front
\e90e
icon-delivery-truck
\e90f
icon-lcl-train
\e910
icon-container
\e911
icon-earth
\e912
icon-cargo-truck
\e913
icon-lcl-ship
\e914
icon-air-line
\e915
icon-truck-line
\e916
icon-box-money
\e917
icon-cargo-shipment
\e919
icon-excel
\e91a

01. Main

등록된 선박, 선적 리스트를 최소한의 정보로만 보여주어 가독성을 높이며,

각 리스트를 클릭하면 가장 중요한 정보인 선박에 대한 정보와

운항 스케줄을 보여줍니다.

02. 선박관리

처음 기본 테이블로 되어있던 리스트 정보들을 사용자들의 피드백을 받으며

복사/붙여넣기 및 엑셀로 관리, 다운이 가능한 엑셀 그리드로 교체하게 되었습니다.

바로 수정이 가능하게 되어, 메뉴 구성도 심플해질 수 있었습니다.

03. 선적관리

선박관리와 마찬가지로, 엑셀 일괄 등록 및 B/L 번호로 선적을 등록할 수 있으며,

등록한 선적은 그리드를 통해 정보 및 현재 상태를 보여줍니다.

자세한 데이터를 볼 수 있는 페이지로 이동되는 텍스트의 경우,

링크임을 알리는 컬러와 라인으로 직관적인 디자인을 제공하였습니다.

04. 운항 디테일

운항 스케줄과, 현재 배의 위치를 지도에서 함께 보여줍니다.

지나온 경로와 현재 배의 위치, 예정 경로의 색을 구분하여 가독성을 높이고,

지도 위의 각 팝업들은 드레그 가능하도록 제작하였습니다.

Port Arrival Departure

Shanghai

2018-01-21

08:00

2018-01-21

09:02

Vladivostok

2018-01-20

10:30

2018-05-20

12:00

Vladivostok Fishery

2018-01-16

11:30

2018-01-16

12:30

Kwangyang

2018-01-15

08:00

2018-01-15

09:00

Busan

2018-01-11

12:00

2018-01-11

13:00

05. 통계

포워더의 요청으로 제작하게 된 통계 페이지로, 원하는 메뉴를 직접 드래그하여

필요한 정보만 간략하게 볼 수 있습니다.

요구 사항을 더 취합하여 구성이 늘어나는 단계였습니다.

필요없는 정보까지 함께 나와서 정리하기가 힘들어요.
메뉴별로 통계를 취합하는데 너무 오래걸려요.
통계를 바로 낼 수는 없을까요?

Mobile Screens

전체 화면을 반응형으로 구현해, 모바일에서도 동일한 흐름으로 사용할 수 있도록 구성했습니다.

주요 화면 예시는 아래에 정리했습니다.

Design Outcomes

복잡한 운항 데이터를 ‘한 화면’에서 빠르게 확인할 수 있도록 0→1로 설계·구현

선사·항차 정보를 여러 채널에서 확인하던 흐름을 하나의 서비스로 통합하고,

리스트·지도·디테일 구조로 핵심 정보만 빠르게 읽히도록 구성했습니다.

정보 밀도 & 가독성

데이터는 많지만 화면은 단순하게 유지하도록 구조를 정리
상태·시간·ETA처럼 중요한 신호만 먼저 읽히게 우선순위를 설계

등록 효율(엑셀 그리드)

엑셀 복사/붙여넣기 기반 입력으로 대량 등록 시간을 단축
최소 입력만으로 선박 정보가 자동 생성되도록 초기 과정을 단순화

리스트·지도 기반 모니터링

리스트와 지도 정보를 연결해 흐름을 끊지 않고 확인 가능하도록 구성
필요한 순간에만 디테일로 깊게 들어가도록 단계 구조를 설계

운항 디테일 중심 동선

주요 메뉴 흐름을 ‘운항 디테일’로 수렴시켜 학습 비용을 낮춤
어디서 들어와도 동일한 기준으로 확인/공유할 수 있도록 정리