–
1.미니맵의 디테일한 기획 뜯어보기!
미니맵은 2017년 베타서비스로 런칭한 게임 전문 커뮤니티 서비스입니다. 다양한 게임 소식은 물론, 게임에 대한 평가 요소를 바탕으로 추천을 받을 수도 있죠. 왓챠피디아의 게임판이라고 보셔도 될 것 같습니다. 얼마전 스트롱벤처스를 통해 시드 투자유치에도 성공!
저도 이 투자유치 관련 뉴스를 보고 앱을 다운로드 받아 하루 정도 꾸준히 써보게 되었는데요. 앱을 살펴보며 기획 관점에서 몇 가지 디테일하게 적용된 기능들이 있어 간략하게 소개해보려고 합니다.
먼저, 회원가입입니다. 입력값에 대한 유효성 체크에는 두 가지 방법이 있는데요. 먼저 형식의 유효성을 따지는 방법으로 서버와 통신 없이 클라이언트에서 입력값, 자리수 등의 형식을 실시간으로 확인해 사용자에게 안내하는 방법이 있습니다. 인풋 박스 내 피드백을 바로 확인 할 수 있는 방법이기도 하죠. 또 하나는 데이터 유효성으로 DB에 저장되어 있는 데이터와 일치하는지 등을 확인해 안내하는 방법입니다. 앞선 방법은 이메일 형식, 비밀번호 자리수 등을 확인할 때 쓰이며, 후자는 아이디 중복 여부 등을 확인 하는데 쓰이는데요.
여전히 데이터를 입력한 후, 가입하기 등의 버튼을 트리거로 활용해 입력값이 맞는지 등을 안내하는 서비스가 많은데요. 미니맵은 이메일 회원가입 시, 전자의 방법을 정석대로 활용하고 있었습니다. 먼저 이메일 주소에 해당하는 입력값을 사용자가 입력하는 대로 빠르게 인풋박스 하단으로 메시지가 제공됩니다. 형식에 맞는지, 중복된 이메일은 아닌지 등을 말이죠. 이 두 가지를 실시간으로 체크해 최종적으로 입력한 이메일 주소를 사용 할 수 있는지 빠르게 안내해줍니다.
이메일 중복확인 버튼이나 회원가입에 필요한 이메일 주소, 비밀번호를 모두 입력한 뒤 가입하기 버튼을 탭했을 때 위와 같은 안내가 제공되었다면, 사용자 입장에서는 어떤 입력값이 잘못 되었는지 확인해야 하는 불편함과 다시 입력해야 한다는 불편함을 동시에 느낄 수 밖에 없습니다. 회원가입 화면, 그 중에서도 이메일 가입은 극히 일부 사용자들이 사용하는 화면으로 서버와의 통신이 어렵지 않기에 이런 디테일을 적용하기에 정말 좋은 곳이기도 하고요.
회원가입에 문제가 생기는 경우를 대비해 문의하기를 키패드 상단 영역에 고정, 제공하고 있습니다. 최근에 가입한 서비스 중, 가입 과정에 문제가 있을 땐 바로 문의하라는 메시지를 제공한 곳은 처음봤기에 더 인상깊었던 내용이었어요. 문제가 발생 할 확률이 높지 않다고 판단하는 경우가 많은데, 저 메시지를 노출해주는 것 자체로 사용자에게는 하나의 ‘안전장치’가 될 수 있고, 이런 디테일들이 서비스에 대한 신뢰도와 인상을 결정짓는 요소라고 생각합니다. 게다가 회원가입은 서비스 이용의 첫 걸음이나 마찬가지라 더더욱 말이죠.
또 한 가지 눈에 띄는 점은 단계별 사용자에 대한 ‘안내’입니다. 다음 단계로의 자연스러운 이동, 처음 접하는 화면 내 기능에 대한 소개가 포함되는데요. 미니맵에서는 플랫폼(안드로이드, 스위치, iOS 등) 선택 후 20개 게임 타이틀을 평가해야 분석 결과를 받아 볼 수 있습니다. 회원가입과 동시에 게임 평가에 대한 안내가 먼저 제공 되는데요. ‘이제까지 했던 게임들을 평가해 볼까요?’ 라는 메시지로 사용자가 다음에 어떤 행동을 할 수 있는지 명확하게 안내하고 있습니다. 또 20개 게임에 대한 별점 등 평가를 진행하면 팝업 형태로 분석 결과를 보러 갈 수 있는 버튼을 제공해줍니다. 평가, 평가에 따른 분석은 미니맵이란 서비스의 핵심으로 회원가입부터 분석 결과 확인까지 자연스럽게 확인 할 수 있는 구조를 만들어 놓은 것이죠.
분석 결과 확인 후, 피드화면으로 이동하게 된 이유는 하단 탭에 툴팁이 제공 되었기 때문입니다. 게임에 대한 내용을 다루는 앱 답게 게이미피케이션이 적절히 담겨 있는데요. 바로 진행 가능한 미션이 있다는 것을 안내해주기에 피드탭으로 이동했는데, 화면 상단에 피드에 어떤 콘텐츠가 주로 보여지며 이에 대한 설정이 가능하다는 내용과 설정화면으로 이동 가능한 텍스트 링크를 제공하고 있었습니다.
회원가입에서부터 주요 기능에 대한 사용 유도와 안내까지 오랜만에 잘 정리된 서비스를 만났다는 느낌이 들었는데요! 한 번 이상은 써본 기능이야. 익숙할거야. 라는 생각으로 넘길 수 있는 과정들을 다시금 확인 하게 되는 사례이기도 했습니다.
–
1-1 함께 읽어보세요!
–
2.코끼리 명상앱은 왜 배경음악을 적극적으로 활용할까?
명상을 한 번씩 해봐야지 – 하고는 지금까지 특정 앱이나 서비스를 이용해본 적은 없었는데요. 코끼리를 시작으로 Meditopia, Calm(삼성 헬스와도 제휴가 되어 있는 곳), Lucid 등 총 네 가지 서비스를 일괄 다운로드 받아 한 번씩 활용해보게 되었습니다.
앱을 실행하자 마자 공통적으로 만날 수 있는 화면은 ‘로그인’과 ‘회원가입’ 화면이었는데요. 재밌었던 점은 루시드를 제외하곤 모두 ‘이미지’가 아니라 ‘영상 또는 애니메이션’을 적용해두었다는 점이었습니다. 명상? 하면 우리가 흔히 떠올리는 이미지를 영상으로 시각화 했다는 생각이 들었어요. Clam은 산과 호수가 보이는 풍경을, Meditopia는 자연속에서 본인들의 서비스를 사용하는 모습을 잔잔하게 보여주고 있었습니다. 앱 실행과 동시에 이런 시각적 자극을 받게 되니, 아 내가 이 앱을 받은 이유가 이런거였지! 라는 생각을 다시 한 번 할 수 있었어요. 이때 만큼은 일반적인 인식이 서비스에게 도움이 된다는 생각도 들었고요. 명상에 대해서 말이죠.
그 중 제 개인적인 기준에서 단연 눈에 띄는 건, 코끼리였어요. 일반 영상이 아니라 본인들을 가장 잘 대변할 수 있는 코끼리가 나오는 애니메이션 형태의 영상을 보여주고 있었기 때문인데요. 뿐만 아니라 앞서 언급한 4개의 서비스 중 유일하게 ‘배경음악’을 활용하고 있었습니다. 명상이 보통 누군가의 ‘목소리’ 또는 ‘음악’을 통해 진행되는 경우가 많기에 그 느낌이 잘 녹아들었다는 생각이 계속 들었어요. ‘카카오로 이용하기’를 탭하기 전, 배경음악과 그 속에 있는 코끼리의 모습을 한참 바라보기도 했고요.
물론 영상 자체만으로도 명상이라는 키워드를 충분히 연상할 수 있고, 어떤 ‘기대’를 할 수 있지만 앱을 설치해야겠다. 앱에서 이런걸 해볼 수 있으려나. 라는 생각들의 끝에 잔잔하면서도 서비스만의 아이덴티티가 담긴 배경음악과 영상을 함께 볼 수 있다는 건 꽤 놀라운 경험으로 다가왔습니다.
–
2-1 함께 읽어보세요!
–
3.위버스는 왜 FAQ 페이지를 개선했을까?
위버스는 빅히트엔터테인먼트의 자회사 beNX에서 개발, 위버스샵과 함께 운영하고 있는 모바일앱입니다. 소속 아티스트 별 커뮤니티가 존재하고 해당 공간에서 아티스트와 팬이 함께 소통하며 여러 콘텐츠를 즐길 수 있는 공간이기도 하고요.
위버스를 써보며 가장 불편하게 느껴졌던 공간 중 하나가 바로 고객센터였는데요. 기존에는 설정 – 고객센터로 진입 시 자주 묻는 질문과 1:1문의가 각각 나뉘어 있었고 다시 상세 화면으로 진입해야 하는 구조였습니다.
자주 묻는 질문 화면으로 진입하면 카테고리 별 질문이 상-하 구조로 쭉 나열되어 있었고 원하는 카테고리를 찾아 바로 이동하는 것만 가능했었는데요. 질문이 꽤 많음에도 불구하고 검색 기능이 없어서 원하는 내용을 빠르게 찾지 못하는 경험을 할 수 밖에 없었습니다. 원하는 질문을 찾아 탭하면, 페이지 전환없이 내용이 펼쳐지는 구조로, 질문에 대한 답 역시 옅은 회색으로 적용, 사이즈 역시 작아 보기가 쉽지 않았습니다.
그러데 얼마 전, 위버스가 이런 불편함에 대한 업데이트를 진행했습니다. 가장 큰 변화는 공지사항과 자주 묻는 질문, 1:1문의와 사용자가 개별 작성한 내역을 한 화면에서 쉽게 확인 할 수 있도록 했다는 점입니다.
공지는 가장 최근의 1개만 상단에 고정이 되어 있고, 전체 보기를 통해 상세 화면으로 이동, 전체 리스트 확인이 가능합니다. 또 화면 내 탭을 2개로 구분해 하나는 자주 묻는 질문으로 또 하나는 나의 문의 내역으로 구분했습니다. FAQ 탭에는 기존에 없었던 검색탭과 플레이스 홀더 텍스트가 적용되었고 자주 묻는 질문도 카테고리에 따른 구분 대신 사용자들이 자주 묻는 질문을 뽑아 먼저 확인 할 수 있도록 구성했습니다.
탐색 전, 검색을 통해 원하는 질문을 바로 찾아볼 수 있도록 한 검색창 위치가 기존 대비 가장 큰 변화이자 사용성을 높일 수 있는 역할을 하지 않을까 싶네요. 더불어 공지나 질문등에 대한 상세 내용이 기존 대비 더 진한 컬러 (회색 – 검정색)로 변경되었고 질문 역시 기존 대비 더 선명해진 느낌을 받을 수 있었습니다. 상세 화면에서는 질문과 답이 각각 어떤 카테고리에 해당하는지 다시 한 번 확인 할 수 있고요.
FAQ와 문의는 서비스와 사용자를 직접적으로 연결해주는 중요한 소통 창구 중 하나입니다. 서비스를 구성하는 기본적인 요소 중 하나이기도 하고요. 자주 묻는 질문을 찾아 간다는 것은, 문의를 남겨야겠다! 라고 생각하는 것은 일반 사용자 보다 더 적극적으로 서비스를 사용한다는 것을 의미하기에 그 공간에서 사용자를 헤매게 하거나 길을 잃게 만들 경우 부정적인 영향을 끼칠 수 밖에 없는데요. 이번 위버스의 개선은 이런 중요성을 잘 보여줌과 동시에 FAQ 등을 어떻게 구성하면 좋을지에 대한 좋은 정보를 제공해준다고 생각합니다.
–
지금 써보러 갑니다 뉴스레터를 통해서는 서비스 구성 요소와 관련된 에디터들의 팁과 실제 다양한 구성 사례를 함께 확인해볼 수 있어요. 최근 발행된 내용은 ‘통계 기능’이었습니다. 뉴스레터를 하나씩 살펴보면 로그인, 회원가입, 알림, 장바구니 등 특정 기능을 기획, 디자인하는데 필요한 구체적인 내용을 깊게 확인 하실 수 있을거에요! (구독하러 가기)
–
- 148개의 현대적인 서체 정보를 큐레이션 해주는 곳!
- 페이스북, 인스타그램, 유튜브 광고를 입력한 정보에 따라 미리 확인해볼 수 있는 곳!
- 눈에 띄는 웹사이트를 페이지와 섹션에 따라 확인할 수 있는 곳
- 모바일앱, 앱서비스에 적용된 모션 사례를 확인할 수 있는 곳!
- 랜딩페이지, 사전예약, 이커머스 및 대시보드 구성을 위한 무료 HTML 템플릿을 확인할 수 있는 곳!
–
