테크

새로워진 무신사 UI·UX: 패션 쇼핑에도 내비게이션이 필요해!

팀무신사

2024.09.26 09:00
  • 645
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    0
  • 0
*무신사의 사업과 서비스를 만드는 무신사 피플의 비하인드, 궁금하셨죠? 패션과 이커머스 분야에서 탁월한 역량을 가진 무신사 피플들이 공통의 목표를 향해 몰입하는 방법과 일하는 문화에 대해 소개합니다.


“내가 사고 싶었던 게 뭐였지…?”

쇼핑을 하다 보면 한 번쯤 이런 경험을 해보셨을 겁니다. 앱을 켜면 새로운 상품과 정보들이 끊임없이 나오니, 정작 내가 찾고 있던 것은 무엇이었는지, 원하는 콘텐츠가 어떤 것이었는지 잊어버리기 쉽죠. 그럴 때는 낯선 길에서 방향을 잃었을 때 내비게이션이 필요한 것처럼, 쇼핑에서도 나만의 취향에 맞는 상품을 찾아주는 길잡이가 필요하다는 생각이 듭니다.

무신사는 고객의 쉽고 편한 쇼핑을 위해 앱의 다양한 영역과 사용자 인터페이스(UI)·사용자 경험(UX)을 대대적으로 개편했습니다. 변화하는 트렌드와 비즈니스 환경에 맞춰 제공하는 무신사의 다양한 페이지에서 고객이 길을 잃지 않고 나에게 꼭 맞는 브랜드, 상품, 콘텐츠를 빠르게 찾을 수 있도록 한 것이죠. 이번 글에서는 UI·UX 영역의 개편 이야기와 달라진 변화를 소개해 드릴게요!

한층 간결해지고 일관성을 더한 무신사 UI로 무신사의 브랜딩을 강화했습니다


길이 다양해지면 내비게이션도 촘촘해져야죠!
변화하는 쇼핑·비즈니스 환경에 맞춘 UI·UX 개편
무신사에는 매일 새로운 브랜드와 상품이 등록되고, 패션 정보와 콘텐츠가 쌓이고 있습니다. 동시에 뷰티, 스포츠, 키즈 등 세분화된 카테고리에 맞는 브랜드와 상품을 제공하고 있으며, 무신사 라이브, 체험단 이벤트 등 고객과 브랜드가 소통할 수 있는 신규 서비스도 늘어났죠. 이처럼 제공하는 가치와 정보가 많아질수록 무신사 고객이 직관적으로 서비스를 이용하기는 상대적으로 어려워지고 있었습니다.
무신사 앱에 대한 고객들의 소중하고 다양한 의견들

이러한 다양한 고객의 사용성 피드백을 모아보니 공통된 질문은 바로 “어떻게 하면 무신사 홈에서 길을 잃지 않고 원하는 것을 발견할 수 있을까요?”였습니다.

이 고민은 고객 입장에서 보기 좋고 사용하기 편한 무신사 앱을 만드는 제품경험디자인실을 중심으로 계속되었는데요. 유관 팀 간의 오랜 논의 끝에 UI·UX 목표를 명확히 설정할 수 있었습니다.


[무신사 UI·UX 개편의 2가지 목표]

✅ 깔끔하고 직관적인 디자인으로 브랜드, 상품, 콘텐츠를 쉽게 탐색할 수 있도록 할 것.
✅ 비즈니스가 성장할수록 유연하게 대응할 수 있는 플랫폼을 목표로 할 것

목표를 세운 다음에는 실행해야겠죠! 사실 이 두 목표를 현실화하기까지 많은 고민과 노력이 필요했습니다. (여전히 더 나은 방향으로 진행 중이기도 하고요.) 기존에 무신사 앱을 사용하던 고객도 어색하게 느끼지 않으면서 무신사다운 직관적이고 명확한 가치를 전달해야 했기 때문인데요. 무신사에 신규 서비스와 콘텐츠가 생겨도 고객들이 자연스럽게 접근할 수 있도록 하는 것이 중점 과제였습니다.


그래서 UI·UX를 개편하는 과정에서도 혼란을 예방하기 위한 다섯 가지 디자인 규칙을 따로 설정했습니다.


제품경험디자인실에서 정립한 무신사 UI·UX 실행 규칙
‍ 

“전달하고자 하는 메시지와 콘텐츠가 많아지면서 고객이 원하는 것을 빠르게 찾기 어렵고, 브랜드와 콘텐츠가 잘 전달되지 않는 문제가 있었어요. 브랜드 입장에서는 ‘노출이 어렵다’는, 고객 입장에서는 ‘새로운 브랜드를 발견하고 싶다’거나 ‘어디에 뭐가 있는지 모르겠다’는 의견이였죠.

