무신사 UI 개편: 복잡함을 간결하게 담은 멀티 스토어

무신사가 지난 13일 무신사의 모바일 앱 ‘무신사 스토어’의 UI를 전면 개편했습니다.

무신사가 제공하는 수많은 카테고리를 멀티 스토어 형태로 나눴습니다. 무신사, 뷰티, 플레이어, 아울렛. 부티크, 스니커즈, 키즈, 스냅으로 나뉘었습니다. 사용자가 자신이 지금 어디에 있는지 명확하게 파악할 수 있게 카테고리간 서로 다른 배색을 사용합니다. 사용자가 새로운 동작법을 학습할 필요가 없게 레이아웃, 패턴, 스타일은 동일하게 설계됐습니다. 얇은 선, 각진 꺽임은 유지됩니다.

공간이 달라졌음을 확실하게 인지시키기 위해 상단 바에 배경색을 채웠습니다. 무게감이 생겨 시선이 끌리고 위에서 아래로 자연스럽게 흐릅니다. 홈 화면의 왼쪽 상단에 로고를 눌러 다른 스토어로 이동할 수 있습니다.

각 카테고리의 분위기에 맞는 배색을 UI에 사용했습니다. ‘뷰티’는 핑크색에서 노란색으로 변하는 그라데이션, 스포츠/레저 상품을 제공하는 ‘플레이어’는 하늘색, ‘아울렛’은 짙은 빨간색, ‘부티크’는 채도가 높은 파란색, ‘스니커즈’는 밝은 회색, ‘키즈’는 주황색과 푸 보라색을 사용합니다.

퀵링크도 카테고리에 맞게 다르게 사용합니다. 이전 퀵링크는 글꼴 스타일로 구분하는 앱 아이콘 스타일이었는데 텍스트와 이미지로 구성된 납작한 칩 스타일로 바뀌었습니다. 기본적으로 텍스트를 사용하고 사진과 아이콘을 이모티콘처럼 사용합니다. 다만 크기가 작고 디테일이 있어 구분하기가 어렵습니다. 카테고리 명과 이미지가 완전히 대응하지 않는 느낌의 카테고리도 보입니다. 추상적인 내용을 표현하기가 쉽지 않아 보입니다.

기능적으로는 무신사의 정체성이라고도 할 수 있는 브랜드 중심 경험이 매끄럽습니다. 화제가 되는 브랜드의 순위를 한눈에 확인할 수 있고 관심 있는 브랜드만 필터링해 한정 발매, 인기 상품 소식을 볼 수도 있습니다. 어떤 브랜드도 담을 수 있는 UI로 설계해 개별 브랜드 페이지는 마치 브랜드가 직접 운영하는 쇼핑몰처럼 보입니다.

신상품은 ‘발매’ 탭에서 따로 확인할 수 있습니다. 과하지 않게 시선을 끄는 애니메이션이 인상적입니다. 인기 급상승, 신상품 랭킹뿐만 아니라 스트릿, 미니멀, 프레피. 걸코어 등 스타일별로 랭킹을 확인할 수 있습니다. 구매하는 데도 도움이 되고 전체적인 패션 트렌드를 살펴보기 좋습니다. 커뮤니티도 무신사의 정보 탐색 문법을 유지하면서 SNS처럼 사용하기 좋게 설계했습니다. 인스타그램처럼 사용할 수 있으면서 패션 제품을 바로 살 수 있는 구조입니다.

More and Sources

Design Compass Newsletter

Every Tuesday morning, curated by a designer with 16 years of experience
A collection of inspiring news, trends and articles.

popularity

iphone16-01
아이폰 16 출시: 애플의 첫 번째 AI 스마트폰
airpod4-01
새로운 에어팟 시리즈: 노이즈 캔슬링 에어팟 4, 에어팟 프로 2, 에어팟 맥스
telegram-ceo-arrest-01
텔레그램 CEO 체포: 서비스의 도덕적 책임

Design Compass Academy

thumbnail-course-list-ux
UX Design Class: UX Design for Selected Services
ui-design-main-mobile
UI Design Class: Learn the essence of an interface that will never change

Latest news

national-identity-card-01
applewatch10-01
airpod4-01
iphone16-01
telegram-ceo-arrest-01
twitch-brand-refresh-01
gcar-01
corporation-car-reduced-01