앱빌더
앱빌더는 앱인토스 파트너사를 위한 웹 기반 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를 만들어보는 튜토리얼 영상을 확인해 보세요.