그래서 파편화되어 있던 레거시들을 개선하고, 한정된 홈 화면에 정보를 밀도 있게 집약해 고객이 어느 페이지에 있든 쉽고 빠르게 원하는 서비스로 이동하고, 새로운 브랜드와 상품을 탐색하는 경험을 강화하면서 정보를 얻는 것에 집중했어요. 이를 통해 브랜드 입장에서는 고객에게 발견될 수 있는 기회를 더 자주 만드는 것이죠.

- 무신사 제품경험디자인실

이제 원하는 길을 더 똑똑하고 빠르게 찾을 수 있어요!
새로워진 무신사 앱 UI·UX 5가지 핵심 포인트
각고의 노력과 치열한 논의를 거쳐 만든 무신사 앱, UI·UX 변화 포인트를 소개합니다.

1️⃣ 빠르고 쉬운 길을 알려주는 내비게이션: 멀티 스토어로 세분화된 카테고리별 쇼핑
통일성 있는 UI를 유지하면서도, 멀티 스토어별 고유한 정체성을 강조했습니다
쇼핑할 때도 목적지로 가는 쉬운 길이 필요하듯, 무신사 홈 화면에서 카테고리별 접근이 쉬워졌습니다. 무신사의 뷰티, 플레이어(스포츠), 키즈, 부티크 등 다양한 전문관을 이제는 멀티 스토어라는 이름으로 더욱 쉽게 만날 수 있도록 이동 경로를 확대했습니다. 

각 멀티 스토어는 기본 무신사 홈 화면과 일관된 형태를 유지하면서도 카테고리별 정체성에 따라 다른 색상을 입혔어요. 뷰티는 코랄 컬러, 플레이어(스포츠)는 스카이블루, 키즈는 오렌지와 블루 투톤 컬러 등 시각적으로 확실하게 구분되어 있습니다. 이처럼 상단 바의 배경색을 각기 다른 UI로 적용해 내가 어느 멀티 스토어에 있는지 쉽게 인지할 수 있습니다.


2️⃣ 명확한 경로를 제안하는 내비게이션: 원하는 상품과 페이지로 빠르게 이동

앱 상단에 상시 노출된 검색바를 통해 원하는 브랜드·상품 등 키워드를 빠르고 간편하게 찾아볼 수 있어요
경로를 찾기 위해 목적지까지의 검색은 필수겠죠! 쇼핑도 마찬가지입니다. 개편된 무신사 앱 상단에는 검색바가 상시 노출되어 있어요. 언제든 키워드를 빠르게 검색해 원하는 정보를 확인할 수 있습니다. 검색 결과 UI·UX도 개선되어, 키워드 검색 시 노출되는 정보를 상품, 스냅, 콘텐츠 3가지로 간단하게 구성했어요. 

카테고리 메뉴 내 아이콘들도 직관적으로 재배치해 명확한 내비게이션 구조를 만들었습니다. 불필요한 클릭 없이도 원하는 브랜드와 상품 페이지로 빠르게 이동할 수 있죠. 


3️⃣ 선호 경로를 학습한 맞춤형 내비게이션: 관심사와 취향에 따른 브랜드·상품 추천
새롭게 추가된 브랜드판·발매판을 통해 나에게 잘 어울리는 브랜드·상품 추천을 받아볼 수 있어요
이번 UI·UX 개편에서는 개인화된 쇼핑 경험을 강화하기 위해 맞춤형 추천 기능을 대폭 향상했습니다. 인기 상품, 추천 상품, 세일 상품 등 고객이 쇼핑할 때 자주 찾는 서비스를 홈 화면 전면에 배치해 한눈에 볼 수 있도록 구성했죠. 무엇보다 가장 큰 변화는 추천판 우측에 새롭게 추가된 브랜드판과 발매판입니다. 

브랜드판과 발매판에서는 좋아요 기반으로 필터를 설정해 마음에 드는 브랜드와 상품의 소식을 모아볼 수 있어요. 또한 ‘나를 위한 추천’을 통해 나의 구매 패턴과 관심사에 따라 새로운 브랜드와 상품을 발견할 수 있습니다. 지금 인기 있는 상품도 알 수 있는 급상승, 신상 혜택 등의 탭도 있고요. 상품마다 버튼이나 이미지에 마이크로 인터랙션 효과를 추가해 탐색 경험을 더욱 흥미롭게 만들었어요. 


“브랜드판과 발매판을 신설하고 추천 기능을 강화했습니다. 캠페인, 기획전, 쇼케이스, 룩북, 할인 정보 등 무신사의 다양한 콘텐츠와 할인 혜택 정보가 분산되지 않게 그룹핑하고 간소화했죠.

이 인식을 개선하기 위해 중간에 6개월 이내 발매 상품만 발라내 순위를 확인할 수 있는 ‘뉴(NEW) 랭킹'을 추가했지만, 실험 결과 역동성이 높아지는 대신 상품 및 구매 전환율이 기대에 못 미치는 문제가 있었습니다.

