> 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/scene-editor/extend-with-code/overview.md). # 코드와 결합 Scene Editor에서 만든 콘텐츠와 코드 작성의 강력함을 결합합니다. {% embed url="" %} Creator Hub와 사용자 지정 코드를 함께 사용하면 콘텐츠를 만드는 데 매우 강력한 조합이 됩니다. 캔버스를 사용해 항목을 직관적으로 시각적으로 배치한 다음, 이 항목들과 자유롭게 상호작용하는 코드를 작성할 수 있습니다. 자체 기본 동작을 가진 스마트 항목을 배치한 뒤, 해당 항목이 활성화될 때 반응하는 코드를 작성할 수도 있습니다. 예를 들어, 이미 소리와 애니메이션, 상태를 갖춘 기존의 레버 스마트 항목을 활용하고, 레버가 당겨질 때를 감지해 자신만의 사용자 지정 로직을 실행하는 코드를 작성할 수 있습니다. 다음 [코드에서 항목 참조](/creator/content-creator-ko/scene-editor/extend-with-code/reference-items.md) 코드에서 이름이나 태그로 항목을 가져오는 방법에 대한 설명입니다. ## 코드 편집 씬의 코드를 편집하려면 기기에 코드 편집기를 설치해야 합니다. 권장되는 옵션은 다음과 같습니다: * VS Code [Visual Studio Code](https://code.visualstudio.com/): 숙련된 개발자에게 권장되는 옵션입니다. * Cursor [Cursor AI](https://www.cursor.com/): AI가 통합된 강력한 코드 편집기입니다. 여러 AI 모델을 선택해 코드 작성을 도와받을 수 있으며, 무료 요금제가 제공되고 더 고급 모델은 유료 플랜이 필요합니다. Decentraland나 TypeScript를 처음 사용하는 개발자에게 좋은 선택이며, 코드 작성 시간을 절약하고 싶을 때도 적합합니다. {% hint style="warning" %} **📔 참고**: macOS를 사용하는 경우, 코드 편집기 앱이 Applications 디렉터리에 있는지 확인하세요. {% endhint %} 설치한 후에는 Creator Hub 설정에서 코드 편집기를 선택해야 할 수 있습니다. 이렇게 하려면, 1. 화면 왼쪽 상단의 Creator Hub 로고를 클릭하고 **설정**. 2. 다음을 열고 **편집기** 탭에 표시되려면 새로 고침 버튼을 클릭해야 할 수도 있습니다. 3. 다음 아래에서 **선호하는 코드 편집기**, 코드 편집기를 선택하세요. 드롭다운에 편집기가 표시될 수도 있고, 아니면 **기기에서 선택...** 를 선택해야 할 수도 있습니다. ![편집기 탭의 앱 기본 설정 대화상자에서 선호하는 코드 편집기 드롭다운이 Visual Studio Code로 설정된 모습.](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8eacb18c746acee4ccd8f3caf2740c9f4f40c5a4%2Fsettings-editor.png?alt=media\&token=aa0f0526-13f4-44f0-87be-88fb70c529f4) ## 씬의 코드를 열기 기기에 코드 편집기를 설치하고 Creator Hub 설정에서 선택한 후에는, **< > 코드** 버튼을 클릭해 씬 프로젝트에서 열 수 있습니다. ![](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\&token=bb2a8cec-e8bd-485a-bbe1-f402ceb2aebd) 그러면 코드 편집기가 별도의 창으로 열립니다. 왼쪽 여백에서 프로젝트의 파일과 폴더 구조를 탐색할 수 있습니다. ![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e94bcfd7f720dddb6343bbb79d444afae3cbff33%2Ffiles-on-vs-studio.png?alt=media\&token=7fd7a16b-31d1-434d-ae25-d9f82c65a66f) 다음에 사용자 지정 코드를 추가하세요 `index.ts` 파일로 `/src`, 다음 내부에 `main()` 함수. 그렇지 않으면 해당 함수 밖에 사용자 지정 코드를 추가하거나 새 `.ts` 파일을 다음 내부에 `/src` 폴더 안에 만들 수 있지만, 이러한 파일은 다음 내부에서 어떤 식으로든 참조되어야 합니다 `main()` 의 함수 `index.ts`. {% hint style="warning" %} **📔 참고**: VS Code나 Cursor가 설치되어 있지만 **CODE** 버튼을 눌러도 열리지 않는다면, VS Code가 명령줄을 통해 열리도록 기기에 올바르게 설정되지 않았을 수 있습니다. 대부분은 기본 설치 과정에서 처리되지만, 그렇지 않은 경우 다음을 참고하세요 [VS에서 제공하는 이 안내](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) 를 따라 명령줄에서 VS Code를 활성화하세요. {% endhint %} 씬을 실행 중인 미리보기 창이 열려 있다면, 파일의 코드를 변경하고 저장할 때마다 씬이 변경 사항과 함께 자동으로 다시 로드됩니다. ## AI 사용하기 Creator Hub에는 내장된 [AI Assistant](/creator/content-creator-ko/scene-editor/extend-with-code/ai-assistant.md) AI 기능이 있어, 앱을 벗어나지 않고 열려 있는 씬을 보고 편집해 줍니다. 이는 실험적 기능이며 기본적으로 꺼져 있습니다. 씬 코드를 작성하는 데 도움이 되도록 Cursor나 Claude Code 같은 AI 어시스턴트도 활용할 수 있습니다. 예를 들어 Cursor를 사용하려면 다음과 같이 하세요: 1. 다음을 클릭하여 Cursor AI 어시스턴트를 여세요 **AI** 버튼을 화면 오른쪽 상단에서 2. 그곳에서 AI 어시스턴트에게 코드 작성을 도와달라고 요청할 수 있습니다. 프롬프트에는 문서 페이지 링크, 프로젝트 내 특정 파일 경로, 심지어 이미지도 포함할 수 있습니다. 드롭다운에서 사용할 특정 모델을 선택할 수도 있습니다. AI 어시스턴트에 Decentraland 맥락을 제공하려면 공식 Decentraland SDK Skills를 설치하세요. 이는 Decentraland Foundation이 유지 관리하는 미리 만들어진 지침 세트로, 전체 씬 구성, 3D 모델 추가, 멀티플레이어, 배포 등 모든 주제에 대해 검증된 SDK7 패턴을 AI 에이전트에게 알려 줍니다. ```bash npx skills add decentraland/sdk-skills ``` 다음 [AI와 함께하는 바이브 코딩](/creator/content-creator-ko/sdk7/getting-started/vibe-coding.md) 사용 가능한 스킬의 전체 목록을 포함한 전체 가이드는 다음을 참조하세요. {% hint style="warning" %} **📔 참고**: 이전 씬 프로젝트에는 다음이 포함되어 있을 수 있습니다 `/dclcontext` 폴더가 있으며, 이는 더 이상 사용되지 않는 `npx sdk-commands get-context-files` 명령으로 다운로드되었습니다. 해당 컨텍스트는 더 이상 유지 관리되지 않으며 SDK Skills로 대체되었습니다. 이 폴더는 안전하게 삭제할 수 있습니다. {% endhint %} ## 버전 관리 프로젝트용 저장소를 GitHub에 만들고, 프로젝트 버전을 추적하고 다른 사람들과 협업하는 데 활용할 것을 권장합니다. 이 방법이 익숙하지 않다면 다음을 참조하세요 [저장소 빠른 시작](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories), 또는 다음을 사용하세요 [GitHub 데스크톱 애플리케이션](https://desktop.github.com/download/) 더 간단한 UI 기반 흐름을 위해. {% hint style="warning" %} **📔 참고**: 전체 프로젝트 폴더를 GitHub 저장소에 업로드하되, 다음이 `/node_modules` 또는 `/bin` 폴더와 `package-lock.json` 파일이 모두 다음에 포함되어 `.gitignore` 파일에 동기화되지 않도록 하기 위해서입니다. 저장소 유형을 다음으로 구성했다면 일반적으로 이렇게 됩니다 `node`. 이 파일들은 모두 자동 생성되며, 기기에 따라 내용이 달라질 수 있습니다. {% endhint %} ## 또한 참조하세요 * [AI와 함께하는 바이브 코딩](/creator/content-creator-ko/sdk7/getting-started/vibe-coding.md): 원하는 것을 AI 어시스턴트에게 설명하여 씬을 빌드하세요. * [스마트 아이템 - 기본](/creator/content-creator-ko/scene-editor/interactivity/smart-items.md) * [스마트 아이템 - 고급](/creator/content-creator-ko/scene-editor/interactivity/smart-items-advanced.md) * [상태와 조건](/creator/content-creator-ko/scene-editor/interactivity/states-and-conditions.md) * [모든 항목을 스마트 아이템으로 만들기](/creator/content-creator-ko/scene-editor/interactivity/make-any-item-smart.md) * [SDK 빠른 시작](/creator/content-creator-ko/sdk7/getting-started/sdk-101.md): 빠른 실전 입문을 위해 이 짧은 튜토리얼을 따라 하세요. * [개발 워크플로](/creator/content-creator-ko/sdk7/getting-started/dev-workflow.md): 장면 생성 과정을 처음부터 끝까지 이해하려면 이것을 읽어보세요. * [예시](https://studios.decentraland.org/resources?sdk_version=SDK7): 작업 예제 장면을 바로 살펴보세요. --- # 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/scene-editor/extend-with-code/overview.md?ask=&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.