---
title: 초기화
canonical: https://developer.unico.io/ko/dual-api/developers/sdks-and-tools/web/web-sdk/initialization
locale: ko
generated_by: markdown-export
---

## 초기화 위치

가능한 한 일찍 SDK를 초기화하세요 — 일반적으로 캡처 프레임이 포함된 페이지 또는 컴포넌트가 로드될 때 초기화합니다. 캡처 버튼 클릭 시 초기화하지 **말아야** 하는 이유에 대한 자세한 내용은 [모범 사례](/dual-api/developers/sdks-and-tools/web/web-sdk/resources)를 참조하세요.

## 자격 증명 임베딩

온보딩 팀이 제공한 자격 증명으로 `UnicoConfig` 클래스를 구현하세요:

```javascript
import { UnicoConfig } from "unico-webframe"

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");
```

## 빌더 인스턴스 생성

`UnicoCheckBuilder`의 새 인스턴스를 생성하세요:

```javascript
const unicoCameraBuilder = new UnicoCheckBuilder();
```

## 리소스 경로 구성

추가 파일의 경로를 지정하세요 (프로젝트에 추가된 경우):

```javascript
unicoCameraBuilder.setResourceDirectory("/resources");
```

AI 모델 파일의 경로를 지정하세요 (스마트 카메라 모드에만 필요):

```javascript
unicoCameraBuilder.setModelsPath("https://yoursite.com/models");
```

:::info[3.18.0부터 자동 가져오기]
버전 3.18.0부터 SDK는 추가 리소스를 자동으로 가져올 수 있습니다 — `setResourceDirectory`를 구현하지 않고 [CSP 구성](/dual-api/developers/sdks-and-tools/web/web-sdk/installation)이 올바르게 적용되었는지 확인하세요.
:::

## CSS 초기화 구성 (선택 사항)

기본적으로 SDK는 컴포넌트 간 시각적 일관성을 보장하기 위해 CSS Reset을 적용합니다. 애플리케이션의 CSS 스타일을 유지하려면 이 기능을 비활성화하세요:

```javascript
unicoCameraBuilder.disableCssReset();
```

## 환경 선택

**샌드박스**와 **프로덕션** 간의 선택은 초기화 중에 이루어집니다. `SDKEnvironmentTypes` 열거형을 사용하세요:

- `SDKEnvironmentTypes.PROD` — 프로덕션 환경
- `SDKEnvironmentTypes.UAT` — 스테이징 환경

```javascript
import {
  UnicoCheckBuilder,
  SDKEnvironmentTypes
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);
```

:::info
구성하지 않으면 Web SDK는 기본적으로 프로덕션 환경을 사용합니다.
:::

사용 가능한 환경 유형의 전체 목록은 [API 레퍼런스 > 초기화 API](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/initialization-api)를 참조하세요.

## 라이프사이클

백엔드와의 SDK 인증은 몇 초가 소요됩니다. 사용자가 캡처 버튼을 클릭할 때가 아니라 **일찍 초기화**하세요 — 그렇지 않으면 클릭과 카메라 열기 사이에 사용자가 지연을 경험하게 됩니다.