Portfolio · Design Work

쇼핑의 마찰을
디자인으로 지운다

모던 이커머스 플랫폼은 첫 방문부터 결제까지 마찰 없는 경험을 목표로 설계한 UX 중심 디자인 시스템입니다.

UI/UXDesign SystemFigma접근성반응형
기획 · 설계 단계
shop.example.com
ShopNewSale🛒
NEW ARRIVAL · SPRING

오늘만 30% 할인

SHOP NOW →
Linen Shirt
₩58,000
Denim Jacket
₩124,000
Canvas Bag
₩38,000
Problem · Solution

왜 이 디자인이 필요한가

이커머스의 이탈은 대부분 "어디에 뭐가 있는지 모르겠다"에서 시작합니다. 정보 구조와 인터랙션을 다시 설계합니다.

!현재의 문제

  • 카테고리 깊이가 3단계를 넘어 탐색 피로도 증가
  • 상품 비교·위시리스트 기능이 숨어 있음
  • 모바일 결제 단계가 5단계 이상
  • 접근성 지침(WCAG 2.2) 미준수

이 프로젝트의 접근

  • 정보 구조 재설계로 2단계 탐색 구조 달성
  • 원탭 위시리스트·비교 패널 고정 배치
  • 모바일 결제 2단계 압축 + 게스트 체크아웃
  • WCAG 2.2 AA 수준 대비·키보드 포커스 전체 지원
Key Deliverables

제공되는 것들

완성된 화면이 아니라, 팀이 자립적으로 쓸 수 있는 디자인 시스템 전체를 산출물로 제공합니다.

🎨

컬러 · 타이포 토큰

CSS 변수·Figma Variables로 관리되는 디자인 토큰. 다크모드까지 자동 지원.

🧩

컴포넌트 라이브러리

버튼·입력·카드·모달 등 40+ 컴포넌트 Auto Layout + 상태별 Variants.

📱

반응형 템플릿

모바일·태블릿·데스크탑 7개 핵심 화면 브레이크포인트별 완성형 템플릿.

접근성 가이드

WCAG 2.2 AA 체크리스트, 색상 대비 검증, 키보드 내비게이션 스크립트.

🧪

사용자 테스트 리포트

실제 사용자 10명 UT 후 이탈 구간 분석 및 개선안.

📖

사용 가이드라인

개발팀·PO가 읽는 "어떻게 쓰는지" 문서. Figma Library 직접 연결.

Design System

토큰 & 컴포넌트

디자인 시스템의 핵심 — 색상·타이포·컴포넌트 토큰의 발췌.

Color Tokens
teal-500
teal-600
slate-900
slate-700
amber-500
rose-500
Typography
Display · 32/900
쇼핑의 마찰을 디자인으로
Heading · 20/700
오늘의 특가 상품
Body · 14/400
매끄러운 구매 경험을 위한 정보 구조와 인터랙션을 재설계합니다.
Components
Add to Cart
Wishlist
Process

작업 프로세스

리서치 → 정보 설계 → 프로토타입 → 테스트 → 시스템화.

Phase 1 · Now

리서치 · 사용자 인터뷰

10명 유저 심층 인터뷰, 경쟁사 벤치마킹, 페르소나 3종 확정.

Phase 2

정보 구조 · 와이어프레임

사이트맵 재설계, 로우피델리티 와이어, 내비게이션 구조 검증.

Phase 3

하이피델리티 & 디자인 시스템

Figma Variables 기반 토큰화, 40+ 컴포넌트 라이브러리 구축.

Phase 4

사용자 테스트 & 핸드오프

UT 반영 리디자인, 개발팀 핸드오프 가이드, 라이브 배포.

다른 디자인 프로젝트도 살펴보세요

모던 이커머스는 junetapa 디자인 포트폴리오의 일부입니다.

디자인 포트폴리오 전체 보기 프로젝트 문의