WEMAKEPRICE O DS 1.0
ONE SYSTEM FOR B2C AND D2C.
위메프오와 위메프오 플러스에 흩어진 디자인 요소를 하나의 체계로 정리했습니다. 공통 기반은 공유하고 서비스별 차이는 유지할 수 있도록 토큰, 컴포넌트, 리소스 구조를 설계했습니다.
WHAT NEEDED A SECOND LOOK.
B2C 서비스인 위메프오와 D2C 서비스인 위메프오 플러스는 공통 디자인 요소와 서비스별 고유 요소를 함께 가지고 있었습니다. 각 서비스가 확장되면서 기준이 다른 UI와 레거시가 누적됐고, 새로운 기능을 추가하거나 기존 화면을 개선할 때 디자인 일관성과 개발 효율이 함께 떨어지는 문제가 생겼습니다.
TURNING QUESTIONS INTO STRUCTURE.
Sketch와 Zeplin 중심의 작업 환경을 Figma로 전환하되, 기존 컴포넌트 매핑과 네이밍 정리, 병행 운영, 개발팀 핸드오프 온보딩의 세 단계로 진행했습니다. 컬러, 타이포그래피, 스페이싱, 라디우스를 토큰으로 정의하고 B2C와 D2C의 공통 토큰과 개별 토큰을 분리했습니다. 반복되는 패턴은 컴포넌트로 만들고 서비스별 요구 차이는 Variant로 흡수했으며, 아이콘과 일러스트 같은 그래픽 에셋도 하나의 리소스 체계 안에 정리했습니다.
MAKING THE CHANGE WORK.
신규 기능을 설계할 때 와이어프레임부터 다시 만들지 않고 컴포넌트 조합으로 빠르게 UI를 구성할 수 있게 됐습니다. 핸드오프에서 반복되던 스타일 확인과 수정 왕복이 줄었고, 디자이너와 개발자가 같은 컴포넌트 이름으로 소통하는 기반이 만들어졌습니다. 운영 과정에서 수집한 피드백을 바탕으로 Variant 확장, 기술 스택 연동 가이드, 업데이트 자동화를 포함한 2.0 로드맵도 정의했습니다.
