> 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). # 코드와 결합 씬 에디터에서 만든 콘텐츠를 코드를 작성하는 힘과 결합하세요. {% 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. 화면 오른쪽 상단의 톱니바퀴 아이콘을 여세요 2. 아래의 **원하는 코드 편집기**, 코드 편집기를 선택하세요. 드롭다운에 편집기가 표시될 수도 있고, 아니면 다음을 선택해야 할 수도 있습니다 **기기에서 선택...** 에서 찾아보세요. ## 씬의 코드 열기 컴퓨터에 코드 편집기를 설치하고 Creator Hub 설정에서 선택하면, 다음을 클릭하여 씬 프로젝트에서 열 수 있습니다. **< > CODE** 버튼을 눌러 씬 프로젝트에서 열 수 있습니다. ![](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) 그러면 코드 편집기가 별도의 창으로 열립니다. 왼쪽 여백에서 프로젝트의 파일과 폴더 구조를 탐색할 수 있습니다. ![](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) 사용자 지정 코드는 다음에 추가하세요 `index.ts` 아래의 파일입니다 `/src`, 다음 안에 있는 `함수 내부,` 함수. 또는 해당 함수 밖에 사용자 지정 코드를 추가하거나 새로운 `.ts` 파일을 다음 안에 `/src` 폴더에 만들 수 있지만, 이들은 반드시 다음 안에서 어떤 방식으로든 참조되어야 합니다 `함수 내부,` 의 함수 `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 어시스턴트](/creator/content-creator-ko/scene-editor/extend-with-code/ai-assistant.md) 기능이 있어, 앱을 벗어나지 않고도 열려 있는 씬을 보고 대신 편집해 줍니다. 이 기능은 실험적 기능이며 기본적으로 꺼져 있습니다. Cursor나 Claude Code 같은 AI 어시스턴트를 활용해 씬 코드를 작성할 수도 있습니다. 예를 들어 Cursor를 사용하려면 다음과 같이 하세요: 1. 다음을 클릭하여 Cursor AI 어시스턴트를 여세요 **AI** 화면 오른쪽 상단의 버튼 2. 그곳에서 AI 어시스턴트에게 코드 작성을 도와달라고 요청할 수 있습니다. 프롬프트에는 문서 페이지 링크, 프로젝트 내 특정 파일 경로, 심지어 이미지까지 포함할 수 있습니다. 드롭다운에서 사용할 특정 모델도 선택할 수 있습니다. AI 어시스턴트에 Decentraland 문맥을 제공하려면 공식 Decentraland SDK Skills를 설치하세요. 이는 Decentraland Foundation이 관리하는 미리 만들어진 지침 세트로, 전체 씬 구성, 3D 모델 추가, 멀티플레이어, 배포 등 모든 주제에 대해 AI 에이전트에게 검증된 SDK7 패턴을 알려줍니다. ```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 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/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 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.