> For the complete documentation index, see [llms.txt](https://docs.sandbox.game/the-game-maker-academy_kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sandbox.game/the-game-maker-academy_kr/components/types-of-components/displaying-external-nfts.md).

# NFT Image Display(NFT 이미지 디스플레이)

### 내 경험에 NFT 디스플레이하기

![](/files/-MfB8NN5zmU8pwlS9nZ5)

내 경험 속에 NFT를 디스플레이하고 싶다면 이 튜토리얼 문서를 참고하세요!

어떤 애셋이 필요한지, 어떤 컴포넌트를 사용할지, 어디에서 NFT를 연결할지, 제한 사항은 무엇일지 차근차근 알아보겠습니다.

{% embed url="<https://www.youtube.com/watch?v=okf-a1xdSDA&list=PL_AqeWVYruhqQ6bL09VQqEZ3KcWMYyOei&index=2>" %}

### 개요

프레임 호환 애셋에 NFT 이미지 컴포넌트를 추가하고 오픈시 (OpenSea)에서 사용하고 싶은 NFT의 URL을 확인하여 컴포넌트의 URL 섹션에 해당 URL을 붙여넣기합니다. 정확한 URL인지 확인하고 Play (재생)을 클릭하여 어떻게 보이는지 테스트합니다.

### 제한

NFT Image (NFT 이미지) 컴포넌트를 이용하여 오브젝트에 NFT의 URL에 연결할 수 있지만 몇 가지 주의해야 할 점이 있습니다.

현재는 **오픈시** 마켓플레이스만 지원됩니다.

컴포넌트는 정적인 이미지만 나타낼 수 있으며 **영상이나 gif 포맷은 지원하지 않습니다**.

{% hint style="info" %}
이 과정은 NFT 애셋 자체를 불러오는 것이 아니라 컴포넌트가 오픈시로부터 NFT의 하이퍼링크를 생성하는 것입니다.
{% endhint %}

### 프레임 사용하기

시작하려면 프레임이 있는 애셋이 필요하며 이를 통해 NFT 표시될 오브젝트의 위치를 정의할 수 있습니다.

복스에딧의 프레임 툴을 이용해 나만의 프레임을 생성하거나 마켓플레이스에서 판매 중인 프레임을 구매할 수 있습니다.

이 튜토리얼에서는 라이브러리에 포함된 ***Billboard Frame (광고판 프레임)***&#xC744; 이용하겠습니다.

![](/files/-Med5_iz_fJY5ngYrTMi)

### 'NFT Image' 컴포넌트 이용하기

우선, 장면에서 프레임 호환 애셋을 *Billboard Frame*과 같은 프레임에 배치합니다.

애셋이 장면에 보이면 클릭하여 **속성 패널을 오픈**합니다. 속성 패널은 화면의 우측에 나타납니다.

**스크롤을 내려 Behaviour 탭**을 확인하면 Components 섹션을 찾을 수 있습니다.

![](/files/-MecxF5JCAuknG7JenZx)

{% hint style="info" %}
NFT Image 컴포넌트는 Image Display 컴포넌트와 동시에 사용할 수 없습니다.
{% endhint %}

Image Display 컴포넌트 프리셋이 포함된 오브젝트를 사용하고 있다면 **'X'를 클릭하여 해당 컴포넌트를 삭제**합니다.

![](/files/-Mecmm-RRsZmEhLCjVfg)

기존 컴포넌트가 삭제되면 **Add Component**를 클릭합니다.

![](/files/-Mecl1596nzCVZ0ZWMGf)

그러면 컴포넌트 라이브러리가 오픈되어 **NFT Image**를 선택할 수 있습니다.

![](/files/-MecjC5RGxeCppTlN61e)

이제 NFT Image 컴포넌트가 연결될 URL을 설정해야 합니다.

### URL 연결하기

원하는 NFT의 URL을 추출하기 위해 [오픈시](https://opensea.io/)로 이동합니다.

적합한 NFT를 찾았다면 클릭하여 해당 NFT 페이지를 오픈합니다.

![](/files/-Mecq7r9e9gEUuw076lt)

페이지가 로드되면 **Share (공유하기) 아이콘을 클릭**하여 **Copy Link (링크 복사)를 선택**합니다.

![](/files/-MecyWiNAaaUrpcvkr1_)

게임 메이커로 돌아와 NFT Image 컴포넌트 하단 ***Asset URL*****&#x20;옆에 위치한 박스**를 클릭합니다.

![](/files/-MecsWJ0s2c_oPaT-LlN)

그러면 NFT IMAGE라는 패널이 열리며 이곳에 **복사한 링크를 붙여넣기**할 수 있습니다.

![](/files/-MecuAsFML9Xfh39wzOw)

URL을 붙여넣은 후 **Validate를 클릭**하여 지원되는 형식의 올바른 URL인지 확인합니다. 링크가 올바르지 않거나 지원되지 않는 형식일 경우 에러 메시지 창이 뜨게 됩니다.

URL이 작동하면 하단의 박스에 **NFT의 모습이 미리보기**로 나타납니다.

![](/files/-MeczZi0lQ7jqzVlnhge)

거의 완료되었습니다. **Continue를 클릭**하고 NFT가 실제 게임 속에서 어떻게 보이는지 확인해 보세요!

{% hint style="info" %}
URL 주소 끝에 슬래시 (/)를 포함하지 않습니다. 슬래시가 있을 경우 에러가 발생합니다.
{% endhint %}

### NFT 테스트하기

게임 메이커의 **편집 모드**에서는 새로 추가한 NFT가 **표시되지 않습니다**.

![](/files/-Med2WFfMQ5gYyzTe_Qd)

어떻게 보일지 테스트하려면 **Play를 클릭**하거나 **Tab 키를 눌러** 플레이 모드에서 확인합니다.

![](/files/-Med0cP_JshAzXx06wnz)

원하는 대로 표시되지 않을 경우 **Scale Mode (크기 조정 모드)**&#xB97C; 이용하여 Original (원본), Resize (크기 조정), Fit to Width (너비에 맞춤), Fit to Height (높이에 맞춤), 또는 Repeat (반복) 중에 원하는 옵션을 선택할 수 있습니다.

![](/files/-Med3Rp72K7CZPb_DoHH)

만족스러운 결과를 얻었다면, **이제 완료되었습니다!**

더 샌드박스 메타버스에서 URL을 이용하여 나의 첫 NFT 디스플레이를 설정하는 법을 배워보았습니다.

{% hint style="info" %}
복스에딧을 이용해 **커스텀 프레임을 제작**하는 법을 자세히 알아보려면 [NFT 호환 프레임 만들기](https://sandboxgame.gitbook.io/the-game-maker-academy_kr/QXVjiJZSETueiVsHSiOX/tutorials-1/beginner-tutorials/creating-an-nft-compatible-frame) 섹션을 참조하세요.
{% endhint %}