UI/UX

기획자의 모바일 앱 뜯어보기⑤

#댓글과 대댓글 #Tally #핀트 #에임 #파운트 #텐바이텐

2021.03.10

구글 검색 선호 매체로 추가

글. 한성규 지금써보러갑니다 운영자
URL. http://icunow.co.kr/

로보어드바이저 3개 서비스 온보딩 과정 비교

세 명이 함께 하고 있는 스터디 ‘intersection’에서는 ‘#서비스’라는 공통 키워드 외 두 가지 키워드를 선정, 총 세 가지 키워드에 대한 내용을 공유합니다. 첫 번째는 여행과 코로나, 두 번째는 주식과 AI였습니다. 저는 주식보다 AI가 투자에 어떤 영향을 끼치는지 더 큰 관심이 있었습니다. 스터디 내용은 통합본으로 별도 업로드할 예정이기에 이번에는 국내 대표 3가지 서비스 ‘에임’, ‘핀트’, ‘파운트’의 온보딩 과정을 간략하게 살펴보려고 합니다.

제가 이 서비스들의 담당자였다면, 무엇보다 고객이 ‘첫 경험’이라는 사실과 ‘낯섦’이라는 감정을 어떻게 이해하고 받아들일 수 있을까?라는 질문을 먼저 해결하고자 노력했을 것 같아요. 사람이 아닌 AI가 내 자산으로 분산 투자를 한다고? AI는 과거의 데이터로 학습하고 투자할 텐데, 미래에 대한 판단이 더 중요한 주식과 투자에서도 제 역할을 할 수 있을까요? 저도 초보라 궁금한 점이 많아요. 그렇다면 하나씩 살펴볼까요? (서비스가 지닌 이슈 등은 작성에 고려하지 않았습니다.)

(1)에임

어느덧 버전 앞자리가 3까지 올라온 서비스입니다. 에임은 앱 실행과 동시에 대표가 직접 작성한 메시지를 확인할 수 있도록 구성돼 있어요. 이 서비스의 주요 알고리즘은 어떻게 만들어졌는지, 에임을 통해 무엇을 얻어 갔으면 좋은지 등 여러 내용이 담겼습니다.

그리고 다음 화면에서 사용자는 2가지 중 하나를 선택할 수 있어요. 로그인하거나, 포트폴리오를 받아보는 것. 로그인이 풀리거나 재설치한 경우보다 첫 사용자에게 더 중요한 화면일 가능성이 높다는 판단하에 ‘무료 포트폴리오 받기’ 버튼이 더 강조된 모습입니다.

무료 포트폴리오 받기를 선택하면 6가지 항목에 차례대로 답변해야 해요. 이 항목이 온보딩의 핵심입니다. 투자 진행 여부나 연간 수입, 보유 금융자산 등을 직접 입력해야 하기 때문입니다. 의도대로라면 사용자는 그 질문에 스스로 답하면서 자신의 현재 상황을 알 수 있습니다. 상품 자체의 매력보다 자신의 상황과 배경에 따라 선택할 가능성이 생긴다는 것이죠.

6가지 질문에 대한 답이 끝나면 여러 상품을 하나씩 확인할 수 있어요. 상품 타이틀은 서비스 입장보다는 사용자 입장에서 작성한 것이 많습니다, 예를 들어 ‘떠나보자 인생여행’, ‘드림카로 첫차마련’ 등, 투자하는 목적이 단순히 ‘돈을 벌어보자 우아아아!’ 이런 것이 아니라 ‘내가 돈을 모아서 무엇을 하지?’ ‘왜 돈을 모으지?’ 등에 대한 답으로 구성된 모습이에요.

특정 상품을 선택하면 상세 내용을 확인할 수 있습니다. 실제 에임을 활용하는 사용자 평가와 더불어 포트폴리오 구성 등 말이죠. 게다가 상품명에 담긴 ‘꿈’을 실현하기 위해 필요한 금액이 얼마고 어떻게 투자할지와 관련한 상세 정보가 잘 정리됐습니다.

