디자인 도구
앱인토스 미니앱 UI를 디자인하는 두 가지 방법을 소개해요.
- 피그마: TDS 컴포넌트 라이브러리를 직접 다운로드해 사용해요.
- 앱빌더: 별도 설치 없이 콘솔에서 바로 사용할 수 있는 웹 기반 UI 디자인 툴이에요.
피그마
제공된 라이브러리에 있는 TDS 컴포넌트로 디자인하는 것을 권장해요.
UI 스타일 개발에 신경쓰지 않고 개발 문서에 있는 코드를 토대로 빠르게 개발할 수 있어요.
라이선스 안내
본 UI Kit을 사용함으로써, 본 UI Kit에 포함된 라이선스의 조건에 동의하는 것으로 간주됩니다.
파일 직접 다운로드
UI Kit .fig 파일을 다운로드 후 라이브러리에 연결해 사용해요.
1. 파일 다운로드
여기서 파일을 다운로드 해주세요.
유의사항
- UI Kit에 적용된 Semantic Color는 현재 버전의 코드와 일치하지 않아요.
- Figma와 Toss 앱에서 서로 다른 Font Family를 사용하고 있어요.
Toss Product Sans는 별도 자산으로 배포가 어려워, Figma에서는 SF Pro를 사용해요.
Toss 앱에서는 Font Family가 자동으로 Toss Product Sans로 적용되니 참고해 주세요.
2. 파일 가져오기
- 피그마를 실행한 후 상단 메뉴에서 Import 버튼을 클릭해요.
- 다운로드한
TDS_Mobile_for_Apps_in_Toss_(2602).fig파일을 선택하거나 창으로 드래그&드롭 해주세요. - 선택한 프로젝트 또는 Drafts 폴더 안에 파일이 생성돼요.
3. 라이브러리로 연결 (Publish)
- 불러온 파일을 열고, 왼쪽 패널에서 Assets 탭을 클릭해요.
- 오른쪽 상단( 📚 ) 아이콘을 클릭하여 Manage libraries 창을 열어주세요.
- 파일 옆의 Publish 버튼을 눌러 "이 파일을 라이브러리로 사용"하도록 설정해 주세요.
🔸 Publish 전: 다운로드 파일 안에서만 사용 가능
🔸 Publish 후: 다른 피그마 디자인 파일에서도 사용 가능
4. 컴포넌트 연결 후 사용
- 작업장 왼쪽 패널의 Asset 탭을 눌러주세요.
- TDS Library 파일이 활성화되어 있지 않다면 Add to file버튼을 클릭해주세요
- Assets 탭에서 버튼, 아이콘, 색상 등 필요한 컴포넌트를 드래그해서 사용해 주세요.
자동 업데이트는 불가해요
새 버전이 나오면, 다시 파일을 다운로드 해야해요.
새로운 버전이 나올 경우 공지해 드릴 예정이에요.
디자인할 때 꼭 지켜주세요
아래 항목들은 실제 개발과의 정합성을 맞추기 위해 특히 중요한 기준이에요.
- 모든 화면의 최상단에는 ❖ Navigation 컴포넌트를 반드시 사용해 주세요. 필수 컴포넌트가 이미 포함된 🌈 Screen을 꺼내 쓰면 더 편리해요.
- 가능한 한 오른쪽 패널에서만 속성을 조작해 주세요. 캔버스에서 직접 수정하면 코드에 없는 속성이 생겨 개발 시 구현이 어렵거나 시간이 오래 걸릴 수 있어요.
- 화면은 가로 375px 기준으로 작업해 주세요. 다른 크기도 가능하지만, ❖ Keypad 처럼 반응형을 지원하지 않는 컴포넌트가 있어 불편할 수 있어요.
- 화면 상단에는 ❖ Top, 그 아래에는 ❖ ListRow를 사용하면 대부분의 화면을 빠르게 구성할 수 있어요.
- 대부분의 TDS 컴포넌트에는 기본 패딩이 포함돼 있어서 gap 없이 붙여서 사용해도 자연스럽게 보여요. 예를 들어, ❖ ListRow에는 S, M, L, XL 네 가지 상하 패딩 옵션이 있어요. 그래도 간격 조절이 필요하다면 오토레이아웃의 gap을 사용해주세요.
자주 묻는 질문
개발자 커뮤니티로 문의해 주세요. 빠르게 도와드릴게요.
그래도 필요한 컴포넌트가 없다면 채널톡으로 요청해 주세요. 가능한 빠르게 검토할게요.
직접 디자인할 수도 있지만, 다른 TDS 컴포넌트와 어울리게 만들어 주세요.
각 컴포넌트에 이미 폰트가 적용돼 있어서 별도 설치 없이 사용할 수 있어요.
Missing Fonts로 보여도 실제 사용에는 문제가 없어요.
가능하지만 신중하게 판단해 주세요.
컴포넌트를 깨서 일부만 사용하면 개발 시 별도의 코드를 작성해야 해요.
가끔 발생하는 버그예요. 알맞은 색상으로 수정해서 사용해 주세요.
영어로 검색하거나 유니코드로 검색해 주세요.
피그마의 한계로 현재는 개선이 어려워요.
원칙적으로 가능하지만, 심사 과정에서 부적절하거나 사용성을 크게 해치는 경우에는 반려될 수 있어요.
다크 모드는 추후 지원할 예정이에요. 지금은 라이트 모드 기준으로만 디자인해 주세요.
개발자 커뮤니티로 언제든 문의해 주세요.
앱빌더
앱빌더는 앱인토스 파트너사를 위한 웹 기반 UI 디자인 툴이에요.
별도 설치 없이 토스의 UI 스타일 가이드를 따르는 화면을 빠르게 만들 수 있어요.
앱빌더는 워크스페이스에서 앱을 등록한 뒤 '디자인' 메뉴에서 시작할 수 있어요.
1. 앱빌더 한눈에 보기
앱빌더로 할 수 있는 일
- 토스 UI 스타일에 맞는 화면을 빠르게 만들 수 있어요.
- 디자인 에셋과 컴포넌트를 바로 사용해 화면을 구성할 수 있어요.
- 프로토타입으로 실제 모바일 화면처럼 미리 볼 수 있어요.
이런 점이 좋아요
- 디자인 라이브러리를 따로 준비하지 않아도 돼요.
- 오른쪽 속성 패널에서 색상, 텍스트, 간격을 바로 조정할 수 있어요.
- 웹에서 바로 열어서 사용할 수 있어요.
- 콘솔에서 미니앱을 선택하고 디자인 메뉴를 누르면 바로 시작할 수 있어요.
참고·주의 사항
- 개발자 모드는 오른쪽 패널 상단 토글을 켜면 사용할 수 있어요.
- 현재는 기본 UI 디자인 기능만 제공돼요.
- 앱빌더는 베타 버전이에요. 일부 기능이 없거나 오류가 있을 수 있어요.
- 공식 출시 전이므로 화면 캡처나 녹화본을 외부에 공유하지 말아 주세요.
2. 시작하기: 프로젝트 생성
디자인을 시작하려면 먼저 프로젝트를 만들어야 해요.
홈 화면 오른쪽 상단의 '+ 새로 만들기' 버튼을 눌러 프로젝트를 만들 수 있어요.
프로젝트 정리 방법
- 프로젝트는 완전히 삭제할 수 없어요.
- 대신 보관함에 넣거나 다시 꺼내는 방식으로 관리해요.
즐겨찾기와 폴더
- 프로젝트에 마우스를 올리면 보이는 별 버튼으로 즐겨찾기를 설정할 수 있어요.
- 즐겨찾기한 프로젝트는 화면 상단에 고정돼요.
- 왼쪽 패널의 '+' 버튼으로 프로젝트 폴더를 만들 수 있어요.
3. 디자인 준비: 브랜드 스타일과 페이지
프로젝트를 열면, 본격적인 디자인 전에 기본 설정을 해요.
브랜드 스타일 설정
처음 프로젝트를 열면 '시작하기' 모달이 보여요. 여기서 다음을 설정해 주세요.
- 서비스 이름: 앱인토스 콘솔에 등록된 이름만 선택할 수 있어요.
- 버튼 색상: 서비스의 기본 색상(primary color)이에요. 접근성을 위해 일부 색상은 자동으로 보정될 수 있어요.
페이지 이해하기
페이지는 하나의 프로젝트 안에서 여러 화면을 나누어 디자인하는 단위예요.
왼쪽 패널 상단에서 페이지를 추가하거나 삭제할 수 있어요.
- 준비하기 페이지: 앱빌더 기본 사용법을 익히는 페이지예요.
- 템플릿 페이지: 바로 복제해서 쓸 수 있는 UI 예제가 준비돼 있어요.
4. 화면을 만드는 두 가지 방법
앱빌더에서는 상황에 따라 두 가지 방식으로 디자인해요.
1) 퀵스타트
토스에서 실제 사용하는 UI를 그대로 불러와 텍스트나 일부 옵션만 수정해 사용하는 방식이에요.
- 단일 화면뿐 아니라 여러 화면이 연결된 플로우도 제공돼요.
- 빠르게 화면 구조를 잡고 싶을 때 좋아요.
수정 시 유의사항
- 오른쪽 패널에서 제공하는 항목만 수정할 수 있어요.
- 내부 요소는 Ctrl(Cmd) + 클릭으로 선택해요.
- 제공된 옵션 외 요소를 변경하거나 삭제하는 건 지원하지 않아요.
2) 커스텀
기본 화면을 추가한 뒤, 디자인 에셋을 조합해 UI를 직접 구성하는 방식이에요.
- 필요한 퀵스타트가 없을 때 사용해요.
- 더 자유롭게 레이아웃을 만들 수 있어요.
기본 화면 기준
- 화면 크기는 아이폰 13 미니 기준(375 × 812)이에요.
- 에셋도 이 너비에 맞춰 제작돼 있어요.
- 화면 너비를 임의로 바꾸는 건 권장하지 않아요.
5. 화면 구성 요소 다루기
텍스트 사용하기
- Text 에셋으로 텍스트에 TDS 스타일을 적용할 수 있어요.
- 오른쪽 패널에서 스타일과 내용을 수정해요.
- 텍스트 종류는 다음과 같아요.
- 일반형: 본문용 텍스트
- 포스트형: 제목용 볼드 텍스트
입력 팁
줄바꿈은 Shift + Enter를 사용해 주세요.
아이콘과 그래픽 사용하기
토스팀이 제공하는 그래픽만 사용할 수 있어요. 그래픽 추가 방법은 두 가지예요.
- 상단 컨트롤바의 리소스에서 선택
- 오른쪽 패널에서 Asset 추가 → 변경하기 → 그래픽 선택
3D 그래픽
- 베타 버전에서는 기본 3D 그래픽을 직접 제공하지 않아요.
- 대신 2D 그래픽을 선택해 3D로 변환할 수 있어요.
- 저장하기를 누르면 토스팀 검토 후 사용할 수 있어요.
- 퀵스타트에 포함된 3D 그래픽은 따로 사용할 수 없어요.
6. 레이아웃 정리하기
여러 요소를 정돈하려면 붙이기 기능을 사용해 주세요.
붙이기 기본 사용법
- 여러 에셋을 Shift + 클릭으로 선택해요.
- 가로, 세로, 겹쳐 붙이기로 그룹화할 수 있어요.
- 떼어내기로 그룹을 해제할 수 있어요.
Stack Layout 옵션
- Fit: 내용에 맞게
- Fill: 화면을 채우게
- Fixed: 고정 길이
- Gap: 요소 사이 여백
- Padding: 바깥 여백
Style 옵션
- Visible: 보이기/숨기기
- Opacity: 투명도
- Fill: 배경색
- Border: 테두리
- Radius: 모서리 둥글기
- Shadow: 그림자
7. 미리보기와 공유
프로토타입 확인하기
오른쪽 상단 플레이 버튼으로 모바일 해상도 기준 미리보기를 확인할 수 있어요.
- 휴대폰 아이콘으로 기기별 프리뷰를 볼 수 있어요.
- 모든 에셋을 Fill로 설정하면 반응형 레이아웃을 만들 수 있어요.
프로토타입 공유
프로토타입 공유 버튼으로 링크를 복사하면 실제 모바일 기기에서 바로 UI를 확인할 수 있어요.
8. 튜토리얼로 한 번 더 익히기
지금까지 소개한 기능을 모두 활용해 검색 UI를 만들어보는 튜토리얼 영상을 확인해 보세요.