> 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(Non-Fungible Token)를 표시할 수 있습니다. NFT의 이미지와 기타 데이터는 토큰의 계약과 ID를 기준으로 API에서 가져옵니다. 지원되는 모든 NFT는 [OpenSea](https://opensea.io/) Decentraland의 NFT 액자에도 표시할 수 있습니다. {% hint style="info" %} **💡 팁**: In the [Creator Hub의 씬 편집기](/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::::` 이 문자열에는 다음이 포함됩니다: * 그 *네트워크* 이 토큰이 존재하는 곳입니다. 아래의 지원되는 값 목록을 참조하세요. * 그 *계약 표준* 이 토큰이 기반으로 하는 것, 예를 들어 `erc721` * 그 *contract* 토큰의 계약(예: CryptoKitties 계약) * 그 *id* 표시할 특정 토큰의 예를 들면: `urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536` 위의 예시는 계약 주소가 `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`이고, 특정 식별자가 `558536`인 NFT를 가져옵니다. 해당 자산은 OpenSea에서 다음 주소로 찾을 수 있습니다: . 다음 값이 지원됩니다 *네트워크*: * `ethereum`: 이더리움 메인넷 * `matic`: 폴리곤 Matic * `klaytn`: 클레이튼 * `bsc`: BNB 체인 * `arbitrum`: 아비트럼 * `arbitrum_nova`: 아비트럼 노바 * `avalanche`: 아발란체 * `optimism`: 옵티미즘 * `solana`: 솔라나 * `base`: 베이스 * `blast`: 블라스트 * `zora`: 조라 {% hint style="warning" %} **📔 참고**: 이미지의 최대 크기는 **6 MB**입니다. 이미지가 더 크면 씬에 렌더링되지 않습니다. {% endhint %} ## 액자 사용자 지정하기 기본적으로 이미지는 보라색 배경을 가지며, 주변에는 맥동하는 발광 텍스처가 있는 액자가 표시됩니다. NFT와 씬의 스타일에 더 잘 맞도록 다음 속성을 설정할 수 있습니다: * `color`: 모델의 뒷면과, NFT 이미지에 투명도가 있는 경우 이미지의 배경을 결정합니다. * `스타일`: 미리 정해진 여러 옵션의 열거형에서 액자 모델을 선택합니다. 열거형의 값을 사용하세요 `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) 지원되는 전체 액자 스타일 목록은 다음과 같습니다: * `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) 다음 함수를 호출하여 이 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 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/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 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.