2025년 3월 21일

패키지 업데이트

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

• @apps-in-toss/framework: 0.0.12
• @apps-in-toss/web-framework: 0.0.12

업데이트 내용

배포 인프라 변경

배포 인프라가 변경되어서 @apps-in-toss/web-framework을 업데이트해야해요. 패키지를 업데이트하고 배포해야 정상적으로 웹이 표시돼요. 토스앱 5.204.0이 필요해요.

이미지 관련 base64 처리 방식 수정

openCamera와 fetchAlbumPhotos에서 base64 형식으로 반환된 이미지를 표시할 때,
데이터 URL 스키마(data:image/jpeg;base64,)를 직접 추가해야 해요.

openCamera 예제

import { openCamera } from "@apps-in-toss/framework";

const image = await openCamera({ base64: true });

// base64 형식의 이미지 데이터 처리
const imageUri = image.dataUri
  ? `data:image/jpeg;base64,${image.dataUri}`
  : image.dataUri;

<Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />;

fetchAlbumPhotos 예제

import { fetchAlbumPhotos } from "@apps-in-toss/framework";

const images = await fetchAlbumPhotos({
  base64: true,
  maxWidth: 360,
});

{
  images.map((image) => {
    // base64 형식의 이미지 데이터 처리
    const imageUri = image.dataUri
      ? `data:image/jpeg;base64,${image.dataUri}`
      : image.dataUri;

    return <Image source={{ uri: imageUri }} key={image.id} />;
  });
}

WebView 사용자 상호작용 제어 옵션 추가

@apps-in-toss/web-framework에서는 webViewProps 옵션으로 WebView 안에서의 상호작용을 제어할 수 있어요. 특히 게임처럼 스크롤이 필요 없는 콘텐츠를 만들 때 유용해요.

예를 들어 아래 설정은 다음과 같은 동작을 비활성화해요.

• iOS에서 스크롤 탄성 효과 없애기 (bounces: false)
• iOS에서 당겨서 새로고침 막기 (pullToRefreshEnabled: false)
• Android에서 오버스크롤 막기 (overScrollMode: 'never')
• iOS에서 HTML5 비디오 인라인 재생 설정 (allowsInlineMediaPlayback: true)

설정 예시

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

export default defineConfig({
  appName: "ping-pong",
  webViewProps: {
    bounces: false, // iOS에서 스크롤 탄성 효과를 비활성화해요
    pullToRefreshEnabled: false, // Android에서 당겨서 새로고침 기능을 끄고 싶을 때 사용해요
    overScrollMode: "never", // Android에서 오버스크롤을 완전히 막아요
  },
});

이 설정은 앱 안에서 WebView를 열었을 때만 적용돼요. 게임이나 드래그/스와이프 같은 인터랙션이 많은 콘텐츠에서 잘못된 스크롤 동작을 방지하려면 꼭 설정해 주세요.