Product

새로운 G마켓 앱을 소개합니다. (1)

2021년 1월, 대대적인 G마켓 모바일 개편이 있었습니다. 그동안 G마켓은 사용성과 UI를 조금씩 개선해 왔지만 큰 구조를 바꾸는 개편은 몇 년 만에 처음이었습니다. 많은 변화가 있는 개편인 만큼 익숙함과 새로움의 밸런스를 위해 우리는 더 치열하게 고민했습니다.

이런 문제가 있었어요.

하루에도 몇 번씩 스마트폰을 통해 언제 어디서든 쇼핑이 가능한 시대, G마켓의 앱은 매일 비슷한 모습으로 ‘공급자’ 중심의 일방적인 정보를 제공하고 있었습니다. 결국 사용자들에게서 앱에 대한 흥미를 잃게 했습니다. 또한 방대한 상품 속에서 원하는 상품을 찾기가 너무 힘들었고, 콘텐츠도 정제되지 않은 복잡한 형태로 제공되어 사용자가 알아서 찾아보아야 하는 불친절한 구조였죠. 앱 전반적으로도 브랜드 아이덴티티를 충분히 표현하지 못하고 있었습니다. 이런 문제점들을 파악하면서 우리는 ‘사용자 관점’의 개선을 목표로 고민을 시작했습니다.

먼저 사용자를 이해했어요.

사용자 관점에서 문제를 해결하기 위해서 사용자를 이해하는 것이 우선이라 생각했고 우리는 Customer Journey Map(CJM)을 그리기 시작했습니다. 이를 통해 사용자의 생활 패턴, 모바일 활용도, G마켓에서의 상품 구매 패턴 등을 살펴보았고, 주요 키워드들을 도출했습니다.

∙ Every time 다양한 일상 속에서
∙ Now 순간순간
∙ Me 나에게 맞는, 나에게 필요한
∙ Easy 쉽고 빠르게
∙ Habit 습관이 되는

방향성을 설정했어요.

CJM에서 도출된 키워드를 통해 크게 3가지의 방향성을 설정했습니다.

∙ Navigation 쉽고 명확한 내비게이션
예상 가능하고 일관된 내비게이션으로 사용자에게 앱 사용의 편의성을 제공합니다.
 
∙ Feed 나에게 맞는 콘텐츠 소비
G마켓의 다양하고 광범위한 콘텐츠를 주제별로 묶어서 홈에 진열했습니다. 관심 있는 주제를 선택해 나만의 홈을 구성하도록 편집 기능을 제공하고 나만의 쇼핑 콘텐츠를 볼 수 있도록 했습니다.
 
∙ Easy 상품을 쉽고 빠르게 찾기
상품을 쉽고 빠르게 찾을 수 있도록 일관된 형태와 정보를 제공합니다. 검색 기능에 해당 상품의 객관적인 필터를 제공하여 원하는 검색 결과에 좀 더 빠르게 도달할 수 있도록 했습니다.

이렇게 좋아졌어요.

직관적인 내비게이션

한눈에 보기 쉬운 메뉴를 통해 언제 어디서나 쉽고 빠르게 접근하고 움직일 수 있도록 편리한 동선을 제공합니다.

 

다양한 콘텐츠로 구성된 나만의 홈

홈은 오롯이 사용자를 위한 메뉴입니다. 첫 화면에서 친절한 인사말과 함께 사용자의 쇼핑 현황을 바로 확인할 수 있도록 했습니다. 다양한 주제의 콘텐츠로 구성된 홈을 나에게 맞게 구성해 편하게 쇼핑할 수 있도록 편집 기능도 추가했습니다.

 

사용자의 행동 데이터나 시간대별 패턴을 이용해 영감 쇼핑을 위한 콘텐츠도 제공합니다. 최근 본 상품과 관련된 상품을 바로 추천하여 탐색을 이어나갈 수 있게 합니다. 추천 콘텐츠는 더욱 다양한 방향으로 고도화, 발전시킬 예정입니다.

 

일관된 상품 진열, 검색 결과 페이지

어디서든 ‘검색/탐색’ 메뉴만 누르면 상품을 찾을 수 있도록 검색과 탐색의 진입점을 하나로 통일했습니다. 상품 정보는 한눈에 보기 좋게 정리했고, 더욱 쉽게 인지할 수 있도록 개선했습니다. 사이트 전반적으로 일관되게 진열되어 있지요. 검색 경험을 개선하고 필터 영역을 보완했습니다.

 

자연스러운 시선의 흐름, 상품 상세 페이지

상품의 정보를 보기에 더욱 자연스러운 시선의 흐름으로 재배치했습니다. 별점으로 구매 후기를 쉽게 확인할 수 있으며, 옵션 선택의 가독성을 높이고 사용성을 개선했습니다.

 

