Skip to content

소비자 오인 방지 정책

토스 서비스와 앱인토스 서비스 간의 소비자 오인 방지를 위해 최소한의 정책이 구축되어 있어요. 이를 위한 장치에는 아래 세 가지가 있어요.

1. 브랜드 노출

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

브랜드 로고

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

  • 전체 크기는 600*600px이며, 완전히 각진 정방형의 형태로 작업해주세요. 둥글게 크롭되어 있거나 radius가 적용된 형태는 사용할 수 없어요.

  • 로고 뒤에 배경이 반드시 있어야 하며, 배경의 명도는 라이트모드/다크모드에서 적절히 잘 보이는 배경의 색으로 선정해주세요.

  • 애니팡의 로고처럼 로고 자체에 배경이 이미 포함되어 있는 경우, 해당 로고 이미지를 꽉 차게 600*600px로 배치해주세요.

Console

앱인토스 콘솔과 파트너사 코드의 icon에 동일한 로고 파일을 업로드해주세요.

(앞으로는 앱인토스 콘솔에만 로고를 업로드하면 되도록 API를 만들고 있어요.)

브랜드 이름

브랜드 이름은 전체탭, 혜택탭, 푸시, 알림, 네비게이션, 브릿지에 노출돼요. 특수한 이유가 없다면 한글로 작성해주세요. (e.g. 토스(O) / Toss(X))

Console

앱인토스 콘솔과 파트너사 코드의 displayName에 동일한 브랜드 이름을 입력해주세요. (앞으로는 앱인토스 콘솔에만 브랜드 이름을 입력하면 되도록 API를 만들고 있어요.)

브랜드 컬러

브랜드 컬러는 토스 내의 앱인토스 진입점, 브릿지, 버튼(TDS를 사용한 경우)에 노출돼요.

  • 브랜드의 공식 컬러가 있다면 해당 컬러를 그대로 사용해주세요.
  • 만약 게임처럼 브랜드 컬러가 별도로 없다면 로고에서 가장 많이 쓰인 색상을 사용해주세요.
    • 선정에 어려움이 있다면 Color Thief 사이트에서 로고 이미지를 넣어 도출된 Dominant Color를 입력해주세요.

파트너사 코드에 브랜드 컬러를 입력하면 여러 컴포넌트에서 해당 컬러를 받아 사용하게 돼요. 해당 컬러를 활용하는 컴포넌트 중 버튼이나 아이콘 등은 색대비가 중요하기 때문에,

  • 입력받은 브랜드 컬러가 색대비를 충족하면 브랜드 컬러를 그대로 사용하고,
  • 충족하지 못하면 브랜드 컬러와 최대한 유사하지만 색대비를 충족하도록 색상이 자동 보정돼요.

따라서 특정 브랜드는 일부 컴포넌트의 컬러가 실제 브랜드 컬러와 다른 느낌이 들 수 있어요. 접근성을 충족하기 위한 보정으로, 이해를 부탁드려요.

Console

파트너사 코드의 primaryColor에 #을 반드시 포함해서 헥스코드 여섯자리를 입력해주세요. e.g. #3182F6 (O) / 3192F6 (X)

2. 네비게이션

상단에 반드시 고정되는 네비게이션 영역이에요. 세 가지 종류가 있으며 파트너사의 특성에 따라 선택해야 해요.

  • 🚨 네비게이션을 구성하는 요소들의 크기, 색상, 위치 등은 커스텀이 불가능하며, 그대로 사용해주세요.
  • 현재 앱인토스에서는 다크모드를 지원하고 있지 않으므로 네비게이션 역시 LightTheme으로 고정돼요.

일반 서비스

TDS를 사용한 경우

Dev
  • Web : bedrock.config.ts 파일에 webViewProps.type 값을 partner로 구성해주세요.
  • RN(bedrock) : PartnerNavigation을 사용해주세요.

TDS를 사용하지 않은 경우

TDS

Dev
  • Web : bedrock.config.ts 파일의 webViewProps.type 값을 external로 구성해주세요.
  • RN : 해당하지 않아요.

게임 서비스

닫기 버튼만 최우측에 플로팅으로 고정된 투명한 네비게이션 형태를 사용해요.

TDS

Dev
  • bedrock.config.ts 파일의 webViewProps.type 값을 game으로 구성해주세요.

  • 예외로, 게임이더라도 TDS를 적극적으로 사용하여 토스 서비스와 유사해보이는 흰 화면의 게임인 경우 webViewProps.type 값을 partner로 구성해주세요.

  • @apps-in-toss/web-framework 에서 getSafeAreaInsets 함수를 사용해 시스템 UI가 게임 컨텐츠를 가리지 않도록 Safe Area 여백값을 계산해서 조절할 수 있어요. (자세히 보기)

    이 값을 활용해 네비게이션의 닫기 버튼과 Status Bar, Notch, Dynamic Island 등에 게임에서 중요한 UI가 가려지지 않도록 UI를 Safe Area 내에 배치해주세요.

3. 브릿지

토스에서 앱인토스로 진입할 때 앱인토스에 진입했음을 알려주는 징검다리 역할의 컴포넌트예요.

색상 모드 설정

TDS

일반 서비스 Dev

서비스에 진입했을 때 뜨는 화면이 밝은 경우, bedrock.config.ts 파일의 brand.bridgeColorMode 값을 basic으로 구성해주세요.

게임 서비스 Dev

서비스에 진입했을 때 뜨는 화면이 어두운 경우, bedrock.config.ts 파일의 brand.bridgeColorMode 값을 inverted로 구성해주세요.

  • (e.g. TDS를 사용하지 않은 게임이나 어두운 로딩 화면이 처음에 뜨는 케이스)
  • inverted의 경우 텍스트 컬러가 화이트로 고정되어 있어요.

4. 탭바

하단 탭바는 서비스의 주요 기능에 빠르게 접근할 수 있도록 돕는 내비게이션 요소입니다.

필수 컴포넌트는 아니지만, 탭바가 필요하다면 TDS 미사용 시에도 반드시 토스에서 제공하는 플로팅 형태의 탭바를 사용해야 합니다. 토스 접속 시 바로 보이는 하단 탭 스타일과 겹치면 사용자들이 헷갈려 하기 때문이에요. 탭의 개수는 2개 ~ 5개 중에 사용할 수 있어요.

TDS