토스 증권 UX - 토스에서 만든 주식서비스는 어떻길래

안녕하세요:) UX에디터 켈리폴리입니다! 이번에는 토스 증권 UX를 분석하려고 합니다:)

사실 저는 토스 증권 출시된다는 소리 듣고 대기표 신청해서 2만 몇 번째인가? 순서로 입장하게 된 유저예요. 토스는 국내에서 디자인 쪽으로 잘한다고 많은 사람들이 인정하고 좋아하는 회사로 출시 전부터 엄청 기대를 가지고 신청했답니다 ㅎㅎ

최근에 보니까 국내 주식 1주 무료 혜택도 있고, 오픈 기념 다양한 혜택을 제공하고 있는 것 같아요. (수수료 혜택을 받고 있으면, 이 국내 주식 혜택은 없는 걸로 알고 있어요) 이런 혜택 덕분에 그런지 최근 신규 계좌 100만 개 돌파까지 했다고 합니다:) (개인적으로 토스는 정말 마케팅을 잘하는 회사 중 하나인 것 같기도 해요. 네이버에 급상승 검색어 순위 UI가 있을 당시, 매번 이벤트 할 때마다 차트 순위에 올라갔던 걸로 기억해요)

그럼 이렇게 많은 사람들이 개설한 토스 증권 UX/UI를 한번 분석해볼까요?

*주의 : 화면 캡처 날짜와 글 업로드 날짜가 다르므로, 회사의 주가와 등락률은 현재와 다를 수 있음에 유의해주세요!

01. 상단에 관심종목을 먼저 확인할 수 있어요

하단 4번째 탭에 주식 거래를 할 수 있는 토스 증권이 있는데요. 화면에 진입하면 상단에 관심 종목으로 설정한 리스트들이 보여요. 여기서 관심 종목은 제가 처음에 토스 증권에 진입할 때, 몇 가지 관심 종목을 선택하라는 스텝이 있었는데, 이때 느꼈던 점이 토스 증권 처음 가입 과정이 컨텐츠 베이스의 pinterest나 추천 베이스의 음악 스트리밍 앱인 spotify 등과 비슷하다는 느낌을 받았어요.

그리고 토스 증권에서만 볼 수 있는 차별점이 분홍색으로 표시한 "편집하기"버튼 보이시나요? 이 편집하기 버튼을 클릭하면 종목명 옆에 등락률과 금액이 표시되는 부분을, 등락률만 보거나 가격만 보거나 보기 편한 방향으로 편집할 수 있어요.

저는 개인적으로는 이 편집하기 기능이 필요할까? 하는 의문은 들었어요.

주식을 하는 사람이라면, 심지어 이제 시작하는 사람들이라면 더더욱 등락률과 가격을 동시에 보기를 원할 것 같아서요.

오히려, 이런 편집기능보다, 내가 관심분야로 찜한 종목들을 수익률 높은 순, 금액 순 이런 식으로 정렬하는 버튼이 있는 게 더 필요하지 않을까 하는 생각이 들기도 하였습니다.

02. 관심종목을 편하게 추가할 수 있어요

관심 종목들 밑에 "+"버튼을 클릭하여 언제든지 관심회사를 추가할 수 있는데요. 여기서 나오는 관심회사 추가하는 UI가 특히 음악 스트리밍 사이트에서 관심 있는 아티스트 추가하는 UX와 익숙한 느낌을 받았어요. 딱딱하고 어렵게만 느껴지는 증권 앱에 이런 익숙한 UX를 적용하여 사람들이 보다 쉽게 이용할 수 있도록 하는 점은 배려있게 느껴졌습니다:)

특히 저 같은 경우는, 회사나 기타 등등 일상에서도 로고나 색깔로 특징을 기억하는 경우가 많아서, 이렇게 로고 이미지와 색상을 크게 볼 수 있는 점이 회사를 한 번에 인지하는데 큰 도움을 줬던 것 같아요.

하지만, 이런 그리드 뷰는 이미지가 차지하는 비율이 커서 리스트뷰에 비해 여러 회사를 동시에 보지 못한다는 단점도 있긴 한데, 관심회사 추가할 때는 주로 검색을 하거나, 많은 정보를 한 번에 소비해야 할 필요는 없다고 생각이 들어서 편하다고 느껴졌어요.

03. 회사별 주가 차트와 매출을 간단하게 볼 수 있어요

좀 더 상세한 정보가 궁금한 회사의 경우 회사 이름이나 로고를 탭 하여 상세페이지로 이동할 수 있는데요. 여기서 상단에 회사명, 금액이 있고 중간에 차트가 나와요.

차트는 기간별로 변동하는 것을 탭 하여 볼 수 있긴 한데... 사실 미니스탁 차트 UI에서도 비슷하게 느낀 점이 간단하게 정보를 보여주는 것은 좋지만, 주식 거래를 할 때 필요한 정보들이 많이 걷어내져서 어느 정도 주식 거래를 하신 분들에게는 오히려 정보가 너무 없어서 불편할 수도 있겠다는 생각이 들었습니다.