직관적으로 정돈된, 장바구니와 주문서

장바구니와 주문서 UI를 더 직관적으로 정돈했습니다. 장바구니에서 쿠폰 적용 버튼을 눌러보지 않아도 적용 여부를 알 수 있습니다. 주문서의 배송지 닉네임을 직관적으로 노출해 배송지를 잘못 설정하고 주문하는 실수를 줄여줍니다. 또한 기본적인 정보들의 가독성을 높였습니다.

 

간결하고 보기 쉬워진, 마이 페이지

마이 페이지에서는 오늘도착 예정인 상품을 바로 확인할 수 있습니다. 주문 내역 페이지는 배송 현황을 그래프로 보여주어 배송상태를 직관적으로 인지할 수 있으며 어제 본 상품, 며칠 전 본 기획전 모두 쇼핑 히스토리에서 확인할 수 있습니다.

 

스마일클럽만을 위한 특별한 공간, 스마일클럽 홈

G마켓의 특별한 멤버쉽인 스마일클럽만을 위한 특별한 공간을 준비했습니다. 스마일클럽 회원들이 자주 사용하는 서비스를 한눈에 볼 수 있고, 쇼핑 패턴에 따라 편의성을 제공하도록 배열됩니다.

 

브랜드 아이덴티티도 재정립했어요.

개편과 함께 G마켓의 브랜드 아이덴티티를 재정립하고, 일관된 규칙을 가진 아이콘 그래픽을 만들었습니다. 재정립한 G마켓의 브랜드 키워드는 ‘연결’입니다. 고객과 상품, 고객과 고객, 쇼핑 경험의 연결을 의미합니다. 브랜드의 정체성을 사용자와의 접점 곳곳에 녹여냈습니다.

G마켓의 브랜드 아이덴티티가 담긴 폰트인 Gmarket Sans도 반영했습니다. (Gmarket Sans)
브랜드 아이덴티티에 대한 더 자세한 이야기도 곧 들려 드릴게요.

더 효율적으로 일하는 기반을 만들었어요.

이번에 우리는 더 효율적이고 일하기 위한 기반을 다졌습니다. 디자인 시스템을 구축한 일인데요. 이는 GMKT DS구축 이야기에서 더 자세하게 확인할 수 있습니다. (GMKT DS)
우리가 추구하는 아토믹 디자인 시스템은 가장 작은 단위부터 디자인하여 공통되고 일관된 UI Component를 정의하는 것입니다. Component들이 모여 Module이 되고, 다양한 Module들이 모여서 고객이 만나는 Page로 구성되는 디자인 개념입니다. 이는 일관된 브랜드 정체성과 사용성이 유지되도록 하고, 재사용성과 생산성을 높여 프로덕트의 전체적인 관점에서 일할 시간을 가질 수 있게 해줍니다. 우리는 디자이너, 개발자의 워크플로우 통합을 위해 디자인 시스템을 지속해서 발전해 나가고 있습니다.

계속해서 2편으로 이어집니다.

글 작성자

심민지Design POD

프로젝트 참여자

Planning
강락호, 강수정, 고민정, 금윤호, 김가영, 김동연, 김만재, 김미선, 김시준, 김신혜, 김은숙, 김정섭, 김정옥, 김주연, 김주현, 김태영, 마미정, 민후식, 박성일, 박시현, 박지영, 박진형, 박태란, 박효인, 배지환, 백아라, 서영미, 송민선, 송승아, 송인혜, 양진성, 염지민, 오명훈, 유영은, 윤혜미, 이경준, 이광수, 이미영, 이봉기, 이상희, 이연진, 이월한, 이정은, 이지연, 이지은, 이희정, 임정미, 진지민, 한신혜, 황남익

Design
구경하, 권기석, 김도은, 김보미, 김은옥, 서보름, 심민지, 윤종욱, 임혜진

Development
강병윤, 강수진, 곽현철, 김경환, 김경훈, 김민호, 김선우, 김선호, 김소미, 김수연, 김승민, 김은미, 김주현, 김지현, 김태현, 김현동, 김형조, 김혜민, 김효정(BXP), 김효정(VX), 김희상, 김희영, 김희철, 남기문, 도정현, 류민석, 문금지, 문유빈, 민경희, 박다희, 박명성, 박상우, 박수현, 박정우, 박정일, 박지원, 박찬혁, 박호림, 배영렬, 배창원, 백성욱, 부상훈, 심치헌, 안진표, 엄수정, 엄태환, 윤상현, 윤현철, 이광현, 이동렬, 이병화, 이예원, 이용진, 이정근, 이주훈, 이지나, 이지민, 이진하, 이찬미, 임은경, 임재민, 임현묵, 정종오, 진성준, 최병광, 최철훈, 하태경, 현아람, 홍석준, 황종문