Classic/VPC 환경에서 이용 가능합니다.
VPE TV SDK를 설치하고 프로젝트를 설정하는 방법과 LLM(Large Language Model)을 활용한 코드 생성 방법을 안내합니다.
설치
VPE TV SDK를 사용하려면 다음 패키지와 사전 설정이 필요합니다.
패키지 설치
yarn add @sgrsoft/vpe-reactnative-tv-sdk
peerDependencies 설치
yarn add react @sgrsoft/react-native-video @sgrsoft/vpe-core-sdk \
@sgrsoft/vpe-react-native-ui @react-native-async-storage/async-storage
react-native-tvos 설정
react-native는 반드시 react-native-tvos로 alias되어야 합니다. 일반 react-native와 동시 사용이 불가합니다.
package.json에 아래와 같이 설정합니다.
{
"react-native": "npm:react-native-tvos@0.83.0-0"
}
선택적 의존성
캡처 방지 기능을 사용하려면 추가 패키지가 필요합니다.
yarn add react-native-capture-protection
tvOS 사전 설정
tvOS 빌드를 위해 CocoaPods 의존성을 설치합니다.
cd ios && pod install
Android TV 사전 설정
IMA 광고를 사용하는 경우 android/gradle.properties에 아래 설정을 추가합니다.
RNVideo_useExoplayerIMA=true
민간·공공 클라우드 설정
네이버 클라우드 플랫폼 환경에 따라 platform prop을 설정합니다.
| 환경 | platform 값 | 설명 |
|---|---|---|
| 민간 클라우드 | "pub" |
네이버 클라우드 플랫폼 민간 환경(기본값) |
| 공공 클라우드 | "gov" |
네이버 클라우드 플랫폼 공공 환경 |
// 민간 클라우드(기본값)
<VpePlayer accessKey="YOUR_ACCESS_KEY" platform="pub" ... />
// 공공 클라우드
<VpePlayer accessKey="YOUR_ACCESS_KEY" platform="gov" ... />
플랫폼별 해상도
플랫폼별 보고 해상도와 실제 해상도는 다음과 같습니다. Android TV는 960×540 dp로 보고되며, SDK가 내부적으로 자동 스케일 보정을 적용합니다.
| 플랫폼 | 보고 해상도 | 스케일 | 실제 해상도 |
|---|---|---|---|
| Apple TV | 1920 x 1080 | 1x | 1920 x 1080 |
| Android TV | 960 x 540 | 2x | 1920 x 1080 |
LLM 코드 생성
LLM을 활용하여 TV SDK 플레이어 코드를 빠르게 생성하는 방법을 안내합니다. tv-sdk-llms.txt를 프롬프트로 제공하면 AI가 React Native TV 기반 예제 코드를 생성합니다.
개념
tv-sdk-llms.txt는 VPE TV SDK의 핵심 사용 규칙을 담은 요약 문서입니다. 이를 LLM에 먼저 읽히면 코드 생성 시 TV 환경 고유의 제약 사항(네이티브 엔진 사용, 리모컨 입력, 전체 화면 / PiP(Picture-in-Picture) 미지원 등)을 정확하게 반영합니다.
TV SDK는 네이티브 비디오 엔진(ExoPlayer / AVPlayer) 을 사용하여 HLS(HTTP Live Streaming) / DASH(Dynamic Adaptive Streaming over HTTP)를 직접 재생합니다. llms.txt에 이 규칙이 포함되어 있어 LLM이 정확한 TV SDK 코드 패턴을 생성합니다.
프롬프트
사용 중인 LLM(예: ChatGPT, Claude, Copilot, Cursor 등)에 아래 프롬프트를 그대로 붙여넣습니다.
https://developer.vpe.naverncp.com/tv-sdk-llms.txt 을 읽고 React Native TV SDK 예제 코드 생성해 줘
LLM이 알고 있는 핵심 규칙
tv-sdk-llms.txt에는 다음과 같은 TV SDK 고유 규칙이 포함되어 있습니다.
| 규칙 | 설명 |
|---|---|
| Playlist 전용 | 재생 소스는 options.playlist 배열로만 전달 |
| 네이티브 엔진 | ExoPlayer(Android TV) / AVPlayer(tvOS)가 HLS / DASH 직접 재생 |
| react-native-tvos | 표준 React Native 대신 react-native-tvos 필수 |
| TV 미지원 기능 | FullscreenBtn, PipBtn, ShareBtn 제거, fullscreen()·pip() no-op |
| 코드 패턴 준수 | 문서에 명시된 prop 이름·구조를 정확히 사용 |
가이드
- 응답 코드에서 accessKey, playlist URL은 프로젝트 환경에 맞게 교체해 주십시오.
- TV SDK는 네이티브 비디오 엔진(ExoPlayer / AVPlayer)이 스트리밍을 직접 처리하므로 별도의 스트리밍 라이브러리 관련 코드를 포함하지 말아 주십시오.
- DRM 테스트는 반드시 실제 기기에서 수행해 주십시오(에뮬레이터 미지원).
- 결과가 길면 "필요한 부분만 요약해 줘"라고 추가 요청해 주십시오.
llms.txt 직접 링크
아래 링크에서 전체 가이드 문서를 확인할 수 있습니다.