웹사이트 또는 앱에 NFT 포트폴리오를 추가하는 방법(2026)
Gizmolab UI를 사용하여 웹사이트나 앱에 NFT 포트폴리오를 추가하는 방법을 알아보세요. 이 가이드에서는 두 가지 지원 옵션, 즉 코드를 사용하여 NFT 포트폴리오 구성 요소를 설치하거나 사용자 정의 코드 없이 위젯으로 포함하는 옵션을 다룹니다.
NFT 포트폴리오를 통해 사용자는 지갑 주소가 소유한 NFTs을 제품 내에서 직접 볼 수 있습니다. 이는 일반적으로 사용자 프로필, 대시보드, 제한 액세스 및 커뮤니티 페이지에 사용됩니다.
이 가이드에서는 다음 내용을 다룹니다. 다음을 사용하여 NFT 포트폴리오를 추가하는 두 가지 지원 방법 Gizmolab UI:
- Gizmolab UI 구성 요소를 사용하여 코드와 함께 NFT 포트폴리오를 추가합니다.
- 사용자 정의 코드 없이 NFT 포트폴리오를 위젯으로 포함
두 옵션 모두 동일 Gizmolab UI NFT 포트폴리오이므로 필요한 제어 수준에 따라 선택할 수 있습니다.
NFT 포트폴리오에 포함되는 내용
는 Gizmolab UI NFT 포트폴리오 구성 요소는 기본적으로 다음 기능을 제공합니다.
- 지갑 주소가 소유한 NFTs 보기
- 연결된 지갑 및 수동 주소 입력 지원
- 페이지 크기가 12로 고정된 페이지 매김된 NFT 그리드
- 뼈대 로드, 빈 상태 및 오류 처리
- 메타데이터가 누락된 NFTs에 대한 이미지 대체
이 동작은 코드를 사용하여 구성 요소를 설치하든 위젯으로 포함하든 동일합니다.
옵션 1: 코드가 포함된 NFT 포트폴리오 추가
이 옵션은 React 또는 Next.js를 사용하여 사용자 정의 Web3 애플리케이션을 구축하는 팀을 위한 것입니다.
이 옵션을 사용해야 하는 경우
- 귀하는 전체 Web3 제품 또는 대시보드를 구축하고 있습니다.
- 레이아웃과 스타일을 완벽하게 제어하고 싶습니다.
- 사용자 정의 로직을 사용하여 NFT 포트폴리오를 확장할 계획입니다.
사용된 기술 스택
Gizmolab UI NFT 포트폴리오는 다음을 사용하여 구축됩니다.
- Dynamic 지갑 연결을 위해
- 와그미 useAccount() 지갑 상태에 대한
- 연금술 SDK 소유자가 NFTs을(를) 가져오기 위해
- TanStack 반응 쿼리 캐싱 및 페이지 매김용
- 비엠 주소 유효성 검사 및 체크섬 형식화용
- shadcn/ui UI 빌딩 블록을 위한 구성 요소
이 모든 로직은 이미 Gizmolab UI 구성 요소 내부에 연결되어 있습니다.
1단계: 종속성 설치
EVM 버전에 필요한 종속성을 설치합니다.
npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk2단계: 필수 UI 구성 요소 추가
포트폴리오에서 사용되는 shadcn UI 구성 요소를 설치합니다.
npx shadcn@latest 카드 입력 스켈레톤 버튼 추가3단계: 환경 변수 추가
만들기 .env 파일을 만들고 연금술 API 키를 추가하세요.
ALCHEMY_API_KEY=your_mainnet_key4단계: NFT 포트폴리오 구성 요소 렌더링
NFT 포트폴리오를 가져오고 렌더링합니다. Gizmolab UI.
렌더링되면 구성 요소는 자동으로 다음을 지원합니다.
- 연결된 지갑 모드
- 공개 주소 조회
- NFT 연금술을 이용한 페이지 매김
pageKey - 로드 중, 비어 있음, 오류 상태
추가 데이터 가져오기 논리가 필요하지 않습니다.
UX 동작이 기본적으로 포함됨
구성 요소는 이미 프로덕션 엣지 케이스를 처리합니다.
- 잘못된 지갑 주소는 가져오기 전에 거부됩니다.
- NFTs 이미지가 없으면 자리 표시자를 사용하세요.
- 페이지 매김은 페이지당 12NFTs로 제한됩니다.
- 사용자는 지갑과 주소 모드 사이를 전환할 수 있습니다.
옵션 2: NFT 포트폴리오를 Embed 위젯으로 추가
이 옵션은 NFT 포트폴리오를 추가하려는 팀을 위해 설계되었습니다. 애플리케이션 코드를 작성하지 않고.
이 옵션을 사용해야 하는 경우
- CMS, Webflow, Framer 또는 정적 사이트를 사용 중입니다.
- 빨리 출시하고 싶으신가요?
- 깊은 UI 사용자 정의가 필요하지 않습니다
Embed 위젯 작동 방식
Gizmolab UI는 iframe을 사용하여 삽입할 수 있는 호스팅된 NFT 포트폴리오 위젯을 제공합니다.
포함된 위젯에는 다음이 포함됩니다.
- 지갑 연결
- 수동 주소 입력
- NFT 페이지 매김
- 코드 기반 구성 요소와 동일한 UI 및 논리
예제 삽입 조각
<iframe
src="https://ui.gizmolab.io/embed/nft-portfolio"
width="100%"
height="720"
loading="lazy"
></iframe>이 위젯을 다음 항목에 포함할 수 있습니다.
- 마케팅 페이지
- 프로필 페이지
- 커뮤니티 포털
- 관리 대시보드
- 문서 사이트
위젯 구성 옵션
설정에 따라 포함은 다음을 지원할 수 있습니다.
- 기본 지갑 주소
- 읽기 전용 모드
- 높이 및 레이아웃 제약
- 테마 정렬
이를 통해 비기술 팀이 엔지니어링 개입 없이 NFT 포트폴리오를 출시할 수 있습니다.
코드 vs 삽입: 어느 것을 선택해야 할까요?
| 요구 사항 | 권장옵션 |
|---|---|
| 전체 Web3 애플리케이션 | 코드 |
| 마케팅 또는 CMS 페이지 | 삽입 |
| 사용자 정의 UI 또는 논리 | 코드 |
| 가장 빠른 출시 | 삽입 |
| SEO 중심 페이지 | 코드 |
포함 위젯으로 시작하고 나중에 사용자 경험을 변경하지 않고도 코드 기반 구성 요소로 마이그레이션할 수 있습니다.
SEO 노트
검색 가시성이 중요한 경우:
- 사용 코드 기반 옵션 다음과 같은 색인 생성 가능 페이지의 경우
/portfolio/[address] - 포트폴리오 위에 설명 콘텐츠를 추가하세요.
- 구성 요소 아래에 FAQ 콘텐츠를 포함합니다.
- 주로 마케팅 또는 인증된 보기에 삽입을 사용하세요.
자주 묻는 질문
지갑을 연결하지 않고도 NFT 포트폴리오를 볼 수 있나요?
삽입 위젯이 동일한 데이터 소스를 사용합니까?
NFT 포트폴리오 UI를 맞춤 설정할 수 있나요?
NFT 포트폴리오가 여러 EVM 체인을 지원할 수 있습니까?
결론
있다 지원되는 두 가지 방법 Gizmolab UI를 사용하여 NFT 포트폴리오를 추가하려면:
- 모든 권한을 제어하려면 코드가 포함된 NFT 포트폴리오 구성 요소를 설치하세요.
- 즉각적인 배포를 위해 NFT 포트폴리오 위젯을 포함하세요.
두 옵션 모두 동일한 프로덕션 등급 구현을 사용합니다.
맞춤형 설정, 멀티체인 지원 또는 완전히 통합된 Web3 제품이 필요한 경우, Gizmolab이(가) 당신을 위해 만들어 줄 수 있습니다.
요약하면
- React 구성 요소(설치 및 사용자 정의) 또는 포함 위젯(복사-붙여넣기)을 통해 NFT 포트폴리오를 추가할 수 있습니다.
- 두 옵션 모두 동일한 프로덕션 등급 Gizmolab UI 구현을 사용합니다.
- Gizmolab은 구성 요소를 제공하며 다중 체인 또는 맞춤형 제품 요구 사항에 맞게 확장할 수 있습니다.
맞춤형 NFT 포트폴리오 솔루션이 필요하십니까?
다중 체인 지원, 맞춤형 스타일 또는 완전히 통합된 Web3 대시보드가 필요한 경우 당사 팀이 이를 구축하는 데 도움을 드릴 수 있습니다.