---
title: "VPE 2.0 React 개요"
slug: "vpe-v2-react-sdk"
updated: 2026-09-17T09:08:03Z
published: 2026-09-17T09:08:03Z
canonical: "guide.ncloud-docs.com/vpe-v2-react-sdk"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# VPE 2.0 React 개요

Classic/VPC 환경에서 이용 가능합니다.

Video Player Enhancement V2(VPE 2.0)는 네이버클라우드에서 제공하는 차세대 웹 비디오 플레이어 SDK입니다. JSON 기반 레이아웃 시스템과 커스텀 컴포넌트 삽입 기능을 지원하며, 다양한 스트리밍 프로토콜과의 호환성을 제공합니다.

## 주요 기능

VPE 2.0 React에서 제공하는 주요 기능은 다음과 같습니다.

1. JSON 레이아웃 시스템: 컨트롤바, 버튼 배치, 영역 구성을 JSON 객체로 선언적으로 정의할 수 있습니다.
2. 커스텀 컴포넌트: React 컴포넌트 또는 HTML 요소를 플레이어 내부에 직접 삽입할 수 있습니다.
3. HLS 및 DASH 스트리밍: `hls.js`, `dash.js`를 외부 주입 방식으로 연동하여 번들 크기를 최적화합니다.
4. 디바이스별 레이아웃: PC, 모바일, 전체화면 환경별로 독립적인 레이아웃을 구성할 수 있습니다.
5. 기본 동작 오버라이드: 재생, 일시정지, 탐색 등 기본 동작을 가로채어 커스텀 로직을 적용할 수 있습니다.
6. DRM 지원: Widevine, FairPlay, PlayReady를 지원하여 콘텐츠를 안전하게 보호합니다.

## SDK 패키지 구성

VPE 2.0 React에서 제공하는 SDK 패키지는 다음과 같습니다.

| 패키지 | 설명 |
| --- | --- |
| @sgrsoft/vpe-react-sdk | React, Next.js 전용 플레이어 컴포넌트 |

## 지원 환경

VPE 2.0 React에서 지원하는 환경은 다음과 같습니다.

| 환경 | 지원 버전 |
| --- | --- |
| React | 18 이상 |
| Next.js | 13 이상 (App Router) |
| UMD (CDN) | 모던 브라우저 (Chrome, Firefox, Safari, Edge) |
| 모바일 | iOS Safari 15+, Android Chrome |

## 빠른 시작

npm으로 설치한 후 바로 사용할 수 있습니다.

```
npm i @sgrsoft/vpe-react-sdk hls.js dashjs
```

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function Player() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/master.m3u8>",
                }],
                autostart: true,
                muted: true,
            }}
        />
    );
}
```