내 돈이 걸린 화면, 토스는 왜 이렇게 설계했을까
[울퉁불퉁 회고록]
시행착오 & 배움
투자자의 눈으로 읽고, 디자이너의 손으로 훔치다
밤 11시 30분. 미국 정규장이 열리기 직전, 애프터장이 끝나고 프리마켓이 달아오를 때면 나는 습관처럼 토스증권 앱을 켠다. 5년 넘게 미국 주식에 투자해 온 나 같은 장기 투자자에게, 이 시간은 단순히 주가를 확인하는 시간이 아니다. 내 자산의 안녕을 묻고, 시장의 공기를 읽는 엄숙한 시간이다.
그런데 화면을 켤 때마다 기분이 묘하다. 내 돈이 오가는 ‘무거운’ 숫자들로 가득한데, 정작 화면은 이상하리만치 ‘가볍다’. 복잡하지 않다. 금융 앱 특유의 빽빽함이 없다.
"숫자는 무겁지만, 경험은 가볍다."
이 미묘한 차이가 나를 궁금하게 만들었다. 요즘 나의 가장 큰 화두는 "사람들이 쓰는 서비스를 남들보다 먼저, 더 깊게 이해하는 것"이다. 그래서 첫 번째 분석 대상으로 토스증권을 골랐다. 이 글은 410만 개미가 선택한 화면을 직접 뜯어보고 모작해 본 기록이다. 동시에, 지금 내 시야가 어디까지 닿아 있는지 확인하고, 미래의 성장을 기약하는 '성장통'의 기록이기도 하다.
투자자로서는 '합격', 디자이너로서는 '루키'
솔직하게 나를 진단해 본다. 현재의 나는 좋은 UI를 보면 피그마로 그럴듯하게 그려낼 수는 있다. 하지만 "왜 하필 버튼을 여기에 두었는지", "왜 이 폰트 사이즈를 선택했는지"를 논리적으로 설명하라면 말문이 막힌다. '보기 좋은 것'과 '설계된 것'의 차이를 아직 명확히 설명하지 못하기 때문이다.
하지만 나에게는 확실한 무기가 하나 있다. 나는 기업의 펀더멘털을 파고들며 10년 뒤를 내다보는 '장기 투자자'다. 단타보다는 가치를 믿고 기다리는 편이라, 숫자와 차트가 가득한 화면을 누구보다 오래, 집요하게 들여다본다.
즉, 사용자로서 느끼는 '불편함'과 '니즈'만큼은 누구보다 예리하게 포착할 수 있다. 나의 약점은 화면 뒤에 숨은 설계자의 의도와 데이터의 맥락을 읽어내는 힘이다. 그래서 이번 분석은 "투자자의 예리한 눈으로 포착하고, 디자이너의 손으로 구현 원리를 역추적하는" 과정이 될 것이다.
토스증권 홈의 4단 구조
모작을 위해 화면을 하나하나 뜯어보니, 토스증권 홈은 크게 네 가지 덩어리로 이루어져 있었다.
1) 1단
화면 최상단, 지수와 가까운 시일 내의 이벤트를 보여주는 요약된 영역. 오늘 시장의 전체적인 분위기를 파악하고 맥락을 잡을 수 있도록 설계됨.
2) 2단
복잡한 계좌에 대한 정보는 숨기고 '지금 당장 사용 가능한 돈(원화/달러)'을 덩어리로 나누어 보여줌으로써, 사용자가 얼마나 구매할 수 있는지 바로 인지하고 매수로 이어지도록 유도.
3) 3단
투자자가 가장 궁금해하는 '총 자산과 수익률'을 가장 큰 폰트로 강조해 정보의 위계를 높였다. 수익이 났을 때(+)는 만족감을 주지만, 손실이 났을 때(-)의 심리적 압박감도 고려했다. 언제든 숫자를 가릴 수 있는 '금액 숨기기' 기능은 이런 세심한 배려의 결과이다.
4) Background
사용자의 이 환경과 취향을 존중하여 시스템 테마에 유연하게 대응하도록 설계. 배경색이 바뀌어도 핵심 데이터(상승/하락, 로고 등)의 가독성과 시각적 위계가 무너지지 않도록 컬러 시스템을 구축.
이 구조를 한 문장으로 요약하면 이렇다.
"시장 흐름과 자산 현황이라는 핵심 정보를 직관적으로 보여줘 인지 부하를 최소화하고, 사용자의 환경과 심리까지 고려해 '복잡한 금융을 쉽고 주체적인 경험'으로 설계"
토스는 '왜' 이렇게 디자인했을까?
토스증권은 2021년 출범 이후 3년 만에 MAU(월간 활성 사용자) 410만 명을 달성했고, 최근 해외주식 거래대금 점유율 1위를 기록하며 시장을 뒤흔들었다. 그들은 처음부터 "누구나 할 수 있는 모바일 주식 투자"를 표방했다.
나는 이 '누구나'라는 키워드가 홈 화면 설계의 핵심 'Why'라고 생각한다.
1) 불안을 잠재우는 '자산 요약'의 위치
기존 증권사 어플들은 켜자마자 복잡한 호가창이나 지수 차트를 보여주곤 했다. 하지만 토스는 '내 자산 현황'을 가장 크고 잘 보이는 곳에 배치했다. 투자자가 앱을 켜는 심리는 기대감보다 '불안'에 가깝다. "내 돈, 잘 있을까?"라는 질문에 토스는 가장 먼저 답을 건넨다. 상황 파악이 끝나야 비로소 다음 행동(매수/매도)이 가능하다는 심리적 순서를 설계한 것이다.
2) 인지 부하를 줄이는 '카드형 레이아웃'
초보자에게 빽빽한 테이블 형식은 공포다. 토스는 이를 '카드'로 해결했다. 기업 로고, 간단한 문구, 직관적인 색상. "카드 하나에는 하나의 메시지만 담는다." 이 원칙 덕분에 사용자는 쏟아지는 정보 속에서도 허우적대지 않는다. 정보를 덩어리째 인식하게 만들어, 뇌가 처리해야 할 부하를 획기적으로 줄였다.
3) 앱을 나가지 않게 만드는 '완결형 구조'
홈 화면에는 주식 정보뿐만 아니라 콘텐츠, 커뮤니티 요소가 자연스럽게 섞여 있다. 실제로 토스증권 커뮤니티의 월평균 방문 횟수는 200회가 넘는다고 한다. "정보 탐색 → 투자 고민 → 커뮤니티 확인 → 거래" 이 모든 과정이 앱 이탈 없이 물 흐르듯 이어진다. 사용자를 꽉 잡아두려는 영리한 전략이 디자인 곳곳에 숨어 있다.
아직 보이지 않고 보지 못한것.
화면을 그대로 따라 그리는 '모작'을 수행하며 나름의 이유를 붙여보았다. 하지만 내 눈에 보이지 않던 디테일들이 있었다. 다음은 AI 피드백을 통해 내가 놓친 부분들을 정리한 내용이다.
1) 타이포그래피
금융 앱의 숫자는 실시간으로 변하기 때문에 자릿수가 흔들리지 않도록 고정폭 숫자나 전용 서체를 사용해야 한다. 내가 모작한 것은 일반 서체를 사용하여 숫자가 바뀔 때마다 텍스트 전체 길이가 들쑥날쑥해진다.
2) 아이콘 스타일과 UX 문법
모작의 아이콘은 선이 얇고 날카로운 일반적인 스타일인 반면, 원본은 끝이 둥근 '토스 고유의 스타일'로 브랜드 통일감을 준다.
3) 레이아웃과 디테일
모작은 카드 사이의 간격이 좁아 시각적으로 피로도가 높고, 모서 곡률이 단순한 원형이다. 모바일에서는 충분한 여백으로 가독성을 확보하고, 여러 기업이 사용하는 부드러운 스쿼클 곡률을 적용해 완성도를 높여야한다.
4) 구조 설계
레이어 패널의 #blank와 같은 박스 사용과 종목에 오토레이아웃을 적용하지 않은 것은 유지보수를 어렵게 만드는 좋지 않은 습관이다. 개발 구현을 고려하여 피그마의 오토레이아웃 기능을 활용해, 수정이 쉽고 논리적인 레이아웃 구조를 짜는 연습이 필요하다.
간격·색·계층 구조처럼 내가 막연히 불편하다고 느끼던 부분과 미처 생각하지 못한 부분을, AI 피드백을 통해 구체적인 언어로 이해하게 된 게 이번 연습의 가장 큰 수확이었다.
3개월 뒤의 나에게
이 글은 '완성된 분석글'이라기보다, 미래의 나에게 보내는 '성장 청구서'다. 3개월 뒤, 이 글을 다시 읽을 때 나는 다음 세 가지 질문에 자신 있게 답할 수 있어야 한다.
1) 3개월 전에는 예뻐 보여서 따라 그렸지만, 지금은 '왜(Why)'에 대해 집요하게 설명할 수 있나? '여백을 왜 16px로 했나?', '왜 여기서 폰트 크기를 키웠나?'라는 질문에 감각이 아니라 논리와 사용자의 문제 해결 관점에서 대답할 수 있는가?
2) 아직도 레이어 패널에 group1, rectangle3 같이 난잡하지 않은가? 개발자에게 넘겨줬을 때 추가 설명이 필요 없을만큼 "오토레이아웃"과 "시멘틱 네이밍"으로 구조를 구성했는가? 그림이 아니라 설계인가?
3) 지금은 사용자가 어디서 왔고 어디로 가야 하는지, 동선을 머릿속으로 시뮬레이션하며 UI 요소를 배치하고 있나? 예쁨보다 사용성이 먼저라는 걸 잊지 않았는가?
4) 아이콘 선 굵기, 모서리의 곡률 등 브랜드의 통일성과 톤앤매너를 파고들어 잘 구현하였는가?
오늘 나는 모작이라는 핑계로 그림만 그리던 나를 이곳에 박제한다. 3개월 뒤에는 같은 화면을 보더라도, 지금은 보지 못한 1px의 의도까지 읽어낼 수 있기를 바란다. 이 글은 그 성장을 위한 첫 번째 '매수' 버튼이다.