마켓컬리 UX 개선, 페이퍼 프로토타입 그려보기
[코드스테이츠 PMB 11] Ep14. 페이퍼 프로토타입
모바일 앱 서비스 제작을 위한 설계도면
건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요하다. IT 현장에서는 이를 화면 설계라 지칭하며 와이어프레임, 스토리보드, 프로토타입으로 구분하고 있다.
화면 설계 용어
1) 와이어프레임(Wireframe)
와이어프레임은 화면 단위의 레이아웃을 설계하는 작업이다. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며 UI, UX 설계에 집중되어 있다.
2) 스토리보드(Storyboard)
디자이너/개발자가 참고하는 최종적인 산출문서로써 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 문서이다. 현업에서는 해당 문서를 바탕으로 커뮤니케이션을 진행한다.
3) 프로토타입(Prototype)
프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업이다. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용함으로써 실제 구현된 것처럼 시물레이션 할 수 있다. 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행해볼 수 있다.
서비스 관련 요구사항을 모아 문제를 파악하고, 이를 해결하는 과정에는 다양한 서비스 기획 산출물들이 활용된다. 일반적으로 서비스 정책서, 기능 명세서, 요구사항 정의서, 정보 계층구조도(IA), 와이어프레임, 스토리보드 등이 포함된다.
서비스 기획 산출물
1) 서비스 운영 정책서
서비스 운영 정책서는 서비스에 적용될 수 있는 법적인 요소를 모두 고려하여 작성된 정책 문서이다. 서비스를 운영해야 하는 내부 직원을 위해 작성하기 때문에 전문 용어를 쓰거나 복잡하게 작성하지 말고 누구나 이해할 수 있도록 쉽고 명확하게 써야 한다.
2) IA(Information Architecture, 정보 계층구조도)
IA는 서비스의 전체 구조를 파악하기 위해 작성하는 문서다. 이를 통해 개발자나 디자이너가 작업하기에 앞서 서비스와 서비스의 구조를 이해하기 쉽게 도와준다.
IA는 정보 계층구조도라고도 하는데, 트리 형태로 웹사이트의 메뉴 구조를 표현한 것이다. 엑셀로 작업하는 경우가 대부분이며, 사이트 화면이나 메뉴를 기준으로 그룹화하고 각 화면이나 메뉴를 깊이(Depth) 단위로 분류해서 설계한 문서다.
3) 기능 정의서
개발이 가능한 기능을 정리했다면 이제 해당 요구사항을 세부적으로 정의해야 한다. 기능 정의서는 개발 가능한 기능에 대해 개발자와 소통하기 위한 문서이다.
요구사항을 정의한다는 것은 각 기능의 구성요소를 정리하고, 구성요소가 어떻게 동작해야 하는지, 어떤 데이터를 입력하는지, 입력한 데이터 값에 따라 어떤 결과를 노출해야 하는지와 같은 로직을 정리하는 것을 말한다.
4) 화면 설계서(Storyboard)
화면 설계서는 제품을 개발하기 위한 최종적인 기획 산출물이라고 볼 수 있다. 화면과 화면설명 영역(Description)으로 구성돼 있다. 이제까지 작성했던 기획 산출물로 보자면 와이어프레임(또는 디자이너가 작업한 디자인 화면)과 기능 정의가 합쳐진 형태라고 생각하면 된다. 개발자는 화면 설계서를 통해 한 화면에서 어떠한 기능이 존재해야 하는지, 어떻게 동작해야 하는지를 확인할 수 있다.
지난 글에서 마켓컬리를 사용하며 느낀 좋은 UX와 아쉬운 UX를 살펴보았다.
이번 포스팅에서는 마켓컬리의 주니어 PM이 되었다고 가정하고, 기획자의 시선으로 마켓컬리의 UX/UI 중 일부를 개선해보려 한다. 적은 Input으로 보다 큰 Ouput을 낼 수 있는 효율적인 기능 개선이 무엇일지 고민해 보았다.
1. 유저 Flow와 UX 개선점
UX의 개선점을 찾기 위해서는 사용자가 서비스의 어떤 부분에서 불편함을 느끼는지 파악하기 위해 유저 Flow를 고려해야 한다. 서비스를 사용하는 페르소나와 유저 저니 맵을 통해 유저 Flow를 간단히 살펴보려 한다.
마켓컬리의 주 이용자는 30-40대 여성이 전체 소비자의 약 57%로 가장 큰 비중을 차지*한다는 점에 주목하여, 1인 가구인 30대 여성 직장인이라는 페르소나를 가정하였다.
* 출처: 혁신의숲 마켓컬리 소비자 유형분석_성별 및 연령(2022.05.25 기준)
해당 페르소나가 마켓컬리를 통해 선호하는 식료품을 탐색하고 구매하기까지의 과정을 따라가 보자. 페르소나는 평소 샐러드나 채소 등 건강한 식단과 간편하게 조리할 수 있는 밀키트를 선호한다. 가끔 친구들과 홈파티를 할 때 쉽게 준비할 수 있는 파티용 음식도 종종 구매한다.
이 같은 자신의 취향에 적합한 상품들을 추천받고, 다른 유저들의 상품 후기들도 편리하게 비교해보며 구매 결정을 하고 싶다는 니즈를 가지고 마켓컬리에 접속한다.
사용자의 기호와 취향이 반영되지 않은 추천 기능
페르소나는 마켓컬리에 접속하여 홈 화면의 '컬리추천'이라는 탭의 추천 상품들을 가장 먼저 접하게 된다. 자신이 원하는 상품을 빠르고 쉽게 탐색하여 구매 의사결정까지의 시간과 에너지를 줄일 수 있다면 사용자의 만족도는 높아질 것이다. 그런데 컬리추천에 노출되는 상품들의 추천 기준을 명확히 알 수 없었다.
'이 상품 어때요?'나 'MD의 추천'에 뜨는 상품들을 보면 사용자가 가장 최근 검색한 상품과 연관된 상품을 중심으로 추천해주는 것으로 보인다. 최근 검색어에 기반한 상품 추천의 경우 사용자의 기호나 취향을 반영한 검색 옵션을 선택할 수 없다는 불편함이 있었다. 가령, 일주일 전 상품 검색을 통해 해당 상품을 구매하였고 오늘은 다른 상품을 구매하기 위해 마켓컬리에 접속했다면 이전 검색어와 연관된 상품을 추천하는 것은 의미가 없다. 사용자 맞춤형 검색 옵션 기능을 통해 사용자가 찾는 상품의 관련 키워드를 먼저 지정하는 등의 방식으로 사용자 맞춤형 상품을 바로 확인할 수 있다면 훨씬 편리할 것이다.
별점 평가 기능 및 후기 필터 기능 부재
'마켓컬리 UX 뜯어보기' 포스팅에서 가장 먼저 개선해야 할 UX는 후기의 별점 평가 시스템과 사진 모아보기 기능의 부재로 꼽았다. 상품 후기 작성 시 별점 등록 기능이 없고 서술식으로만 작성이 가능하다. 최소 10자 정도를 권장하고 있지만 후기 작성자에 따라 후기 내용이 천차만별이었다. 길고 상세한 후기는 많은 정보를 담고 있지만 한눈에 들어오지 않아 읽는 데 시간이 오래 걸리고, 어떤 후기는 '맛있어요' 등 짧은 평가에 그치는 경우도 많아 필요한 정보를 얻기 어려웠다.
그리고 상품 후기를 확인하려면 후기글을 하나씩 선택하여 '상품 후기 상세'로 들어가서 확인해야 하는 번거로움이 발생한다. 상품 사진도 이 페이지로 들어가야만 확인할 수 있다.
네이버 스토어나 인터넷 의류 쇼핑몰의 경우 리뷰에 등록된 포토&동영상만 따로 모아보기가 가능한 것과는 대조적이다. 사진 모아보기 기능은 이미 구매 경험이 있는 유저들이 직접 촬영한 사진들을 한눈에 확인할 수 있어 보다 쉽게 구매 의사결정을 할 수 있게 된다.
상품 후기 등록 시 별점 평가 기능을 도입하고 후기의 세부적인 탐색 시 포장상태, 품질, 맛 등 제품군에 맞는 간단한 평가 기준을 추가해야 한다. 또한 사진 및 동영상 리뷰 모아보기 기능이 제공된다면 제품 이미지를 한 번에 확인할 수 있어 훨씬 편리할 것이다.
2. 페이퍼 프로토타입
그래서 이 두 가지 개선점에 대해 페이퍼 프로토타입 Paper Prototype을 그려 보았다.
사용자를 위한 더 세심한 추천 기능
사용자 맞춤형 상품 추천 기능을 제공하고 있음을 표현하기 위해 'OOO님만을 위해 준비했어요!', 'OOO님, 이 상품 어때요?' 등의 유저의 이름을 불러주고 대화하는 듯한 UX Writing을 사용하였다. 유저는 나만을 위해 준비된 추천 상품을 확인한다는 느낌을 받을 수 있다.
사용자가 구매하고자 하는 상품을 최대한 적합하게 추천하기 위해 상품의 테마, 맛, 식재료로 검색 카테고리를 구분하고 카테고리별 원하는 키워드를 선택하면 그와 연관된 상품을 노출시킨다. 테마는 계절음식, 식단관리, 밀키트, 비건 등 다양한 테마를 설정할 수 있다. 맛은 달콤한, 매콤한, 새콤한 등의 맛을 선택하고, 식재료의 경우 면류, 채소류, 빵류 등 상품을 구성하는 메인 식재료를 옵션으로 선택하여 사용자가 찾는 상품을 추천받을 수 있게 했다.
별점 평가 기능 및 후기 사진 모아보기 기능
상품 후기 작성 시 별점 등록 기능을 추가하여 맛, 품질, 포장상태, 신선도 등 평가기준별로 별점을 입력할 수 있도록 한다. 별은 1~5개까지 등록 가능하다. 별점은 후기 상세 페이지로 들어가지 않고도 상품 후기 목록에서 바로 확인할 수 있도록 표시하여 사용자의 번거로움을 줄였다.
상품 후기 목록에서 유저가 직접 촬영한 사진 또한 바로 확인할 수 있도록 한다. 후기 게시글을 하나하나 선택해 들어가야 하는 불편함이 사라지고, 스크롤을 내리면서 사진과 내용을 한눈에 훑어볼 수 있어 편리하다. 그리고 상품 이미지와 동영상만 따로 모아볼 수 있는 모아보기 기능을 추가하여 이미지와 동영상을 따로 확인할 수 있도록 구분해 두었다. 이미지/동영상 중 하나를 선택하면 그에 대한 콘텐츠만 모아서 보여준다.
상품 후기 갤러리 하단에 찜하기와 선물하기, 구매하기 버튼을 추가하여 갤러리에서 상품을 확인하던 유저가 바로 전환 행동으로 이어질 수 있도록 유도하였다.
마켓컬리의 UX 개선점을 반영한 페이퍼 프로토타입을 처음으로 태블릿으로 그려보았다. 이전에 종이에 그려본 적은 있었는데 이번엔 스케치북이라는 어플을 이용하였다. 조금 익숙해지니 종이에 그리는 것보다 더 쉽고 깔끔하게 그릴 수 있어 편리했고, 생각보다 다양하고 섬세한 기능들이 있다는 것을 새로 알게 되었다.
페이퍼 프로토타입은 Lo-Fi Prototype의 일종으로 개발이나 디자인적 요소가 적용되지 않은 간이 산출물인 만큼 빠르게 작성하고, 새로운 아이디어를 반영해 수정할 수 있어야 한다. 그래서 새로운 프로덕트를 기획하는 단계에서 자주 쓰이는 프로토타입이다. 직접 한번 그려보니 개발자와 디자이너, 그 밖의 이해관계자와 빠르게 소통할 때 왜 유용하게 쓰인다고 얘기하는지 이해가 되었다.
서비스 기획 산출물에는 서비스 정책서, 기능 정의서, 스토리보드, 정보 계층 구조도, 플로우 차트 등 다양한 문서가 있다. 문서의 종류로 분류하자면 회사마다, 팀 내 업무 진행 방식에 따라 사용하는 문서가 저마다 다를 것이다. 그러나 이들의 공통점이라면 개발자, 디자이너가 참고하고 이들과 함께 소통하기 위해 서비스 기획자(PM, PO)가 작성하는 문서를 통틀어 일컫는 개념이다.
따라서 서비스 기획자는 신규 기획하거나 개선해야 하는 프로덕트의 성격과 업무 진행 방식에 가장 적합한 서비스 기획 문서를 작성할 수 있어야 한다. 서비스 기획 산출물을 작성하는 이유는 목적에 맞는 문서를 적시에 작성하여 이해관계자들과 유연하게 협업하기 위함이라는 것을 기억하자. 서비스에서 유저가 불편함을 느끼는 사소한 포인트를 기민하게 캐치하고, 보다 편리하게 기능을 개선하는 반복된 과정들이 모여 비로소 고객가치를 창출할 수 있을 것이다.
참고자료
