> 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/media/display-a-certified-nft.md). # 인증된 NFT 표시 씬에 보유한 인증된 NFT를 표시하는 방법을 알아봅니다 Decentraland 씬에서 소유한 2D NFT(대체 불가능 토큰)를 표시할 수 있습니다. NFT의 이미지와 기타 데이터는 토큰의 컨트랙트와 ID를 기반으로 API에서 가져옵니다. 다음에서 지원되는 모든 NFT는 [OpenSea](https://opensea.io/) 를 Decentraland의 NFT 액자에도 표시할 수 있습니다. {% hint style="info" %} **💡 팁**: 다음에서 [Creator Hub의 Scene Editor](/creator/content-creator-ko/scene-editor/get-started/about-editor.md), 이를 위해 다음을 사용할 수 있습니다 **NFT** [스마트 아이템](/creator/content-creator-ko/scene-editor/interactivity/smart-items.md) 이것을 노코드 방식으로 구현하려면. {% endhint %} 액자는 NFT 이미지의 크기에 맞게 조정되어 표시됩니다. 이미지 크기가 512 X 512픽셀이면 프레임은 원래 크기를 유지합니다. 이미지 크기가 다르면 프레임이 해당 크기에 맞게 조정되고 늘어납니다. {% hint style="info" %} **💡 팁**: 기본 생성된 이미지에서 늘리거나 크기를 조정하려면 `크기` 속성을 엔티티의 `Transform` 컴포넌트를 추가해야 합니다. {% endhint %} ## NFT 추가 다음 항목을 추가하세요 `NftShape` 컴포넌트를 엔티티에 추가하여 씬에 2D 토큰을 표시합니다. ```ts const nft = engine.addEntity() Transform.create(nft, { position: Vector3.create(8, 1, 8), }) NftShape.create(nft, { urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', }) ``` 이 `NftShape` 컴포넌트는 다음을 포함하는 매개변수로 인스턴스화해야 합니다: * `urn` 필드입니다. 이 필드는 다음 구조를 따라야 하는 문자열을 받습니다: `urn:decentraland::::` 이 문자열에는 다음이 포함됩니다: * 이 *network* 이 토큰이 존재하는 곳입니다. 아래의 지원되는 값 목록을 참조하세요. * 이 *contract standard* 이 토큰이 기반으로 하는, 예를 들어 `erc721` * 이 *contract* 토큰의 (예: CryptoKitties 컨트랙트) * 이 *id* 표시할 특정 토큰의 예를 들면: `urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536` 위 예시는 다음 컨트랙트 주소의 NFT를 가져옵니다 `0x06012c8cf97BeaD5deAe237070F9587f8E7A266d`, 그리고 특정 식별자 `558536`. 해당 자산은 OpenSea에서 다음에서 찾을 수 있습니다 . 다음 값이 지원됩니다 *network*: * `ethereum`: 이더리움 메인넷 * `matic`: 폴리곤 Matic * `klaytn`: 클레이튼 * `bsc`: BNB 체인 * `arbitrum`: 아비트럼 * `arbitrum_nova`: 아비트럼 노바 * `avalanche`: 아발란체 * `optimism`: 옵티미즘 * `solana`: 솔라나 * `base`: Base * `blast`: Blast * `zora`: Zora {% hint style="warning" %} **📔 참고**: 이미지의 용량은 최대 **6 MB**. 이미지가 더 크면 씬에 렌더링되지 않습니다. {% endhint %} ## 액자 사용자 지정 기본적으로 이미지는 보라색 배경과 함께 그 주위에 맥동하는 발광 텍스처가 있는 프레임으로 표시됩니다. 다음 속성을 설정하여 NFT와 씬의 스타일에 더 잘 맞출 수 있습니다: * `color`: 모델의 뒷면과, NFT 이미지에 투명도가 있는 경우 이미지의 배경을 결정합니다. * `style`: 미리 정해진 여러 옵션의 enum에서 프레임 모델을 선택합니다. enum의 값을 사용하세요 `NftFrameType`, 여기에는 사용 가능한 모든 스타일 목록이 포함되어 있습니다. ```ts NftShape.create(nftEntity, { urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', color: Color3.Green(), style: NftFrameType.NFT_GOLD_EDGES, }) ``` ![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e59260ef83a294f59a11a2427a6cb81f8a9a6e6e%2Fnft-frames.png?alt=media\&token=84dd9575-6254-44b6-90f1-5da05c7bc973) 지원되는 프레임 스타일 전체 목록은 다음과 같습니다: * `NFT_CLASSIC` * `NFT_BAROQUE_ORNAMENT` * `NFT_DIAMOND_ORNAMENT` * `NFT_MINIMAL_WIDE` * `NFT_MINIMAL_GREY` * `NFT_BLOCKY` * `NFT_GOLD_EDGES` * `NFT_GOLD_CARVED` * `NFT_GOLD_WIDE` * `NFT_GOLD_ROUNDED` * `NFT_METAL_MEDIUM` * `NFT_METAL_WIDE` * `NFT_METAL_SLIM` * `NFT_METAL_ROUNDED` * `NFT_PINS` * `NFT_MINIMAL_BLACK` * `NFT_MINIMAL_WHITE` * `NFT_TAPE` * `NFT_WOOD_SLIM` * `NFT_WOOD_WIDE` * `NFT_WOOD_TWIGS` * `NFT_CANVAS` * `NFT_NONE` 일부 프레임은 다른 프레임보다 더 많은 재질을 사용합니다. 예를 들어 기본 프레임은 NFT 자체에 1개의 재질, 배경색 평면에 1개의 재질, 프레임에 2개의 재질(같은 스타일의 다른 액자와 공유됨)을 추가합니다. 재질 수를 [씬 제한 내에 유지하려면](/creator/content-creator-ko/sdk7/optimizing/scene-limitations.md), 더 단순한 스타일을 선택하세요. 예를 들어 "none"은 NFT 자체에만 1개의 재질만 사용합니다. {% hint style="info" %} **💡 팁**: Visual Studio Code(또는 다른 IDE)를 사용해 전체 목록을 보려면 다음을 입력하세요 `NftFrameType.` 그리고 스마트 제안이 옵션 목록을 표시할 때까지 기다리세요. 다음을 사용하세요 `NftFrameType.NFT_NONE`프레임이나 배경색 없이 평범한 NFT를 그대로 표시합니다. {% endhint %} ## NFT UI 열기 NFT의 이름, 소유자, 설명을 표시하는 미리 만들어진 UI를 엽니다. 또한 해당되는 경우 NFT의 현재 가격과 마지막 판매 가격도 포함되며, OpenSea의 NFT 페이지로 연결되는 버튼이 있어 더 많은 정보를 확인하고 구매할 수 있습니다. ![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-aa9f7b7fbcba689e0039abe1aed3936c64c44f98%2Fnft-ui.png?alt=media\&token=b761699f-e10c-4d56-bc59-183c2d45ce05) 다음 함수를 호출하여 이 UI를 엽니다 `openNftDialog()`. 이 함수는 다음 단일 항목을 포함하는 객체를 인수로 필요로 합니다 `urn` 필드입니다. 이 필드는 다음 구조를 따라야 하는 문자열을 받습니다: `urn:decentraland::::` 예를 들면: `urn:decentraland:ethereum:erc721:0x00...000:123` {% hint style="warning" %} **📔 참고**: 악의적인 스팸을 방지하기 위해 UI는 버튼 이벤트의 결과로 열려야 합니다. 버튼 이벤트는 반드시 같은 액자나 또는 `NftShape`. {% endhint %} 클릭 동작의 결과로 이 UI를 열려면 다음을 추가하세요: ```ts import { openNftDialog } from '~system/RestrictedActions' // 클릭할 수 있도록 포인터 콜라이더 추가 MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER) // onPointerDown 콜백 이벤트 추가. pointerEventsSystem.onPointerDown( { entity: myEntity, opts: { button: InputAction.IA_PRIMARY, hoverText: '클릭' }, }, function () { openNftDialog({ urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536', }) } ) ``` --- # 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/media/display-a-certified-nft.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.