Appearance
앱빌더 사용하기
1. '앱빌더'를 소개해요
앱빌더는 앱인토스 파트너사를 위한 UI 디자인 툴이에요.
토스의 UI 스타일 가이드를 따르면서 빠르게 미니앱 UI를 완성할 수 있어요.
앱빌더는 이런 점이 좋아요
- 디자인 라이브러리를 따로 가져오지 않아도 돼요. 필요한 컴포넌트가 앱빌더 안에 모두 들어있어요.
- 오른쪽 속성 패널에서 색상, 텍스트, 간격 등을 쉽게 조정할 수 있어요.
- 앱인토스 파트너사라면 툴 설치 없이 웹에서 바로 사용할 수 있어요.
- 콘솔에서 미니앱을 선택하여 디자인 메뉴를 눌러 사용해보세요.
주의해주세요!
- 앱인토스의 화면은 반드시 앱빌더를 통해 구성해주세요. 앱빌더는 파트너사 메이커분들께 TDS(토스 디자인 시스템)와 퀵스타트를 지속적으로 개선해 제공하고, 서비스 사용자에게 토스앱과 일관된 경험을 전하기 위해 필요해요.
- 앱빌더는 현재 베타 버전이에요. 일부 기능이 없거나 오류가 발생할 수 있어요.
- 아직 공식 출시 전이기 때문에 캡쳐나 화면 녹화 등으로 외부에 공유하지 말아주세요.
2. 프로젝트 생성과 삭제
앱빌더에서 디자인을 시작하려면 먼저 프로젝트를 만들어야 해요.
영상으로 프로젝트를 생성하고 삭제하는 방법을 알아볼게요.
프로젝트 생성
홈 화면 오른쪽 상단에 '+ 새로 만들기' 버튼으로 새 프로젝트를 만들 수 있어요.
프로젝트 삭제
프로젝트는 영구 삭제할 수 없어요.
필요 없다면 보관함에 넣었다가 다시 꺼내 쓸 수 있어요.
프로젝트 즐겨찾기
프로젝트에 마우스를 올리면 보이는 '별 버튼'을 클릭해서 즐겨찾기에 추가할 수 있어요.
즐겨찾기한 프로젝트는 화면 상단에 고정돼요.
별 버튼을 다시 클릭하면 즐겨찾기를 해제할 수 있어요.
프로젝트 폴더
왼쪽 패널에서 '+' 버튼으로 폴더를 만들 수 있어요.
3. 디자인 시작하기
새 프로젝트를 열어 브랜드 스타일을 설정한 후, 가이드와 템플릿을 바로 활용할 수 있어요.
영상으로 브랜드 스타일 설정 방법과 미리 준비된 가이드, 템플릿을 함께 살펴볼게요.
브랜드 스타일 설정
새 프로젝트를 열면 "시작하기" 모달에서 서비스 이름과 버튼 색상을 선택할 수 있어요.
- 서비스 이름 : 앱인토스 콘솔에 등록된 이름만 선택할 수 있어요.
- 버튼 색상 : 서비스의 기본 색상(primary color)로, 대부분의 에셋에 적용돼요. 일부 색상은 웹접근성을 지키기 위해 보정될 수 있어요.
페이지
페이지는 한 프로젝트 안에서 서로 다른 캔버스에 디자인할 수 있는 기능이에요.
왼쪽 패널 상단의 페이지 섹션에서 새 페이지를 만들거나 삭제할 수 있어요.
- 준비하기 페이지: 앱빌더 기본 사용법을 확인할 수 있어요.
- 템플릿 페이지: 바로 복제해 쓸 수 있는 UI 세트가 준비돼 있어요.
디자인 방법
앱빌더에서는 두 가지 방법으로 디자인할 수 있어요.
- 퀵스타트: 토스에서 쓰는 UI 화면을 그대로 가져와 사용할 수 있어요.
- 커스텀: 디자인 에셋을 조합해 UI를 완성할 수 있어요.
4. 퀵스타트로 디자인하기
퀵스타트란 토스앱에서 쓰이는 UI를 불러와 일부 옵션만 수정할 수 있는 기능이에요.
단일 화면뿐 아니라, 여러 화면이 묶인 플로우도 제공돼요.
앱빌더에서 빠르게 디자인을 완성할 수 있도록, 토스 UI 그대로 활용할 수 있는 퀵스타트 기능이 있어요.
영상으로 퀵스타트 기능 활용법을 살펴볼게요.
퀵스타트 수정 방법
퀵스타트를 선택하면 오른쪽 패널에서 일부 내용을 수정할 수 있어요.
내부 요소는 Ctrl(Cmd) + 클릭으로 빠르게 선택할 수 있어요. 단, 오른쪽 패널에서 변경을 지원하는 옵션 외의 요소를 변경하거나 삭제하는 건 지원하지 않아요. 필요한 내용만 간단히 바꿔서 쓰는 용도로 활용해 주세요.
5. 커스텀으로 디자인하기
커스텀이란 토스에서 제공하는 디자인 에셋을 조합해 UI를 만드는 방법이에요.
기본 화면을 추가하고, 그 안에 에셋을 순서대로 쌓아 UI를 만들 수 있어요.
필요한 퀵스타트가 없을 땐, 에셋을 조합해 직접 디자인할 수 있도록 커스텀 기능도 준비되어 있어요.
영상으로 커스텀 기능 활용법을 살펴볼게요.
기본 화면 추가
화면 크기는 아이폰 13 미니 기준(375x812)이에요. 디자인 에셋도 이 너비에 맞춰 제작돼 있어요.
화면 너비를 임의로 조정하면 일부 요소가 어색해질 수 있으니 권장하지 않아요.
6. 텍스트
앱빌더에서는 'Text'에셋을 활용해 텍스트에 TDS를 간편하게 적용할 수 있어요.
영상으로 텍스트를 추가하고 편집하는 방법을 알아볼게요.
‘Text' 에셋을 추가한 뒤 오른쪽 패널에서 원하는 종류를 선택해주세요. 포스트형은 여백이 있고, 일반형은 여백이 없어요.
- '텍스트' 입력칸에서 내용을 편집할 수 있어요.
- 줄바꿈은 shift+enter로 할 수 있어요.
7. 아이콘, 그래픽
앱빌더에서는 토스팀이 제공하는 그래픽 요소만 사용할 수 있어요.
영상으로 그래픽을 추가하고 편집하는 방법을 알아볼게요.
그래픽을 추가하는 방법은 다음과 같아요.
- **상단 컨트롤바의 '리소스'**를 눌러 원하는 그래픽을 클릭하세요.
- 커스텀에서 'Asset' 추가 → ‘변경하기’ 버튼 → 원하는 그래픽을 클릭하세요.
앱빌더 베타 버전에서는 3D 그래픽을 따로 제공하지 않아요.
대신, 2D 그래픽을 선택해 3D로 변환할 수 있어요.
영상으로 3D 그래픽을 생성하는 방법을 알아볼게요.
- 만든 3D 그래픽은
저장하기버튼을 누르면 토스팀의 검토가 끝난 후 자유롭게 쓸 수 있어요. - 토스에 사용되는 3D 그래픽은 현재 앱빌더에서 지원이 어렵고, 추후 제공을 검토 중이에요. 양해 부탁드려요.
- 퀵스타트에 제공되는 3D 그래픽을 따로 가져와 사용할 수 없어요.
8. 레이아웃
앱빌더에서는 붙이기 기능을 통해 레이아웃을 빠르게 구성할 수 있어요. 영상으로 붙이기 기능 활용법을 알아볼게요.
- 여러 에셋을 Shift + 클릭으로 선택한 뒤, 오른쪽에 뜨는 툴바에서 가로/세로/겹쳐 붙이기로 그룹화할 수 있어요.
- 떼어내기로 그룹을 해제할 수도 있어요.
- 붙인 뒤 오른쪽 패널에서 여백, 배경색, 모서리 둥글기로 조절할 수 있어요.
붙인 이후 오른쪽 패널에서 여백, 배경색, 모서리 둥글기 등을 조절할 수 있어요.
영상으로 붙이기 기능 활용 후 스타일 편집 방법을 알아볼게요.
Stack Layout
- Fit: 내용에 맞게 길이 조정
- Fill: 화면을 채우도록 길이 조정
- Fixed: 사용자가 지정한 길이
- Distribute: 붙이기 시작점
- Gap: 사이 여백
- Padding: 모서리 여백
Style
- Visible: 보이기/숨기
- Opacity: 투명도 (1이 100%에요. 만약 10%로 투명도를 주고싶다면 0.1을 입력하면 돼요)
- Fill: 배경색
- Border: 테두리 색상
- Radius: 모서리 둥글기
- Shadow: 그림자 효과
9. 프로토타입
오른쪽 상단 플레이 버튼으로 프로토타입(모바일 기기 해상도 미리보기)을 볼 수 있어요.
영상으로 프로토타입 기능 활용법을 알아볼게요.
상단 컨트롤바에 휴대폰 아이콘 모양을 선택하면 디바이스 프리뷰 기능을 사용할 수 있어요. 디바이스 프리뷰 기능으로 기기별 해상도를 확인해 보세요.
화면 내부의 모든 에셋의 너비를 Fill로 설정하면 반응형 디자인을 만들 수 있어요.
프로토타입 공유 버튼으로 링크를 복사하면, 실제 모바일 기기에서 UI를 바로 볼 수 있어요.
영상으로 프로토타입 링크 생성 방법을 알아볼게요.
10. 앱빌더 튜토리얼 영상
앱빌더에서 상단에 소개된 기능들을 활용해 검색 UI를 만들어보는 튜토리얼 영상이에요.