> 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/getting-started/sdk-101.md).

# SDK 빠른 시작

공식 SDK Skills를 사용한 AI 보조 바이브 코딩으로 Creator Hub와 SDK를 활용해 첫 Decentraland 씬을 만드세요.

이 튜토리얼에서는 첫 번째 씬을 만드는 과정을 안내합니다. 사용 가능한 다양한 도구를 섞어 사용하게 됩니다: Creator Hub의 시각적 Scene Editor, Decentraland SDK를 사용한 직접 작성한 코드, 그리고 AI 지원 **바이브 코딩**. 이 세 가지를 함께 사용하며, 각각이 언제 빛을 발하는지도 배울 것입니다.

## Decentraland 씬은 어떻게 만들나요?

1. **설치하세요** [**크리에이터 허브**](https://decentraland.org/download/creator-hub), 씬을 만들고, 미리보고, 게시할 수 있는 공식 데스크톱 앱입니다. 모든 수준의 크리에이터에게 권장되는 도구입니다.
2. **AI 코딩 어시스턴트를 사용하는 경우** (Claude Code, Cursor, Copilot 같은) 공식 [Decentraland SDK Skills](/creator/content-creator-ko/sdk7/getting-started/vibe-coding.md) 를 설치하여 검증된 SDK7 패턴을 알 수 있게 하세요: `npx skills add decentraland/sdk-skills`
3. **그** [**CLI**](/creator/content-creator-ko/sdk7/getting-started/using-the-cli.md) 는 고급 사용자와 자동화된 워크플로를 위한 대안입니다.

이 튜토리얼의 나머지 부분에서는 권장 경로를 단계별로 살펴봅니다.

## Creator Hub를 설치하세요

Creator Hub를 사용하면 Decentraland 씬을 빌드, 미리 보기, 배포할 수 있습니다. Creator Hub를 다운로드하세요 [여기](https://decentraland.org/download/creator-hub).

씬의 코드를 편집하려면 코드 편집기도 필요합니다. [Visual Studio Code](https://code.visualstudio.com/) 및 [Cursor](https://www.cursor.com/) 둘 다 훌륭한 선택이지만, 어떤 코드 편집기든 사용할 수 있습니다.

읽어 보세요 [설치 가이드](/creator/content-creator-ko/scene-editor/get-started/editor-installation.md) 자세한 내용은 다음을 참조하세요.

## 첫 번째 씬 만들기

1. Creator Hub를 엽니다.
2. 다음 **씬** 탭에서 클릭하세요 **새 씬**.

   ![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8133cc3d42ad03fd97fbd66482f9825ff74c1227%2Fnew-scene.png?alt=media)
3. 시작 템플릿을 선택하세요. 이 연습에서는 **빈 씬**.

이 단계는 몇 분 정도 걸릴 수 있습니다. 기본 씬에 필요한 기본 파일 세트가 폴더에 채워집니다. 완료되면 씬의 빈 그리드가 보입니다.

## 에셋 팩에서 항목 추가

탐색해 보세요 **에셋 팩** 을 Scene Editor의 하단 섹션에서 찾아서 몇 개의 항목을 씬으로 끌어다 놓으세요. 지금은 아무 항목이나 괜찮습니다.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-533d4553c3a38522cdd08dce8040a08c038699e7%2Fasset-packs.png?alt=media)

이미 배치한 항목은 클릭한 뒤 드래그하여 위치를 다시 정할 수 있습니다. 다음을 참조하세요 [씬 편집기 필수 사항](/creator/content-creator-ko/scene-editor/get-started/scene-editor-essentials.md#position-items) 자세한 내용은 다음을 참조하세요.

{% hint style="info" %}
**💡 팁**: 씬 전체를 지면 항목으로 덮으세요. 유형이 **지면** 인 항목에는 페인트통 아이콘이 표시됩니다. 이를 씬으로 끌어다 놓으면 이 항목의 복사본으로 씬의 모든 지면을 덮습니다.

<img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8d952452b5bf6475868c3392c6f0472690587580%2Fground.png?alt=media" alt="Ground" data-size="original">
{% endhint %}

## 미리보기 실행

다음의 **미리보기** 상단 메뉴의 버튼을 눌러 Decentraland 안에서 씬을 불러오세요. 이제 Decentraland 아바타로 씬을 탐험할 수 있습니다.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-39c019806cf83fa82b105ac12836311e3e7bae7c%2Frunning-preview.png?alt=media)

작업하는 동안 미리보기 창을 열어 둬도 됩니다. 변경할 때마다 업데이트됩니다. 자세한 내용은 [씬 미리 보기](/creator/content-creator-ko/sdk7/getting-started/preview-scene.md).

## 사용자 지정 3D 에셋

다음의 *glb* 형식의 이 3D 아보카도 모델을 [링크에서 다운로드한 뒤](https://github.com/decentraland-scenes/avocado/raw/main/avocado-glb.zip) 압축을 풀어 주세요.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8da7cae3effded9686a5efd6238653c527edc988%2Favocado-babylon.png?alt=media)

다음의 **avocado.glb** 파일을 파일 탐색기에서 Scene Editor 하단 패널로 드래그하세요(같은 패널로, 여기에는 **에셋 팩** 및 **로컬 에셋** 탭들)로 드래그한 뒤 **가져오기**.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-7c5cc9b92e593be1c3808b15abd54037818fa588%2Fimport-avocado.png?alt=media)

이제 **avocado.glb** 모델을 **로컬 에셋** 탭에서, **씬** 폴더 안에서 찾을 수 있습니다. 파일을 씬으로 끌어다 놓으세요. 에셋 팩의 다른 항목과 마찬가지입니다.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-01ea843bc76e6f15b8e99d50391936d8b0344a93%2Favocado-in-local-assets.png?alt=media)

## 씬 코드 편집

다음의 **<> 코드** 버튼을 눌러 코드 편집기에서 씬 프로젝트를 여세요.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-5837e60ee5b65bd46815c97282d53b1a44a70665%2Fcode-button.png?alt=media)

