2025년 3월 28일

패키지 업데이트

다음 패키지를 업데이트했어요.

• react-native-bedrock: 0.0.14
• @react-native-bedrock/native: 0.0.14
• @apps-in-toss/framework: 0.0.16
• @apps-in-toss/web-framework: 0.0.16

업데이트 내용

앱 진입 시 브릿지 뷰가 표시돼요

앱에 처음 진입할 때 앱 이름과 아이콘, 대표 색상을 보여주는 브릿지 뷰가 새로 추가됐어요. 사용자가 앱에 들어오는 순간 브랜드를 명확하게 인식할 수 있도록 도와줘요.

이 기능은 필수 구성 요소예요. 아래와 같이 brand 정보를 반드시 설정해야 해요.

@apps-in-toss/framework를 사용할 때

@apps-in-toss/framework를 사용하는 프로젝트에서는 @toss-design-system/react-native 패키지의 0.4.1 버전 이상이 설치되어 있어야 해요.

기존 웹 프로젝트에서는 사용하는 패키지 매니저에 따라 아래 명령어를 실행하세요.

npm

npm install @toss-design-system/react-native@^0.4.1

pnpm

pnpm install @toss-design-system/react-native@^0.4.1

yarn

yarn add @toss-design-system/react-native@^0.4.1

import { appsInToss } from '@apps-in-toss/framework/plugins';
import { defineConfig } from 'react-native-bedrock/config';

export default defineConfig({
  /* 기존 설정 */,
  plugins: [
    appsInToss({
      /* 기존 설정 */,
      brand: {
        displayName: '<앱 이름>',
        icon: '<App icon URL>',
        primaryColor: '<RGB Hex>',
        bridgeColorMode: 'basic',
      },
    }),
  ],
});

@apps-in-toss/web-framework를 사용할 때

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

export default defineConfig({
  /* 기존 설정 */,
  brand: {
    displayName: '<앱 이름>',
    icon: '<App icon URL>',
    primaryColor: '<RGB Hex>',
    bridgeColorMode: 'basic',
  },
});

• displayName: 브릿지 뷰에 표시할 앱 이름이에요.
• icon: 앱 아이콘 이미지 주소예요. 사용자에게 앱 브랜드를 전달해요.
• primaryColor: Toss 디자인 시스템(TDS) 컴포넌트에서 사용할 대표 색상이에요. RGB HEX 형식(eg. #3182F6)으로 지정해요.
• bridgeColorMode: 브릿지 뷰의 배경 색상 유형이에요. 흰 배경인 basic 또는 검은 배경인 inverted 중 하나를 선택할 수 있어요.

웹뷰 유형을 지정할 수 있어요

@apps-in-toss/web-framework 기반의 웹 프로젝트에서는, 웹 콘텐츠의 성격에 따라 웹뷰의 유형을 지정할 수 있어요. 어떤 맥락에서 웹 콘텐츠가 열리는지를 기준으로 알맞은 유형을 선택하면 돼요.

@apps-in-toss/web-framework를 사용할 때

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

export default defineConfig({
  /* 기존 설정 */,
  webViewProps: {
    type: 'partner',
  },
});

type 옵션에는 아래 세 가지 값 중 하나를 설정할 수 있어요.

• partner: 파트너사 콘텐츠에 사용하는 기본 웹뷰예요. 다른 값을 설정하지 않으면 이 값이 기본으로 사용돼요.
• external: 웹뷰 내부에서 자체 네비게이션(탭, 헤더 등)을 갖고 있는 콘텐츠에 적합해요.
• game: 전체 화면을 사용하는 게임 콘텐츠처럼, 가득 찬 영역이 필요한 경우 사용해요.

쿼리 파라미터가 웹뷰 주소로 전달돼요

@apps-in-toss/web-framework 기반의 웹 프로젝트에서는 앱에서 실행된 스킴(scheme)에 포함된 쿼리 파라미터를 웹뷰 주소로 전달받을 수 있어요.

예를 들어, 앱에서 아래와 같은 스킴으로 웹뷰를 실행했다면,

• intoss://my-app?age=20
  • https://my-app.apps.tossmini.com?age=20으로 실행돼요.
• intoss://my-app/my-path?name=toss
  • https://my-app.apps.tossmini.com/my-path?name=toss로 실행돼요.

이처럼 웹 환경에서는 location.search 같은 Web API를 사용해서 age=20 값을 그대로 읽을 수 있어요. 이렇게 전달받은 쿼리 파라미터는 설정, 추적용 ID 등 다양한 목적에 활용할 수 있어요.

iOS 스와이프 뒤로가기 동작을 개선했어요

해당 기능은 iOS 토스 앱 버전 5.206.0부터 사용할 수 있어요.

이전에는 네비게이션 스택에 화면이 남아 있어도 사용자가 화면 가장자리를 스와이프하면 앱이 바로 종료되는 문제가 있었어요. 이번 개선으로, 네비게이션 스택에 화면이 남아 있는 경우에는 스와이프하면 앱이 종료되지 않고 이전 화면으로 자연스럽게 이동해요.

추가로 setIosSwipeGestureEnabled 함수를 사용해서 iOS에서 스와이프 뒤로가기 기능을 켜거나 끌 수 있어요.

자세한 내용은 setIosSwipeGestureEnabled에서 확인해 주세요.

기타 수정 사항

• bedrock dev 명령어 실행 시 실패하던 문제를 해결했어요.
• bedrock.config.ts에서 brand 타입이 없다고 나오는 문제를 해결했어요.
• webViewProps.type을 partner로 설정했을 때 앱이 시작되지 않던 문제를 해결했어요.