Skip to content

토스 POS 플러그인 작동 방식

플러그인 구조

POS 플러그인의 기본 구조를 도식화한 것입니다.

POS 플러그인 구조

주요 특징

  • SDK 활용: POS의 다양한 데이터와 이벤트에 접근 가능
  • 서버 통신: 3rd party 서버와의 통신 지원
  • 데이터 저장: 추가/수정된 데이터(주문, 결제 등)는 플레이스 서버에 저장

플러그인 실행 환경

1. 웹 워커 기반 실행

  • 실행 환경: Toss POS 내부의 웹뷰에서 웹워커로 실행
  • 개발 가이드: 모든 개발은 웹워커 환경을 가정하고 진행
  • 문서 기준: TypeScript 기반으로 작성

2. Iframe 기반 실행

  • 실행 환경: Toss POS 탭으로 렌더링되는 웹뷰에서 Iframe으로 HTML 파일 렌더링
  • 개발 가이드: 모든 개발은 Iframe 환경을 가정하고 진행
  • 문서 기준: TypeScript 기반으로 작성

3. 실행 환경별 비교

항목웹 브라우저웹 워커Iframe
실행 환경메인 스레드백그라운드 스레드메인 스레드
DOM 접근가능불가능불가능
UI 업데이트가능불가능가능 (Iframe 내부)
병렬 처리불가능 (UI 멈춤 가능성 있음)가능 (메인 스레드와 분리)불가능
통신 방식직접 실행 및 전역 객체 접근postMessage()를 통한 메시지 기반 통신postMessage()를 통한 메시지 기반 통신
사용 목적UI 처리, DOM 조작, 이벤트 핸들링무거운 연산, 데이터 처리, 백그라운드 작업UI 표기, 데이터 처리