---
title: 문서 캡처
canonical: https://developer.unico.io/ko/dual-api/developer/sdks-and-tools/web-sdk/document-capture/
locale: ko
generated_by: markdown-export
---

신분증 문서 캡처. SDK가 사용자의 문서 위치를 안내하는 프레임을 제공하며, 위치를 잡은 후 사용자가 버튼을 클릭하여 사진을 캡처합니다.

:::warning[콘텐츠 유효성 검사 없음]
SDK는 캡처되는 내용에 대한 어떠한 유형의 유효성 검사도 수행하지 않습니다.
:::

## 사용 가능한 문서 프레임

| 프레임 | 설명 |
|---|---|
| `DocumentCameraTypes.CPF` | CPF 캡처 |
| `DocumentCameraTypes.CNH` | 펼쳐진 CNH 캡처 |
| `DocumentCameraTypes.CNH_FRENTE` | CNH 앞면 캡처 |
| `DocumentCameraTypes.CNH_VERSO` | CNH 뒷면 캡처 |
| `DocumentCameraTypes.RG_FRENTE` | RG 앞면 캡처 |
| `DocumentCameraTypes.RG_VERSO` | RG 뒷면 캡처 |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | 새 RG 앞면 캡처 |
| `DocumentCameraTypes.RG_VERSO_NOVO` | 새 RG 뒷면 캡처 |
| `DocumentCameraTypes.OTHERS("descrição")` | 다른 문서를 위한 범용 프레임 |

:::tip[범용 프레임]
특정 프레임이 없는 문서를 캡처해야 하는 경우(예: RNE), `DocumentCameraTypes.OTHERS("description")`을 사용하세요 — 모든 캡처를 안내하는 데 사용할 수 있는 범용 직사각형 프레임입니다.
:::

지원되는 문서 유형의 전체 목록은 [API 레퍼런스 > Enums](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums)를 참조하세요.

## 프레임 크기

캡처 영역을 최적화하기 위해 애플리케이션 내에서 프레임 크기를 구성하는 것이 권장됩니다.

:::info[CSS 간섭]
프레임 기능은 그리드 컴포넌트가 있는 디자인 시스템(Bootstrap, Material-UI 등)에 의해 영향을 받을 수 있습니다. 이 위험을 최소화하려면 원치 않는 CSS 규칙을 상속받지 않는 위치에 프레임(`id="box-camera"`)을 배치하세요.
:::

### Desktop

프레임을 부모 요소로 감싸서 크기를 제한합니다:

  ```html
  <div class="container">
    <div id="box-camera"></div>
  </div>
  ```

  ```css
  .container {
    width: 800px;
    height: 600px;
    position: relative;
  }
  ```

  사용자의 얼굴을 프레이밍하기 쉽게 하려면 적절한 높이 대 너비 비율을 유지하세요.

  :::warning[개발자 도구 크기 조정]
  브라우저의 개발자 모드를 통해 화면 크기를 조정하는 테스트는 예상대로 작동하지 않습니다. 대신 브라우저 창 크기를 직접 조정하세요.
  :::

### Mobile

웹 모바일 뷰의 경우, 컴퓨터 비전 알고리즘 문제를 방지하기 위해 캡처 프레임이 기기 화면의 100%(`100vw`/`100vh`)를 차지해야 합니다. 가로 또는 세로 스크롤을 피하세요 — 모달을 사용하면 이를 최소화하는 데 도움이 됩니다.

  :::warning[실제 기기에서 테스트]
  브라우저 개발자 모드를 사용한 테스트는 작동하지 않습니다 — 브라우저가 사용하는 카메라는 데스크탑 카메라와 동일하며, 모바일 기기 카메라와 해상도가 매우 다릅니다. 기기에서 직접 테스트하세요.
  :::

## 문서 캡처 시작하기

****2단계** — 카메라 빌드 및 문서 세션 준비**

카메라 인스턴스를 빌드하고 `UnicoConfig`와 원하는 `DocumentCameraTypes`를 전달하여 `prepareDocumentCamera`를 호출합니다:

  ```javascript
  const unicoCamera = unicoCameraBuilder.build();

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

  unicoCamera.prepareDocumentCamera(
    config,
    DocumentCameraTypes.CNH
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
  });
  ```

전체 결과 처리 방법은 [결과 수신](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result)을 참조하세요.