Appearance
WebView로 디자인 개발하기
WARNING
TDS Mobile은 React에서만 지원돼요. 그 외 환경에서는 사용할 수 없어요.
TDS Mobile 패키지를 사용하면 모바일 환경에서 다양한 UI 컴포넌트를 쉽게 적용할 수 있어요. 이 문서에서는 TDS Mobile을 프로젝트에 설치하고 사용하는 방법을 알려드려요.
1. 준비하기
TDS Mobile 패키지를 설치하려면 toss-design-system 그룹 초대를 받아야 해요. 자세한 내용은 npm 설정하기를 참고해 주세요.
2. 필수 패키지 설치하기
먼저, TDS Mobile을 사용하려면 관련된 패키지들을 설치해야 해요. 다음 명령어를 터미널에서 실행해서 필요한 패키지들을 설치해 주세요.
sh
npm install @toss-design-system/mobile @toss-design-system/mobile-bedrock @emotion/react react react-domsh
pnpm install @toss-design-system/mobile @toss-design-system/mobile-bedrock @emotion/react react react-domsh
yarn add @toss-design-system/mobile @toss-design-system/mobile-bedrock @emotion/react react react-dom3. Provider 설정하기
TDS Mobile을 사용하려면, 프로젝트의 최상위를 TDSMobileBedrockProvider로 감싸야 해요. 이 컴포넌트는 TDS Mobile의 컴포넌트들이 올바르게 동작할 수 있도록 설정해 줘요.
JavaScript
import { TDSMobileBedrockProvider } from '@toss-design-system/mobile-bedrock';
function App({ Component, pageProps }) {
return (
<TDSMobileBedrockProvider>
<Component {...pageProps} />
</TDSMobileBedrockProvider>
)
}4. 사용하기
패키지 설치와 설정이 끝났다면, 이제 컴포넌트를 프로젝트에 불러와서 사용할 수 있어요. 예를 들어, Button 컴포넌트를 사용하려면 다음과 같이 코드를 작성하면 돼요.
JavaScript
import { Button } from '@toss-design-system/mobile';
const App = () => <Button>버튼</Button>;디자인 가이드를 따라 개발하기
디자인 개발하기를 이용하여 만들어진 시안은 Toss Design System을 이용하여 쉽게 개발할 수 있어요.
Toss Design System을 활용하면 디자이너와 개발자가 같은 언어로 소통할 수 있어요. 아래 표를 활용해서 피그마에서 사용된 컴포넌트명과 개발에서 사용할 실제 컴포넌트명을 비교해 보세요.
| Figma | Web | React Native |
|---|---|---|
| 🔵 Common_Asset | Asset | Asset |
| 🔵 Mobile_Badge | Badge | Badge |
| 🔵 Mobile_Border | Border | Border |
| 🔵 Mobile_Button | Button | Button |
| 🔵 Mobile_CheckBox | Checkbox | Checkbox |
| 🔵 Mobile_Icon_Button | IconButton | IconButton |
| 🔵 Mobile_Loader | Loader | Loader |
| 🔵 Mobile_Numeric_Spinner | NumericSpinner | NumericSpinner |
| 🔵 Mobile_Rating | Rating | Rating |
| 🔵 Mobile_Text | Text | Text |
| 🔵 Mobile_Progressbar | ProgressBar | ProgressBar |
| 🔵 Mobile_Switch | Switch | Switch |
| 🔵 Mobile_Agreement | AgreementV4 | Agreement |
| 🟣 Mobile_Bubble | Bubble | 3월 중 공개 예정 |
| 🔵 Mobile_BoardRow | BoardRow | BoardRow |
| 🔵 Mobile_BottomInfo | BottomInfo | BottomInfo |
| 🔵 Mobile_BottomSheet | BottomSheet | BottomSheet |
| 🔵 Mobile_Chart | Chart | Chart |
| 🔵 Mobile_CTAButton | BottomCTA | BottomCTA |
| 🔵 Mobile_Dialog | AlertDialog, ConfirmDialog | AlertDialog, ConfirmDialog |
| 🔵 Mobile_ListRow | ListRow | ListRow |
| 🔵 Mobile_ListGrid | GridList01 | GridList |
| 🔵 Mobile_ListFooter | ListFooter | ListFooter |
| 🔵 Mobile_ListHeader | ListHeader | ListHeader |
| 🟣 Mobile_Menu | Menu | 3월 중 공개 예정 |
| 🔵 Mobile_Result | Result | Result |
| 🔵 Mobile_SearchField | SearchField | SearchField |
| 🔵 Mobile_SegmentedControls | SegmentedControl | SegmentedControl |
| 🔵 Mobile_Skeleton | Skeleton | Skeleton |
| 🟣 Mobile_Slider | 3월 중 공개 예정 | Slider |
| 🔵 Mobile_Stepper | Stepper, StepperRow | StepperRow |
| 🔵 Mobile_Tab | Tab | Tab |
| 🔵 Mobile_TableRow | Right, Left | TableRow |
| 🔵 Mobile_TextFieldV3 | TextField | TextField |
| 🔵 Mobile_Toast | Toast | Toast |
| 🔵 Mobile_TopV2 | Top | Top |
| 🔵 Mobile_Tooltip | Tooltip | Tooltip |
| 🔵 Mobile_Keypad | NumberKeypad, FullSecureKeypad, AlphabetKeypad | NumberKeypad, FullSecureKeypad |
개발에서 컴포넌트를 어떻게 사용할 수 있을지 안내하기 위해 가이드 문서가 제공될 예정이에요. 가이드 문서는 Web 버전과 RN 버전이 따로 제공돼요.
WEB: https://tossmini-docs.toss.im/tds-mobile
React Native: https://tossmini-docs.toss.im/tds-react-native
TDS React Native의 경우 아직 모든 컴포넌트에 대해 문서가 제공되지 않고 있어요. 개발의 편의를 위해 우선 코드 스니펫을 함께 전달드려요.
자주 묻는 질문
Q. 아직 추가되지 않은 컴포넌트를 어디서 확인할 수 있나요?
문서의 컴포넌트 목록에서 🟣 표시된 항목이 순차적으로 공개될 예정이에요. 계획된 공개 시점은 문서에 표시되어 있으며, 변경 사항은 콘솔 공지사항을 통해 공유될 거예요.
Q. 왜 0버전대 인가요?
현재 프로젝트는 초기 단계로서 빠르게 발전하고 있어요. 사용자 경험을 개선하기 위해 많은 시도를 하고 있어요. 안정적인 API 제공을 목표로 하고 있지만 변경 가능성이 있는 점 양해 부탁드려요. 변경이 있어도 개발 중이신 프로젝트에 영향을 주지 않게 가이드와 자동화 도구를 제공할 예정이니 안심하고 사용해 주세요.
Q. 피드백은 어떻게 줄 수 있나요?
채널톡을 통해 편하게 피드백을 남겨주세요. 모든 피드백은 프로젝트 개선에 큰 도움이 돼요.