토스증권 주문 화면 UX 분석
뿌리부터 탄탄하게
디자인 이론 & 스터디
지난 글에서 나는 토스증권의 홈 화면을 분석했다. 오늘은 실제 '매수(Buy)' 버튼을 눌렀을 때 마주하는 화면, 즉 투자자의 자산이 실제로 이동하는 결정적 순간, 주문 단계의 UX를 해부해보려 한다.
내가 관찰한 것은 단순한 주문 화면이 아니다. 그것은 '410만 명의 월간 활성 이용자'(2025년 7월 기준)가 증명한 토스의 성공 전략이자, 동시에 장기투자자로서 편리함 뒤에 숨겨진 이면을 발견한 순간이기도 했다.
1. 정보 중심 디자인과 행동 중심 디자인의 차이
NH은행의 '나무증권', KB은행의 'KB증권'을 써본 적이 있는가? 화면의 80% 이상은 10단계 호가창이 장악하고 있다. 붉고 푸른 숫자가 실시간으로 움직이며, 주문 입력창은 화면 하단의 작은 틈을 비집고 있거나 별도의 팝업으로 띄워야 한다.
이 구조는 사용자에게 명확한 메시지를 전달한다. "투자는 신중해야 하며, 모든 데이터는 판단의 근거가 된다." 전통 MTS의 이런 설계는 정확한 정보 기반의 트레이딩이라는 목적에 충실한 UI다. 호가창에서 매수·매도 잔량을 읽고, 체결 흐름을 파악하고, 그 후에 주문을 넣는 것. 이게 본래 주식 거래의 정석이다.
하지만 토스증권의 주문 화면은 180도 다른 철학으로 설계되었다. VOO 매수 화면을 보면, 좌측에는 분명 호가창이 존재한다. 하지만 시선은 자연스럽게 우측의 어두운 패널, '주문 영역'으로 쏠린다.
Designer's Note
Split View 구조: 정보(호가창)와 행동(주문창)을 병렬 배치했지만, 시각적 위계는 명확히 주문창을 향한다. 우측 패널에 높은 명도와 그림자 효과를 부여하여, 호가창을 '참조' 영역으로, 주문창을 '메인 액션' 영역으로 정의했다.
호가창의 역할 변화: 기존 앱에서 호가창이 '분석의 도구'였다면, 토스에서는 주문을 돕는 '참조 자료' 정도로 위계가 낮아졌다. "숫자는 옆에 뒀으니, 너는 얼마를 살지에만 집중해."
전통 증권사는 '숫자를 읽는 트레이더'를 위한 화면이고, 토스는 '직관으로 결정하는 일반 투자자'를 위한 화면이다.
2. 소수점 매매: 진입장벽을 허문 한 줄의 탭
우측 주문 패널을 보면, '수량' 탭 옆에 '소수점' 탭이 나란히 붙어 있다. 이 탭 하나가 투자의 진입장벽을 완전히 허물었다.
토스증권이 2022년 4월 업계 최초로 도입한 '실시간 해외 주식 소수점 거래' 서비스는 출시 2년 만에 누적 이용자 156만 명, 누적 거래 건수 2억 5천만 건(2024년 4월 기준)을 돌파했다. 20대 이용자가 28.8%로 가장 많고, 10대도 7.1%를 차지한다.
1주에 90만 원이 넘는 VOO를 살 때, 우리는 계산기를 두드릴 필요가 없다. '소수점' 탭을 누르고 내 지갑 사정에 맞는 금액을 입력하면 끝이다. 1000원부터 가능하다. 하단에는 [10% / 25% / 50% / 최대] 버튼이 배치되어 있다.
하지만 이 % 버튼에는 결정적인 UX 맥락의 부재가 있다. 버튼이 가리키는 10%, 25%의 기준은 '나의 전체 포트폴리오 비중'이 아니라, '현재 예수금'이라는 점이다. 이는 포트폴리오 리밸런싱을 위한 도구가 아니라, 단순히 '가용 현금의 빠른 소진'을 돕는 기능으로 작동할 위험이 있다.
마치 쇼핑몰 장바구니를 비우듯 투자를 '가벼운 소비 행위'처럼 느끼게 만드는 이 매끄러운 경험 앞에서, 장기 투자자인 나는 가끔 서늘함을 느낀다.
'투자가 이렇게까지 고민 없이 쉬워도 되는 걸까?'
3. 편리함 위에 올려야 할 맥락 정보
토스증권은 누적 가입자 660만 명, MAU 384만 명을 기록했다.(2024년 12월 말 기준) 이제 토스는 '100만 원으로 투자하는 대학생'뿐만 아니라 '1억 원을 굴리는 직장인'도 사용하는 국민 앱이 되었다. 그릇이 커졌다면, 그에 걸맞은 안전장치도 갖춰야 한다.
나는 매수 버튼 주변에 옵션으로라도 맥락 정보를 제공해야 한다고 생각한다.
UX 개선 제안
AS-IS (현재): 금액 중심의 정보
상황: 사용자가 예수금의 '50%' 버튼 클릭
메시지: "1,500,000원 구매하기"
사용자 인식: '내 돈 150만원을 주식으로 바꾼다'
TO-BE: 포트폴리오 관점의 정보
개선안: 버튼 상단 혹은 하단에 넛지 문구 노출
메시지: "이 주문 시, VOO가 내 자산의 20%가 됩니다." 또는 "보유하신 현금의 50%를 투자합니다."
사용자 인식: '이 돈을 쓰면 내 자산의 1/5이 한 종목에 쏠리는구나.'
진정한 UX란 기업이 원하는 경로로 사용자를 빠르게 밀어 넣는 것이 아니다. 사용자가 '스스로 납득할 수 있는 결정'을 내리도록 돕고, 그 결과로 돈을 벌어 '오래 살아남게' 만드는 것이다.
브레이크 없는 스포츠카는 빠르지만, 누구도 오래 타고 싶어 하지 않는다. 이제 토스증권이라는 슈퍼카에도 '계기판'이 필요한 시점이다.
4. 우리는 편리함 위에서 제동을 걸 수 있을까?
내가 배우고 싶은 것은 '간단하고 보기 편한 UI'만이 아니다. 사용자가 돈을 잃지 않고, 돈을 벌고, 다시 돌아오게 만드는 '지속 가능한 속도'와의 균형이다.
우리는 '사용자의 편리함'을 설계하는 것을 넘어, '사용자의 성공'을 설계하고 있는가? 기업의 수익과 사용자의 성공이 같은 방향을 바라보게 만드는 것. 그것이 핀테크 디자이너가 풀어야 할 가장 고차원적인 문제이자, 내가 토스증권 화면을 보며 얻은 배움이다.