---
title: "플레이어 UX"
slug: "vpe-example-ux"
tags: ["Video Player Enhancement", "VPE"]
updated: 2026-09-17T09:08:00Z
published: 2026-09-17T09:08:00Z
canonical: "guide.ncloud-docs.com/vpe-example-ux"
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.

# 플레이어 UX

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

플레이어 UX에서는 스크립트 코드를 수정하여 플레이어 UX에 관한 옵션을 설정하는 방법을 설명합니다.

          참고

          

- 옵션을 설정하는 속성에 대한 설명은 [플레이어 설정](/docs/vpe-web#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%EC%84%A4%EC%A0%95)을 참고해 주십시오.
- 이용 중인 요금제에 따라 설정할 수 있는 옵션에 차이가 있습니다.

## 음소거 상태 표시

`startMutedInfoNotVisible` 속성으로 음소거 상태 UI를 표시할 수 있습니다. ![vpe-example-ux_muted_ko](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-ux_muted_ko.png?sv=2026-02-06&spr=https&st=2026-10-26T20%3A11%3A21Z&se=2026-10-26T21%3A11%3A21Z&sr=c&sp=r&sig=6WON9V3xHgx3vJpRg4dsXlkYDSuzXjezkLNp3xTmdN4%3D)

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	startMutedInfoNotVisible: true, // 음소거 상태 UI 표시 안 함(false(기본값): 음소거 상태 UI 표시)
});
```

## 구간 이동 미리 보기

`seekingPreview` 속성으로 컨트롤바의 영상 탐색 슬라이더 상단에 해당 구간의 미리 보기를 표시하도록 설정할 수 있습니다.

          참고

          

- 이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.
- 해당 기능은 VOD 전용 기능으로, LIVE에서는 비활성화됩니다.

![vpe-example-ux_preview_ko](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-ux_preview_ko.png?sv=2026-02-06&spr=https&st=2026-10-26T20%3A11%3A21Z&se=2026-10-26T21%3A11%3A21Z&sr=c&sp=r&sig=6WON9V3xHgx3vJpRg4dsXlkYDSuzXjezkLNp3xTmdN4%3D)

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	seekingPreview: true, // 탐색 슬라이더 미리 보기 표시(기본값)(false: 미리 보기 표시 안 함)
});
```

## 브라우저 비활성화 시 자동 정지

autoPause 브라우저 탭이 비활성화시 영상을 자동으로 정지합니다.

          참고

          

- 일부 모바일 환경에서는 동작하지 않습니다.
- 웹앱 / 웹뷰 환경에서는 autoPause 기능이 동작하지 않습니다.
- 이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDN도메인/example_video_01.mp4',
            poster : 'https://CDN도메인/example_image_01.png',          
        }
    ],
    autoPause:true // 브라우저 비활성화 시 자동 정지
});
```

## 키보드 단축키

`keyboardShortcut` 속성으로 키보드 단축키 기능을 활성화할 수 있습니다.

          참고

          

이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
keyboardShortcut: true, // 키보드 단축키 사용(기본값)(false: 키보드 단축키 사용 안 함)
});
```

키보드 단축키 기능은 다음과 같습니다.

| 단축키 | 기능 |
| --- | --- |
| 좌/우 화살표 | 영상 스킵 |
| 상/하 화살표 | 볼륨 조절 |
| F | 전체 화면 |
| M | 음소거 |
| Space | 재생/중지 |

## 터치 제스처

`touchGestures` 속성으로 모바일 UI에서 터치 제스처 기능을 활성화할 수 있습니다.

          참고

          

이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	touchGestures: true // 터치 제스처 사용(기본값)(false: 터치 제스처 사용 안 함)
});
```

## 텍스트 워터마크

`watermarkText` 속성으로 시청자를 추적할 수 있는 워터마크를 원하는 텍스트(유저 아이디+사이트명 등)로 설정할 수 있습니다.

          참고

          

- 이 기능을 사용하려면 콘솔에서 해당 플레이어의 워터마크 설정이 활성화되어 있어야 합니다. 워터마크 활성화에 대한 자세한 내용은 [플레이어 설정](/docs/vpe-player#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4UX)을 참고해 주십시오.
- 이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.
- 워터마크 텍스트는 스크립트를 통해서만 추가할 수 있습니다.

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDN도메인/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, // 텍스트 워터마크 사용(false(기본값): 텍스트 워터마크 사용 안 함)
    watermarkText:'UserId@SiteDomain', // 워터마크 텍스트, <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
});
```

### 텍스트 워터마크 상세 설정

텍스트 워터마크에 사용 시 워터마크 랜덤 위치 활성화 여부에 따라 상세 옵션을 설정할 수 있습니다.

          참고

          

워터마크에 대한 상세 옵션은 네이버 클라우드 플랫폼 콘솔에서도 설정할 수 있습니다. 자세한 내용은 [플레이어 설정](/docs/vpe-player#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4UX)을 참고해 주십시오.

랜덤 위치 활성화 및 비활성화에 대한 예제는 다음과 같습니다.

- 랜덤 위치 활성화

```
// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, // 콘솔에서만 설정 가능(false(기본값): 텍스트 워터마크 사용 안 함)
  watermarkText:'UserId@SiteDomain', // <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
  watermarkConfig:{
      randPosition: true, // 워터마크 랜덤 위치 활성화(기본값)
      randPositionInterVal: 5000, // 워터마크 위치 랜덤 변경 시간, 기본값: 3000(3초)
  }
});
```
- 랜덤 위치 비활성화

```
// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, // 콘솔에서만 설정 가능(false(기본값): 텍스트 워터마크 사용 안 함)
  watermarkText:'UserId@SiteDomain', // <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
  watermarkConfig:{
      randPosition: false, // 워터마크 위치 고정
      x: 10, // 가로 위치 %
      y: 2,  // 세로 위치 %
      opacity: 0.4 //투명도 0.1 ~ 1
  }
});
```

## IOS 웹 전체 화면 방식

iosFullscreenNativeMode 속성으로 iOS 모바일 사파리에 대응하는 새로운 Fullscreen 모드를 설정할 수 있습니다.

          참고

          

- 이 옵션은 iOS 모바일 사파리에서만 동작하는 옵션입니다.
- 플레이어 1.1.5 부터 해당 옵션을 사용 할 수 있습니다.
- iosFullscreenNativeMode의 기본값은 true (iOS Native Fullscreen) 입니다.
- Basic/Standard 요금제 모두 지원하는 기능입니다.

예제는 다음과 같습니다

```
// 동영상(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDN도메인/example_video_01.mp4',
            poster : 'https://CDN도메인/example_image_01.png',          
        }
    ],
    iosFullscreenNativeMode:false // true : iOS Native Fullscreen / false : HTML Fullscreen 모드 사용
});
```