---
title: UI Event
slug: world-sdk-guide-kr/ui-event
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

ZEPETOScript는 Unity UI 시스템에 대한 통합 지원을 제공합니다.

패널, 버튼, 텍스트 입력 상자 및 토글 메뉴와 같은 다양한 GUI 구성 요소를 사용하여 월드에서 사용자 인터페이스를 만들 수 있습니다.

ZEPETOScript에서 Unity UI 요소를 사용하려면 먼저 가져와야 합니다.

:::CodeblockTabs
UnityEngine.UI

```typescript
import { Slider, Button } from 'UnityEngine.UI';
```
:::

그런 다음 추가하고 싶은 Unity UI 요소를 속성으로 선언합니다.

:::CodeblockTabs
TypeScript

```typescript
public sliderUI: Slider;
public btnUI: Button;
```
:::

선언된 속성은 이제 ZEPETOScript 검사기 창에서 볼 수 있고 접근할 수 있습니다.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VWOAydIB2wgX2H3zwu205-20240904-102415.png)

계층 창을 열고 Unity UI 구성 요소를 ZEPETOScript 검사기 창의 각 속성 필드로 드래그 앤 드롭합니다. 속성 값이 할당되면 스크립트 내에서 이를 접근하고 조작할 수 있습니다. 이를 사용하여 제어의 이벤트에 대한 핸들러를 추가하세요.

:::CodeblockTabs
EventListener

```typescript
Start() {
    this.btnUI.onClick.AddListener(() => {
        // 버튼 클릭 이벤트 추가
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // 슬라이더 이벤트 추가
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
```
:::



UI 이벤트가 제대로 처리되는지 확인하기 위해 플레이하세요.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Y-ZOugt_AGkg0u4-auNQt-20240904-102415.png)

전체 샘플 코드를 확인하세요.

:::CodeblockTabs
UI\_Event

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Slider, Button } from 'UnityEngine.UI';

export default class UIEvent extends ZepetoScriptBehaviour {

    public sliderUI: Slider;
    public btnUI: Button;

    Start() {
        this.btnUI.onClick.AddListener(() => {
            // 버튼 클릭 이벤트 추가
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // 슬라이더 이벤트 추가
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
```
:::



ZEPETOScript가 제공하는 Unity UI에 대해 더 알고 싶다면 아래 링크를 클릭하세요.

:::hint{type="info"}
**📘 Unity UI**
[https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html](https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html)
:::

:::hint{type="info"}
**📘 상호작용 구성 요소**
[https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html](https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html)
:::