미니앱 브랜딩 가이드

앱인토스 서비스가 토스와 구분되는 브랜드 경험을 전달할 수 있도록 마련한 요소들을 소개해요.
사용자가 토스와 앱인토스를 혼동하지 않도록 하는 데 중요한 기준으로, 꼭 가이드를 읽고 지켜주세요.

---

1. 브랜드 로고 / 이름 / 컬러

브랜드 로고, 브랜드 이름, 브랜드 컬러를 토스와 앱인토스 내에 노출시켜 브랜드를 인지하게 해줘요.

브랜드 로고

파트너사의 로고는 전체탭, 혜택탭, 푸시, 알림, 네비게이션, 브릿지에 보여져요.
아래 첨부한 이미지 또는 일러스트 파일을 반드시 활용해 로고를 제작해주세요.

AppsInToss_Logo_Guide_600_600.pdf
App_in_Toss_Logo_Guide_600_600.ai

• 600*600px의 각진 정방형으로 작업하며, 모서리가 둥근 형태는 불가능해요.
• 로고 뒤에는 반드시 배경을 두고, 라이트/다크 모드에서 모두 잘 보이는 배경 색상을 사용해주세요.
• 애니팡처럼 로고 자체에 배경이 이미 포함된 경우 이미지를 600*600px에 꽉 차게 배치해주세요.
• 앱인토스 콘솔에 로고 파일을 업로드하고, granite.config.mts 파일 상단에 있는 appsInToss 함수의 brand.icon 속성에 동일한 로고 링크를 업로드해 주세요.

브랜드 이름

브랜드 이름은 전체탭, 혜택탭, 푸시, 알림, 네비게이션, 브릿지에 보여져요.
특수한 이유가 없다면 한글로 작성해주세요. (e.g. 토스(O) / Toss(X))
앱인토스 콘솔에 브랜드 이름을 입력하고, granite.config.mts 파일 상단에 있는 appsInToss 함수의 brand.displayName 속성에 동일한 브랜드 이름을 입력해주세요.

브랜드 컬러

브랜드 컬러는 토스 내 진입점, 브릿지, 버튼(TDS 사용 시) 등에 보여져요.

• 브랜드 컬러가 있다면 그대로 사용해주세요.
• 브랜드 컬러가 없다면 로고에서 가장 많이 쓰인 색상을 사용해주세요.
  • 선택이 어렵다면 컬러 추출 사이트에서 로고 이미지를 넣어 도출된 컬러를 입력해주세요.
• 브랜드 컬러가 색 대비 기준을 충족하지 못할 경우 기존 색상을 최대한 유지하면서 자동 보정돼요.
• granite.config.mts 파일 상단에 있는 appsInToss 함수의 brand.primaryColor 속성에 #을 반드시 포함해서 헥스코드 여섯자리를 입력해주세요. e.g. #3182F6

2. 내비게이션 바

화면 상단에 고정되는 네비게이션 영역으로, 앱인토스 전용 컴포넌트가 제공돼요.
입점하는 서비스의 종류에 맞게 아래 가이드를 확인하고 네비게이션 바를 설정해주세요.

• 게임 가이드
• 비게임 가이드

3. 브릿지

토스에서 앱인토스로 진입할 때 앱인토스로 이동했음을 알려주는 징검다리 역할의 컴포넌트예요.
입점하는 서비스의 종류에 맞게 아래 가이드를 확인하고 브릿지를 설정해주세요.

• 게임 가이드
• 비게임 가이드

4. 탭바

탭바는 필수 컴포넌트는 아니지만, 필요하다면 반드시 토스에서 제공하는 플로팅 형태의 탭바를 사용해 직접 구현해주세요. (자체 UI를 사용하시는 경우에도 탭바는 제공된 형태에 맞추어 구현해주세요.)
토스 메인 화면의 기본 하단 탭의 형태와 겹치면 사용자가 어디에 있는지 헷갈릴 수 있기 때문이에요.
탭바의 탭 개수는 최소 2개에서 최대 5개까지 사용할 수 있어요.