> 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)들로 바인딩하고, 터치나 포인터로 누르고 있는 동안에는 해당 동작이 유지되어 로컬 플레이어의 입력(이동, 점프)과 씬의 모든 [`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` prop을 당신의 `.tsx` UI의 아무 요소에나 추가하고, 눌려 있는 동안 유지할 동작들을 나열하세요. 이 prop은 모든 UI 요소([`UiEntity`](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#ui-entities), [`Button`](/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.