Profile
Collaboration Cloud Solutions
- Work
- 짐고 신규 론칭을 위한 브랜드 톤·UI 시스템·핵심 화면을 End-to-End로 설계·구현
- 2022 - 2023
- Role
- UX Planning(90%)ㆍUI Design(90%)ㆍPublishing(100%)
- Platform
- WebㆍMobileㆍResponsive
Summary
수출입 업무의 비효율성을 해결하는 SaaS 협업 클라우드 솔루션
B2B SaaS 형태로 제공되는 짐고는, 물류의 디지털화를 위해 만들어졌으며,
기존 서비스 중인 트레드링스의 물류비 견적, 쉽고 트래킹, 선적관리 서비스 등의 확장판입니다.
수출입 실무자의 업무 흐름과 요구사항을 정리하고, 핵심 시나리오를 기준으로 정보 구조와 화면 구조를 설계했습니다.
주요 패턴을 정의해 일관된 UI로 구성했고, 엑셀 중심 업무를 고려한 입력/관리 방식을 UX에 반영했습니다.
리서치 인사이트를 근거로 화면 우선순위와 인터랙션 원칙을 세워
제품 경험의 기준을 만들었습니다.
Internal & User Research
User Group
Research
🤦♀️
- 정OO
- 기획팀
- 서비스 기획
- "한 화면에 보여줘야 할 정보가 너무 많아요."
- ㆍ화면이 너무 복잡해 보일까 걱정돼요.
- ㆍ연동해야 하는 데이터가 많아서 구조가 헷갈려요.
💁♂️
- 정OO
- 영업팀
- 영업/제휴 담당
- "고객은 데이터를 수치로 한눈에 보고 싶어 해요."
- ㆍ데이터를 하나씩 모아 취합하고 통계를 내는 게 버거워요.
- ㆍ회사별·거래별 현황을 한 화면에서 보기 어려워요.
🙋♂️
- 김OO
- 수출입 기업
- 수출 담당
- 서비스 사용자
- "서류를 그때그때 준비하려면 너무 복잡하고 번거로워요."
- ㆍ업체마다 양식이 달라 매번 새로 작성해야 해서 소모적이에요.
- ㆍ내용 하나만 바꿔도 다시 작성해 보내야 해서 시간이 많이 들어요.
🙋♂️
- 김OO
- 포워더
- 수입 담당
- 서비스 사용자
- "엑셀로 정리해도 데이터를 다시 입력하는 게 너무 번거로워요."
- ㆍ엑셀 사용을 안하는 업체도 있어서 변환하는데 시간이 많이 걸려요.
- ㆍ상황이 수시로 바뀌어서 엑셀을 계속 다시 정리해야 해요.
🤦♂️
- 이OO
- 포워더
- 수입 담당
- 서비스 사용자
- "업무와 개인 시간의 경계가 없어 힘들어요."
- ㆍ개인 메신저로 연락이 오면 퇴근 후에도 답장을 하게 돼요.
- ㆍ여러 화주를 상대하다 보면 메일/메신저가 섞여 연락을 잘못 보내는 경우가 있어요.
Pain Points & Approach
- Pain Points
- Approach
- 한 화면에 많은 정보를 담아야 해서, 핵심을 빠르게 파악하기 어려움.
- 요약(핵심 지표/상태) + 상세(카드/리스트) 구조로, “한눈에 파악 → 필요 시 탐색” 흐름을 설계.
- 목록이 길어질수록 사용자가 정보를 훑고 비교하는 데 시간이 걸림.
- 카드 뷰(탐색)와 리스트/그리드 뷰(스캔·비교)를 함께 제공해 사용 목적에 맞게 선택 가능하도록 구현.
- 정보가 다양한 형태로 섞여 보여, 화면 구조와 우선순위를 잡기 어려움.
- 섹션 헤더, 구획, 여백 규칙을 먼저 정의하고 화면을 그리드로 구성해 정보 위계를 명확히 설계.
- 실무자는 엑셀 중심으로 데이터를 관리하는 경우가 많아, 입력 방식이 끊기면 부담이 큼.
- 엑셀 사용 흐름을 고려해 복사/붙여넣기, 가져오기(Import) 등 빠른 입력 방식을 지원하도록 설계.
- 업체별 서류/양식이 제각각이라 반복 작성 비용이 큼.
- 다양한 서류를 공통 필드 중심으로 표준화하고, 템플릿 기반 작성 흐름을 제공하도록 설계.
- 입력 항목이 많은 업무 페이지는 피로도가 높아 이탈이 발생하기 쉬움.
- 입력 과정은 단계형/부분 노출 방식으로 구성하고, 임시저장·검증 피드백으로 작성 부담을 낮추도록 구현.
- 연락 채널이 외부 메일/메신저로 분산되면 업무 누락·혼선이 생김.
- 기업/거래 단위로 메시지와 알림을 묶어, 커뮤니케이션이 서비스 안에서 정리되도록 설계.
IA & User Flow
주요 업무 시나리오를 구조화하고 화면 흐름으로 구체화
B2B SaaS 형태로 제공되는 짐고는, 물류의 디지털화를 위해 만들어졌으며,
기존 서비스 중인 트레드링스의 물류비 견적, 쉽고 트래킹, 선적관리 서비스 등의 확장판입니다.
Icon Fonts
UI 아이콘을 폰트로 자산화해, 일관된 적용과 규칙으로 적용되도록 구축.
이미지 깨짐/리사이즈 이슈 없는 폰트 기반으로 크기·색상 제어가 가능해 반응형에서도 안정적으로 동작하며,
목록과 규칙을 정리해, 개발에서 바로 사용할 수 있는 형태로 제공했습니다.
ri-file-list-3-line
\ECEF
ri-file-copy-2-line
\ECD3
ri-file-forbid-line
\ECE2
ri-fingerprint-fill
\ED30
ri-refund-2-line
\F066
ri-hand-heart-line
\EDF3
ri-map-pin-line
\EF14
ri-map-pin-user-line
\EF1A
ri-ship-2-line
\F10E
ri-truck-line
\F231
ri-image-2-line
\EE45
ri-image-add-line
\EE47
ri-notification-2-line
\EF92
ri-settings-3-line
\F0E6
ri-more-line
\EF79
ri-more-2-line
\EF77
ri-information-line
\EE59
ri-alert-line
\EA21
ri-checkbox-multiple-blank-line
\EB87
ri-user-line
\F264
ri-user-add-line
\F25E
ri-cloud-line
\EB9D
ri-calculator-line
\EB1F
ri-calendar-event-fill
\EB24
ri-printer-line
\F029
ri-service-line
\F0E2
ri-edit-2-line
\EC80
ri-upload-cloud-2-line
\F24C
ri-download-cloud-2-line
\EC56
ri-delete-bin-5-line
\EC24
Design System
개발자가 바로 사용할 수 있는 웹 기반 디자인 가이드 구축
피그마 참고에 그치지 않고, 코드로 바로 적용 가능한 형태로 가이드를 재구성했습니다.
컴포넌트 규칙 + SCSS 소스 + 코드 예시를 함께 제공해 협업 효율을 높였으며,
팀이 동일한 기준으로 빠르게 개발할 수 있는 기반을 만들었습니다.
01. Dashboard
통계를 필요로 하는 포워더 회사의 요구 사항이 반영된 메뉴 구성으로,
더 많은 요구 사항 취합과 통계 다운로드 등의 메뉴를 추가하는 과정이었습니다.
02. 견적관리
많은 양의 데이터를 한 곳에서 집중하여 볼 수 있는 카드 형태와
스크롤을 최소화하고 싶거나 엑셀에 익숙한 포워더를 위한
리스트 형태로 구성되어 있습니다.
03. 선적관리
견적관리와 같은 구성으로, 엑셀로 데이터를 관리하는 포워더들을 위하여
리스트 형태의 경우 엑셀 그리드로 제작되어 있고,
데이터를 간편하게 복사 붙여넣기 하여 사용 가능하도록 제작하였습니다.
04. Message
개인 메신저 사용을 불편해하는 사용자와 서비스 외부에서의 작업을 최소화하기 위한 채팅 기능으로,
full size, floating, side, 총 3가지의 반응형 사이즈로 제작되었습니다.
05. 서류함
수출입에 필요한 각종 서류들을 생성, 저장할 수 있는 페이지로,
서류 종류의 명확한 구분을 위해 아이콘을 활용하고
많은 정보가 들어있지 않아, 일반적인 리스트 형태로 제작되었습니다.
06. 화물함
화물의 정보를 미리 저장해두고 언제든 사용 가능하도록 만들어진 페이지로
카드 디자인과 리스트 디자인으로 제작되었습니다.
화주의 요청 사항을 더 취합하여 구성이 늘어나는 단계였습니다.
-
거래처 정보도 넣을 수 있을까요? -
화물에 관한 간략한 정보를 적어 둘 공간이 필요해요. -
위험물 서류를 여기서 바로 등록할 수 없을까요? -
등록한 화물 개별이나 전체를 엑셀로 다운 받고 싶어요! -
Mobile Screens
전체 화면을 반응형으로 구현해, 모바일에서도 동일한 흐름으로 사용할 수 있도록 구성했습니다.
주요 화면 예시는 아래에 정리했습니다.
Design Outcomes
복잡한 수출입 데이터의 입력/조회/공유 흐름을 하나의 UX로 정리
기획/개발 협업 과정에서 결정된 기능 범위를 기준으로,
화면 구조와 인터랙션을 구체화하고 퍼블리싱으로 구현했습니다.
정보 밀도 & 가독성
- 정보가 많은 화면을 빠르게 읽을 수 있도록 카드·리스트·그리드 중심으로 정보 밀도와 구획을 정리
- 섹션 구분(배경/그룹/여백)을 명확히 해 데이터가 많아도 시선이 흩어지지 않도록 구성
작성 효율(신규 작성 + 불러오기)
- 템플릿·Drive 연동 기능은 기획 범위를 따르되, 작성 화면에서는 선택/입력 경로가 한눈에 보이도록 컴포넌트 배치와 인터랙션을 설계·구현
- 엑셀에 의존하던 입력 습관을 고려해 리스트·그리드 기반 관리 방식을 유지하면서도 서비스 안에서 처리 가능하도록 설계
커뮤니케이션 통합
- 채팅 영역에 필요한 업무 액션(멘션·파일·서류 요청)을 컴포넌트로 구성하고 퍼블리싱으로 구현해, 화면 전반에서 일관되게 사용할 수 있도록 구성
운영/확장 가능성
- 반복되는 UI를 빠르게 적용할 수 있도록 웹 기반 가이드 형태로 정리하고, 개발자가 복사·확인하며 빠르게 적용 가능한 형태로 정리
- 반복적으로 쓰이는 아이콘을 아이콘 폰트로 자산화해, 일관된 사용성과 구현 효율을 확보