아마 토스가 지향하는 방향이 주식을 잘 모르는, 금융에 대해 어려워하는 사람들이 편리하게 할 수 있도록 하는 것으로 알고 있어서 회사의 미션에 맞게 UI를 표현한 것 같아요.

차트 밑에는 해당 회사와 관련된 뉴스들과 매출액, 영업이익, 매출 구성 등 정보를 볼 수 있어요.

저는 특히, 매출액과 영업이익, 매출 구성 표현해주는 UI가 깔끔하게 정리되어 있어서, 기업의 재무제표를 간략하게 봐야 할 때 정보를 얻기에 좋았어요 ㅎㅎ 분기별 매출 최고액, 최저액부터 최근 5년간의 정보를 보여주기에, 정보를 보기 쉽게 표현해주는 토스의 강점이 극대화되는 부분이라고 느껴졌어요.

그리고, 하단에는 하트(관심) 버튼과 구매하기 버튼이 고정되어 있어요. 구매과정의 UX를 보기 위해 구매를 진행해 보았습니다.

04. 주식을 구매해보자!

우선 화면 첫인상은 토스에서 돈 송금하는 느낌과 비슷하다고 느껴졌어요. 여기서 일단 가격 설정 관련해서는 상단에 주문할 가격 있는 쪽을 클릭하면, 하단에 bottom sheet으로 지정가 구매, 시장가 구매 선택하는 게 나와요.

여기서 지정가로 구매하고 싶으면 탭 하여서, 가격별 판매, 구매 잔량을 볼 수 있답니다. 그리고 상단에 직접입력 버튼을 클릭하여 금액을 직접 입력할 수도 있어요.

사실, 지정가 설정하는 게 보통 증권 MTS는 가격 지정, 잔량, 주문 수량을 거의 한 화면에서 처리하기 때문에 동시에 여러 정보를 보면서 고민을 할 수 있는데, 토스 증권에는 가격을 설정하고 주문 수량을 정하는 것을 다른 화면에서 처리하도록 설계해 두었어요. 이 역시 토스 디자인의 미션이 담겨 있다고 느껴졌는데요.

한 화면, 한 기능(한 액션)

전에, 토스에서 사용자들이 화면에서 헤매는 시간을 최소한으로 줄여서 편하게 사용할 수 있도록, 한 화면에 한 기능 원칙을 지켜서 UX를 설계하려고 한다는 아티클을 읽은 적이 있었어요.

토스 증권 UX에도 이 부분이 잘 녹아져 있네요. 아마 기존 MTS로 거래하시는 분들에게는 오히려 이런 화면 구분이 불편하게 느껴질 수도 있을 것 같긴 합니다. 주식 거래할 때는 필요한 몇 가지의 정보들이 복합적으로 기준이 되어 거래에 영향을 주기도 하니까요!

저는 1주만 테스트로 사보려고, 1주를 구매하려고 했는데요! 토스 증권 계좌에 돈이 충분하지 않아서 채우고 시작했어요.

증권 계좌에 돈 송금하기는 몇 번의 탭으로 가능해요!

역시 송금이 편한 UX 일인자인 토스여서 그런지, 증권 계좌에 돈 송금하는 절차는 그 어떤 앱보다 편했던 것 같아요 ㅎㅎ 특히, 제가 선택한 가격과 수량에 맞춰서 채울 가격을 미리 알아서 보여주기 때문에 번거로움이 훨씬 적답니다. 다른 MTS 앱은 해당 증권 계좌번호를 복사해서 제 주거래 통장에서 이체하는 절차가 좀 귀찮은데, 이 부분은 토스만의 특장점이라고 할 수 있겠어요:)

05. 거래 후에 대기하는 과정이 있어요

구매한다고 바로 처리되지는 않고, 조금 대기하는 과정이 있었어요.

여기서 친절하다고 느낀 포인트가, 왜 지연이 되는 건지 거래 후 나온 화면 가장 상단에 애니메이션으로 보여줘요. 계속 저 차트 부분이 애니메이션으로 움직이고 있어서 확실히 눈에 띄어서 탭 하게 되었어요.(개인적으로 UI 애니메이션 쪽 국내에서는 토스가 가장 잘하고, 신경 쓰고 있다고 느끼는 부분이에요)

그리고 그 하단에 대기 중인 주문 건이 표시되는데, 개인적인 경험으로 이 시간대에 유저가 많이 몰렸는지 다른 MTS 썼을 때에 비해 더 처리가 늦게 된다라고 느껴졌어요. 이 과정에서 좀 지연이 생각보다 길어서 '제대로 처리된 게 아닌가?' 하는 불안함이 살짝 들었던 것 같아요.

06. 인기 차트로 주식 Top 100을 알고 싶어?

사람들이 가장 많이 사는 Top 100, 수익률 Top 100인 주식들을 모아서 볼 수 있어요. 이 부분도 역시 음악 스트리밍 쪽에서 기분에 맞는 음악 모음을 추천해주거나 하는 쪽의 UI와 비슷해서 익숙하게 느껴졌어요. 여기서 바로 관심 있는 회사들 찜할 수 있어요:)