정리하면, 사용자 상황에 대한 질문과 답–상품 확인–로그인 및 회원가입 단계로 진행되며 ‘우리 AI 알고리즘은 짱이야!’라는 내용보다 사용자에게 알맞은 상품추천에 따른 첫 투자로 이어지게끔 설계됐습니다.

(2)파운트

흥미로운 점은 세 서비스 모두 강조하는 내용이 다르게 적용됐다는 점이에요. 에임이 투자성향 확인 후 상품을 제시하고, 핀트는 가입 후 그 단계를 넣어뒀다면 파운트는 아예 앱 실행과 동시에 여러 투자 상품을 보여줍니다. 에임이 투자상품을 사용자의 ‘꿈’과 연결 지었다면, 파운트는 수익금에 조금 더 초점을 맞추고 있어요. ‘커피값 모아서 1천만 원 만들기’, ‘1억 모아 7억 쓰는 로보연금’ 등으로 말이죠. 더불어 최소 투자금액과 기대수익률을 함께 보여줍니다.

다만, 각 상품에 대한 상세정보 확인은 불가능해요. 에임은 로그인 전 상품 상세 내용을 확인할 수 있었던 것과 다른 모습입니다. 기대수익률 등을 먼저 보여주는 건, 최근 일반 금융권에서 만날 수 있는 금융상품의 수익률이 상당히 낮기 때문인 것 같습니다. 상대적으로 수익률이 크게 느껴짐과 동시에 서비스 관심도를 극대화할 수 있는 장치라는 생각이 듭니다.

(3)핀트

NC 얘기를 안 할 수 없어요. NC와 협력관계이기도 하고 김택진 대표가 개인적으로 초기 투자를 진행한 곳이기 때문입니다. 핀트는 에임과 비교했을 때, 상대적으로 기능 소개에 초점이 맞춰진 온보딩이 적용됐어요.

핀트 인공지능 아이작과 함께 소액으로 시작하는 글로벌 자산 투자

투자자의 투자 성향을 반영한 개인형 맞춤 투자 포트폴리오

언제 어디서든 송금만 하면 OK 간편해진 투자 절차

소액, 간편 투자 절차, 맞춤 투자 등의 키워드에 따라 신규 사용자에게 핀트 자체를 안내하는 모습입니다. 물론 로그인 후 에임과 같은 투자 성향 분석과 상품 안내 등이 제공되지만 온보딩에서는 빠져있습니다. 회원가입을 먼저 유도하기 위한 방법이 아닐까 하고 생각합니다. ‘어떤 판단이었을까?’를 조금 더 고민하면 앞서 언급한 ‘첫 경험’ 등에 대한 부담이라기보단 핀트라는 앱을 검색하고 실제 다운로드까지 했다는 것에 더 우선순위를 둔 것 같아요. 이 앱을 찾는다는 것 자체가 일정 목표를 갖고 접근한 것이기도 하니!

물론 정답은 없겠죠. 서로 다른 서비스이며 진입 대비 회원가입과 실제 투자로 이어지는 비율 등의 데이터를 알 수 없으니까요. 하지만 이렇게 유사한 서비스들이 신규 사용자에게 어떤 방법으로 서비스에 대한 안내를 하고, 어떤 점을 강조하고 있는지 살펴보는 건 중요한 과정입니다.

Tally과 변경사항이 있을 때 안내해주는 방법

Tally는 노션에 임베드(Embed)가 가능한, 직관적인 폼 작성 서비스입니다. 구글 스프레드시트 등과 연동됩니다. 무엇보다 직관적으로 작성할 수 있어 저도 뉴스레터 피드백 수집을 포함해 여러 용도로 활용하고 있어요.

폼 작성 후 발행하면 링크가 생성됩니다. 링크를 공유하거나 임베드할 수 있는 코드를 복사해 활용할 수 있어요. 중요한 것은 발행 후 수정할 때입니다. 한 번 발행된 내용은 서비스 입장에선 이미 이 설문과 폼이 어딘가에 공유됐다고 판단할 가능성이 높아요. 그래서 ‘Tally’는 발행 기준 추가 내용이 입력돼 ‘수정 또는 변경’됐다고 판단할 때 시각적으로 안내합니다. 발행 버튼 옆에 따로 표기해 주는 것.

