[앱인토스] WebView 미니앱 테스트 방법

앱인토스에 들어가는 서비스를 WebView로 만들고, 이걸 미니앱으로 테스트 하는 과정에 몇번의 시행착오를 겪었다.

(물론 아직도 완벽하지는 않지만.. 특히 iOS 하하핫 ^^;;)

공식 문서만으로는 한눈에 파악이 어려운 부분들이 있어서, 직접 삽질하며 정리한 내용을 공유한다.

 

1. 개발 환경 구성

: 기본적으로 apps-in-toss/web-framework 의 프레임워크를 사용하고, 빌드 번들 파일(배포용 패키지)의 설정을 해준다.

npm install @apps-in-toss/web-framework
npx ait init

 

npx ait init 명령어를 실행하면 granite.config.ts 파일이 생성된다.

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

export default defineConfig({
  appName: 'my-app',           // 앱인토스 콘솔에서 등록한 앱 이름과 동일해야 함
  brand: {
    displayName: '내 앱 이름',
    primaryColor: '#3182F6',
    icon: '',
  },
  web: {
    host: 'localhost',
    port: 5173,
    commands: {
      dev: 'vite',
      build: 'vite build',
    },
  },
  permissions: [],
  webViewProps: {
    type: 'partner',           // partner | external | game
  },
});

appName이 추후 intoss://{appName} 형태의 딥링크에 사용된다.

 

2. 테스트 하기

: 앱인토스 미니앱은 일반 브라우저에서 테스트할 수 없다. 반드시 앱인토스 샌드박스 앱을 통해서만 테스트 가능하다. 테스트 방식은 크게 두 가지로 나뉜다.

 

방식	스킴	용도	위치
로컬 개발 서버 연결	intoss://{appName}	개발 중에 실시간 테스트	샌드박스 내에서 테스트
배포 버전 테스트	intoss-private://{appName}?_deploymentId=...	빌드 후 배포본 테스트	실제 toss 앱에서 테스트

 

2-1. 로컬 개발 테스트

1) Android 

: 기기를 USB로 연결한 후, 다음의 명령어로 포트를 설정한다.

# 포트 포워딩 설정
adb reverse tcp:8081 tcp:8081
adb reverse tcp:5173 tcp:5173

# 연결 확인
adb reverse --list

 

샌드박스 내에서 다음과 같이 스팀에 intoss://{appName} 을 입력하면 테스트가 가능하다.

 

 

2) iOS 테스트 

: 기기연결 없이 mac과 같은 WiFi에 접속되어있으면 무선으로 테스트가 가능하다.

granite.config.ts에서 host를 IP 주소로 변경

web: {
  host: '190.100.20.100',  // 실기기에서 접근 가능한 IP
  port: 5173,
  commands: {
    dev: 'vite --host',   // --host 옵션 필수
    build: 'vite build',
  },
},

granite 에서 설정한 IP 주소를 Metro 서버에 설정.

 

3. 배포 후 테스트

: 샌드박스에서 기기별로 테스트를 끝내고, 빌드 번들 파일을 만들어 실제 환경에서 테스트를 해본다.

npm run build

 

다음의 배포 파일이 생성됨

토스 사이트에서 다음과 같이 등록하면, 테스트를 할 수 있는 QR 코드를 준다. 

그걸 실제 TOSS 앱에서 열어보면 실서버에서 테스트 할 수 있다.

 

 

 

마지막은 나의 앱이 통과되길 바라는 것 ㅋ

두구두구두구...