본문으로 건너뛰기

모니터독 Web SDK 출시: 브라우저 환경에서 실시간 화면 보안 탐지

|
약 3분
모니터독(MonitorDog) 팀
AI 기반 시각적 해킹 차단 솔루션
웹 애플리케이션에서도 모니터독의 실시간 탐지 기능을 사용할 수 있습니다.

별도 데스크톱 에이전트를 설치하기 어려운 환경에서도 브라우저와 웹캠을 활용해 화면 주변의 보안 위험을 탐지하고 서비스 화면에 즉시 반영할 수 있습니다.

출시 주요 내용

모니터독 Web SDK 출시

브라우저 실시간 탐지 : 웹캠 영상에서 얼굴과 휴대폰을 탐지하고 결과를 웹 애플리케이션에 전달합니다.
다양한 설치 방식 : npm package와 static zip을 제공하여 일반적인 frontend 프로젝트부터 JSP/WAR 및 정적 HTML 환경까지 지원합니다.
로컬 AI 추론 : 암호화된 ONNX 모델과 WebAssembly runtime을 사용해 브라우저에서 탐지를 수행합니다.
안전한 세션 연동 : 고객 서버의 token broker를 통해 Partner API Key를 브라우저에 노출하지 않고 SDK session을 구성할 수 있습니다.

상세 내용

1. 웹캠 기반 실시간 보안 탐지

Web SDK는 브라우저의 카메라 권한을 이용해 웹캠 영상을 분석하고, 얼굴과 휴대폰 탐지 결과를 실시간 callback으로 제공합니다. 고객 서비스는 이 결과를 이용해 경고 표시, 화면 차단 또는 자체 보안 UI 처리와 같은 동작을 구현할 수 있습니다.

모니터독의 이벤트 정책과 연동하면 다음과 같은 상황을 기록하고 대응할 수 있습니다.

  • 휴대폰 감지
  • 사용자가 보이지 않는 상태
  • 여러 얼굴이 감지된 상태

2. npm 및 static zip 설치 지원

Vite, Webpack, Rspack, Next.js client bundle과 같은 일반적인 frontend 프로젝트에서는 npm package로 SDK를 설치할 수 있습니다.

npm install @monitordog/detector

npm이나 bundler를 사용하기 어려운 JSP/WAR, 정적 HTML, script tag 기반 환경에서는 static zip을 사용할 수 있습니다. 압축을 해제한 뒤 monitordog/ 폴더 전체를 정적 리소스 경로에 배치하면 UMD script와 필요한 runtime asset을 함께 로드할 수 있습니다.

3. 브라우저 로컬 AI 추론

SDK는 입력 크기 320, 416, 640용 암호화된 detector ONNX 모델과 ONNX Runtime WebAssembly 파일을 제공합니다. 기본 auto 설정은 실행 환경에 적합한 모델 크기를 선택하며, 메모리가 부족한 환경에서는 더 작은 입력 크기로 단계적으로 전환합니다.

암호화된 모델을 실행하는 데 필요한 키만 MonitorDog API를 통해 요청하므로, 배포 파일에 원본 모델을 포함하지 않고도 브라우저 탐지를 구성할 수 있습니다.

4. 안전한 SDK session 연동

Partner API Key는 고객 서버에만 보관하고, 브라우저는 고객 서버의 SDK session token broker를 호출합니다. 이를 통해 Partner API Key를 JavaScript bundle, HTML, 브라우저 저장소 또는 public 환경변수에 노출하지 않고 SDK를 인증할 수 있습니다.

또한 MPA 페이지 이동이나 새로고침 이후에는 기존 고객 로그인 session을 이용해 SDK session을 복원할 수 있습니다. 실제 사용자 로그인 시점과 페이지 복원 시점을 구분하여 불필요한 login event 중복 기록을 방지합니다.

5. 명확한 runtime lifecycle

SDK는 초기화, 로그인, 탐지 시작과 중지, 로그아웃, 리소스 해제를 위한 lifecycle API를 제공합니다. SPA에서는 하나의 detector instance를 유지하면서 필요한 화면에서만 탐지를 실행할 수 있고, MPA에서는 페이지별로 session을 복원해 사용할 수 있습니다.

설치 전 참고 사항

  • 웹캠 탐지를 사용하려면 브라우저의 카메라 접근 권한과 HTTPS 환경이 필요합니다.
  • Partner API Key는 반드시 고객 서버에서만 사용해야 합니다.
  • static zip을 사용할 때는 UMD script만 복사하지 말고 monitordog/ 폴더 전체를 배포해야 합니다.
  • 이후 변경사항과 개선 내용은 별도 업데이트 노트에서 안내합니다.

MonitorDog Web SDK 연동을 시작해 보세요

프로젝트 환경에 맞는 npm 또는 static zip 설치 방법을 확인할 수 있습니다.