개인적으로 작성하는 메모라면 수정사항이 있더라도 누군가 볼 수 있는 ‘공개’ 상태가 아니기에 변경사항이 있다는 것을 빨리 안내하는 것은 크게 중요하지 않습니다. 하지만 설문처럼 누군가에게 전달, 공유하기 위한 목적으로 작성된 내용이라면 수정 시 여백 확보를 위한 입력과정에서 문자가 잘못 들어가는 등 편집자 실수가 반영될 수 있는데요. 이런 상황을 고려해 글자가 하나라도 추가되면 바로 안내를 해주고 있습니다.

저 역시 얼마 전 뉴스레터 에디터 추가 모집 관련 폼을 작성하고 피드백을 받아 수정하는 과정에서 ‘ㅇ’ 라는 내용을 실수로 입력했는데 ‘Tally’가 발행 버튼으로 이를 안내해 준 덕분에 바로 알아차릴 수 있었습니다. 서비스가 제공하는 기능이나 분위기 자체도 좋지만, 이렇게 디테일하게 신경 쓴다는 점이 곳곳에서 보이니 더 이용할 수밖에 없는 서비스가 아닐까요.

댓글과 대댓글의 관계, 어떻게 표현하는게 좋을까?

뉴스 혹은 누군가 쓴 글을 보거나 특정 주제에 따라 우리가 쓰는 많은 서비스는 대부분 ‘댓글’ 기능을 활용합니다. 이 댓글에는 다시 대댓글 또는 답글이라는 이름으로 다른 의견이 담기기도 합니다. 페이스북이 선을 통해 ‘최초 댓글’과 이후 내용의 관계를 표기해주는 것을 보며 다른 서비스들은 이를 어떻게 보여주고 구분하는지 궁금했어요.

(1) 페이스북

정확히 어떤 상황에서 보여지는 지 모르지만, 그리고 저만 이제서야 보게 된 걸지도 모르지만! 페북은 댓글 간의 관계를 선으로 보여줘요. 댓글과 대댓글이 섞여 있는 경우 각 내용의 관계, 즉 최초 댓글이 무엇이고 그 댓글의 대댓글에 대한 내용을 파악하기 어려운 경우가 많은데요. 이 관계를 우리가 구조를 짤 때 자주 활용하는 ‘선’을 활용해 보여주기에 조금 더 쉽게 흐름을 따라갈 수 있게 됐습니다. 댓글이 많을 경우 더욱 유용하게 느껴질 방법이라 생각되네요.

게다가 페이스북은 최초 댓글과 대댓글을 작성한 프로필 이미지 사이즈를 다르게 적용했고, (댓글 작성자 프로필이 대댓글 프로필보다 작게) 안쪽으로 더 들어오게 구성돼 있어 댓글과 대댓글 간 관계를 직관적으로 이해할 수 있게 했어요(많이 쓰는 방식!). 또 작성자가 댓글이나 대댓글 작성 시 이름 우측에 ‘작성자’라는 표기를 해주기도 합니다.

(2)링크드인

페이스북과 큰 차이는 없어요. 조금 의아한 건, 작성된 수를 보여줄 땐 ‘댓글’이라는 표현을 쓰는데 실제 댓글을 입력할 땐 ‘답장’이라는 표현을 활용하고 있어 헷갈릴 수 있다는 점이죠.

(3)블라인드

블라인드는 배경 컬러로 댓글과 대댓글을 구분합니다. 글에 달린 기본 댓글은 흰색으로, 해당 댓글에 달린 대댓글은 회색으로 적용했어요. 그리고 페이스북과 링크드인이 각각 답글과 답장이라는 표현을 쓰는데 블라인드는 있는 그대로의 표현 즉, 대댓글로 적용돼 있습니다.

(4)네이버뉴스

