---
title: "플레이어 UX"
slug: "vpe-example-ux"
updated: 2026-08-20T09:03:39Z
published: 2026-08-20T09:03:39Z
canonical: "guide-gov.ncloud-docs.com/vpe-example-ux"
---

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

# 플레이어 UX

<p class="platform-info type-classic-vpc">Classic/VPC 환경에서 이용 가능합니다.</p>

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

:::(Info) (참고)
* 옵션을 설정하는 속성에 대한 설명은 [플레이어 설정](/docs/vpe-web#플레이어설정)을 참고해 주십시오.
* 이용 중인 요금제에 따라 설정할 수 있는 옵션에 차이가 있습니다.
:::

## 음소거 상태 표시 <a name="음소거상태표시"></a>

`startMutedInfoNotVisible` 속성으로 음소거 상태 UI를 표시할 수 있습니다.
![vpe-example-ux_muted_ko](https://cdn.document360.io/f2d93c92-8957-408f-94df-b9b370f76a32/Images/Documentation/vpe-example-ux_muted_ko.png){height="" width="70%"}


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

## 구간 이동 미리 보기 <a name="구간이동미리보기"></a>

`seekingPreview` 속성으로 컨트롤바의 영상 탐색 슬라이더 상단에 해당 구간의 미리 보기를 표시하도록 설정할 수 있습니다.
:::(Info) (참고)
* 이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.
* 해당 기능은 VOD 전용 기능으로, LIVE에서는 비활성화됩니다.
:::
![vpe-example-ux_preview_ko](https://cdn.document360.io/f2d93c92-8957-408f-94df-b9b370f76a32/Images/Documentation/vpe-example-ux_preview_ko.png){height="" width="70%"}


예제는 다음과 같습니다.
```JavaScript
// 동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	seekingPreview: true, // 탐색 슬라이더 미리 보기 표시(기본값)(false: 미리 보기 표시 안 함)
});
```
## 키보드 단축키 <a name="키보드단축키"></a>

`keyboardShortcut` 속성으로 키보드 단축키 기능을 활성화할 수 있습니다.
:::(Info) (참고)
이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.
:::
예제는 다음과 같습니다.
```JavaScript
// 동영상(MP4)
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
keyboardShortcut: true, // 키보드 단축키 사용(기본값)(false: 키보드 단축키 사용 안 함)
});
```
키보드 단축키 기능은 다음과 같습니다.
| 단축키 | 기능 |
| :--- | :--- |
| 좌/우 화살표 | 영상 스킵 |
| 상/하 화살표 | 볼륨 조절 |
| F | 전체 화면 |
| M | 음소거 |
| Space | 재생/중지 |

## 터치 제스처 <a name="터치제스처"></a>

`touchGestures` 속성으로 모바일 UI에서 터치 제스처 기능을 활성화할 수 있습니다.
:::(Info) (참고)
이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.
:::
예제는 다음과 같습니다.
```JavaScript
// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	touchGestures: true // 터치 제스처 사용(기본값)(false: 터치 제스처 사용 안 함)
});
```

## 텍스트 워터마크 <a name="텍스트워터마크"></a>

`watermarkText` 속성으로 시청자를 추적할 수 있는 워터마크를 원하는 텍스트(유저 아이디+사이트명 등)로 설정할 수 있습니다.
:::(Info) (참고)
* 이 기능을 사용하려면 콘솔에서 해당 플레이어의 워터마크 설정이 활성화되어 있어야 합니다. 워터마크 활성화에 대한 자세한 내용은 [플레이어 설정](/docs/vpe-player#플레이어UX)을 참고해 주십시오.
* 이 옵션은 Standard 요금제를 이용 중인 경우에만 설정할 수 있습니다.
* 워터마크 텍스트는 스크립트를 통해서만 추가할 수 있습니다.
:::
예제는 다음과 같습니다.
```JavaScript
// 동영상(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDN도메인/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, // 텍스트 워터마크 사용(false(기본값): 텍스트 워터마크 사용 안 함)
    watermarkText:'UserId@SiteDomain', // 워터마크 텍스트, <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
});
```

### 텍스트 워터마크 상세 설정 <a name="텍스트워터마크상세설정"></a>

텍스트 워터마크에 사용 시 워터마크 랜덤 위치 활성화 여부에 따라 상세 옵션을 설정할 수 있습니다.
:::(Info) (참고)
워터마크에 대한 상세 옵션은 네이버 클라우드 플랫폼 콘솔에서도 설정할 수 있습니다. 자세한 내용은 [플레이어 설정](/docs/vpe-player#플레이어UX)을 참고해 주십시오.
:::

랜덤 위치 활성화 및 비활성화에 대한 예제는 다음과 같습니다.
* 랜덤 위치 활성화
    ```JavaScript
    // 동영상(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초)
      }
    });
    ```
* 랜덤 위치 비활성화
    ```JavaScript
    // 동영상(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 웹 전체 화면 방식  <a name="IOS웹전체화면방식"></a>
iosFullscreenNativeMode 속성으로 iOS 모바일 사파리에 대응하는 새로운 Fullscreen 모드를 설정할 수 있습니다. 

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

예제는 다음과 같습니다
```JavaScript
// 동영상(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 모드 사용
});
```