디자이너 3명의 관점으로 분석한
'지그재그' UX/UI
쇼핑은 지그재그가 맛있어? UI도 뜯어먹어 보자
지난 Post IT 1기의 앱 분석 리스트지난 3월 8일, 포스트 IT의 전신인 UX/UI포트폴리오 스터디가 분석한 두 번째 대상은 바로 2015년 출시된 여성 쇼핑몰 모음 앱 '지그재그'입니다. 지그재그는 최근 배우 한예슬 님을 모델로 본격적인 광고 및 업데이트를 진행하고 있는데, 저희는 2020년 3월 기준의 앱 분석 글임을 미리 알려드립니다. 글쓴이인 Zoe와 Sue, Bella가 함께 사용자 관점에서 분석해보았습니다!
크로키 닷컴(지그재그) 기업 소개이 글의 목차
1. 스플래시(splash screen)
2. 회원가입 / 쇼핑몰 가입 도우미
3. 메인 페이지
4. 쇼핑몰
5. 모아보기
6. 찜한 아이템
7. 마이 페이지
결론 한마디!
1. 스플래시(splash screen)
2020년 3월 기준 스플래시 화면Zoe: 나는 스플래시 화면이 앱의 첫인상을 좌우하는 중요한 페이지라고 생각하기 때문에 항상 스플래시 화면을 유심히 관찰하는 편인데, 지그재그의 스플래시 화면은 상징색을 배경색으로 뚜렷하게 나타냈지만 로고가 상단에 위치하여 중앙 부분이 비어 보이고 올려다보는 느낌이라 시각적으로 약간 불편했던 것 같아. 개인적인 생각으로는 로고의 크기를 80% 정도 줄이고 색상을 화이트로 변경하여 중앙에 배치했으면 어떨까 싶어. g의 아랫부분이 긴 형태라 위아래의 1 : 1 비율보다는 시각적 보정이 들어간 0.8 : 1 비율 정도로 배치했다면 중앙에 위치하는 편안한 느낌을 받았을 것 같아.
2. 회원가입 / 쇼핑몰 가입 도우미
(좌) 회원가입 (우) 쇼핑몰 가입 도우미Bella: 회원가입 시, 이메일 / 비밀번호 / 폰 번호 / 인증의 최소한의 정보로 가입할 수가 있더라고. 새로운 사용자 유입을 위해 진입장벽을 낮추려고 많이 노력한 것 같아. 그런데 UI 측면에서는 다른 어플에 비해서 정보 입력 칸 사이의 간격이 좁게 느껴졌어. 간격을 더 넓히면 시각적으로 더 편안할 것 같아. 쇼핑몰 가입 도우미는 한 번의 개인정보 입력으로 각 쇼핑몰 회원가입을 할 때마다 자동으로 정보 입력이 되어서 매번 쇼핑몰의 회원 가입을 새로 해야 했던 가장 귀찮은 과업을 편하게 할 수 있다는 점이 혁신적이고 편리했어.
3. 메인 페이지
2020년 3월 기준 지그재그 메인 페이지Sue: 기본 홈 화면은 검색 푸터를 기본으로, 검색 / 상점 / 모아보기 / 즐겨찾기 / 마이페이지로 구성되어있어. 개선할 점을 꼽아보자면, '오늘의 아이템'이라는 네이밍이 무슨 기능을 의미하는 건지 나타내기에 애매한 것 같아. 빅데이터 기반으로 내가 자주 사는 상품군을 추천하는 건지, 오늘 출시된 신상품이라는 건지, 오늘 가장 인기 있는 상품들의 리스트라는 건지 알 수가 없어서 정보에 대한 신뢰감도 떨어지는 것 같아.
Bella: UI 디자인 리뉴얼(2020. 3월 기준)을 통해 핫핑크색이었던 상단 배경이 하얀색으로 바뀌면서 더 깔끔한 느낌이 들고, 옷 사진에 더 시선이 가도록 유도한 것 같아서 나는 이번 버전이 훨씬 만족스러웠어.
Zoe: 앱을 열었을 때 가장 먼저 보이는 페이지라 홈 화면인 줄 알았지, 하단 바 아이콘만 봤을 땐 두 번째 아이콘이 홈 화면을 의미하는 것 같아. 또한 홈 화면의 아이콘이 돋보기 모양인 것을 보아 검색 기능을 주 기능으로 하는 페이지 같은데, 정작 검색 기능(상단 검색 바)이 차지하는 영역은 화면의 약 1/20 정도밖에 안 되는 것 같아. 검색 기능을 강조하고 싶었던 거라면 실시간 쇼핑 태그 순위나 각종 검색 필터를 꺼내서 검색 기능의 영역을 넓히는 게 어땠을까?
그리고 '오늘의 아이템'은 맨 아래까지 스크롤을 내리는데 최소 10초 이상이 걸릴 정도로 스크롤 범위가 넓었어. 이런 식으로 선택지가 늘어날수록 의사결정 시간이 길어져 사용자는 금세 지루함과 피로를 느끼게 될 텐데 말이야. 이럴 거면 상단에 "스압 주의" 문구라도 넣어야 하는 거 아니냐고!
4. 쇼핑몰
차례로 쇼핑몰 랭킹 / 쇼핑몰 필터 / 쇼핑몰 즐겨찾기Sue: 하단 바의 상점 아이콘이 집 모양 같아서 홈 화면으로 착각할 수 있는 여지를 주는 것 같아. 좀 더 직관적인 아이콘을 사용할 필요가 있어. 아니면 텍스트를 아이콘 밑에 추가하든지! 그리고 즐겨 찾기에 있는 우측 상단의 가위 모양 아이콘 역시 어떤 기능인지 추측하는 게 어려웠어. 차라리 "편집"이라는 단어로 명시하는 게 훨씬 이해하기 쉬울 것 같아.
Bella: 랭킹 위는 광고 중인 쇼핑몰 목록 같은데, 내가 필터에 설정한 스타일이 반영되지 않은 쇼핑몰들이 뜬금없이 떠 있어서 손이 잘 안 가더라고. 그래서인지 절반 이상의 자리를 차지하는 것에 비해 쓸모없는 느낌이 들었어. 그리고 즐겨찾기에서는 쇼핑몰 즐겨찾기를 등록하면 숫자 아이콘으로 내가 확인하지 않은 신상품의 업데이트 수를 알려주는데, 이 부분이 특정 쇼핑몰을 자주 이용하는 소비자에겐 좋은 포인트 같아서 유용하다고 느꼈어!
Zoe: 쇼핑몰 필터를 통해서 내가 찾는 품목의 카테고리, 나의 연령대, 원하는 스타일 등을 필터로 설정하면 3,000여 개의 쇼핑몰 랭킹을 바로 보여주기 때문에 구매라는 과업을 진행하는 데 탐색 시간이 훨씬 단축될 것 같아. 특히 슈즈, 비치웨어, 파자마 같은 특정 품목을 찾을 때 신규 쇼핑몰 탐색에 더욱 편리하지 않을까.
그리고 이번 페이지를 분석하다가 발견한 점인데, 쇼핑몰 페이지뿐만 아니라 하단 바의 모든 아이콘이 현재 사용자가 어느 페이지에 위치하고 있는 지를 명확하게 보여주지 못하고 있다고 느꼈어. 아이콘 간에 색상의 대비를 좀 더 확실하게 주어야 사용자가 앱 사용 중에 길을 잃는다거나 헷갈리지 않을 것 같아.
5. 모아보기
Sue: 모아보기는 카테고리, 인기상품, 신상품 등을 모아놓은 페이지로, 개선할 점들이 먼저 보였어. 우선 상단의 아이콘들 중 무료배송 아이콘만 핫핑크색이라 내가 무료 배송 관련 페이지에 위치하고 있는 줄 알았어. 근데 그냥 기본 디자인이더라고.. 그리고 상단 아이콘들은 좌우로 스와이프가 가능한 영역인데 간격을 딱 맞게 배치해서 전혀 몰랐어. 스와이프가 가능함을 보여주려면 화면 상 마지막에 위치하는 아이콘을 테두리에 살짝 걸쳐서 보여주는 게 맞다고 생각해.
Bella: 이 페이지는 딱히 구매하고 싶은 상품이 정해져 있지 않은 사용자들이 둘러보면서 추천받기 좋은 것 같아. 그리고 방금 Sue가 말했듯이, 나도 상단의 다른 아이콘들은 모두 검은색의 선으로 이루어진 형태인데 비해 무료배송 아이콘만 핑크색의 면 형태라서 이 아이콘이 디폴트로 눌려있는 걸로 착각했어.
Zoe: 모아보기의 '지그재그 픽'은 매일 달라지는 날씨, 요일, 유행 컬러, 새로 주목해야 할 패션 등의 키워드를 지그재그 에디터가 선정해서 제공하는 자체 제작 콘텐츠인데, 이를 통해 지그재그가 단순한 쇼핑몰 모음 앱을 넘어서고자 노력 중인 것 같다는 느낌을 받았어. 하지만 모아보기의 하단 바 아이콘이 직관적이지 못해서 아쉬웠는데.. 콘텐츠를 상징하는 매거진 모양이나 Z 로고를 넣으면 어떨까. 지그재그의 자체 콘텐츠라는 점을 강조하면 좋을 것 같아.
6. 찜한 아이템
Sue: 상단의 리스트 아이콘을 클릭하면 쇼핑몰 별로 찜한 제품의 개수를 알 수 있는데, 이렇게 하면 배송비를 한꺼번에 지불할 수 있는 쇼핑몰을 알 수 있어서 좋았어.
Bella: 나도 그 부분은 공감해! 하지만 이 아이콘이 쇼핑몰 별 보기를 나타내는 아이콘인지 인지하기가 힘들었어. 좀 더 직관적으로 나타낼 필요가 있는 것 같아. 그리고 폴더 별 정리는 그전에 없던 기능인데, 구매하려는 항목이 여러 개일 때 분류하여 비교하기 편했어.
7. 마이 페이지
Zoe: 마이페이지에서 내 정보 수정까지 가는 뎁스가 너무 깊고, 포인트나 배송 현황 같은 중요한 정보들을 확인하려면 탭을 해서 한번 더 뎁스를 들어가야 하는 점이 불편했어. 저 정도 여백이면 정보를 바로 띄워줘도 공간이 충분할 것 같은데 말이지.
결론
Sue: 지그재그가 얼마 전 자체 결제 시스템을 갖추면서 무궁무진한 가능성의 시발점을 알려주는 것 같아. 다만 상의 하의로만 카테고리를 나누었을 때 옷의 분위기가 다 비슷하고 나이대별로만 카테고리를 분류할 수 있어서 수많은 옷들을 스크롤링 해야하는 번거로움이 가장 아쉬운 것 같아. 사실 편집샵의 묘미는 '상세 필터링'과 '큐레이션'이 아닐까 생각하거든. 앞으로 무궁무진한 가능성이 있는 서비스인만큼, 다양한 서비스들을 보여주면 좋겠어.
Bella: 지그재그는 여러 아이템을 보고 찜해서 그것을 비교하는 기능이 가장 잘 되어 있다고 생각해. 인터넷 쇼핑을 자주 하는 10-20세대를 타깃으로 깔끔하게 디자인 정렬이 잘 되어 있는 편이고, 여러 기능이 많은데 비해 그것을 잘 정리해 놓아서 복잡하다는 느낌이 없었어. 지그재그 앱 내의 결제 기능이라던지, 한 번 개인정보를 입력하면 타 쇼핑몰에서 회원가입이 쉬워진다든지의 기능으로 사용자가 이 앱에서 구경만 하고 이탈하는 것을 방지한 점 역시 잘 되어있는 것 같아. 다만 아쉬운 점은 모아보기 탭의 기능이 다른 탭에 비해 중요도가 떨어지는 것 같은데도 같은 하단 바에 위치하고 있다는 것? 말고는 충분히 유용하고 만족스러운 서비스야.
Zoe: 지그재그는 꾸준히 경쟁 시장에서 눈에 띄려는 시도를 보여주는 어플 같아. 쇼핑의 과업 시간을 줄이기 위한 부가 기능들을 추가하고, 검색 필터를 세밀하게 강화하고, 자체 콘텐츠를 만들어 추천 목록을 보다 흥미롭게 구성하는 등의 모습들을 보면서 지그재그가 단순한 쇼핑몰 모음 앱을 넘어서고자 부단히 노력 중인 것 같다는 느낌을 계속 받을 수 있었어.
이 글은 2020년 3월 3명이 참여한 UX/UI 스터디에서 나눈 글과 PT를 대화 형식으로 풀어낸 글입니다.