네이버 뉴스는 답글을 보여주지 않아요. 댓글에 등록된 대댓글의 수를 보여주고, 이를 클릭하면 아래로 등록된 대댓글을 볼 수 있는 구조입니다. 네이버도 답글이라는 표현을 쓰고 있고, 블라인드와 같이 댓글과 답글(대댓글)의 배경 컬러가 다릅니다.

(5)브런치

브런치를 베타 때부터 활용한 제게 댓글 사용성은 가장 부정적인 기능 중 하나에요. 브런치는 기본적으로 글에 대한 생각과 느낌이 댓글로 등록되는데, 작성된 댓글 아래로 바로 글을 작성할 수 있는 구조가 아니라 멘션으로 상대방을 언급한 뒤 입력하는 방식이기 때문입니다. 페이스북, 링크드인 등이 댓글 아래 답글 달기, 답장 등의 버튼을 배치한 것과 다르기도 하고요. 상대방의 내용을 보며 댓글을 작성할 수 있는 구조가 아니다 보니 모바일에서 작성 시 화면을 위-아래로 자주 이동해야 하는 불편함이 있어요. 이런 구조상 브런치는 ‘댓글’이란 표현 하나만 활용하고 있습니다.

서비스 취지에 따라 댓글 활용도는 달라지지만, 댓글 기능 자체가 지닌 속성을 생각하면 최초 내용에 따라 추가 내용을 확인할 수 있다는 점인데요. 이 때문에 이 둘의 관계를 어떻게 보여주느냐가 이후에 온 사용자가 얼마나 내용을 빠르게 파악할 수 있는지, 그에 따라 추가 내용을 작성할 수 있는 흐름으로 이어지는지 등을 결정하게 되는 것 같아요.

인기검색어가 의도하는 바는 무엇일까

검색은 사용자가 취할 수 있는 서비스 내 가장 적극적인 행동 중 하나라고 생각해요. 물론 커머스라면 구매 등 더 큰 단위가 존재하지만, 구매로 이어지는 행동 중 하나가 적극적인 탐색이고, 그중 검색은 꽤 능동적인 행동이기 때문입니다. 명확하게 찾는 대상이 있다는 것을 의미하기도 하고요! 얼마 전, ‘텐바이텐’이 검색 화면을 개선했어요. 크게 두 가지가 있습니다.

기존에 최근, 인기 검색어, 최근 본 상품 등 세 가지 탭으로 구분됐던 화면이 하나로 통합됐습니다. ‘인기 검색어’라는 표현 대신 ‘많이 찾고 있어요’라는 문구를 활용하고 있네요.

1번은 사용성 강화 측면의 개선인 것 같아요. 개인적으로 커머스에서는 최근 검색어를 자주 활용하지 않고(생필품을 제외하면) 검색 화면으로 진입할 땐 이미 원하는 키워드가 있기에 인기 검색어도 그냥 지나치는 편인데요. 기존에는 탭으로 구분돼 굳이 찾지 않아도 되는 정보가 이제는 검색 화면에서 한눈에 볼 수 있습니다.

2번은 ‘검색어’라는 딱딱한 표현 대신 ‘사람들이 많이 보고 있는 것’이라는 표현으로 변경한 모습입니다. 게다가 1열이 아니라 2열로 배치해 동일한 수의 키워드라 하더라도 더욱 눈에 잘 들어오네요.

‘플레이스 홀더 텍스트 활용’과 더불어 이번 사례를 통해 계속 궁금했던 건 ‘인기 검색어 등을 제공하는 것이 어떤 효과가 있을까?’라는 점이었습니다. 예를 들어 원티드의 검색 화면으로 진입하면 검색 인풋박스 하단으로 개발, 경영·비즈니스, 마케팅·광고, 디자인 등 공고를 대표하는 분야를 함께 보여줍니다. 특정 직군에 대한 공고를 찾아볼 가능성이 높기 때문인데요. 이런 장치는 사용자 중심의 서비스가 아닐까요?

• 링크드인
• 브런치스토리
• 지금써보러갑니다
• 페이스북

• 에디터김 성지 (jerome@ditoday.com)