# TDS Documentation - Mobile

> Toss Design System (TDS) is a comprehensive design system for building Toss products.
> This file provides an index of all available documentation with links to individual LLM-optimized text files.

- Documentation Type: mobile
- Total Documents: 67
- Full Documentation: /tds-mobile/llms-full.txt

## Components

- [AgreementV3](/tds-mobile/components/Agreement/v3/llm.txt): `AgreementV3`는 더 이상 사용되지 않아요. `AgreementV4`를 이용해 주세요.
- [AgreementV4](/tds-mobile/components/Agreement/v4/llm.txt): `AgreementV4` 컴포넌트는 사용자의 동의를 받아야 하는 화면을 간편하게 구성할 수 있도록 도와줘요. 여러 동의 항목을 쉽게 추가할 수 있고, 항목을 그룹화하거나 접고 펼치는 기능을 활용해 UI를 깔끔하게 정리할 수 있어요. 또, 체크박스, 설명글, 태그 등 다양한 구성 요소를 지원해서 동의받을 내용을 유저에게 잘 설명해 줄 수 있어요.
- [AlertDialog](/tds-mobile/components/Dialog/alert-dialog/llm.txt): `AlertDialog` 컴포넌트는 사용자에게 중요한 정보를 전달하고 단일 확인 버튼을 사용해서 알림을 닫을 수 있는 인터페이스를 제공해요. 주로 작업 완료 알림이나 상태 변경 알림 등 사용자에게 피드백을 제공할 때 사용해요.
- [Alphabet Keypad](/tds-mobile/components/Keypad/alphabet-keypad/llm.txt): `AlphabetKeypad` 컴포넌트는 알파벳이 표시된 키패드로, 주로 알파벳을 입력하는 인증 번호나 코드를 입력할 때 사용해요. 키를 자유롭게 배치할 수 있어서, 원하는 입력 방식에 맞는 키패드를 구성할 수 있어요.
- [Asset 이해하기](/tds-mobile/components/Asset/check-first/llm.txt): [Image: Asset thumbnail - asset/asset/Thumbnail-Asset.png]
- [Asset 활용하기](/tds-mobile/components/Asset/frame/llm.txt): 모든 `Asset` 컴포넌트는 `Frame` 컴포넌트를 기반으로 만들어져 있어요. `Frame` 컴포넌트는 에셋의 크기, 모양, 배경 등 일관된 스타일을 제공하는 역할을 해요.
- [Badge](/tds-mobile/components/badge/llm.txt): [Image: Badge thumbnail - badge/Thumbnail-Badge.png]
- [BarChart](/tds-mobile/components/Chart/bar-chart/llm.txt): `BarChart` 컴포넌트는 막대 그래프 형태로 데이터의 값을 시각화하는 도구예요.
- [Board Row](/tds-mobile/components/board-row/llm.txt): `BoardRow`는 제한된 공간에서 많은 정보를 깔끔하게 정리해 표시하는 컴포넌트예요. 주로 Q&A와 같은 정보를 표현할 때 사용하며, 펼쳐졌다 접히는 방식으로 정보를 보여주는 아코디언 컴포넌트 같은 역할을 해요.
- [Border](/tds-mobile/components/border/llm.txt): [Image: Border thumbnail - border/Thumbnail-Border.png]
- [Bottom Info](/tds-mobile/components/bottom-info/llm.txt): `BottomInfo` 컴포넌트는 화면 하단에 중요한 정보나 주의사항을 명확하게 표시할 때 사용해요. 특히 금융 상품처럼 법적 고지나 디스클레이머(면책 조항)를 사용자에게 안내해야 하는 상황에서 유용해요. 주로 리스트 형식을 제공할 수 있는 `Post` 컴포넌트와 함께 사용해 정보를 깔끔하게 정리해 보여줄 수 있어요.
- [BottomCTA 이해하기](/tds-mobile/components/BottomCTA/check-first/llm.txt): [Image: BottomCTA thumbnail - bottom-cta/single/Thumbnail-BottomCTA.png]
- [BottomSheet](/tds-mobile/components/bottom-sheet/llm.txt): export function getPreviewBox(PreviewComponent) {
- [Bubble](/tds-mobile/components/bubble/llm.txt): `Bubble` 컴포넌트는 대화형 UI에서 메시지를 표시하는 데 사용돼요. 이 컴포넌트를 사용하면 사용자의 메시지와 상대방의 메시지를 색상과 말풍선 모양으로 구분할 수 있어요.
- [Button](/tds-mobile/components/button/llm.txt): [Image: Button thumbnail - button/Thumbnail-Button.png]
- [Checkbox](/tds-mobile/components/checkbox/llm.txt): `Checkbox` 컴포넌트는 사용자가 하나 이상의 항목을 선택할 때 사용해요. 체크된 상태와 체크되지 않은 상태를 나타내고, 여러 개의 항목을 동시에 선택할 수 있어요.
- [ConfirmDialog](/tds-mobile/components/Dialog/confirm-dialog/llm.txt): `ConfirmDialog` 컴포넌트는 사용자의 액션이나 선택이 필요한 상황에서 사용되는 인터페이스를 제공해요. 확인과 취소, 두 개의 버튼을 통해 사용자가 명확한 선택을 할 수 있도록 도와줘요.
- [Dialog 이해하기](/tds-mobile/components/Dialog/dialog/llm.txt): 이 문서를 읽고나면,
- [Double](/tds-mobile/components/BottomCTA/Double/llm.txt): `BottomCTA.Double`는 이 BottomCTA의 구성 요소 중 하나로, 버튼을 **두 개** 렌더링하는 형태에요.
- [FixedBottomCTA](/tds-mobile/components/BottomCTA/fixed-bottom-cta/llm.txt): export function getPreviewBox(PreviewComponent) {
- [Full Secure Keypad](/tds-mobile/components/Keypad/full-secure-keypad/llm.txt): `FullSecureKeypad` 컴포넌트는 숫자와 알파벳을 함께 표시하는 보안 키패드예요. 숫자와 문자를 모두 입력할 수 있으며, 비밀번호나 인증번호 입력처럼 보안이 중요할 때 사용해요. 키패드의 각 키 사이에 랜덤으로 공백이 배치되어 있어, 입력 패턴을 쉽게 추측할 수 없도록 설계되었어요. 사용자가 입력을 마치면 제출할 수 있는 버튼도 함께 제공해요.
- [GridList](/tds-mobile/components/grid-list/llm.txt): `GridList` 컴포넌트는 그리드 형태로 `GridList.Item` 컴포넌트들을 배치하는 컴포넌트에요. `GridList.Item` 컴포넌트들은 이미지와 텍스트로 구성되고, 모바일 환경에서 `GridList.Item` 컴포넌트 터치 시 확대 효과를 통해 사용자 피드백을 제공해요.
- [Highlight](/tds-mobile/components/highlight/llm.txt): export function getPreviewBox(PreviewComponent) {
- [Icon Button](/tds-mobile/components/icon-button/llm.txt): `IconButton` 컴포넌트는 사용자가 특정 작업을 실행하거나 이벤트를 트리거할 때 사용해요. 아이콘으로 기능을 직관적으로 전달하면서, UI를 간결하게 유지할 수 있어요.
- [ListFooter](/tds-mobile/components/list-footer/llm.txt): `ListFooter` 컴포넌트는 리스트 항목의 마지막 부분에 위치해, 사용자에게 더 많은 항목을 불러오거나 목록을 확장하는 기능을 제공해요.
- [ListHeader](/tds-mobile/components/list-header/llm.txt): [Image: ListHeader thumbnail - list-header/Thumbnail-ListHeader.png]
- [ListRow 영역 구성하기](/tds-mobile/components/ListRow/list-row-components/llm.txt): 이 문서를 읽고 나면,
- [ListRow 이해하기](/tds-mobile/components/ListRow/list-row-overview/llm.txt): [Image: ListRow thumbnail - list-row/components/Thumbnail-ListRow.png]
- [Loader](/tds-mobile/components/loader/llm.txt): `Loader` 컴포넌트는 사용자가 기다리는 동안 콘텐츠가 로드 중임을 시각적으로 알려줘요. 데이터를 불러오거나 작업이 진행 중일 때 사용자에게 피드백을 제공하기 위해 활용해요.
- [Menu](/tds-mobile/components/menu/llm.txt): `Menu` 컴포넌트는 드롭다운 메뉴를 사용해 항목을 선택하거나 상태를 확인하고 바꿀 수 있어요.
- [Modal](/tds-mobile/components/modal/llm.txt): `Modal` 컴포넌트는 사용자의 주의가 필요한 중요한 내용을 표시하거나 즉각적인 상호작용이 필요할 때 사용해요. 화면의 다른 콘텐츠 위에 나타나 사용자의 집중을 유도해요. 사용자가 제공되는 정보를 확인하거나 필요한 동작을 완료해야만 기존 화면으로 돌아갈 수 있어요.
- [Number Keypad](/tds-mobile/components/Keypad/number-keypad/llm.txt): `NumberKeypad` 컴포넌트는 숫자가 표시된 키패드로, 주로 숫자로 된 비밀번호를 입력할 때 사용해요. 키를 자유롭게 배치할 수 있어서, 원하는 입력 방식에 맞는 키패드를 구성할 수 있어요.
- [Numeric Spinner](/tds-mobile/components/numeric-spinner/llm.txt): `NumericSpinner` 컴포넌트는 정수 입력을 쉽게 처리할 수 있도록, 숫자를 증감시키는 버튼을 제공해요. 키보드 없이 숫자를 입력하거나 수정할 때 사용해요.
- [Paragraph](/tds-mobile/components/paragraph/llm.txt): `Paragraph` 컴포넌트는 텍스트를 표시하는 데 사용돼요.
- [Post](/tds-mobile/components/post/llm.txt): `Post` 컴포넌트는 포스트 형식의 줄글을 쓸 때 적용되는 스타일이에요. 각 스타일은 제목, 본문, 목록과 같은 구성요소로 나뉘어 있으며, 정보를 효과적으로 시각화해요. 공지 사항이나 이벤트 페이지 등에 사용해요.
- [ProgressBar](/tds-mobile/components/progress-bar/llm.txt): `ProgressBar` 컴포넌트는 작업의 진행 상태를 시각적으로 표시하는 데 사용해요. 데이터 로딩, 단계별 진행 상황 등 다양한 작업의 완료 정도를 사용자에게 직관적으로 보여줄 수 있어요.
- [ProgressStepper](/tds-mobile/components/progress-stepper/llm.txt): `ProgressStepper` 컴포넌트는 프로그레스바와 스테퍼가 결합된 형태로, 작업의 진행 상태를 단계별로 시각적으로 표시하는 데 사용해요.
- [Rating](/tds-mobile/components/rating/llm.txt): `Rating` 컴포넌트는 사용자가 주어진 항목이나 콘텐츠에 대한 평가를 제공할 수 있도록 해주는 UI 요소예요. 사용자는 아이콘 개수를 선택해 자신의 만족도를 표현할 수 있고, 선택된 점수에 따라 시각적으로도 즉각 반영돼요. 이 컴포넌트는 상호작용 방식에 따라 읽기 전용 또는 상호작용 가능한 형태로 제공될 수 있어요.
- [Result](/tds-mobile/components/result/llm.txt): `Result` 컴포넌트는 특정 작업의 결과를 시각적으로 보여주는 페이지 컴포넌트예요. 주로 사용자가 작업을 성공했을 때나 에러가 발생했을 때 결과를 알리고, 다양한 메시지나 액션을 제공하는 데 사용해요. 이 컴포넌트를 사용하면 텍스트, 버튼, 이미지 같은 요소들을 손쉽게 배치할 수 있어요.
- [SearchField](/tds-mobile/components/search-field/llm.txt): export function getPreviewBox(PreviewComponent) {
- [Segmented Control](/tds-mobile/components/segmented-control/llm.txt): `SegmentedControl` 컴포넌트는 여러 선택지 중 하나를 선택할 수 있는 UI 요소예요. 주로 단일 옵션을 선택할 때 사용하고, `Radio` 컴포넌트와 같은 역할을 해요.
- [Single](/tds-mobile/components/BottomCTA/Single/llm.txt): `BottomCTA.Single`는 이 BottomCTA의 구성 요소 중 하나로, 버튼을 **하나만** 렌더링하는 간단한 형태에요.
- [Skeleton](/tds-mobile/components/skeleton/llm.txt): `Skeleton` 컴포넌트는 데이터가 로드되는 동안 콘텐츠의 기본 레이아웃을 임시로 보여 주는 컴포넌트예요. 사용자가 빈 화면 대신 콘텐츠 구조를 미리 볼 수 있어요.
- [Slider](/tds-mobile/components/slider/llm.txt): `Slider` 컴포넌트는 막대를 좌우로 움직여서 원하는 숫자를 선택할 수 있는 컨트롤이에요. 주어진 범위 내에서 핸들을 드래그하여 원하는 값을 선택할 수 있어요.
- [SplitTextField](/tds-mobile/components/TextField/split-text-field/llm.txt): `SplitTextField` 컴포넌트는 입력 데이터를 여러 필드로 나누어 입력받을 때 사용돼요.
- [Stepper](/tds-mobile/components/stepper/llm.txt): `Stepper` 컴포넌트는 여러 단계를 시각적으로 보여줄 때 사용하는 컴포넌트예요. 각 단계는 제목과 설명을 가질 수 있고, 오른쪽에는 아이콘이나 버튼을 추가할 수 있어요. 순차적인 흐름을 사용자에게 쉽게 전달하는 데 적합해요.
- [Switch](/tds-mobile/components/switch/llm.txt): `Switch` 컴포넌트는 두 가지 상태(예: 켜짐/꺼짐, 활성화/비활성화)를 전환할 수 있는 UI 요소예요. 단순한 토글 방식으로 동작해서 주로 설정이나 옵션을 활성화하거나 비활성화할 때 사용해요. 체크박스와 비슷하지만 더 직관적인 시각적 요소로 사용자가 상태 변화를 쉽게 인식할 수 있어요.
- [Tab](/tds-mobile/components/tab/llm.txt): [Image: Tab thumbnail - tab/Thumbnail-Tab.png]
- [TableRow](/tds-mobile/components/table-row/llm.txt): `TableRow` 컴포넌트는 데이터를 간결하고 읽기 쉽게 좌우로 배치할 때 사용해요.
- [Text Button](/tds-mobile/components/text-button/llm.txt): `TextButton` 컴포넌트는 사용자가 어떤 액션을 트리거하거나 이벤트를 실행할 때 사용해요.
- [TextArea](/tds-mobile/components/TextField/text-area/llm.txt): `TextArea` 컴포넌트는 여러 줄의 텍스트 입력을 받을 수 있는 컴포넌트로, 피드백 작성, 주소 입력, 메모와 같이 긴 텍스트 데이터를 처리할 때 사용돼요.
- [TextField](/tds-mobile/components/TextField/text-field/llm.txt): `TextField` 컴포넌트는 사용자로부터 입력을 받는 가장 기본적인 UI 요소로, 다양한 디자인 옵션과 속성을 제공하여 일반 텍스트 입력부터 비밀번호 입력까지 다양한 상황에 적합하게 사용할 수 있어요.
- [Toast](/tds-mobile/components/toast/llm.txt): `Toast` 컴포넌트는 사용자가 어떤 작업을 완료했거나, 이벤트가 발생했을 때 그 내용에 대해 알리거나 피드백을 하기 위해 사용해요. 이 컴포넌트를 사용하면 메시지가 화면 상단이나 하단에 짧은 시간 동안 표시된 뒤 자동으로 사라져요.
- [Tooltip](/tds-mobile/components/tooltip/llm.txt): `Tooltip` 컴포넌트는 사용자가 특정 요소에 포커스할 때 추가적인 정보를 제공하기 위해 사용해요. 보통 아이콘이나 버튼과 같은 작은 UI 요소 위에 `Tooltip` 컴포넌트를 이용해 보조적인 내용을 전달해요.
- [Top](/tds-mobile/components/top/llm.txt): [Image: Top thumbnail - top/Thumbnail-Top.png]
- [래핑한 컴포넌트 활용하기](/tds-mobile/components/Asset/asset/llm.txt): 많이 사용되는 `Frame` 컴포넌트와 `ContentIcon` 컴포넌트, `ContentImage` 컴포넌트, `ContentLottie` 컴포넌트, `ContentText` 컴포넌트, `ContentVideo` 컴포넌트의 조합을 미리 래핑하여 사용하기 쉽게 제공해요.
- [이전 ListRow 확인하기](/tds-mobile/components/ListRow/ListRowLegacy/list-row-legacy/llm.txt): 이 문서를 읽고 나면,

## Foundation

- [Colors](/tds-mobile/foundation/colors/llm.txt): 토스의 색상 시스템은 개발자와 디자이너가 **통일된 색상 이름**을 사용하도록 도와줘요.
- [Typography](/tds-mobile/foundation/typography/llm.txt): Typography는 디자인 시스템의 핵심 요소로, 텍스트의 가독성을 보장하고 일관된 방향성을 유지하며 브랜드 아이덴티티를 전달하는 중요한 역할을 해요. 폰트 크기, 라인 높이 등을 통해 정보의 계층 구조를 명확히 하고, 다양한 디바이스와 환경에서 통일된 비주얼을 제공하는 데 초점을 맞춰요.

## Hooks

- [Overlay Extension 이해하기](/tds-mobile/hooks/OverlayExtension/check-first/llm.txt): 이 문서를 읽고나면,
- [useBottomSheet](/tds-mobile/hooks/OverlayExtension/use-bottom-sheet/llm.txt): `useBottomSheet` 훅은 화면 하단에서 올라오는 바텀시트를 쉽게 제어할 수 있게 해주는 유틸리티 훅이에요. 이 훅을 사용하면 바텀시트의 열림과 닫힘 상태를 제어하고, 콘텐츠 표시와 사용자 상호작용을 효율적으로 처리할 수 있어요. 이를 통해 반복적인 코드를 줄이고, 바텀시트를 일관되게 구현할 수 있어요.
- [useDialog](/tds-mobile/hooks/OverlayExtension/use-dialog/llm.txt): `useDialog` 훅은 Alert와 Confirm 형태의 다이얼로그를 쉽게 표시할 수 있게 해주는 유틸리티 훅이에요.
- [useToast](/tds-mobile/hooks/OverlayExtension/use-toast/llm.txt): `useToast`는 간단하고 일시적인 알림 메시지를 화면에 표시할 수 있게 해주는 유틸리티 훅이에요. 사용자에게 피드백을 제공하거나 이벤트를 알릴 때 유용하게 사용할 수 있어요.

## Index

- [Index](/tds-mobile/index/llm.txt): ![Image](https://static.toss.im/3d-common/tds-kv-no-text-hero.png)

## Migration

- [@toss-design-system에서 마이그레이션](/tds-mobile/migration/from-toss-design-system/llm.txt): **Deprecation Notice**
- [Migrate to v2.x](/tds-mobile/migration/v2/llm.txt): `@toss/tds-mobile` v1.x에서 v2.x로 마이그레이션을 하는 방법을 설명해요.

## Start

- [Start](/tds-mobile/start/llm.txt): TDS Mobile 패키지를 사용하면 모바일 환경에서 다양한 UI 컴포넌트를 쉽게 적용할 수 있어요. 이 문서에서는 TDS Mobile을 프로젝트에 설치하고 사용하는 방법을 알려드려요.