{% hint style="warning" %}
**📔 참고**: 아무것도 열리지 않으면, 다음과 같은 코드 편집기가 있는지 확인하세요 [Visual Studio Code](https://code.visualstudio.com/) 또는 [Cursor](https://www.cursor.com/) 설치되어 있어야 합니다.
{% endhint %}

코드 편집기 왼쪽 여백에서 프로젝트의 파일 및 폴더 구조를 탐색할 수 있습니다. 다음을 여세요 `index.ts` 파일을 `src` 폴더 안에서. 내용은 다음과 같아야 합니다:

```ts
import {} from '@dcl/sdk/math'
import { engine } from '@dcl/sdk/ecs'

export function main() {}
```

Decentraland 씬은 [TypeScript](https://www.typescriptlang.org/)로 작성되며, Decentraland SDK를 사용합니다. 이는 3D 콘텐츠 배치, 상호작용 추가, 씬에서 일어나는 일을 제어하는 데 필요한 모든 것을 갖춘 라이브러리입니다.

이 파일은 `함수 내부,`라는 함수를 정의합니다. 이는 씬의 진입점으로, 그곳에 넣은 모든 코드는 씬이 처음 로드될 때 실행됩니다.

이미 시각적으로 아보카도 하나를 씬에 끌어다 놓았습니다. 이제 두 번째 아보카도를 코드로 추가해 봅시다. 당신의 `index.ts` 파일 전체 내용을 다음으로 바꾸세요:

```ts
import { Vector3 } from '@dcl/sdk/math'
import { engine, Transform, GltfContainer } from '@dcl/sdk/ecs'

export function main() {
	// 새 Entity를 하나 생성
	let avocado2 = engine.addEntity()

	// Transform을 부여
	Transform.create(avocado2, {
		position: Vector3.create(8, 0, 8),
	})

	// GLTF를 부여
	GltfContainer.create(avocado2, {
		src: 'assets/scene/avocado.glb',
	})
}
```

이 줄들은 새 [entity](/creator/content-creator-ko/sdk7/architecture/entities-components.md)를 만들고, [shape](/creator/content-creator-ko/sdk7/3d/shape-components.md) 다운로드한 3D 모델을 바탕으로 [그 위치를 설정합니다](/creator/content-creator-ko/sdk7/3d/entity-positioning.md) 다음을 통해 **Transform** 컴포넌트를 부여해야 합니다.

일반적으로, `index.ts` 에 작성하는 코드는 모두 `함수 내부,` 안에 있어야 합니다(또는 main에서 간접적으로 참조되는 다른 함수 안에 있어야 합니다). 다음을 참조하세요 [씬 라이프사이클](/creator/content-creator-ko/sdk7/getting-started/coding-scenes.md#scene-lifecycle) 자세한 내용은 다음을 참조하세요.

씬 미리 보기를 실행하세요: 이제 Scene Editor에서 추가한 아보카도와 코드로 추가한 아보카도, 두 개가 보여야 합니다.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-10e98ca0228fa04e0cd9afde8c457b8fb7932d19%2Favocados.png?alt=media)

{% hint style="warning" %}
**📔 참고**: 두 번째 아보카도는 **코드에만**. 씬을 실행할 때는 나타나지만, Scene Editor 캔버스와 엔티티 트리는 `index.ts`에서 생성된 엔티티를 표시할 수 없습니다. 편집기에서 보이지 않더라도 당황하지 마세요. 시각적 편집과 코드를 함께 사용할 때 꼭 기억해야 할 핵심 사항입니다.
{% endhint %}

두 아보카도는 같은 구성 요소로 만들어졌습니다. Scene Editor에서 **첫 번째** 아보카도를 선택하세요: 속성 패널에 **Transform** 그리고 **GltfContainer** 컴포넌트가 표시되며, 그 안의 필드들은 방금 코드에서 작성한 것과 같은 종류입니다. 두 가지는 같은 것을 다른 방식으로 보는 것입니다.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-6ce41a7d98cb2b5c59c9bf2b870ea05d34a73f62%2Favocado-components.png?alt=media)

## Script로 상호작용 추가

아보카도가 플레이어에게 반응하게 만들어 봅시다. 이미 편집 중이던 `index.ts` 에 코드를 추가해서 할 수도 있지만, 대신 **스크립트 컴포넌트**을 사용해 봅시다: Scene Editor의 항목에 코드를 직접 연결하는 방법입니다. 이렇게 하면 각 항목의 동작이 독립적으로 유지되며, 같은 스크립트를 여러 항목에 재사용할 수도 있습니다.

1. Scene Editor에서 첫 번째 아보카도(드래그해 넣은 것; 코드만 있는 아보카도는 여기서 보이지 않는다는 점을 기억하세요)를 선택하세요.
2. 다음의 **+** 속성 패널 상단의 버튼을 누르고 **스크립트** 를 선택하여 Script 컴포넌트를 추가하세요.
3. 클릭 **+ 새 스크립트 만들기** 라고 이름을 붙이세요 `AvocadoScript`.

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-678dd3ca7b526cd9effbf8249e517c5764bff7a2%2Favocado-script.png?alt=media)

