SaaS UX 실전 | 메인페이지 v.1 그리기
Intro
홈이라고도 부르고, 랜딩 페이지라고도 부르는 이 곳. 저는 메인 페이지라고 부르는데요. 구글링을 좀만 해보면 효과적인 랜딩 페이지 만드는 법 11가지 와 같은 아티클들을 쉽게 찾아볼 수 있습니다. 물론 이런 글들을 한번씩 정독해둘 필요도 있겠는데요. 다만 어떤 식으로 불리는 페이지든간에 (랜딩 페이지든, 홈이든, 메인 페이지든 ...) 우리 서비스를 사용할 고객이 누구이며, 우리 서비스의 인지도는 어느 정도인지 등 다양한 변수들에 대한 고려는 필수입니다.
상품 상세 페이지도 랜딩 페이지라 불리는지라, 정말 많은 글들이 나옵니다.마침 저도 새로운 메인 페이지를 기획해야 됐었는데요. 오늘은 그래서 제가 어떤 순서로, 어떤 고민들을 해가며, 어떻게 메인 페이지 초안을 기획해나갔는지를 공유해보려 합니다. 목차는 아래와 같습니다.
00. Intro
01. Background & Requirements
02. Research
03. Wireframes
04. Outro
Background & Requirements
보통의 경우라면, 가장 먼저 현재의 UX 플로우를 검토합니다. 정량적, 정성적 데이터를 활용해 고객이 제품을 어떻게 쓰고 있는지 파악하고 문제를 짚어내는 단계죠. 그런데 저는 조금 다르게 접근해야 합니다. 아직 제품이 없기 때문이죠. 정량적, 정성적 데이터를 확보할 고객이 없어요. 지금 얘기할 수 있는 건 모두 가설입니다. 여기서는 속도가 중요해요.
만들어져야 할 페이지는 정해져있습니다. 메인 페이지죠. 어떤 요소 요소들이 들어가면 좋겠냐를 팀원 모두가 납득할 만한 수준에서 정하면 됩니다. 끝이에요. 가장 빠른 방법이 뭘까요? 팀원들한테 물어보는 겁니다.
의견이 안 달리나요? 리뷰할 때마다 요구사항은 미리 쓰레드에 달아달라 요청하자구요.다행히 대표님이 이런 의견을 주셨습니다.
리디북스나 Artlist 처럼 상단에 서비스를 소개하는 배너가 있고, 그 아래로는 실제로 우리가 판매 중인 상품이 보였으면 해요.
그렇게 해야될 이유도 함께 물으면 좋은데요. 아래와 같이 답을 주셨어요. 이렇게 하면 요구사항과 요구사항에 대한 근거 정리 끝입니다. 혼자 고민하는 것보다 훨씬 쉽고 빨라요.
고객은 필요로 하는 상품이 있고, 그걸 사기 위해 우리 서비스를 찾는 거잖아요. 그렇다면 고객이 필요로 하는 바로 그 상품들을 가장 전면에, 가장 접근성이 좋은 곳에 배치해야겠죠. 메인 페이지가 그 역할을 해줘야 한다고 봐요.
Researh
이어서 리서치를 진행하는데요. 지금 중요한 건 속도라서 방대한 리서치는 오히려 독이 될 수 있습니다. 리서치는 참고 요소일 뿐, 고객의 구매를 보장하진 않거든요. 명심하세요. 데이터를 뜯어보기 전까지, "A하면 B할 것이다" 라고 확신하는 건 조심해야 합니다.
다행히 앞에서 팀원들 의견을 받으며 레퍼런스 범위를 좁힐 수 있었어요. 리디북스와 Artlist를 참고하면 되겠죠. 서비스 소개는 어떻게 해야 핵심만 간단히 전달할 수 있을까요. 상품은 어떤 UI로 보여줘야 좋을까요. 이런 고민을 하면서 두 서비스의 메인 페이지를 훑어보기 시작했습니다.
실전 Tip )
처음부터 완벽한 걸 만드려 하지 마세요. 와이어프레임은 몇 번 리뷰 과정을 거치며 하나둘 고쳐져요. 앞에서 정리한 요구사항과 그 요구사항의 근거를 명심하며 “필요한 부분만” 퀵하게 리서치를 진행합니다. 모든 걸 다 뜯어보려 하진 않아요.
자, 먼저 리디북스 입니다. 리디북스 메인 페이지의 최상단은 롤링 배너가 차지하고 있습니다. 신간도서와 이벤트 등을 카드 템플릿으로 홍보하고 있네요. 제가 만들 서비스에 대입해서 생각해봅니다.
고객이 신상품이나 이벤트 등에 대해 궁금해 할까? (...)
최상단에는 롤링배너와 메뉴바가 배치되어 있어요글쎄요. 필요한 영역은 아닌 거 같습니다. 저흰 아직 고객과 몇 마디 대화도 못 나눠 봤는걸요. 저희가 누군지, 저희와 함께하면 고객이 어떤 이득을 누릴 수 있는지 소개하는게 먼저입니다. 요구사항을 정리할 때 이미 그렇게 정리하기도 했죠. 넘어갑니다.
그 다음 영역에서는 각종 세부 페이지들로 다이렉트 이동할 수 있는 메뉴들을 배치했네요. 리디북스는 아무래도 복잡도가 높은 서비스다 보니 GNB로 모든 페이지 네비게이팅이 어려운가 봅니다. 저희 서비스는 어떨까요? 저희 서비스는 아직 리디만큼 페이지가 많지 않습니다. GNB로 대부분 연결이 가능해요. 이 영역도 저희에게 필요한 영역은 아닌 거 같습니다. 넘어갑니다.
신간 안내와 소셜 프루프 영역이 있네요이어서는 신간을 안내하고 있네요. 6개 도서를 일렬로 보여주는 리스트 UI를 선택했고요. 좌우 이동 버튼을 뒀네요. 할인율과 도서 썸네일, 제목과 저자를 보여주고 있어요. 백그라운드 컬러를 어둡게 주고 있는데, 바로 위 영역과 구분을 두기 위한 의도일 듯 해요. 심심함도 덜하고, 이목도 집중되는 효과가 있죠. 위 요소들은 다 충분히 참고할 만한 부분들인 거 같아요.
그 다음엔 현재 시간을 보여주면서 지금 리디 유저들이 가장 많이 읽고 있는 책들을 보여주고 있어요. 실제로 많은 사람들이 리디북스를 이용하고 있다, 소위 Social Proof를 보여주기 위한 영역 같은데요. 좋은 Social Proof는 Fomo(Fear of missing out)를 일으켜야 한다고 생각하는데, 딱히 Fomo가 느껴지진 않아요.
오, 그런데 여기는 9개 도서가 3X3 그리드의 형태로 나오네요. 똑같은 리스트 UI가 반복돼서 나오면 아무래도 심심한 면이 있다 보니 변화를 준 거 겠죠. 이런건 참고하면 좋겠죠.
베스트셀러는 3X3 그리드로 평점과 함께 보여주고 있어요이어서 베스트셀러라는 탭이 나오는데요. 여기서는 평점 데이터까지 보여주네요. 베스트셀러라서 자신있나 봐요. 아쉽지만 우리 서비스는 아직 평점이나 리뷰를 붙이지 못했어요. 나중에 베스트셀러를 보여줄 때는 평점이나 리뷰 수를 같이 보여주면 좋을 거 같다는 생각이 듭니다.
5월 시즌에 맞는 큐레이션 탭도 있네요마지막으로는 지금 시즌에 알맞은 도서들을 큐레이션 해주는 영역이네요. 5월의 광주, 기분이 초록초록해, 이런 큐레이션형 카피를 쓰고 있어요. 여기는 어드민에서 따로 등록할 수 있게 해둔 거 같죠? 자신있는 도서만 올린 걸테니, 역시 평점 데이터를 같이 보여주네요.
네, 그럼 이어서 Artlist 를 볼게요. 생소한 서비스일텐데요. 그만큼 고객 입장에서 메인 페이지를 해석하기 쉬우실 겁니다. 같이 보시죠.
영어로 쓰는 타이틀은 늘 심플해서 부럽습니다최상단에 큼직하게 우리 어떤 서비스고, 우리 서비스에서 고객이 어떤 이득을 얻을 수 있는지 명확히 설명해주고 있습니다. 백그라운드 이미지도 페르소나의 TPO를 명확히 겨냥하고 있어요. 우측에 있는 모델은 마치 나(= 고객, eg. 유튜버) 같은 사람인데, 타이틀 설명을 보아하니 여기서 음원 저작권 문제를 해결할 수 있는 거 같고, 시작하려면 컬러 강조가 되어있는 '지금 무료로 시작' 버튼을 누르면 되겠구나, 이런 식으로 자연스럽게 생각이 이어집니다. 최초에 정리한 요구사항에 맞는 좋은 배너 예시라 생각돼요.
전세계에서 최고라 말할 수 있는 저 자신감. 신뢰도가 상승합니다이어서는 두 가지, 고객의 대표적인 걱정거리를 해소해줍니다. 가장먼저, 믿을만한가. 초기 서비스는 아무래도 인지도도 낮고, 생소한 개념을 다룰 확률이 높죠. 돈 떼먹는 곳은 아닐까, 설명한 것과 달리 턱없이 부족한 기능을 갖고 있는 건 아닐까, 소위 돈 값을 할까 등등. 그런데 고객들 누구나 알법한 유명인 또는 회사가 이 서비스를 쓰고 있다고 해볼까요. 이상한 서비스는 아니겠구나, 이런 생각이 들겠죠.
그리고, 어디에 어떻게 활용할 수 있냐. Artlist는 '음원 라이선스' 라는 생소한 무형의 권리를 사고 파는 곳인데요. 여기서 음원 라이선스를 일정 돈을 지불해 사고 나면 (...) "그래서 뭐? 어디에 어떻게 활용할 수 있는거야?" 설명이 없으면 감이 없죠.
"업로드할 유튜브 영상에 음원으로 쓰고 싶은데 그래도 괜찮을까?"
고객은 이런 걱정을 할 수 밖에 없습니다. 그리고 저작권 관련 문제를 해결하는 업의 특성상 고객들은 이런 문제에 가장 민감할 수밖에 없어요. 그래서 Artlist는 가장 대표적인 유튜브에서부터 기타 상업 목적 모든 매체에서 활용할 수 있다는 걸 서브 타이틀에서 강조하고 있어요. 그 아래에는 매체 하나하나를 체크표시와 함께 적어뒀고요. 신뢰가 확 가죠. 그리고 그 아래 다시 한 번 더 '지금 무료로 시작' 버튼을 두었습니다. 굳이 스크롤 올릴 필요 없이 시선이 있는 곳에서 바로 시작할 수 있도록요.
페이지네이션을 하지 않았고, 그대로 리스트 UI를 메인에 배치했어요그 아래로는 쭉 상품, 즉 음원 리스트를 배치했습니다. 페이지네이션을 따로 하진 않았고, 구글 이미지 검색처럼 스크롤링할수록 새로운 음원 리스트가 불러와지는 방식입니다. 이 방식은 장단점이 있는데요. 아래까지 스크롤링된 상태에서 특정 상품을 클릭 시 상세 페이지로 넘어가게 되는데, 상세페이지에서 뒤로가기 버튼을 눌렀을 때 해당 상품이 있던 위치가 불러와지지 않아요. 상품이 있던 곳을 찾으려면 다시 스크롤링을 여러번 해야되는 불편함이 있죠. 저희 서비스는 상품의 개수도 아직 부족하기 때문에 Artlist의 방식을 참고하긴 어려워 보입니다.
정리해보자면 Artlist는 리디북스와 달리 메인페이지가 곧 상품 리스트, 상품 검색 페이지네요. 이 역시 장단이 있습니다. Artlist와 같은 구성이면 메인페이지에서 곧바로 고객이 필요로 하는 상품을 찾을 수 있는데요. 다만, 새로운 상품과 카테고리를 발견할 확률이 적습니다. 쿠팡을 쓰다보면 내가 검색도 안해봤는데 메인페이지에 내가 딱 필요한 상품이 뜬 적, 종종 있으실 거예요. 모두 쿠팡의 설계죠. 쿠팡의 배려가 없었다면 어떤 검색어를 입력해야 하나, 어떻게 필터를 걸어야 하며 고민하다 이탈해버렸을지도 모릅니다. Artlist 보다 리디북스의 상품 리스트 UI가 메인페이지에 더 걸맞는 UI라 보는 가장 큰 이유예요.
Wireframe
이제 마지막 작업입니다. 리서치 과정에서 어느정도 Do&Don't 가 정리가 될텐데요. 정리한 걸 바탕으로 퀵하게 와이어프레임 초안을 그려봐요. 블럭 단위로 가능한 가장 심플하게 만들고 팀원들과 리뷰 시간을 가집니다. 피드백을 받게 되면 여러 개 요청사항들이 새롭게 생겨날 거예요. 그럼 그 요청사항들에 맞게 다시 또 위 작업을 반복하면 됩니다. 좋은 팀이라면 이 작업이 되도록 덜 반복될 수 있도록 첫 리뷰에서 많은 논의들이 오가야겠죠? 와이어프레임 리뷰를 주도하는 저는 이때 의견이 최대한 얼라인될 수 있도록 많이 물어보고, 많이 듣고, 많이 결정합니다.
리뷰 중 많이 하는 말 : "이거는 그러면 이렇게 하면 될까요? 네 좋습니다"리뷰할 때 최대한 빨리 의견을 얼라인 시키고 싶으시다면, 맨 위 Background & Requirements 부터 스스로가 고민하고 팀 내에 공유된 의견들을 천천히 공유해주세요. 배경에 대한 설명이 없으면 사람들은 더 방어적으로 와이어프레임을 볼 수밖에 없어요.
Outro
최초 페이지를 기획할 때라면 어느것도 확신할 수 없다는데 주의해야 합니다. 되도록 팀원의 의견에 귀기울이고, 하나둘 실험해가며 팀 전체의 레슨런을 쌓는데 의의를 둘 필요가 있어요. 특히 메인페이지는 모든 페이지 중 가장 중요한 페이지라고 볼 수 있으니까요. 100번은 고칠 마음으로 겸허하게 작업하는 걸 권장드립니다. 서비스가 어느정도 고도화가 되가면, 데이터를 바탕으로 어떻게 문제를 발견하고 어떤 식으로 팀 내 커뮤니케이션을 거쳐, 어떤 식으로 화면을 개선해나가는지 도 공유드릴게요. 그럼, 긴 글 읽어주셔서 감사합니다.