> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-ko/sdk7/2d-ui/ui_input_binding.md).

# UI 입력 바인딩

입력 동작을 사용자 지정 UI 요소에 연결해 플레이어 입력을 구동하세요.

`UiInputBinding` 모든 UI 요소를 컨트롤 버튼으로 바꿉니다. 요소를 하나 이상의 [`InputAction`](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md#pointer-buttons)s, 그리고 그것이 눌려 있는 동안 — 터치나 포인터로 — 해당 액션은 계속 유지되어, 로컬 플레이어의 입력(이동, 점프)과 모든 씬 [`InputAction`](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md#pointer-buttons) 리스너와도, 기본 화면 버튼과 똑같이 동작합니다.

자신만의 터치 컨트롤을 만드는 데 사용하세요. 일반적으로 [화면 내 컨트롤](/creator/content-creator-ko/sdk7/interactivity/touch-screen-controls.md): 기본 버튼을 숨기고, 그 자리에 직접 만든 버튼을 배치하세요.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-871e8f850109fd31650535349ba3e385565845f1%2Fui-input-binding.jpg?alt=media" alt="A retro-style gamepad assembled from custom UI elements, each wired to an input action"><figcaption><p>UI 요소로 만든 완전히 사용자 지정된 게임패드 — 각 버튼은 입력 액션에 바인딩된 UI 엔터티입니다</p></figcaption></figure>

## UI 요소에 액션을 바인딩

다음을 추가하세요 `uiInputBinding` 를 당신의 어떤 요소에든 `.tsx` UI에 추가하고, 눌려 있는 동안 유지할 액션을 나열하세요. 이 prop은 모든 UI 요소([`UiEntity`](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#ui-entities), [`버튼`](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#ui-entities), [`Label`](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#ui-entities), …), 다음과 같이 `uiTransform` 및 `uiBackground`.

**누르고 있는 동안 플레이어를 앞으로 이동시키는 버튼:**

```tsx
import { InputAction } from '@dcl/sdk/ecs'
import { Button } from '@dcl/sdk/react-ecs'

export const forwardButton = () => (
	<Button
		value="▲"
		uiTransform={{ width: 100, height: 100 }}
		uiInputBinding={{ actions: [InputAction.IA_FORWARD] }}
	/>
)
```

## 사용자 지정 컨트롤 클러스터를 만드세요

여러 개의 바인딩된 요소를 결합해 완전한 조작 체계를 구성하세요.

**이동 버튼과 발동하는 액션 버튼 `IA_PRIMARY`:**

```tsx
import { InputAction } from '@dcl/sdk/ecs'
import { Button, UiEntity } from '@dcl/sdk/react-ecs'

export const customControls = () => (
	<UiEntity uiTransform={{ width: 240, height: 120 }}>
		<Button
			value="▲"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_FORWARD] }}
		/>
		<Button
			value="사용"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_PRIMARY] }}
		/>
	</UiEntity>
)
```

바인딩된 액션은 기본 버튼과 똑같이 동작합니다: `IA_FORWARD` / `IA_BACKWARD` / `IA_LEFT` / `IA_RIGHT` 아바타를 움직이며, 어떤 액션이든 씬의 [`InputAction`](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md#pointer-buttons) 리스너에서 읽을 수 있습니다. prop(또는 컴포넌트)을 제거하면 바인딩이 해제됩니다.

## 속성

| 속성        | 유형                                                                                                                | 설명                                                                                                                                                                                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `actions` | 배열의 [`InputAction`](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md#pointer-buttons) | 이 요소가 눌려 있는 동안 유지되는 입력 액션입니다. 다음을 참조하세요 [클릭 이벤트](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md) 전체 목록은 다음을 참조하세요 [`InputAction`](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md#pointer-buttons) 값. |

{% hint style="info" %}
다음과 함께 사용하세요 [`TouchScreenControls`](/creator/content-creator-ko/sdk7/interactivity/touch-screen-controls.md) 기본 컨트롤을 숨기고 자신만의 터치 UI로 대체하세요 — 완전히 사용자 지정한 조작 체계를 배포하는 데 권장되는 방법입니다.
{% endhint %}

## 관련

* [화면 내 컨트롤](/creator/content-creator-ko/sdk7/interactivity/touch-screen-controls.md)
* [UI 버튼 이벤트](/creator/content-creator-ko/sdk7/2d-ui/ui_button_events.md)
* [모바일에서의 입력](/creator/content-creator-ko/build-for-mobile/develop/input-on-mobile.md)
* [클릭 이벤트](/creator/content-creator-ko/sdk7/interactivity/button-events/click-events.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-ko/sdk7/2d-ui/ui_input_binding.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.