4. 다음의 **<> 코드** 버튼을 눌러 새 파일을 코드 편집기에서 여세요.

이 스크립트는 세 부분으로 이루어진 클래스입니다(간결함을 위해 주석은 줄였습니다):

```ts
import { engine, Entity } from '@dcl/sdk/ecs'
import {} from '@dcl/sdk/math'

export class AvocadoScript {
	constructor(
		public src: string, // 제거하지 마세요
		public entity: Entity, // 제거하지 마세요
		// 아래에 사용자 지정 입력을 추가하세요
	) {}

	start() {
		// 씬이 로드될 때 한 번 호출됩니다
	}

	update(dt: number) {
		// 매 프레임마다 호출됩니다
	}
}
```

* 그 **constructor** 는 Creator Hub의 Script 컴포넌트에서 편집 가능한 필드로 나타나는 매개변수를 정의합니다. 제거하지 마세요 `src` 또는 `entity`.
* **`start()`** 한 번 실행됩니다 **한 번**, 씬이 로드될 때. 설정 작업에 사용하세요: 컴포넌트 생성, 클릭 핸들러 등록 등.
* **`update(dt)`** 에서 **매 프레임마다** 게임의, 대략 초당 30회. 연속적인 동작, 예를 들어 움직임에 사용하세요. `dt` 마지막 프레임 이후 얼마나 많은 초가 지났는지 알려 줍니다.

