앱빌더

1. '앱빌더' 소개

앱빌더는 앱인토스 파트너사를 위한 UI 디자인 툴이에요.
별다른 설치 없이 토스의 UI 스타일 가이드를 따른 화면을 빠르게 완성할 수 있어요.

앱빌더는 이런 점이 좋아요

• 디자인 라이브러리를 따로 가져오지 않아도 필요한 컴포넌트가 이미 들어있어요.
• 오른쪽 속성 패널에서 색상, 텍스트, 간격 등을 쉽게 조정할 수 있어요.
• 별다른 설치 없이 웹에서 바로 사용할 수 있어요.
• 콘솔에서 미니앱을 선택해 디자인 메뉴를 누르면 바로 사용할 수 있어요.

참고

• 앱빌더 개발자 모드는 우측 패널 상단 토글을 ON 하면 이용할 수 있어요.
• 지금은 기본 UI 디자인 기능만 제공돼요.

주의

• 현재는 베타 버전이에요. 일부 기능이 없거나 오류가 발생할 수 있어요.
• 아직 공식 출시 전이기 때문에 캡처나 화면 녹화 등으로 외부에 공유하지 말아 주세요.

2. 프로젝트 생성과 삭제

앱빌더에서 디자인을 시작하려면 먼저 프로젝트를 만들어야 해요.
영상으로 프로젝트를 생성하고 삭제하는 방법을 알아볼게요.

프로젝트 생성

홈 화면 오른쪽 상단에 '+ 새로 만들기' 버튼으로 새 프로젝트 만들 수 있어요.

프로젝트 삭제

프로젝트는 영구 삭제할 수 없고, 필요에 따라 보관함에 넣거나 꺼낼 수 있어요.

프로젝트 즐겨찾기

프로젝트에 마우스를 올리면 보이는 '별 버튼'을 클릭해 즐겨찾기에 추가, 해제할 수 있어요.
즐겨찾기한 프로젝트는 화면 상단에 고정돼요.

프로젝트 폴더

왼쪽 패널 '+' 버튼으로 만들 수 있어요.

3. 디자인 시작하기

새 프로젝트를 열어 브랜드 스타일을 설정한 후, 가이드와 템플릿을 바로 활용할 수 있어요.
영상으로 브랜드 스타일 설정 방법과 미리 준비된 가이드, 템플릿을 함께 살펴볼게요.

브랜드 스타일 설정

새 프로젝트를 열면 "시작하기" 모달에서 서비스 이름과 버튼 색상을 선택할 수 있어요.

• 서비스 이름 : 앱인토스 콘솔에 등록된 이름만 선택할 수 있어요.
• 버튼 색상 : 서비스의 기본 색상(primary color)로, 대부분의 에셋에 적용돼요. 일부 색상은 웹 접근성을 지키기 위해 보정될 수 있어요.

페이지

페이지는 한 프로젝트 안에서 서로 다른 캔버스에 디자인할 수 있는 기능이에요.
왼쪽 패널 상단의 페이지 섹션에서 새 페이지를 만들거나 삭제할 수 있어요.

• 준비하기 페이지: 앱빌더 기본 사용법을 확인할 수 있어요.
• 템플릿 페이지: 바로 복제해 쓸 수 있는 UI 세트가 준비돼 있어요.

디자인 방법

앱빌더에서는 두 가지 방법으로 디자인할 수 있어요.

1. 퀵스타트: 토스에서 쓰는 UI 화면을 그대로 가져와 사용할 수 있어요.
2. 커스텀: 디자인 에셋을 조합해 UI를 완성할 수 있어요.

4. 퀵스타트로 디자인하기

퀵스타트란 토스앱에서 쓰이는 UI를 불러와 일부 옵션만 수정할 수 있는 기능이에요.
단일 화면뿐 아니라, 여러 화면이 묶인 플로우도 제공돼요.
영상으로 퀵스타트 기능 활용법을 살펴볼게요.

퀵스타트 수정 방법

퀵스타트를 선택하면 오른쪽 패널에서 텍스트나 일부 설정을 수정할 수 있어요.

내부 요소는 Ctrl(Cmd) + 클릭으로 선택할 수 있어요. 단, 오른쪽 패널에서 변경할 수 있는 옵션 외 다른 요소를 변경하거나 삭제하는 건 지원하지 않아요. 필요한 내용만 간단히 바꿔서 쓰는 용도로 활용해 주세요.

5. 커스텀으로 디자인하기

커스텀이란 토스에서 제공하는 디자인 에셋을 조합해 UI를 만드는 방법이에요.
필요한 퀵스타트가 없을 땐, 기본 화면을 추가하고 에셋을 조합해 직접 UI를 만들 수 있어요.
영상으로 커스텀 기능 활용법을 살펴볼게요.

기본 화면 추가

화면 크기는 아이폰 13 미니 기준(375x812)이에요. 디자인 에셋도 이 너비에 맞춰 제작돼 있어요.
화면 너비를 임의로 조정하면 일부 요소가 어색해질 수 있으니 권장하지 않아요.

6. 텍스트

앱빌더에서는 'Text' 에셋을 활용해 텍스트에 TDS를 간편하게 적용할 수 있어요.
‘Text' 에셋을 추가한 뒤, 오른쪽 패널에서 원하는대로 설정해요.
영상으로 텍스트를 추가하고 편집하는 방법을 알아볼게요.

종류 선택

• ‘일반형’은 일반적인 줄글 형식, ‘포스트형’은 제목으로 활용하기 적합한 볼드체라고 생각하면 돼요.

텍스트

• '텍스트' 입력칸에서 내용을 편집할 수 있어요.
• 줄바꿈은 shift+enter로 할 수 있어요.

7. 아이콘, 그래픽

토스팀이 제공하는 그래픽 요소만 사용할 수 있어요.
영상으로 그래픽을 추가하고 편집하는 방법을 알아볼게요.
그래픽을 추가하는 방법은 다음과 같아요.

1. 상단 컨트롤바의 '리소스' 를 눌러 원하는 그래픽을 클릭하거나
2. 우측 패널 커스텀에서 '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를 만들어보는 튜토리얼 영상이에요.

👉 영상 보러 가기