# Player GUI

{% hint style="info" icon="bullhorn" %}

## **새로운 Kollus Docs 사이트에서 이 문서의 최신 버전을 확인하세요!**

본 문서는 **구버전**이며, 더 정확하고 최신화된 정보는 아래 신규 경로에서 확인하실 수 있습니다.

* **신규 문서**: [Kollus 플레이어 UI 및 단축키](https://docs.kollus.com/service-guide/vod/kollus-player/ui-shortcut/)
* **게시 중단 안내**: 본 문서는 **2026년 6월 30일**까지만 제공됩니다.
  {% endhint %}

Kollus Player 고객 여러분께, 보다 **직관적이고 편리한 시청 환경**을 제공하기 위해 **Web Player에 새로운 GUI(그래픽 사용자 인터페이스)**를 반영했습니다.\
Web Player는 **기존 HTML5 플레이어의 한계를 보완**하고, 최신 트렌드에 맞춘 디자인과 **향상된 재생 컨트롤 UI**를 적용하여, PC·모바일 등 다양한 디바이스에서도 **일관되고 편리한 사용자 경험**을 제공합니다.

### ▶️ 기존 대비 어떤 점이 크게 바뀌었을까요?

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2F8DR9qPJ8VgFBjGUcmt02%2Fimage.png?alt=media&#x26;token=951143e5-9453-4a8e-81eb-f64843ced439" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FHdyZA3xSWXSoGn4mQ6WE%2Fimage.png?alt=media&#x26;token=e4ffd693-8484-4528-a345-08c12bc74214" alt=""><figcaption></figcaption></figure></div> |

* **조작 편의성 향상** : 클릭·탭 영역 확대, 버튼 가시성 강화
* **가독성 강화** : 폰트 크기 확대, 명확한 레이블 제공
* **UI 일관성 확보** : PC·Mobile 공통 디자인 적용, 불필요한 기능 노출 최소화
* **사용자 경험 개선** : 설정 패널, 재생 컨트롤 바 등 핵심 기능 재배치

### 🔍 달라진 점을 한눈에 비교해 보세요!

#### 공통(VOD·LIVE)

1. **아이콘·컬러 스타일이 개선**되었고, **버튼·폰트 크기도 확대**되었습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FJ63MTumho2k3j21Ckl4p%2Fimage.png?alt=media&#x26;token=cce9ef2f-1d1e-4fe3-83de-b94cb9f25af5" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FLH5lUi55JBseOQDEwWOI%2Fimage.png?alt=media&#x26;token=1e19e4bf-c857-4cab-9d1e-06b0bc43ac17" alt=""><figcaption></figcaption></figure></div> |

2. **프로그래스 바 영역**과 **미리보기 섬네일 크기가 확대**되었습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2F4YKwRYRtGGi2jgnfXrfu%2Fimage.png?alt=media&#x26;token=2ccc0db6-23e4-49ba-ba34-5b8cf444a05e" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FihzFusJdntYcoCNvGhZQ%2Fimage.png?alt=media&#x26;token=57ee8e95-4ee3-4bb3-a69c-474bc153b20c" alt=""><figcaption></figcaption></figure></div> |

3. **재생 컨트롤 바 버튼**에 **텍스트 레이블이 추가**되었습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FUyNwIfcTYz9kHxGwGktn%2Fimage.png?alt=media&#x26;token=4dc04190-da85-4373-b862-ca731ad01ab6" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FIRng4qH5DOzkqL5CoMh0%2Fimage.png?alt=media&#x26;token=ec014f2f-0403-49b2-971a-c837b7c721c7" alt=""><figcaption></figcaption></figure></div> |

4. **설정 패널의 인터페이스를 개편**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FjZrdHQRoh8GVsN1TTKWU%2Fimage.png?alt=media&#x26;token=bf242e80-2bff-4aa1-8a44-6366d4af8a76" alt=""><figcaption></figcaption></figure></div> | <p></p><div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FwzSJ669kYtiuT5kLFVcz%2Fimage.png?alt=media&#x26;token=0ee4a6c5-1da0-4e6a-a353-ec623f065584" alt=""><figcaption></figcaption></figure></div> |

5. **음소거 및 볼륨 기능의 위치를 이동**하였으며, **볼륨 조절 방식도 개선**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FZYVrBRVJYfGQVMpOjTVl%2Fimage.png?alt=media&#x26;token=b7fc901d-db28-41c5-8197-dc85770104ee" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FEg899dT6XkbuZh8U18Uq%2Fimage.png?alt=media&#x26;token=4c903cca-851d-45d4-a739-bf78dedfb7bb" alt=""><figcaption></figcaption></figure></div> |

6. **재생 속도 변경 옵션 순서를 조정**하였고, **패널 노출 방식도 개선**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FiONW5osa7FDazoLqQIUq%2Fimage.png?alt=media&#x26;token=8df75acd-9955-4fba-9ac1-fd6536fefdf5" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2F43FZ4Ez1WONX0CyVnq14%2Fimage.png?alt=media&#x26;token=638eafaa-31c9-4dab-8d70-b4a9102e47d8" alt=""><figcaption></figcaption></figure></div> |

#### VOD 전용

**PC**

1. **구간 반복 아이콘을 우측 고급 기능 영역으로 이동**하였고, **아이콘과 프로그래스 바 표시 방식을 개선**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2F87IE92wZqrgEgcRBUDyh%2Fimage.png?alt=media&#x26;token=1379bf8d-915e-4de9-9a9e-01e328ab0735" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FlA6613btNGjhrfXeiibs%2Fimage.png?alt=media&#x26;token=888fd2f4-ad0a-4934-abf3-b4b33361ebee" alt=""><figcaption></figcaption></figure></div> |

2. **북마크 메뉴의 일부 레이블을 변경**하였습니다.
   1. All → **모든 북마크**
   2. Index → **기본 북마크**
   3. Bookmark → **내 북마크**

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FXRm6Rkvr0PwLjbxzG8MC%2Fimage.png?alt=media&#x26;token=e1a115e5-3e45-41d2-8337-b000fc784071" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FvLgaswOdvH1pwmLnF6Hc%2Fimage.png?alt=media&#x26;token=4370fcea-b50d-4a25-9905-d4a457899dd3" alt=""><figcaption></figcaption></figure></div> |

**Mobile**

1. **구간 반복 버튼을 재생 컨트롤 바로 이동**하였고, **프로그래스 바 표시 방식을 개선**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FcqNxH1TeZdR9oJvndffJ%2Fimage.png?alt=media&#x26;token=a628770a-9cea-4d28-aafa-046ce6f78cdb" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2F8EBPU0SVjdXvVpMewOfj%2Fimage.png?alt=media&#x26;token=fad2b792-a8da-446a-ae8b-456eab6f949c" alt=""><figcaption></figcaption></figure></div> |

2. Mobile에서는 작은 화면으로 인해 북마크 제목 수정 등이 어려워 **북마크 편집 기능을 제공하지 않습니다.** (PC에서는 정상적으로 제공됩니다.)

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FYdP1FsJ4WWUZHn6lTsqy%2Fimage.png?alt=media&#x26;token=db4dfb7d-c6fe-4af4-a71e-9d34f733e3a0" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FmPacuN1dDPiSI2BQPyJZ%2Fimage.png?alt=media&#x26;token=be1a5e4e-5665-4533-a74d-07746fc98865" alt=""><figcaption></figcaption></figure></div> |

3. **VR 버튼을 우측 상단으로 이동**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FixaFRtttNrt32C2Pr6d2%2Fimage.png?alt=media&#x26;token=0825e113-04af-4840-87f6-02fb5ce542e8" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FagCNte2wtLe4AKJ4ViXZ%2Fimage.png?alt=media&#x26;token=d77e6881-5323-43d4-ad2c-befc683ba139" alt=""><figcaption></figcaption></figure></div> |

#### LIVE 전용

**PC**

1. **LIVE 레이블 표시 스타일을 개선**하였습니다.
2. **설정 패널 내부에 화질 선택 기능이 항상 표시되도록 개선**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FfrLHsS5UiFOhwFjBUo26%2Fimage.png?alt=media&#x26;token=a199b37c-812c-40cc-85e0-62055a636652" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FKvUTA4RcahvOdlBtHW5g%2Fimage.png?alt=media&#x26;token=289bd957-06d7-480b-aa7f-932161333260" alt=""><figcaption></figcaption></figure></div> |

**Mobile**

1. **채팅 버튼을 우측 상단으로 이동**하였습니다.

| Before                                                                                                                                                                                                                                                                                   | After                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2F6oNgjaq30QD5hTqoj2OQ%2Fimage.png?alt=media&#x26;token=78cca037-1246-437c-a99f-adceeb680649" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://92012944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F07xE4g9511BtbCTnY4D4%2Fuploads%2FZKhQcOEPWVgbXeAzY1rD%2Fimage.png?alt=media&#x26;token=4cc0e0e5-a442-4edd-a32b-2a92d4ced1d7" alt=""><figcaption></figcaption></figure></div> |

### 😀 어떤 효과를 기대할 수 있을까요?

* 모든 환경에서 **더 직관적이고 편리한 시청 경험** 제공
* **VOD·LIVE 서비스 특성에 맞춘 인터페이스** 제공
* PC·Mobile 간 **일관성 있는 사용자 경험** 확보

앞으로도 Kollus는 사용자 중심의 서비스 경험을 위해 지속적으로 개선을 이어가겠습니다!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://catenoid-support.gitbook.io/kollus-vod-console-v2/serviceguide/features/content/web-player/player-gui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.