Appearance

공통 설정 ​

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3
실행환경: Toss AppSandbox App

미니앱에서 공통으로 사용하는 브랜드, 호스트, 권한, 빌드 옵션 등의 전역 옵션을 한 곳에서 관리해요.
아래 예제는 각각 WebView 와 React Native 환경에서 사용할 수 있는 기본 설정 템플릿 예시입니다.

기본 설정을 하면 브릿지 뷰와 내비게이션 바가 자동으로 노출돼요.
내비게이션 바의 더보기 버튼을 통해 공유하기, 신고하기 등의 기능을 이용할 수 있어요.

게임 서비스 설정

게임인 경우에는 다음과 같이 설정해야 해요.

  • webViewProps.type = 'game'
  • brand.bridgeColorMode = 'inverted'

내비게이션 바의 X버튼 위치

const { top: safeAreaTop, right: safeAreaRight } = useSafeAreaInsets();
// 네비바 상단 여백: safeAreaTop
// 네비바 우측 여백: safeAreaRight + 10

safeArea 문서를 참고하세요.

자세한 사용 방법은 권한 가이드 와 WebView 속성 제어 가이드를 참고하세요.

브릿지뷰 ​

네비게이션 바 : 비게임 ​

네비게이션 바 : 게임 ​

WebView ​

typescript
interface defineConfig {
  appName: string,           // 콘솔에 등록한 앱ID
  brand: {
    displayName: string,     // 사용자에게 노출될 앱 이름
    primaryColor: string,    // 브랜드 기본 색상(hex)
    icon: string,            // 앱 아이콘(이미지 웹 URL)
    bridgeColorMode: 'basic' | 'inverted', // 기본 모드 | 다크 모드
  },
  web: {
    host: string,            // 개발 서버 호스트
    port: number,            // 개발 서버 포트
    commands: {
      dev: string,           // 실행 명령어
      build: string,         // 빌드 명령어
    },
  },
  permissions: Permission[],    // 런타임 권한(필요 시 확장)
  outdir: string,               // 빌드 산출물 경로
  webViewProps: WebViewProps    // 추가 속성 
}

ReactNative ​

typescript
interface defineConfig({
  scheme: string,            // 앱 라우팅 스킴 (intoss)
  appName: string,           // 콘솔에 등록한 앱ID
  plugins: [
    appsInToss({
      brand: {
        displayName: string,  // 사용자에게 노출될 앱 이름
        primaryColor: string, // 브랜드 기본 색상(hex)
        icon: string,         // 앱 아이콘(이미지 웹 URL)
        bridgeColorMode: 'basic' | 'inverted', // 기본 모드 | 다크 모드
      },
      permissions: Permission[], // 런타임 권한(필요 시 확장)
    }),
  ],
});

예시 ​

tsx
import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  appName: 'webview-template',
  brand: {
    displayName: '웹뷰템플릿', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
    primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
    icon: "https://static.toss.im/icons/png/4x/icon-person-man.png", // 화면에 노출될 앱의 아이콘 이미지 주소로 바꿔주세요.
    bridgeColorMode: 'inverted', // 다크모드 (게임)
  },
  web: {
    host: 'localhost',
    port: 5173,
    commands: {
      dev: 'vite',
      build: 'tsc -b && vite build',
    },
  },
  permissions: [
    {
      name: "clipboard",
      access: "read",
    },
    {
      name: "clipboard",
      access: "write",
    },
    {
      name: "camera",
      access: "access",
    },
    {
      name: "photos",
      access: "read",
    },
  ],
  outdir: 'dist',
  webViewProps: {
    type: 'partner' | 'game' | 'extenral'  
  }
});
tsx
import { appsInToss } from '@apps-in-toss/framework/plugins';
import { defineConfig } from '@granite-js/react-native/config';

export default defineConfig({
  scheme: 'intoss',
  appName: 'rn-template',
  plugins: [
    appsInToss({
      brand: {
        displayName: 'rn-template', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
        primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
        icon: "https://static.toss.im/icons/png/4x/icon-person-man.png",
        bridgeColorMode: 'basic',
      },
      permissions: [
        {
          name: "clipboard",
          access: "read",
        },
        {
          name: "clipboard",
          access: "write",
        },
        {
          name: "camera",
          access: "access",
        },
        {
          name: "photos",
          access: "read",
        },
      ],
    }),
  ],
});