미니앱 브랜딩 가이드
앱인토스 서비스가 토스와 명확히 구분되는 브랜드 경험을 전달할 수 있도록 준비한 기준들이에요.
사용자가 토스와 앱인토스를 혼동하지 않도록 하는 데 중요한 기준이니, 꼭 가이드를 읽고 지켜주세요.
1. 브랜드 로고 / 이름 / 컬러
브랜드 로고, 브랜드 이름, 브랜드 컬러를 토스와 앱인토스 화면 곳곳에 노출해 사용자가 브랜드를 분명하게 인지할 수 있게 해요.
브랜드 로고
파트너사의 로고는 전체탭, 혜택탭, 푸시, 알림, 내비게이션, 브릿지에 보여져요.
아래에 첨부된 이미지 또는 일러스트 파일을 반드시 사용해 로고를 제작해 주세요.
App_in_Toss_Logo_Guide_600_600.ai
로고 제작과 적용 시 다음 기준을 지켜주세요.
- 크기는 600×600px의 각진 정사각형이어야 해요. 모서리가 둥근 형태는 사용할 수 없어요.
- 로고 뒤에는 반드시 배경이 있어야 하며, 라이트 모드와 다크 모드 모두에서 잘 보이는 배경 색상을 사용해요.
- 애니팡처럼 로고 자체에 배경이 포함된 경우에는 이미지를 600×600px 영역에 꽉 차게 배치해요.
- 앱인토스 콘솔에 로고 파일을 업로드하고,
granite.config.ts파일 상단의appsInToss함수에서brand.icon속성에 동일한 로고 링크를 입력해요.
브랜드 이름
브랜드 이름은 전체 탭, 혜택 탭, 푸시, 알림, 내비게이션, 브릿지에 노출돼요.
특별한 이유가 없다면 한글로 작성해 주세요.
예를 들면 토스는 가능하지만 Toss는 권장하지 않아요.
- 앱인토스 콘솔에 브랜드 이름을 입력해요.
granite.config.ts파일 상단의appsInToss함수에서brand.displayName속성에 동일한 브랜드 이름을 입력해요.
브랜드 컬러
브랜드 컬러는 토스 내 진입점, 브릿지, 버튼(토스 디자인 시스템 사용 시) 등에 사용돼요.
브랜드 컬러 설정 기준은 다음과 같아요.
- 이미 브랜드 컬러가 있다면 그대로 사용해요.
- 브랜드 컬러가 없다면 로고에서 가장 많이 사용된 색상을 선택해요.
- 선택이 어렵다면 컬러 추출 사이트를 사용해 로고 이미지에서 대표 색상을 뽑아도 좋아요.
- 브랜드 컬러가 색 대비 기준을 충족하지 못하면, 기존 색상을 최대한 유지하면서 자동으로 보정돼요.
granite.config.ts파일 상단의appsInToss함수에서brand.primaryColor속성에#을 포함한 여섯 자리 헥스 코드 값을 입력해요.
예를 들면#3182F6처럼 입력해요.
2. 내비게이션 바
내비게이션 바는 화면 상단에 고정되는 영역으로, 앱인토스 전용 컴포넌트를 제공해요.
입점하는 서비스의 유형에 따라 아래 가이드를 참고해 내비게이션 바를 설정해 주세요.
3. 탭바
탭바는 필수 컴포넌트는 아니에요.
다만 탭바가 필요하다면, 반드시 토스에서 제공하는 플로팅 형태의 탭바를 사용해서 직접 구현해야 해요.
자체 UI를 사용하더라도 탭바만큼은 제공된 형태에 맞춰 구현해 주세요.
토스 메인 화면의 기본 하단 탭과 형태가 겹치면, 사용자가 현재 위치를 헷갈릴 수 있기 때문이에요.
탭바 설정 시 다음 기준을 지켜주세요.
- 탭 개수는 최소 2개, 최대 5개까지 사용할 수 있어요.
- 토스에서 제공하는 플로팅 형태를 유지해야 해요.