클래스 내부에서, `this.entity` 는 항상 Script 컴포넌트를 가진 엔티티를 가리킵니다. 이 경우에는 아보카도입니다. 이것이 스크립트를 재사용 가능하게 만드는 요소입니다: 같은 스크립트를 열 개의 항목에 붙이면, 각 항목이 자기 자신에 대해 동작합니다.

### 첫 번째 상호작용을 바이브 코딩하기

다음 코드는 직접 작성할 수 있지만, 지금이 바로 **바이브 코딩**을 시도해 볼 좋은 순간입니다: 원하는 내용을 AI 어시스턴트에게 설명하고, 코드를 작성하게 하는 것입니다. 대부분의 코드 편집기에는 Cursor의 채팅, VS Code의 GitHub Copilot, 또는 [Claude Code](https://claude.com/product/claude-code)같은 기능이 내장되어 있습니다. Claude Desktop이나 명령줄의 Claude Code처럼 코드 편집기 밖에서 프롬프트를 작성할 수도 있습니다.

첫 프롬프트를 보내기 전에 Decentraland SDK 스킬을 설치해 두세요. 그러면 AI가 SDK의 패턴을 알고 훨씬 적은 실수를 하게 됩니다:

```bash
npx skills add decentraland/sdk-skills
```

이 스킬은 AI가 SDK로 무언가를 하는 방법이 불확실할 때마다 참고하는 문서이므로, 추측하는 대신 올바른 코드를 작성합니다. 설정 옵션과 프롬프트 팁은 다음을 참조하세요 [AI와 함께하는 바이브 코딩](/creator/content-creator-ko/sdk7/getting-started/vibe-coding.md) 설정 옵션과 프롬프트 팁을 보려면

이제 이런 프롬프트를 시도해 보세요:

> AvocadoScript.ts에서 플레이어가 아보카도를 클릭하면 콘솔에 메시지를 로그하도록 만들어 주세요.

다음과 비슷한 결과가 나와야 합니다(아니면 직접 붙여 넣으세요):

```ts
import { engine, Entity, pointerEventsSystem, InputAction, Tween, EasingFunction } from '@dcl/sdk/ecs'
import {} from '@dcl/sdk/math'

export class AvocadoScript {
	constructor(
		public src: string,
		public entity: Entity,
	) {}

	start() {
		pointerEventsSystem.onPointerDown(
			{
				entity: this.entity,
				opts: { button: InputAction.IA_POINTER },
			},
			() => {
				console.log('CLICKED AVOCADO')
			}
		)
	}

	update(dt: number) {}
}
```

AI가 `start()` 함수 안에 클릭 동작을 추가했습니다. 클릭 동작은 한 번만 정의하면 되고, 플레이어가 항목을 클릭할 때마다 반응합니다.  `pointerEventsSystem.onPointerDown()` 문은 세 가지를 정의합니다:

* 무엇 `entity` 클릭 이벤트가 적용되는 대상: 여기서는 `this.entity`, 스크립트를 가진 아보카도입니다.
* 다음은 `opts` 객체: 어떤 버튼을 사용할지, 그리고 지금은 사용하지 않는 기타 선택적 인자들.
* 엔티티가 클릭될 때마다 실행되는 함수.

로그된 메시지를 보려면 미리보기를 실행하고 오른쪽 상단 모서리의 ![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-a673f6b987216e9e471fdac882879c44fcf94652%2Fconsole-icon.png?alt=media) 아이콘을 클릭하여 콘솔을 여세요. 또한 **\`** 키를 눌러 토글할 수도 있습니다. 아보카도를 클릭할 때마다 새 줄이 나타나는 것을 볼 수 있습니다:

![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-da59e95c8a6642350fcf0c49e7e589609ef68eec%2Flogs-avocado.png?alt=media)

{% hint style="warning" %}
**📔 참고**: 엔티티가 클릭 가능하려면 콜라이더 기하가 있어야 합니다. 여기 사용된 모델에는 이미 포함되어 있습니다. 다음을 참조하세요 [콜라이더](https://github.com/decentraland/docs/tree/main/creator/sdk7/3d-modeling/colliders.md) 콜라이더가 없는 모델에 대한 우회 방법은
{% endhint %}

### 아보카도 사라지게 만들기

이제 클릭으로 더 흥미로운 일을 해 봅시다! AI 어시스턴트에게 이렇게 요청하세요:

> 아보카도를 클릭하면 사라지게 해 주세요. 줄어들면서 통통 튀는 애니메이션으로 사라졌으면 합니다. 그리고 아보카도를 가리킬 때 보이는 힌트 텍스트는 "Collect"로 해 주세요.

다음과 비슷한 결과가 나와야 합니다:

```ts
import { engine, Entity, pointerEventsSystem, InputAction, Tween, EasingFunction } from '@dcl/sdk/ecs'
import { Vector3 } from '@dcl/sdk/math'

export class AvocadoScript {
	constructor(
		public src: string,
		public entity: Entity,
	) {}

	start() {
		pointerEventsSystem.onPointerDown(
			{
				entity: this.entity,
				opts: { button: InputAction.IA_POINTER, hoverText: 'Collect' },
			},
			() => {
				this.collect()
			}
		)
	}

	collect() {
		Tween.setScale(
			this.entity,
			Vector3.One(),
			Vector3.Zero(),
			500,
			EasingFunction.EF_EASEINBOUNCE
		)
	}

	update(dt: number) {}
}
```

AI가 무엇을 했는지 살펴봅시다.

* 통통 튀는 애니메이션을 만들기 위해 **트윈**를 사용했습니다. 트윈은 엔티티의 위치, 회전 또는 크기가 시간에 따라 점진적으로 변하는 것을 설명합니다. 여기서는 `Tween.setScale()` 아보카도를 전체 크기(`Vector3.One()`)에서 아무것도 아닌 상태(`Vector3.Zero()`)까지 500밀리초에 걸쳐, 통통 튀는 이징 곡선을 사용해 줄입니다. 트윈에 대해 자세히 알아보려면 [엔티티 이동](/creator/content-creator-ko/sdk7/3d/move-entities.md).
* 클릭 함수 안에 트윈을 직접 작성하는 대신, 별도의 `collect()` 메서드를 만들었습니다. 이것이 필수는 아니지만(만약 AI가 클릭 함수 안에 트윈을 넣었다면 그것도 작동합니다), 좋은 습관입니다. 메서드는 코드를 읽기 쉽게 하고 여러 곳에서 같은 로직을 재사용할 수 있게 해 줍니다.
* "Collect" 힌트를 아보카도에 표시하기 위해 이를 `hoverText` 값입니다.

로 설정했습니다.

{% hint style="warning" %}
**📔 참고**: 아보카도는 크기 0까지 줄어들지만 엔티티는 여전히 존재합니다. 이상적으로는 트윈이 끝난 뒤 엔티티를 삭제하여 씬을 더 가볍게 유지해야 합니다. 다음을 참조하세요 [트윈 완료 시](/creator/content-creator-ko/sdk7/3d/move-entities.md#on-tween-finished).
{% endhint %}

### 매 프레임마다 코드 실행

지금까지 모든 코드는 `start()`에서 실행되었습니다. 이제 `update()` 를 사용하여 아보카도가 계속 회전하게 만들어 봅시다. 생성자와 `update()` 를 다음으로 바꾸세요:

```ts
	constructor(
		public src: string,
		public entity: Entity,
		public speed: number = 45,
	) {}

	update(dt: number) {
		const transform = Transform.getMutable(this.entity)
		transform.rotation = Quaternion.multiply(
			transform.rotation,
			Quaternion.fromAngleAxis(this.speed * dt, Vector3.Up())
		)
	}
```

또한 `Transform` 및 `Quaternion` 를 파일 상단의 import에 추가해야 하므로, 다음과 같아야 합니다:

```ts
import { engine, Entity, pointerEventsSystem, InputAction, Tween, EasingFunction, Transform } from '@dcl/sdk/ecs'
import { Vector3, Quaternion } from '@dcl/sdk/math'
```

{% hint style="info" %}
**💡 팁**: import를 직접 편집하는 대신, 코드 편집기에 표시된 오류를 클릭하면 자동으로 추가하게 할 수 있습니다.
{% endhint %}

매 프레임마다 이 아보카도를 조금씩 더 회전시킵니다.  `dt` 를 곱하면 움직임이 부드럽고 프레임 속도에 독립적으로 됩니다. 플레이어의 기기가 얼마나 빠르게 돌아가든 아보카도는 초당 45도씩 회전합니다.

왜냐하면  `속도` 는 생성자 매개변수이므로, Creator Hub의 Script 컴포넌트에도 필드로 표시됩니다. Script 컴포넌트 오른쪽 상단의 새로고침 아이콘을 클릭해 확인한 다음, 코드를 건드리지 않고 값을 조정해 보세요.

<img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-0e88676864e337ab55bf98ae8bd23e2775ec0c60%2Fscript-refresh-button.png?alt=media" alt="새로고침 버튼" width="360">

각 엔티티는 **Speed** 필드의 자체 값을 저장하므로, 여러 항목이 같은 스크립트를 공유하면서도 다르게 동작할 수 있습니다. 직접 해 보세요: Ctrl + C와 Ctrl + V로 아보카도를 복사하고, 두 개가 겹치지 않도록 복사본을 옮긴 뒤, 각각의 속도를 다르게 설정하세요. 이제 각 아보카도는 고유한 속도로 회전합니다.

스크립트는 다른 스마트 항목이 트리거할 수 있는 액션을 노출하는 것처럼 훨씬 더 많은 일을 할 수 있습니다. 전체 그림은 다음을 참조하세요 [스크립트 컴포넌트](/creator/content-creator-ko/scene-editor/extend-with-code/script-component.md) 전체 개요는 다음을 참조하세요.

## Scene Editor의 항목 참조하기

Script 컴포넌트는 단일 항목에 동작을 부여하는 가장 쉬운 방법이지만, 대안도 있습니다: 코드에서 `index.ts` 는 이름을 사용하여 시각적으로 추가한 어떤 항목이든 가져올 수 있습니다. `engine.getEntityOrNullByName()`이는 하나의 로직이 여러 항목과 관련될 때나, 모든 것을 한 곳에 두고 싶을 때 유용합니다. 다음에 표시되는 이름을 사용하세요 [엔티티 트리](/creator/content-creator-ko/scene-editor/get-started/scene-editor-essentials.md#the-entity-tree).

이 예제에서는 **Yellow Crate**. 어떤 항목이든 사용할 수 있으며, 엔티티 트리에 표시된 이름을 정확히 그대로 입력하면 됩니다.

{% hint style="info" %}
**💡 팁**: 엔티티 이름을 바꾸려면 마우스 오른쪽 버튼을 클릭하고 **이름 바꾸기** 를 선택하세요.
{% endhint %}

```ts
export function main() {
	// avocado2 코드 이전 내용
	// (...)

	const crate = engine.getEntityOrNullByName('Yellow Crate')

	if (crate) {
		pointerEventsSystem.onPointerDown(
			{
				entity: crate,
				opts: { button: InputAction.IA_POINTER, hoverText: 'Open' },
			},
			function () {
				console.log('CLICKED CRATE')
			}
		)
	}
}
```

여기서 `engine.getEntityOrNullByName()` 는 다음 이름의 엔티티에 대한 참조를 가져옵니다 *Yellow Crate*. 다음은 `if (crate)` 검사는 해당 엔티티가 씬에 실제로 존재하는지 확인합니다. 해당 이름의 엔티티가 없다면, `crate` 일 때 `null`. 자세한 내용은 [참조 항목](https://github.com/decentraland/docs/tree/main/creator/sdk7/code/reference-items.md) 을 참조하세요.

{% hint style="info" %}
**💡 팁**: Scene Editor를 통해 추가된 모든 엔티티는 `함수 내부,` 가 실행될 때 이미 로드되어 있으므로, 그 안이나 `함수 내부,`.
{% endhint %}

## 더 많은 튜토리얼

읽기 [씬 코딩](/creator/content-creator-ko/sdk7/getting-started/coding-scenes.md) 은 Decentraland 씬이 어떻게 동작하는지에 대한 높은 수준의 이해를 제공합니다.

SDK7로 만든 예제를 보려면 [예제 페이지](https://studios.decentraland.org/resources?sdk_version=SDK7)를 확인해 보세요. 여기에는 여러 개의 작은 씬이 들어 있습니다.

다음을 참조하세요 **개발 가이드** 섹션에서 씬에 콘텐츠를 추가하는 방법에 대한 추가 지침을 확인할 수 있습니다.

## 다른 개발자들과 소통하기

다음을 방문하세요 [Decentraland Discord](https://dcl.gg/discord) 및 [Decentraland DAO Discord](https://discord.gg/bxHtcMxUs4) 에서 Decentraland Discord의 **Creators** 섹션.

문제 해결을 위해서는 다음 [문제 해결](/creator/content-creator-ko/sdk7/debugging/troubleshooting.md) 및 [디버그](/creator/content-creator-ko/sdk7/debugging/debug-in-preview.md) 섹션을 확인하세요. 다음과 같은 [SDK 스킬](/creator/content-creator-ko/sdk7/getting-started/vibe-coding.md) 이 설치된 AI 어시스턴트도 훌륭한 디버깅 동반자입니다: 콘솔의 오류 메시지를 붙여 넣거나, 예상대로 동작하지 않는 부분을 설명하면, 보통 코드에서 문제를 찾아낼 수 있습니다. 해결책을 찾지 못하면 다음에 게시할 수 있습니다 [SDK 지원 카테고리](https://forum.decentraland.org/c/support-sdk/11) Decentraland 포럼에서.

## 3D 아트 에셋

좋은 경험에는 그에 어울리는 뛰어난 3D 아트가 필요합니다. 직접 3D 모델을 만들고 싶다면 [3D 모델링 섹션](/creator/content-creator-ko/3d/3d-models.md). 하지만 코딩이나 게임 디자인 측면에 집중하고 싶다면, 직접 에셋을 만들 필요는 없습니다! 다음을 참조하세요 [유용한 자료](/creator/content-creator-ko/sdk7/getting-started/useful-resources.md) 에서 씬에 사용할 3D 모델 소스를 얻을 수 있는 에셋 라이브러리와 AI 도구를 확인하세요.

## 씬 게시하기

Decentraland NAME, ETH ENS 이름, LAND를 소유하고 있거나, 소유자가 부여한 권한이 있다면 씬을 Decentraland에 업로드할 수 있습니다. 다음을 참조하세요 [게시](/creator/content-creator-ko/sdk7/publishing/publishing.md).

## 기타 유용한 정보

* [AI와 함께하는 바이브 코딩](/creator/content-creator-ko/sdk7/getting-started/vibe-coding.md)
* [개발 워크플로](/creator/content-creator-ko/sdk7/getting-started/dev-workflow.md)
* [씬 편집](/creator/content-creator-ko/scene-editor/get-started/about-editor.md)
* [씬 편집기 필수 사항](/creator/content-creator-ko/scene-editor/get-started/scene-editor-essentials.md)
* [게임의 설계 제약](/creator/content-creator-ko/sdk7/designing-the-experience/design-games.md)
* [3D 모델링](/creator/content-creator-ko/3d/3d-models.md)
* [씬 제한 사항](/creator/content-creator-ko/sdk7/optimizing/scene-limitations.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/getting-started/sdk-101.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.
