지식 정보 커뮤니티 'HOLIX'의 UI/UX 살펴보기
[코드스테이츠 PMB10기] Figma로 그리는 와이어프레임
원하는 직무의 다른 분들과 대화하고 정보 공유를 원하신 적 있지 않으신가요?
1. 유저 Flow
홀릭스는 어떤 서비스이고 태스크가 무엇인가?
홀릭스는 개인의 성장이 더 나은 세상을 만든다는 믿음을 바탕으로(미션) 지식과 지혜를 얻는 방식을 근원적으로 개선하여 누구나 삶에서 마주하는 문제를 더 나은 방식으로 해결할 수 있도록(비전) 하는 지식 정보 커뮤니티 서비스이다.
홀릭스의 주요 기능은 멘토님들이나, 같은 분야의 사람들과 대화를 나누고 정보를 주고받으며 성장할 수 있는 그룹챗과 성장에 필요한 정보가 담긴 코스를 수강하는 강의 기능이 존재한다. 이 중에서도 오늘은 최근 사용하고 있는 그룹챗 기능을 중점적으로 보고자 한다.
태스크란?
: 사용자가 수행하길 원하는 과제
사람들은 왜 홀릭스를 사용할까? 홀릭스를 사용하는 이유, 즉 홀릭스를 통해서 수행하기 원하는 주요 과제는 원하는 분야의 멘토분들이나 동료분들과의 정보공유와 대화를 위한 '그룹챗'이다. 홀릭스의 장점은 사용자들의 후기들만 보더라도 알 수 있다.
홀릭스가 제공하는 기능과, 사용자들의 후기를 통해 서비스의 특징을 종합하여 이야기하자면, '편리하고 직관적인 정보 공유'라 볼 수 있을 것 같다. 세상엔 다양한 분야에서 다양한 고민을 가지는 사람들이 있다. 이러한 고민을 해결하고자 할 때 어떻게 해야 할지 모르겠는 경우 조언을 구하고자 커뮤니티를 찾다 보면 대부분의 커뮤니티들은 진입장벽이 있거나, 어떤 커뮤니티가 있는지 정보를 찾기 어려운 경우가 많다.
홀릭스는 다양한 커뮤니티에 해당하는 그룹챗들을 한 곳에 모아놓고, 사람들이 쉽게 정보와 대화를 나눌 수 있어 직관적이면서도, 카카오톡과 같이 일상에서 사용하는 SNS와 분리되어 편리한 경험을 제공한다.
유저 스토리란?
: 사용자 관점에서의 '요구사항'을 수반한 이야기
개인적으로도 위의 후기들과 같은 이유로 홀릭스를 사용하고 있다. 특히 커리어를 기획자/PM으로 정하면서 지식 정보를 공유할 수 있는 커뮤니티를 찾던 와중 코드스테이츠 PMB 동기분이 과제로 올리신 것을 보고 알게 되어 사용하게 되었다. (ㅊㅇㅇ님 감사합니다:))
원래는 주로 카카오톡 오픈 채팅을 통해서 기획 관련 방에 들어가 있었다. 유명하신 '맥비'님의 3번째 방을 시작으로 기획 관련 오픈 채팅에 들어가 현업에 계신 뛰어난 분들의 인사이트와 정보를 공유받고 있었다.
하지만 아쉬웠던 점은 워낙에 많은 분들이 계시다 보니 하루에도 일반 대화들과 정보들이 뒤섞여 수백 개씩 쌓이는 채팅들은 참여할 때를 제외하고 다시 보는 과정에서 어려움이 있었고, 카톡과 오픈 카톡을 분리해두긴 했지만 지인들과의 대화 용도로 사용하는 카카오톡에서 오픈 채팅으로 사용하는 것에 개인적으로 불편함이 있었다.
이러한 경험을 개인적으로도 이용자 후기를 보더라도 많은 사람들이 가지고 있었기에, 나와 같은 사람들을 퍼소나로 설정했다. 커리어에 관해 고민을 가지고 있어 홀릭스를 사용하는 고객의 유저 스토리는 다음과 같다.
<사용자/고객>으로서 : WHO
커리어에 대한 고민을 가지고 정보를 얻고 싶은 나는
<OOO을 달성하고 싶다> : WHAT
카카오톡과 다른 편리한 방법으로, 멘토분들과 동료분들과의 대화와 정보 공유를 하고 싶다.
왜냐하면 <이유> 때문이다 : WHY
고민을 나눌 곳(커뮤니티 등)을 찾기 어렵고, 카카오톡 오픈 채팅은 이용하기 불편하기 때문이다.
주요 이용 흐름 : 그룹챗과 코스 중 그룹챗
홀릭스를 처음 시작했을 때의 기억을 되살려 사용자 흐름을 되짚어 보자. 홀릭스 앱에 접속하여 회원가입절차를 거친 뒤 그룹챗 메인 페이지가 나타난다. 처음에는 입장한 그룹챗이 없기 때문에 검색 페이지로 이동해 카테고리나 키워드, 혹은 직접 검색으로 원하는 분야의 그룹을 검색한다. 검색한 리스트에서 원하는 그룹을 선택하여 그룹 설명을 본 뒤 입장하기를 누르면, 그룹원들과 대화를 나눌 수 있다. 이렇게 입장한 그룹은 추후에 접속 시 메인 페이지에서 곧바로 입장이 가능하다.
2. 페이퍼 프로토타입 (Lo-Fi Prototype)
먼저 홀릭스의 사용자 흐름 중 사람들의 질문을 확인할 수 있는 '모든 질문' flow의 페이퍼 프로토타입을 그려보고 다음 단계에서 와이어프레임으로 제작해보고자 한다. 엥? 왜 이미 있는 앱을 그대로 베껴서 그려보는 것인가?라는 의문이 생길 수 있다.
예를 들어 미술로 이유를 설명을 해보고자 한다. 미술을 어렸을 적부터 취미로 배워왔는데, 미술에 있어서도 필요한 작업 중 하나이자 그림 실력을 늘리기 위한 공부 중 하나가 다른 사람들의 작품을 '모작'하는 것이 주요 커리큘럼이다. 잘 만든 작품을 디테일하게 관찰하고, 직접 구현하는 과정이 곧 연습이 되기 때문이다.
이렇게 사용하고 있는 서비스의 유저 스토리를 찾아보면서 디테일하게 살펴보고, 프로토 타입과 와이어프레임으로 따라 해보는 과정 그 자체를 통해서 서비스를 만들어 나가는 과정에 대한 연습이 된다는 점에서 다음과 같이 페이퍼 프로토타입을 손수 그려보았다. (정말 여담이지만 고대 그리스의 조각상들 상당수는 청동으로 만들어졌지만 소실되어 남아있지 않아 후대 사람들의 대리석 모작들이 현재까지도 남아있다고 한다)
직접 수기로 그려본 페이퍼 프로토타입위 그림은 사용자의 흐름 중 그룹챗이 오픈 채팅과의 차별되는 주요 기능인 질문 기능을 중점으로 그린 페이퍼 프로토타입이다. '파란색 영역'을 터치하였을 때, '진한 검은색 화살표'와 같이 페이지가 이동하게 되는 구조이다. 홀릭스 그룹챗이 카카오톡 오픈 채팅보다 편리한 점은 입장하기 이전의 대화도 확인할 수 있는데, 이 대화가 질문으로 등록된 경우 쉽게 원하는 정보를 찾아볼 수 있다는 점이다.
그룹 챗 내에서 이용할 수 있는 주요 기능
1) 기본적으로 대화를 통해 정보를 나눌 수 있으며 과거의 대화도 확인이 가능하다.
2) 나눈 대화들 중 질문으로 구분된 것들을 모든 질문 탭에서 쉽게 찾아볼 수 있다.
3) 질문 이외에도 본인이 참여한 대화는 스레드로 확인할 수 있다.
4) 퀴즈와 투표를 만들어 공유할 수 있으며, 이 기록 또한 확인이 가능하다.
3. 와이어프레임(Mid-Fi Prototype)
피그마로 그려본 와이어프레임페이퍼 프로토타입을 기반으로 위와 같이 피그마를 통해서 와이어프레임을 제작해 보았다. 이렇게 페이퍼 프로토타입을 다시 피그마(Figma)와 같은 프로토타이핑 툴로 제작하는 이유는 PM 혼자 가지고 있는 문서가 아니라 팀 간에 설득과 조율을 위해서, 시니어 PM분들과 같은 의사결정권자 분들께 보고하기 위해서 등 소통을 위한 정식 업무를 위한 기획 산출물로써 기록해야 하기 때문이다. 그래서 PM에게 Figma와 같은 프로토타이핑 툴 사용 능력은 논리력이나 설득력 등의 주요 요소까진 아니더라도 필요한 역량 중 하나라고 볼 수 있다.
앞서 모작을 통해 연습의 과정이 된다는 말을 페이퍼 프로토타입 부분에서 이야기했었다. 모작에서 중요한 것은 무엇을 배웠는지 기억하는 것이 가장 중요하다. 배운 내용을 복습하고 활용하는 것이 스스로에게 큰 도움이 되는 것이다. 개인적으로 홀릭스의 UX/UI를 보면서 느낀 점은 다음과 같다.
1) 직관적인 정보 공유가 편리하도록 UX/UI가 설계되어있다
홀릭스는 지식 정보 커뮤니티를 지향하고 있다. 지식 정보 커뮤니티에게는 우선 사용자 간의 많은 정보 공유가 중요할 것이다. 홀릭스는 서비스에 입장하고 바로 그룹챗을 이용할 수 있게 메인 페이지로 배치했다. 가장 많이 사용하는 기능을 페이지의 가장 앞단에 제시함으로써 사용자의 편의성과 접근성을 높여 직관적인 정보 공유가 가능하도록 한 것이다.
또한 다양한 카테고리와 태그로 쉽게 커뮤니티를 찾고 입장할 수 있도록 하였다. 이러한 점들은 종합적으로 UX 심리학에 있어서도 사용자가 쉽게 접근하여 사용할 수 있도록 한 피츠의 법칙 (Fitt's Law)을 적용한 부분이라고도 볼 수 있다.
2) '모든 질문' 기능과 같이 카카오톡 오픈 채팅의 아쉬운 점을 해결하고자 한다
앞서 언급한 것처럼 카카오톡 오픈 채팅의 아쉬운 점은 이전 대화를 볼 수 없고, 많은 정보가 쌓이다 보면 확인이 힘들며, 일상의 대화 매체와 분리의 필요성을 느낀다는 점이다. 홀릭스는 이러한 사용자의 불편함을 해결하기 위해 UI/UX를 설계하고 있다.
위의 프로토타입과 와이어프레임에서도 분석했듯이 질문을 모아서 볼 수 있는 기능은 핵심이라 볼 수 있다. 그룹원들이 나눈 대화를 참여하는 순간부터 언제든지 볼 수 있고, 질문 탭을 통해 쉽게 접근하여 찾아볼 수 있다. 홀릭스를 사용하면 자연스럽게 카카오톡과 대화가 분리되는 것 또한 장점이다.
3) 심미적으로 아름답고 편리한 디자인을 가지고 있다
홀릭스는 일러스트 이미지, 깔끔하고 간결하게 통일된 UI 등을 통해 아름답게 디자인되어있다. 디자인은 사용자로 하여금 서비스를 사용하는 데 있어서 좋은 경험을 남길 수 있는 요소 중 하나이다. 또한 감각적이고 푸른 계열의 컬러는 카카오톡과 전혀 다른 매체라는 점을 통해 사용자의 편리성을 디자인적으로 다시 한번 인지시키는 도구가 될 수 있다.
전체적인 UI/UX는 그럼에도 기존에 사용하던 채팅 서비스들과 유사한 느낌을 가지고 있고, 특히 좋아요나 투표 등 다른 서비스들에서 많이 사용하는 장점들을 가져오면서 UX 심리학적으로 사용자가 알고 있는 다른 서비스들과 같은 방식으로 작동하기 원하는 제이콥의 법칙(Jacob's Law)을 적용한 부분이라 볼 수 있다.
글을 마치며..
개인적으로 근무했던 회사의 모바일 앱 UX/UI를 Adobe XD로 제작한 경험이 있고, 포토샵, 일러스트, 프리미어 등의 유사한 어도비 프로그램을 사용해왔기 때문에 제작 자체는 어려움이 크게 있지 않았다. 하지만 기존에 일하면서 페이퍼보단 추후 수정이 편리하다는 점에서 주로 바로 어도비에 그려가면서 제작했었는데, 손으로 그리는 과정이 시간은 조금 걸리지만, 디테일한 부분을 생각하고 아이디어를 구체화하는데 생각보다도 더 도움이 된다는 것을 느꼈다.
마침 참여 중인 기획 정보공유 방에서도 수기로 초안 작성을 무조건 하신다는 PM 분이 계셨는데, 찾아보니 인간의 뇌는 손으로 무언가를 그리거나 쓰는 행동을 할 때 창의적인 행위의 뇌 영역이 활성화되고, 타이핑하는 행위 등은 노동 행위를 하는 것과 같은 부위를 쓴다고 한다. 물론 피그마는 타이핑 툴은 아니지만 그만큼 페이퍼 프로토타이핑을 해보고 이를 피그마와 같은 툴로 체계화하는 과정이 도움이 된다는 점을 배웠다.
10가지 UX 심리학 법칙에 관한 이전 포스팅
사용자 스토리 관련 참고하면 좋은 글
