--- title: 설치 description: CSP를 구성하고 Web SDK 패키지를 설치한 후 라이브니스 캡처에 필요한 리소스 파일을 다운로드하세요. canonical: https://developer.unico.io/ko/dual-api/developers/sdks-and-tools/web/web-sdk/installation/ locale: ko generated_by: markdown-export --- ## 종속성 추가 및 패키지 매니저 구성 ****1단계** — Content Security Policy(CSP) 구성** Web SDK는 보안 및 성능을 위해 Web Workers를 사용합니다. CSP에 다음 구성을 추가하세요: ```html ``` :::warning 애플리케이션에 CSP가 있는 경우 SDK가 올바르게 작동하려면 이 구성이 필수입니다. ::: :::info[각 지시문이 필요한 이유] - **`'unsafe-eval'`** (script-src) — 라이브니스 감지 엔진이 WebAssembly를 컴파일하고 런타임에 보안 루틴을 동적으로 평가하기 위해 필요합니다. - **`'unsafe-inline'`** (style-src, script-src-elem) — SDK의 인라인 스타일과 인라인 스크립트 부트스트래핑에 필요합니다. 제거하면 캡처 UI가 작동하지 않습니다. - **`*.acesso.io`** — Unico의 레거시 인프라 도메인으로, 에셋 및 API 호출에 여전히 필요합니다. - **`*.unico.run` / `*.unico.io` / `*.unico.app`** — 현재 Unico 서비스 도메인(CDN, API 및 앱 서브도메인). - **`*.googleapis.com`** (script-src, style-src, script-src-elem, connect-src) — Google Fonts 스타일시트(`fonts.googleapis.com`을 통한 `@font-face` CSS) 및 캡처 UI에서 사용하는 기타 Google API 리소스를 로드하는 데 필요합니다. - **`fonts.gstatic.com`** (font-src) — `fonts.googleapis.com`에서 로드된 스타일시트가 참조하는 Google Fonts 바이너리 폰트 파일을 제공합니다. - **`*.sentry.io`** — Unico는 SDK 오류 추적에 Sentry를 사용합니다. 오류 보고 호출을 허용하기 위해 `script-src`와 `connect-src`에 필요합니다. - **`*.launchdarkly.com`** — Unico는 SDK 동작(예: 카메라 엔진 선택)을 제어하는 기능 플래그 평가에 LaunchDarkly를 사용합니다. 플래그 스트리밍 및 평가 호출을 허용하기 위해 `script-src`와 `connect-src`에 필요합니다. - **`*.newrelic.com` / `bam.nr-data.net`** — Unico는 SDK 성능 모니터링에 New Relic Browser를 사용합니다. `script-src`(에이전트 스크립트)와 `connect-src`(비콘 호출)에 필요합니다. - **`blob:`** (worker-src, child-src, script-src-elem) — Web Workers 및 일부 SDK 하위 리소스가 런타임에 Blob URL로 생성되므로 필요합니다. ::: ****2단계** — 패키지 설치** Web SDK는 npm 패키지 또는 CDN을 통해 제공됩니다. ### npm ```bash npm install unico-webframe ``` ### yarn ```bash yarn add unico-webframe ``` ### CDN SDK를 다운로드하여 프로젝트에 가져오세요: - [버전 `3.23.7` 다운로드](https://cdn.unico.io/sdk/check/bio/unico-webframe-3.23.7.zip) ****3단계** — SDK 가져오기** 설치 후 프로젝트에 SDK를 가져오세요. ### npm에서 ```javascript import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'unico-webframe' ``` ### CDN에서 ```javascript import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'UnicoCheckBuilder.min.js' ``` ****4단계** — 추가 리소스 파일 다운로드** 라이브니스 캡처를 수행하려면 추가 리소스 파일이 필요합니다. SDK 버전에 맞는 파일을 다운로드하여 프로젝트에 포함하세요: :::warning[업그레이드 체크리스트] 리소스 파일은 SDK 버전에 잠겨 있습니다. `unico-webframe`을 업그레이드할 때마다 아래 표에서 일치하는 리소스를 **반드시** 다시 다운로드해야 합니다 — 버전이 일치하지 않으면 라이브니스 캡처 중 런타임 오류가 발생합니다. **또는**, SDK 3.18.0부터 SDK가 초기화 시 이 파일들을 자동으로 가져올 수 있어 수동 다운로드 단계가 필요 없습니다. `setResourceDirectory` 옵션은 [초기화](/dual-api/developers/sdks-and-tools/web/web-sdk/initialization)를 참조하세요. ::: | SDK 버전 | FaceTec 리소스 | |---|---| | 3.23.7 | [9.7.114](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.114/resources.zip) | | 3.23.3 → 3.23.6 | [9.7.107](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.107/resources.zip) | | 3.23.0 → 3.23.1 | [9.7.102](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.102/resources.zip) | | 3.22.6 → 3.22.7 | [9.7.100](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.100/resources.zip) | | 3.22.5 | [9.7.99](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.99/resources.zip) | | 3.22.3 → 3.22.4 | [9.7.98](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.98/resources.zip) | | 3.22.2 | [9.7.96](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.96/resources.zip) | | 3.22.1 | [9.7.93](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.93/resources.zip) | | 3.22.0 | [9.7.90](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.90/resources.zip) | | 3.21.3 → 3.21.4 | [9.7.85](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.85/resources.zip) | | 3.21.2 | [9.7.82](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.82/resources.zip) | | 3.21.1 | [9.7.80](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.80/resources.zip) | | 3.20.10 → 3.21.0 | [9.7.76](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.76/resources.zip) | | 3.20.9 | [9.7.75](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.75/resources.zip) | | 3.20.8 | [9.7.73](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.73/resources.zip) | | 3.20.7 | [9.7.68](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.68/resources.zip) | | 3.20.5 → 3.20.6 | [9.7.65](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.65/resources.zip) | | 3.20.3 → 3.20.4 | [9.7.64](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.64/resources.zip) | | 3.20.2 | [9.7.63](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.63/resources.zip) | | 3.20.1 | [9.7.61](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.61/resources.zip) | | 3.20.0 | [9.7.55](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.55/resources.zip) | | 3.19.0 → 3.19.3 | [9.7.45 → 9.7.51](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.51/resources.zip) | | 3.18.x | 9.6.92 → 9.7.41 (레거시 표 참조) | SDK용 **AI 파일**도 다운로드하세요: [models.zip](https://cdn.unico.io/sdk/check/bio/models.zip). :::warning[공개 경로] 모든 추가 파일은 프로젝트 내에서 웹에서 접근 가능한 공개 위치에 호스팅되어야 합니다. :::