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

H내 경험에 정적 NFT를 디스플레이하기 위한 NFT 이미지 컴포넌트 사용 방법에 대해 알아보겠습니다.

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

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

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

개요

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

제한

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

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

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

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

프레임 사용하기

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

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

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

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

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

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

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

NFT Image 컴포넌트는 Image Display 컴포넌트와 동시에 사용할 수 없습니다.

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

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

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

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

URL 연결하기

원하는 NFT의 URL을 추출하기 위해 오픈시로 이동합니다.

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

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

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

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

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

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

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

URL 주소 끝에 슬래시 (/)를 포함하지 않습니다. 슬래시가 있을 경우 에러가 발생합니다.

NFT 테스트하기

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

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

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

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

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

복스에딧을 이용해 커스텀 프레임을 제작하는 법을 자세히 알아보려면 NFT 호환 프레임 만들기 섹션을 참조하세요.