ko/design.md 카탈로그 프리뷰 — 이 카탈로그는 어떤 브랜드와도 제휴·후원 관계가 없습니다. 이 화면은 공식 배포본이 아닌 공개 자료 기반 비공식 재현이며, 표시된 상품·가격·평점·거래·채용 정보는 레이아웃 시연용 더미 데이터입니다.
토스 TDS Mobile · 2026 (Apps in Toss)
PREVIEW · LIGHT Token-driven
Toss 토스
은행에 다니는 유능한 친구

금융을 더 쉽게,
토스로 한번에.

송금·결제·은행·증권을 한 화면에서.

01.

Button — XL / L / M / S

SIZE · XL 56 / L 48 / M 40 / S 32

VARIANT · primary / neutral / danger / ghost

STATE · default / pressed (검정 26% overlay) / disabled (opacity 30%)

TEXT-BUTTON · 인라인 링크 위계 · default / neutral / disabled

CHIP · resting / active / brand · removable

전체 입금 출금 자동이체 + 카테고리 추가 엄마 ×

BADGE · washed bg + 시맨틱 텍스트 컬러

N 완료 신규 예약
02.

Inputs · Switch

TEXT FIELD — idle / focused / error

최근 송금한 사람부터 자동 추천돼요.

잔액 1,234,567원 중 사용

20자까지 입력할 수 있어요.

SWITCH · CHECKBOX (resting / on)

03.

List · Toast · Dialog

최근 거래 내역

전체보기 ›

아래 거래 내역의 이름·가맹점명·계좌·금액·시각은 모두 레이아웃 시연용 더미 데이터이며, 실제 거래가 아닙니다.

😊
엄마
토스뱅크 · 1234
+50,000원
방금 전
🚕
카카오T 택시
교통
−12,300원
오후 2:14
📦
쿠팡
쇼핑 · 즉시 결제
−34,900원
어제
🏷️
정기적금 자동이체
매월 25일
›

TOAST · grey-900 surface + 흰 라벨

✓
송금이 완료되었어요

DIALOG · radius 20 · shadow-3

송금을 취소할까요?
취소하면 작성하던 내용이 사라져요.
04.

NEW · 새 번들에서 surface된 컴포넌트

segmented · search · progress · rating · slider · tooltip · sheet · filter chips · 치수 (가정)

Segmented Control

pill 3-segments · underline tab

전체
입금
출금
예금
적금
투자
대출

Search Field

grey-100 resting → focus white + 1.5px blue

×

Progress Bar

8px track · brand / success / danger fill · 320ms ease

목표 달성률
68%
업로드 중
12 / 30 MB
한도 사용
92%
백업 완료
100%

Rating

5-star · half-fill · yellow-500 body

4.5
3 / 5

Slider

8px track · 28px thumb · tabular value

월 저축 금액
300,000원
0500K1M
기간
12개월

Tooltip

grey-900 surface · caret · 10px gap

최대 한도
월 1,000만원까지 한 번에
자동이체
매월 25일에 빠져나가요

Filter Chips — scrollable row

multi-select · grey-900 active · S 28 / M 34 / L 42

전체 결제 송금 이자 투자 자동이체 기타

size · S 28 / M 34 / L 42

S M · 34 L · 42

Bottom Sheet — grab handle

scrim 56% · radius 24 top · grey-300 handle bar

송금 방법을 선택해주세요
친구에게 더 빠르게 보낼 수 있어요.
📱
연락처로 보내기
›
🏦
계좌번호로 보내기
›
📷
QR로 보내기
›
05.

Full component grid — 나머지 Figma surface

Board-Row · Border · Bottom-Info · Bubble · Grid-List · List-Footer · Loader · Menu · Nav · Numeric-Spinner · Post · Progress-Bar · Progress-Stepper · Stepper · Tab · Table-Row
BOARD-ROW
1 🦁 김토스 2,840P
2 🐱 이서연 2,610P
BAR-CHART
월
화
수
목
금
BORDER
subtle
default
strong
BOTTOM-INFO
수수료 없이 보내요
BUBBLE
언제 보내줄 수 있어?
방금 보냈어요
GRID-LIST
💸송금
💳결제
📈투자
🧾내역
LIST-FOOTER
LOADER
MENU
최신순 ✓
가나다순
금액순
NAVIGATION · APPS IN TOSS
‹ 미니앱 홈 토스 안에서 실행 중
NUMERIC-SPINNER
2
POST
🦊 토스증권 3시간 전

오늘 코스피가 2,650선을 회복했어요. 관심 종목 알림을 켜두면 변동을 바로 받아볼 수 있어요.

♥ 128 💬 24 ↗ 공유
PROGRESS-BAR
목표 달성률
60%
PROGRESS-STEPPER
✓ 2 3 4
STEPPER
3
TAB
홈 송금 내역
TABLE-ROW
표에 든 종목명·현재가·등락률은 레이아웃 시연용 더미 데이터입니다 — 실제 시세가 아닙니다.
종목현재가등락
삼성전자74,200+1.2%
SK하이닉스182,500−0.8%
06.

Send-Money flow — 5 화면 click-through

Home → Select → Amount → Confirm → Done · 360px iOS frame
01.홈 · 송금하기
toss
⌕
🔔
토스뱅크 통장 ›

1,284,520원

최근 송금

😊
엄마
토스뱅크 · 1234
›
🧑‍💼
김민준
국민 · 5678
›
🎂
이서연
신한 · 9012
›
02.받는 사람 선택
←
누구에게 보낼까요?
×

자주 쓰는 친구

😊
엄마
토스뱅크 · 1234
›
🧑‍💼
김민준
국민 · 5678
›
🎂
이서연
신한 · 9012
›
🐶
박지호
카카오뱅크 · 3456
›
03.금액 입력
←
.
×

엄마 · 토스뱅크 1234

120,000원

출금 가능 1,284,520원

04.확인
←
.
×

엄마님께
120,000원을 보낼까요?

받는 분엄마
받는 계좌토스뱅크 1000-1234-5678
보내는 통장토스뱅크 통장
수수료없음

송금 후에는 취소할 수 없어요. 한 번 더 확인해주세요.

05.완료
.

송금 완료

엄마님께 120,000원을
보냈어요

😊