E-STORE 36.5

운영 성과를 만들지 못하던 공공 커머스 플랫폼

E-Store 36.5는 사회적경제 상품을 판매하는 공공 커머스 플랫폼입니다. 약 40억원의 예산이 투입되었지만 입점업체의 66.8%가 매출 0원을 기록하며 플랫폼이 제 역할을 하지 못한다는 지적이 이어졌습니다.

노후화된 UI, 반응형 미지원, 복잡한 탐색 구조가 사용자 이탈을 유발하고 있었고, 디자인 기준 없이 화면이 누적되어 운영 일관성도 확보되지 않은 상태였습니다.

탐색, 구매, 운영 기준이 동시에 흔들리는 구조

기존 서비스는 일반 소비자와 공공기관 조달 인터페이스가 혼재되어 사용성 전문성이 부족했습니다. 상품보다 텍스트 정보가 먼저 눈에 들어오는 메인 홈 구조와 복잡한 GNB·카테고리 구조로 원하는 상품을 찾기까지 인지 비용이 높았습니다.

• 문제 1
  비효율적인 탐색 구조 — 복잡한 GNB와 카테고리 구조로 원하는 상품을 찾기까지 인지 비용이 높고, 탐색 단계 이탈 가능성이 컸습니다.
• 문제 2
  구매 전환 저하 — 상품 상세부터 장바구니, 결제까지 이어지는 플로우에서 정보 과부하와 불명확한 레이아웃이 구매 완료를 방해했습니다.
• 문제 3
  디자인 기준 부재 — 컴포넌트, 컬러, 레이아웃 규칙이 정의되지 않아 운영 과정에서 일관성을 유지하기 어려웠습니다.

상품 발견부터 구매까지, 어떤 기기에서도 쉽게 이어지게

탐색 구조가 복잡하면 사용자는 상품을 발견하기 전에 이탈하고, 구매 플로우가 불친절하면 발견한 상품도 구매로 이어지지 않습니다. 따라서 탐색 효율 향상과 구매 전환 개선을 동시에 해결하는 방향으로 설계 전략을 수립했습니다.

• 탐색
  메인 홈 콘텐츠 위계를 재정의하고 카테고리 구조를 명확히 해 상품 도달률을 높이는 구조를 설계했습니다.
• 검색
  자동완성, 인기 검색어, 카테고리 탭 분리로 사용자가 원하는 결과에 더 빠르게 접근하도록 검색 효율을 높였습니다.
• 시스템
  PC·MO 파운데이션을 먼저 정의해 운영 일관성을 확보하고, 화면마다 기준을 새로 잡는 비용을 줄였습니다.

디자인 시스템 기반 전 화면 재설계

구축된 파운데이션을 기반으로 메인 홈부터 결제, 회원가입, 모바일까지 일관된 기준으로 전 화면을 설계했습니다. 시스템이 먼저 정의되어 있었기 때문에 화면마다 기준을 새로 잡는 대신 설계 자체에 집중할 수 있었고, 컴포넌트 재사용으로 일관성과 작업 속도를 함께 확보했습니다.

운영 가능성을 기준으로 설계한 디자인 시스템

UI 디자인 작업에 앞서 시스템을 먼저 정의했습니다. 추후 B2G 화면 확장 가능성을 고려했을 때 기준 없이 화면이 쌓이면 재작업 비용이 커진다고 판단했기 때문입니다. 공공기관 플랫폼 특성과 주 사용 연령층을 고려해 시각적 완성도보다 접근성과 운영 기준을 우선했습니다.

컴포넌트 시스템이 실제 화면에서 작동하는 방식

회원가입은 구매 전환 직전의 마지막 관문입니다. 정의한 컴포넌트와 레이아웃 기준을 기반으로 유형 선택부터 정보 입력까지 전 단계를 재설계했습니다.

• Point 01
  회원 유형 선택 구조 개선 — 카드 리스트 컴포넌트와 툴팁 안내로 유형별 대상을 명확히 전달해 잘못된 선택으로 인한 단계 지연을 줄였습니다.
• Point 02
  약관 UX 간소화 — 필수·선택 구분이 불명확했던 전문 텍스트를 상세보기 팝업으로 분리하고 전체 동의 체크박스를 도입했습니다.
• Point 03
  정보 입력 화면 밀도 개선 — 필수 항목 중심으로 정리하고 여백을 강하게 적용해 친절하고 쉽게 진행되는 화면으로 개선했습니다.

움직임까지 정의한 모바일 경험 가이드

화면 설계만으로는 모바일 경험을 완성할 수 없다고 판단했습니다. MO 파운데이션과 인터랙션 가이드를 기반으로 홈, 카테고리, 상품 상세까지 모바일 전 화면을 재설계하고 퍼블리셔가 해석에 따라 다르게 구현하지 않도록 인터랙션 규칙을 문서화했습니다.

결과 및 회고