change 03. 토스의 디자인
토스의 디자인은 어떤 게 변했을까
주식화면
(좌) 과거 디자인 (우) 현재 디자인다른 사례들은 약간의 디자인이 변화된 반면, 토스의 주식화면은 개선보다는 리디자인에 가까운 많은 변화가 있었다. 보통 UX구조는 사용자 시선의 흐름에 따라 중요한 요소부터 나열한다.
좌측의 화면 같은 경우 보유 주식이 많아질수록 페이지가 길어지며, 보유 주식 밑 단의 내용을 확인하기에 불편하다. 우측의 경우 전체 보유 주식과 금액을 한눈에 볼 수 있고, 자세한 사항은 내 계좌 보기로 묶어 한 화면에서 더 많은 내용을 보이는 구조로 개선되었다.
기능 추가: Top bar 부분에 달력아이콘이 추가되어, 증시에 관련된 주요 일정들을 볼 수 있게 되었다. (지수발표, 실적발표, 휴장일 등)
지수 추가: 증권 타이틀 옆에 지수(코스피, 코스닥, 나스닥, 다주존스, S&P500, 환율)들이 번갈아가면서 보인다.
주식 배너 변경: 이슈에 대한 내용이 사라지며 본인의 주식 정보가 상위권으로 올라왔다.
주식 구조 변화: 수익률만 보이고 '자세히 보기'버튼을 통해 보유 주식의 총 손익금액을 볼 수 있었는데, 메인 화면에서 손익금액을 볼 수 있게 변경되었다. 가장 중요 요소 변화 '수익률' -> 보유 주식 '금액'
레이아웃 변경: 일자로 나열하는 레이아웃에서 '내 주식'과 '오늘의 발견' 탭으로 정보의 속성에 따라 나뉜 레이아웃으로 변경되었다.
메인화면
(좌) 과거 디자인 (우) 현재 디자인로고변경: Top bar의 토스 로고가 변경되었다.
Top bar 변경: 코로나로 인해 필요했던 'QR'아이콘과 기능이 삭제되었고, '함께 토스를 켠 사람' 기능과 아이콘이 추가되었다.
아이콘 디자인 변경: 채팅 아이콘의 디자인이 변경되었다.
Bottom 변경: '금액 숨기기', '자산 추가' 텍스트 버튼에서 화면설정, 자산추가 솔리드 버튼(텍스트 버튼에 비해 상대적으로 중요도 증가)으로 변경되었다. '개인정보처리방침보기'가 추가되었다.
tab bar 변경: tab bar 가운데에 있던 '송금'이 '토스페이'로 변화되었다. tab bar에서 가운데는 가장 중요한 기능이 들어가기도 한다. 이런 가운데 기능이 변경된 사유는 1. 상단 배너 송금버튼이 동일하게 있는데, 상단 배너에서의 클릭률이 높아 동일 기능을 tab bar에서 빼거나 2. 새로운 토스페이가 중요도가 더 높기 때문이라고 볼 수 있다.
구독과 라이킷은 글 작성에 많은 힘이 됩니다.
