[ 서비스기획 ] UI/UX의 이해

UX is focused on the user's journy to solve a problem,
UI is focused on how a product's surfaces look and function.
UX는 사용자의 문제해결과정에 초점을 맞추고,
UI는 제품 표면의 모양과 기능에 초점을 맞춘다

---

사전적 의미의 UI/UX

UI(User Interface)

• 사용자가 제품/서비스를 사용할 때 마주하게 되는 시각적인 부분
• 폰트, 컬러, 레이아웃, 로고 등의 요소

UX(User Experience)

• 사용자가 제품/서비스를 경험할 때 느끼는 모든 순간의 만족을 의미
• 사용자들의 경험 데이터를 분석하여 더 편하고 효율적인 방향으로 사용자 중심적으로 설계된 UI(디자인)

UI(왼쪽)와 UX(오른쪽)

---

디자인 시스템

디자인 시스템이란?

• 동일한 브랜드/제품/서비스 이용 경험을 위해 탄생
• ex) 애플 HIG, 구글 Material Design

디자인 시스템을 만드는 이유?

• 다양한 채널을 걸쳐서 브랜드 아이덴티티를 명확하게 전달하고, 높은 수준의 사용성을 유지하기 위해
• 일관성이 사용자에게 중요한 이유는 사람들이 디지털 채널에서 한 브랜드에 같은 수준, 같은 브랜드의 경험을 기대하기 때문
• 참고 : 라인 디자인 시스템, 스포카 디자인 시스템, 스타벅스 디자인 가이드, 토스 디자인 시스템(토스 블로그)

---

CASE STUDY 1 : 음악 스트리밍 서비스

스포티파이(Spotify)

• 글로벌 1위 스트리밍 플랫폼, 완성도 높은 음악 큐레이션 제공
• 미국 기준으로 광고를 동반한 무료 서비스를 통해 서비스 전반 이용 가능
• 한국 기준 월 11,900원 요금제로 이용 가능
• 주요기능
  
  1. Personalised playlists
  2. Discover new music
  3. Listen offline
  4. Stream on multiple devices

바이브(NAVER VIBE)

• 네이버가 출시한 음악 플랫폼(YG PLUS 운영)
• 네이버 뮤직 서비스 종료 후, VIBE와 통합
• 국내 스트리밍 시장 내 점유율 약 10% 미만
• 네이버플러스 멤버십 혜택으로 제공됨
• 주요기능
  1. Music AI(믹스테잎, 자동 추천 재생, 비슷한 노래보기)
  2. VIBE Player(싱크 가사, 파티룸, 노래방, Dolby Atmos Music 등)
  3. 오디오

서비스 비교

• 스포티파이는 3개의 탭구조(홈/찾기/라이브러리)로 단순화한 반면, 바이브는 5개의 탭구조(홈, 차트, 오디오, 검색, 보관함)로 이루어짐. 스포티파이가 '개인'의 관심사에 초점이 맞춰져있다면, 바이브는 전체적으로 인기있는 컨텐츠도 함께 소개하고 있음
• 바이브는 '파티룸' 서비스를 기획하여 실시간으로 함께 음악을 듣고 소통할 수 있는 공간을 마련함
• 스포티파이와 바이브는 각각 본인들이 속한 시장의 니즈를 반영하고자 했음을 알 수 있음

스포티파이 앱 화면

바이브 앱 화면

• UI적으로 접근하면 사람들이 쉽게 접근하고 사용할 수 있도록 레이아웃 편성한 쪽은 바이브이나, 사용자 경험 측면에서 스포티파이가 더 재미있음
• 스포티파이는 좌/우로 스와이핑을 하여 간편하게 노래를 바꿀 수 있도록 개발되었으며, 노래와 연관된 뮤직비디오 일부가 반복재생됨
• 무엇보다도 스포티파이의 장점은 플레이되는 노래와 연관되는 노래를 자동재생해주어, 한 곡만 반복재생되는 바이브보다 새로운 음악에 대한 접근성을 낮춤

스포티파이(왼쪽) 플레이화면과 바이브(오른쪽) 플레이화면

---

CASE STUDY 2 : 쇼핑몰 중개 플랫폼

지그재그

• 동대문 의류 판매 쇼핑몰을 기반으로 성장
• 2021년 카카오 인수, 여성 패션 플랫폼 최초로 21년 연 거래액 1조원 돌파

하이버

• 국내 최초 남자 전용 패션 플랫폼
•  MZ세대가 85% 이상 사용

서비스 비교

• 두 플랫폼 모두 타겟층 분석에 기인한 탭 구조, 서비스 구조 형성
  • 지그재그 : 스토어 위주 -> 스토어, 타인의 스타일링 관찰하는 경향 -> 모아보기
  • 하이버 : 비슷한 스타일의 옷 추천 -> AI추천, 명확한 목적을 가진 쇼핑을 추구하는 경향 -> 카테고리

• 장바구니 결제과정 비교
  • 지그재그 :
    1. 결제 전에 놓칠 수 있는 쿠폰받기 기능을 이용하여 소비자의 알뜰한 쇼핑을 도움
    2. 배송비가 무료가 아닌 경우, 어떻게 하면 배송비 무료 혜택을 받을 수 있는지 명시하여 소비자들이 합리적인 소비를 할 수 있도록 도움
    3. 주문을 취소하고 나갈 시에, "주문을 취소하고 나가시겠습니까?"라는 메세지를 통해 주문을 망설이는 고객에게 편리함 제공(주문을 취소하지 않고 상품을 추가하려는 사람에게는 좋지 않다는 단점이 존재
    4. 간단한 배송 요청사항은 select box 형태를 이용하여 화면 이동없이 단순하게 처리
  • 1. 단순하고 깔끔한 UI로, 한 눈에 구매정보를 확인할 수 있다는 장점이 존재
    2. 결제 시에 여러 결제방식을 '다른 결제 수단'과 '빠른 페이'의 두가지 항목으로만 표기하여 단순하고 심플한 것을 선호하는 남성들의 니즈를 반영함. 또한 '빠른 페이'를 통해 결제과정을 단순화하여 불편한 결제 프로세스 과정을 줄임하이버 : 

장바구니 화면

배송 요청사항을 접수하는 방식

주문 화면