개편 이후 데이터로 성과도 확인할 수 있었습니다. 1인당 상품을 탐색하는 빈도는 약 21% 증가하고, 브랜드를 탐색하는 빈도도 16% 가량 증가했습니다.”

- 무신사 제품경험디자인실



4️⃣ 일관성 있는 내비게이션: 간결하고 통일된 디자인과 기능 표현
상품 상세부터 장바구니, 주문서 페이지까지 직관적인 무신사만의 색깔을 분명하게 담았습니다

이번 개편에서는 제한된 지면에 다양한 정보들을 제공하기 위해 다르게 적용되던 디자인 요소와 기능들을 모두 일관성있게 통일했습니다. 브랜드·상품 탐색부터 상품 상세 페이지, 장바구니 담기, 주문·결제까지의 과정을 간결히 구성해 매끄러운 쇼핑 경험을 제공하도록 했죠. 

“고객의 자연스러운 쇼핑 경험을 위해 직관성과 일관성을 강조한 디자인이 가장 중요했어요. 각 지면의 레이아웃과 패턴을 표준화해 사용자가 새로운 사용법을 익히지 않더라도 무신사 앱을 편하게 이용할 수 있도록 했습니다. 특히 상품 상세 페이지부터 장바구니, 주문서까지 이어지는 과정을 정교하게 물 흐르듯 구현했습니다.

이번 개편에서는 상품 리스트에서 상세 페이지로 전환되는 과정의 개인화 추천을 더욱 정교하게 하고, 사용자 목적에 맞는 필터도 새로 추가했어요. 사실 전환율은 이미 높은 수준이었지만 ‘쇼핑 만족도를 더 높일 수 있는 방법이 없을까?’ 고민하다가 구현한 요소죠. 그 결과, 홈 화면에서 상품 상세 페이지로 진입한 고객이 전년 동기 대비 약 32% 증가하는 더 좋은 성과를 만들었습니다.
 
- 무신사 제품경험디자인실



5️⃣ 실용적인 정보를 보여주는 똑똑한 내비게이션: 실시간 업데이트되는 패션 정보

커뮤니티 기능을 강화한 스냅 서비스도 새로운 UI·UX를 적용했습니다

고객이 최신 패션 정보와 콘텐츠를 놓치지 않고 쉽고 빠르게 확인할 수 있도록 한 점도 눈에 띕니다. 특히 유행하는 스타일과 패션 트렌드를 모아볼 수 있는 무신사만의 패션 콘텐츠인 ‘스냅’도 개편되었는데요. 앞으로 커뮤니티 기능을 더욱 강화해 다양한 스타일의 콘텐츠와 고객이 돋보일 수 있도록 기능이 보완될 예정입니다.


고객과 브랜드, 서로를 발견하는 즐거움
이번 UI·UX 개편을 통해 입점 브랜드는 고객에게 새롭게 발견되어 더 많은 기회를 얻을 수 있습니다. 특히 신진 브랜드에게는 큰 성장의 발판을 만들 수 있는 변화죠. 

브랜드판과 발매판을 통해 평소 알지 못했던 브랜드의 소식을 접하고, 추천판에서는 고객이 탐색한 상품과 연관된 상품이나 유사한 상품을 더욱 똑똑하게 추천합니다. 이를 통해 자연스럽게 새로운 브랜드를 발견할 수 있게 되죠. 개인화 추천 기능은 시간이 지날수록 고도화되므로, 무신사에서 꾸준히 브랜드를 알리면 취향이 맞는 고객을 만나는 데 도움이 됩니다.

무신사 앱의 전면적인 개편으로 브랜드가 고객에게 다양한 소식과 정보를 알리고 소통할 수 있는 장이 확대되었습니다. 이때 새로워진 UI·UX는 브랜드의 정체성과 가치를 명확하게 전달하는 데 효과를 높일 거예요!

브랜드숍 페이지에서는 상품 정보뿐 아니라 기획전, 룩북, 스냅 등 해당 브랜드의 모든 정보를 볼 수 있어요

무신사 앱이 새로운 옷을 입고 여러분을 만난 지 벌써 한 달이 되었습니다. 개편은 또 다른 시작이죠! 무신사는 여전히 고객과 입점 브랜드의 의견에 귀 기울이며 더 나은 방향을 고민하고 있습니다.

무신사 제품경험디자인실은 고객이 무신사를 더 직관적이고 편리하게 이용할 수 있도록 노력하고 있습니다. 고객의 내비게이션인 UI·UX를 더욱 더 발전시켜 나갈 테니, 앞으로의 무신사 앱의 진화를 지켜봐주세요! 



  • #무신사
  • #UX
  • #테크
  • #musinsa
  • #UI