> 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/nft-display-information.md).

# NFT Display Information(NFT 디스플레이 정보)

NFT 디스플레이 정보 컴포넌트를 사용하면 경험 속에서 바로 **NFT 컬렉션에 대한 정보를 공유**할 수 있으며 해당 NFT가 있는 **마켓플레이스를 링크**할 수 있습니다.

{% embed url="<https://youtu.be/FASJGaO8OQ0>" %}

내 경험에서 컬렉션을 공유하거나 디스플레이된 NFT의 에디션을 구입할 수 있는 마켓플레이스로 안내하여 **방문자들을 내 경험에 깊게 참여**시킬 수 있는 좋은 방법입니다.

### 무엇이 표시되나요?

**NFT 디스플레이 정보**는 **애셋**에서 바로 작동하여 세부 정보를 표시하고 **NFT Image Display 컴포넌트**를 이용하는 오브젝트에서도 마찬가지입니다. 두 가지 경우 모두, 유저는 아래 정보를 포함한 팝업창을 직접적 또는 간접적으로 트리거할 수 있습니다.

![](/files/-MlI545dqhm8rhPJudZT)

1. NFT 이름
2.

```
NFT 썸네일
```

3. 외부 NFT인지 더 샌드박스 NFT인지 표시
4. 크리에이터
5. 소유자
6. NFT 설명
7. 마켓플레이스에서 NFT 보기 버튼

{% hint style="info" %}

마켓플레이스 (오픈시 또는 더 샌드박스)는 NFT 유형에 따라 다릅니다. 오픈시에 연결된 경우 유저는 경험에서 오픈시 목록으로 바로 이동할 수 있습니다.&#x20;
{% endhint %}

NFT 표시 정보 컴포넌트는 간단하지만 강력한 도구이며 **두 가지 파라미터**만 수정하면 됩니다.

![](/files/-MlI6YfJhMhqafXl7jQk)

**Message Required** - 정보 팝업창을 트리거

**Details Target -** 어떤 애셋 정보가 표시될지 식별

그럼 이제 경험에서 이 컴포넌트를 어떻게 설정할지 알아봅시다.

### 메시지 필요&#xD;

Message Required 파라미터는 **원하는 어떤 것**이든 설정할 수 있지만 **몇 가지 주의해야 할 점**이 있습니다.

#### 직접적인 상호작용&#xD;

유저들이 **애셋**이나 프레임 안의 **NFT 이미지**를 **바로 클릭**할 수 있게 하려면 **Message Required에 'Interact'**&#xB97C; 사용합니다. 이 메시지는 아바타가 E 키를 누를 때 전송되는 메시지와 연결되어 있습니다.

![](/files/-MlI7rs9eEuRgHfqR5Hj)

해당 메시지를 이용하면 쉽고 빠르게 유저가 오브젝트에 **가까이 접근**했을 때 디스플레이를 트리거할 수 있습니다.

{% hint style="info" %}
**Indicator** 컴포넌트를 추가하고 **Display Interaction**을 True로 설정하여 플레이어가 NFT와 상호작용하는 방법을 알 수 있도록 합니다.
{% endhint %}

#### &#xD;원거리에서 표시하기&#xD;

디스플레이 정보를 트리거하도록 **별도의 오브젝트를 설정**할 수도 있습니다. 이는 아바타가 직접적으로 **닿을 수 없는 거리**에 있는 오브젝트나 프레임에 NFT 디스플레이 정보 컴포넌트가 포함되어 있을 경우 유용합니다.

이를 위해 **컴포넌트가 수신하는 메시지를 설정**해야 합니다.

우선, 'Message required' 옆의 박스를 클릭합니다. 이전 메시지의 내용이 담긴 드롭다운이 나타나며 이 중 하나를 선택하거나 별도의 **새로운 메시지를 직접 입력**할 수 있습니다.

![](/files/-MlI9u8H4YGKyuhb2k9x)

새로운 메시지를 입력했다면 **'ADD \[메시지 이름]'을 클릭**합니다. 이 메시지는 이제 NFT 데이터 표시를 트리거하는 데 필요한 메시지가 됩니다.

#### 메시지 송출하기&#xD;

NFT Details Display를 원거리에서 트리거하려면 NFT Display Information 컴포넌트에 메시지를 보낼 수 있는 **비헤이비어** 또는 **컴포넌트**가 포함된 **오브젝트를 설정**해야 합니다.

메시지를 전송하는 무엇이든 사용할 수 있으므로, NFT와 상호작용하는 창의적인 방법을 생각해 보세요. 이 경우에는 간단히 오브젝트에 **버튼 행동**을 추가했습니다.

{% hint style="info" %}
원하는 어떤 메시지든 사용할 수 있지만, 각 디스플레이 트리거에 **고유한 메시지**를 작성하는 것이 좋습니다. 예를 들어 갤러리를 만든다고 가정하고, 잘못된 NFT의 디스플레이 정보를 트리거하지 않으려면 고유한 메시지가 필요합니다.
{% endhint %}

여기에서는 **표지판** 오브젝트를 이용해 **Button** 행동을 추가하고 NFT Display Information 컴포넌트가 받을 메시지를 설정했습니다.

![](/files/-MlID3P-qhY-_Ti-EhBg)

Button 행동에서는 기본으로 **'Interact'**&#xAC00; **트리거** (아바타가 E 키를 누를 경우)로 사용되기 때문에, 전송된 메시지가 목표 NFT의 'Message Required'와 일치하는지 확인해야 합니다. 이제 거의 완료되었습니다.

### &#xD;목표 세부화&#xD;

이제 메시지 설정을 마쳤으니 **NFT Image Display 컴포넌트가 포함된 오브젝트로 돌아가** 트리거되었을 때 올바른 정보를 호출하는지 확인합니다.

![](/files/-MlIGGibgT8bpqIOT_iv)

#### &#xD;NFT 이미지&#xD;

프레임 안에 디스플레이된 NFT 이미지의 세부 사항을 보여주고 싶다면, **Details Target** 옆 드롭다운에서 **NFTImage**를 선택합니다.

{% hint style="info" %}
NFT Image Display 컴포넌트는 **프레임 안의 오브젝트**에서만 작동합니다.
{% endhint %}

유저가 '**View in MarketPlace**'를 클릭하면 **오픈시 (OpenSea)**&#xB85C; 이동합니다.

![](/files/-MlIHUN8S2EcB9zNhue7)

#### 애셋&#xD;

경험 속 애셋의 정보를 보여주고 싶다면, **Details Target** 옆 드롭다운에서 **Asset**을 선택합니다.

유저가 '**View in MarketPlace**'를 클릭하면 **더 샌드박스 마켓플레이스**로 이동합니다.

![](/files/-MlIIypmbqVw7Gu7B7zu)

모두 완료되었습니다. 이제 애셋이나 연결된 NFT 이미지에 직접 혹은 간접적으로 상호작용하여 **NFT 정보를 표시**하고 **마켓플레이스에서 확인**할 수 있도록 만들 수 있습니다!
