Toss 스타일 디자인 분석

한 화면에 결정 하나

금융 화면에서 실수는 곧 손해로 이어집니다. 그래서 이 스타일은 한 화면에서 물어보는 것을 하나로 줄이고, 나머지는 다음 화면으로 넘깁니다. 화면 수가 늘어나는 대신 각 화면의 실수 확률이 떨어집니다. 단계를 합쳐 스크롤 한 번에 끝내는 게 효율적으로 보이지만, 이 스타일을 쓰기로 했다면 그 반대로 가야 일관성이 유지됩니다.

금액은 가장 큰 글자여야 합니다

사용자가 확인하려는 것은 설명이 아니라 숫자입니다. 금액을 제목보다 크게 두고, 설명은 그 아래 회색 작은 글자로 내립니다. 위계를 반대로 두면 정보는 다 있는데 확인이 느려집니다. 숫자는 고정폭으로 처리하고 우측 정렬해야 자릿수가 다른 값들이 세로로 정렬됩니다. 한글 폰트를 쓸 때 숫자만 별도 처리하지 않으면 이 정렬이 미묘하게 어긋납니다.

하단 고정 버튼은 처음부터 구조에 넣습니다

주요 행동 버튼을 화면 하단에 고정하는 패턴은 나중에 얹기 어렵습니다. 버튼 높이만큼 본문 하단에 여백을 확보해야 마지막 줄이 가리지 않고, 키보드가 올라올 때 버튼이 따라 올라오는 처리도 필요합니다. 프롬프트 단계에서 "하단 고정 CTA와 그만큼의 본문 하단 여백"을 함께 요구해야 나중에 레이아웃을 다시 짜지 않습니다.

파랑은 누를 수 있는 것에만

이 스타일에서 브랜드 파랑은 장식이 아니라 신호입니다. 파란 글자나 파란 면은 누를 수 있다는 뜻으로 읽힙니다. 강조하고 싶다는 이유로 제목이나 아이콘에 파랑을 쓰면 누를 수 없는 것을 누르게 만듭니다. 강조가 필요하면 색이 아니라 굵기와 크기로 해결하는 편이 이 스타일의 문법에 맞습니다.

이 스타일을 고르면 안 되는 경우

상품이 많은 커머스 목록이나 콘텐츠 피드에는 맞지 않습니다. 한 화면에 하나만 두는 원칙이 탐색을 느리게 만들어, 둘러보는 경험이 중요한 서비스에서는 답답해집니다.

컬러와 역할

색상 코드를 나열하는 것보다 각 색이 어떤 자리에만 쓰이는지를 정해 두는 편이 결과물의 일관성에 훨씬 크게 작용합니다. 아래는 이 스타일에서 관찰되는 색의 담당입니다.

대표 컴포넌트

이 스타일을 화면으로 옮길 때 가장 먼저 만들게 되는 세 가지입니다. 각 항목의 설명은 형태뿐 아니라 그렇게 만드는 이유까지 담았습니다.

어떤 서비스에 맞나

Toss style removes decoration and emphasizes trust, speed, and mobile clarity. Best for finance, onboarding, subscriptions, and account dashboards.

실무에서는 핀테크 · 정산/결제 · 구독 관리 유형에 적용했을 때 가장 자연스럽습니다.