팔림 쇼핑몰 관리자 화면 설계
주문 214건을 상태별로 나눠 밀린 것부터 처리하게 만드는 쇼핑몰 관리자 시안. 폰에서도 주문을 처리할 수 있게 설계했습니다
- 제작 범위
- 관리자 화면 설계UI 시안반응형 대응 설계시안 뷰어 제작
- 사용 기술
- PC·모바일 짝 구성기기 목업 제작자동 넘김WebPHTMLCSS
실제 화면
그림이 아니라 실제로 동작하는 화면입니다. 여기서 바로 만져 보실 수 있습니다.
위 화면은 그림이 아니라 실제로 동작하는 화면입니다. 눌러서 직접 만져 보세요.
가상의 의류 쇼핑몰입니다. 하루 주문 87건을 대표 혼자 처리하는데, 어디까지 처리했는지를 기억으로 관리한다고 가정했습니다.
※ 팔림 PALLIM은(는) 실제 존재하지 않는 가상의 브랜드입니다. 노바센트가 직접 기획하고 제작한 데모 화면이며, 페이지에 적힌 수치와 사업자 정보 또한 예시입니다.
프로젝트 목표
오늘 처리해야 할 것이 몇 건인지를 화면을 켜자마자 알게 하는 것입니다.
문제점
쇼핑몰 관리자는 대부분 주문을 한 목록에 다 쏟아붓습니다. 214건이 한 줄로 늘어서 있으면 어디서부터 손대야 할지 알 수 없고, 결국 놓친 주문이 생깁니다.
해결 방법
주문을 상태로 나눴습니다 — 입금대기 6 · 결제완료 12 · 배송준비 8 · 배송중 41 · 배송완료 140 · 취소·환불 7. 합이 정확히 214입니다. 대표가 손댈 것은 앞의 세 개뿐이고, 나머지는 굴러가는 중입니다.
왜 이렇게 디자인했나
화면의 모든 요소에는 이유가 있습니다. 이 프로젝트에서 내린 판단과 그 근거를 그대로 적었습니다.
- 01
탭 숫자의 합을 전체와 맞췄습니다
사소해 보이지만 이게 신뢰의 전부입니다. 상태별 숫자를 더했을 때 전체 건수와 1이라도 어긋나면, 그 화면의 모든 숫자를 의심하게 됩니다. 6+12+8+41+140+7 = 214. 시안 단계에서부터 맞춰 뒀습니다.
- 02
처리할 것과 굴러가는 것을 갈랐습니다
배송중 41건과 배송완료 140건은 대표가 아무것도 할 일이 없습니다. 손댈 것은 입금대기 · 결제완료 · 배송준비 26건뿐입니다. 탭 순서를 그 순서로 놓아 왼쪽부터가 곧 할 일 순서가 되게 했습니다.
- 03
체크박스와 일괄 처리를 넣었습니다
주문 처리는 하나씩 누르는 일이 아니라 "오늘 것 한꺼번에" 누르는 일입니다. 여러 건을 고르면 "선택 2건" 이 아래에 뜨고 일괄 처리 버튼이 살아납니다. 몇 건을 골랐는지 늘 보이게 해서 잘못 누르는 것을 막았습니다.
- 04
폰에서는 표를 카드로 바꿨습니다
관리자 화면의 표를 폰에서 그대로 줄이면 글자가 읽히지 않습니다. 한 줄을 카드 하나로 바꿔 주문번호 · 상품 사진 · 주문자 · 금액 · 상태를 세로로 쌓았습니다. 체크박스는 카드 왼쪽에 남겨 일괄 처리를 폰에서도 할 수 있게 했습니다.
- 05
상품 등록에 미리보기를 붙였습니다
등록 화면 오른쪽에 "고객 화면 미리보기" 를 붙였습니다. 판매가와 할인가를 넣으면 손님에게 어떻게 보이는지가 옆에서 바로 바뀝니다. 등록하고 나서 확인하러 가는 왕복이 없어집니다.
- 06
정산에서 수수료를 먼저 밝혔습니다
정산 화면 아래에 "결제 수수료 3.2% + 부가세, 배송완료 후 7영업일" 을 고정으로 적었습니다. 정산 금액이 예상과 다를 때 사장님이 가장 먼저 찾는 정보입니다. 숨기면 문의가 오고, 먼저 적으면 문의가 오지 않습니다.
주요 기능
- PC 5장 + 모바일 5장을 원본 그대로 게시 (다시 그린 픽셀 0개)
- 대시보드 · 주문 관리 · 상품 등록 · 매출 통계 · 정산 · 쿠폰
- 주문을 상태 6종으로 분리하고 합계를 전체 건수와 일치
- 체크박스 일괄 처리 · 선택 건수 상시 표시
- 폰에서는 표 한 줄을 카드 하나로 재구성
- 상품 등록 옆에 고객 화면 미리보기 배치
프로젝트 결과
"주문이 몇 건 들어왔나" 가 아니라 "지금 내가 손댈 것이 몇 건인가" 를 첫 화면의 질문으로 바꿨습니다. 214건 중 26건으로 좁히는 것이 이 화면이 하는 일의 전부입니다.