어떤 것부터 사야 할지 아예 주식을 처음 시작하거나, 정보를 얻는 데 어려움을 느끼시는 분들은 이쪽 인기차트에서 보고 팁을 얻을 수도 있을 것 같아요.

07. 실시간 주요 차트로 지금 핫한 이슈를 확인해요

오늘 확인해보니, 상단에 실시간 이슈를 보는 부분이 추가되었어요! 제가 글의 첫 부분에 캡처했던 화면에는 이 실시간 이슈 UI가 없었는데, 그 사이 추가가 되었더라고요. 최대 5가지의 핫이슈들을 보여주기 때문에, 경제, 주식 관련 실시간 이슈를 빠르게 확인할 수 있었어요. 요새 네이버 실시간 검색 차트가 없어지면서, 이런 UI를 찾아보기 힘들어졌는데 토스에서 적절하게 잘 적용해둔 부분 같아요.

이쪽은 검색 결과 UI랑도 이어지는 부분으로, 실시간 이슈로 탭 했던 키워드가 최근 검색 기록에도 남고, 추천 검색이나 다른 검색을 이어서 진행할 수도 있어요.

08. 주식 구매 전과 후 UI 차이는?

거래 처리 대기 과정이 끝나고 주식 구매 전과 후 UI를 비교해봤는데요.

구매 전에는 상단에 주문 가능 금액(이 계좌에 있는 잔액)과 채우기 버튼이 존재했어요.

구매 후에는 내가 보유한 회사 주식의 수익률이 상단에 보이네요.그럼 잔액과 채우기 버튼은?

바로 자세히 보기 버튼을 클릭하면, 그 안에 현재 내 주식과 주문 가능 금액, 채우기 버튼이 들어가 있답니다.

여기서 궁금했던 점은 구매 전에 채우기 버튼은 파란색으로 활성화되어 있는 것처럼 보였고, 구매 후 한 뎁스로 들어가 있는 쪽에서 채우기 버튼은 다크 그레이 색상으로 처리되어 있었어요.

아마 제 추측으로는, 맨 처음 토스 증권에 진입해서 거래가 없는 분들은 "채우기"버튼으로 계좌에 돈을 채우고 거래를 유도하는 게 1순위 목적이라 더 눈에 띄고 하고, 구매 후에는 해당 화면에서 중요한 정보가 채우기보다는 보유 주식의 주가 및 등락률이라서 이런 차이를 둔 것 같아요.

토스 증권, 이런 분들께 추천드려요!

• 주식을 처음 시작하시는 분들

토스 증권은 처음 앱 진입부터 주식 구매까지 처음 주식을 시작하시는 분들이 쉽게 사용할 수 있도록 설계되어 있어요. 물건 사듯이 편하게 살 수 있고, 또 매출, 영업이익 등 기업에 관련한 정보도 막대그래프와 컬러, 타이포 사용을 고려해서 빠르게 접할 수 있도록 되어있어요. 혹시 주식 관련해서 처음 시작에 어려움을 얻는 분들은 토스 증권으로 쉽게 시작해보셔도 좋을 것 같아요.

• 현재 구매 Top 100, 수익률 Top 100등 인기 주식 정보가 필요하신 분들

주식 시작할 때 막연한 점이 바로 "그래서 뭘 사야 해?"라는 부분인데, 주식 탭 쪽에서 하단으로 스크롤 내려보면 인기차트에서 다양한 Top 100 정보들을 얻을 수 있어요. 어떤 주식을 사야 할지 도저히 감이 안 잡히는 분들, 혹은 아직 나만의 투자 기준이 명확하지 않은 분들은 여기 정리된 Top 100 주식 정보를 보고 Tip을 얻을 수 있어요:)

토스 증권만의 차별화 UX/UI 포인트

• 토스 증권계좌에 돈을 가장 빠르고 쉽게 채울 수 있어요

토스는 송금 앱의 일인자인 만큼, 다른 MTS와는 다른 차별점을 가지고 있어요. 바로 토스 증권 계좌에 가장 쉽고 빠르게 돈을 입금할 수 있다는 점이에요. 이 부분에 있어서, 주식 처음 할 때 증권 계좌에 입금하는 과정도 어려워하는 분들도 있는데, 토스에서는 헤맬 필요 없이 빠르게 처리할 수 있답니다:)

• 실시간 주식 관련 이슈를 접할 수 있어요

상단에 주식 관련 최대 5가지 이슈를 실시간으로 보여주기 때문에, 현재 내가 관심 있는 분야나 혹은 이미 보유하고 있는 회사에 어떤 이슈가 생기고 있는지 빠르게 접할 수 있어요. 다른 MTS들은 실시간 까지는 아니고, 핫 트렌드나 관련 뉴스 등을 보여주기에 즉시성이 좀 떨어질 때도 있는데, 토스는 주식은 빠른 정보싸움이라는 점을 잘 고려하여 실시간 이슈를 설계해두었어요:)

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.