NFT를 활용하여 웹사이트의 잠재력 해방하기
Token Negotiator(Brand Connect)는 Smart Token Labs가 TokenScript 프레임워크를 기반으로 개발한 새로운 기술형 제품입니다. 이는 완전히 오픈소스인 NPM 패키지로서, 어떤 웹사이트든 블록체인 내외의 토큰 어테스테이션(attestation, 검증 증명)을 구현할 수 있도록 해줍니다.
링크: https://www.npmjs.com/package/@tokenscript/token-negotiator
본문은 Brand Connect를 웹사이트에 통합하는 방법을 보여주며, 이를 통해 첫 번째 토큰화된 애플리케이션 네트워크(TAPP — 우리 내부에서 사용하는 용어)를 구축하는 과정을 안내합니다. 이 과정에서는 널리 사용되는 라이브러리인 React를 활용하여 다양한 네트워크에서 토큰을 연결하고 사용자 경험과 조작을 어떻게 구현할 수 있는지 설명합니다.
본 문서로부터 최대한의 가치를 얻기 위해, 먼저 Q&A 형식으로 기본 개념과 사용될 전문 용어들을 소개하겠습니다.
토큰이란 무엇인가요?
본문에서 언급하는 모든 토큰들은 NFT(블록체인 상에서 발행된 비동질화 토큰) 또는 암호 기술로 생성되어 위조 불가능한 토큰들을 의미합니다(이 자산은 주로 장치 메모리, 이메일 또는 웹 스토리지 프로토콜에 저장됨).
이러한 유형의 토큰들은 자동차 열쇠, 콘서트 티켓, 예술품 또는 본인 신원(DID) 등 디지털 형식의 어떤 것이든 대표할 수 있습니다. 그 외에도 발견되지 않은 많은 가능성이 존재합니다.
토큰화된 네트워크란 무엇인가요?
토큰화된 네트워크란 토큰을 중심 축으로 한 사용자 경험의 혁신적인 아이디어입니다.
어테스테이션(attestation, 검증 증명)이란 무엇인가요?
어테스테이션이란 어떤 사실에 대한 증거나 입증을 말합니다. 예를 들어 공항에서 비행기에 탑승하기 위해 유효한 여권과 항공권을 제시해야 하는 것처럼 말입니다. 동일한 개념이 토큰화된 네트워크에도 적용되며, 토큰 소유권은 어테스테이션 후 후속 조작을 수행할 수 있게 됩니다.
왜 토큰을 사용해야 하나요?
토큰은 특정 시나리오나 중앙화 서비스의 제약을 받지 않습니다.
토큰은 어디서든 인증되고 사용될 수 있습니다.
토큰은 분산형 보안 및 개인정보 유형을 제공합니다.
중앙화 서비스에 비해 토큰은 사용자에게 더 많은 통제권을 부여합니다.
토큰을 채택함으로써 기존보다 마찰이 적고 사용자가 필요한 서비스에 쉽게 접근할 수 있는 새로운 형태의 인터넷이 창출될 수 있습니다.
대안은 없나요?
기존의 웹 서비스(Web 2.0이라 불림)는 토큰으로 해결 가능한 다양한 방법을 제공하지만(경험의 일정한 진입 장벽을 만들고 여러 분야에서 사용 가능한 증명을 생성), 본문에서 다룰 내용은 오늘날 우리가 알고 사용하는 웹보다 더 많은 가능성과 응용 능력을 지닌 새로운 패러다임을 열어줄 것입니다.
토큰 사용(또는 미사용)의 리스크는 무엇인가요?
토큰화된 네트워크는 비교적 새로운 개념이며, 그 잠재력과 이러한 기술 사용의 리스크를 이해하려면 학습하고 만들어야 할 것이 많습니다.
지금까지의 관찰 결과, 토큰 사용은 자신의 인증 정보를 안전하게 유지하려는 사용자와 적절한 솔루션을 요구하는 기업 모두에게 더 나은 리스크 관리를 제공한다고 판단됩니다.
장점은 무엇인가요?
기업은 NFT 컬렉션을 통해 이전에는 발견하거나 접촉할 수 없었던 새로운 고객층에 도달할 수 있습니다.
사용자는 여러 애플리케이션에서 동일한 토큰을 사용할 수 있어, 웹서비스에 토큰 권한을 부여하는 과정에서 발생하는 사용자 마찰이 줄어듭니다.
개발자는 토큰 소유권이 새로운 경험을 이끄는 기본 구성 요소가 되는 새로운 유형의 애플리케이션을 구축할 수 있습니다.
좋습니다, 이제 본격적으로 시작해봅시다!
먼저 아래 명령어에 따라 새로운 React 앱을 설치하세요:
npx create-react-app my-app
설치가 완료되면 디렉터리를 변경하세요:
cd my-app
그 다음:
npm run start
이제 다음과 같은 화면이 표시되어야 합니다:
다음으로 아래 명령어를 사용하여 Token Negotiator (Brand Connector)를 설치합니다.
npm i @tokenscript/token-negotiator
아래 애플리케이션 디렉터리에 표시된 것처럼 "tokenContextProvider.js" 파일을 생성합니다.
설치가 완료되면, 페이지에 일부 토큰을 로드할 수 있습니다. 다음으로 디렉터리 내에 "tokenContextProvider.js"라는 이름의 스크립트를 생성하고, 아래 애플리케이션 디렉터리 구조를 따르세요:
이 파일에서는 React의 ContextProvider API를 통해 라이브러리를 설정하여 props를 통해 컴포넌트에 토큰을 제공합니다.
새로 생성한 파일에 다음 내용을 추가하세요:
죄송합니다, 코드는 원문 링크를 참조하세요.
'0x264...'와 'rinkeby' 체인을 본인이 보유한 NFT의 스마트 계약 주소와 위치에 맞게 변경하세요. NFT를 보유하지 않았다면 OpenSea처럼 코드가 있거나 없는 방법으로 테스트넷에서 민팅할 수 있습니다.
issuers: [
{
collectionID: "demo-tokens",
contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09',
chain: 'rinkeby'
}
]
NFT를 보유하고 Token Negotiator 설정을 완료한 후, 라이브러리가 사용자의 토큰을 읽을 수 있도록 네 가지 변경 사항을 추가해야 합니다.
다음으로 "App.js"에 아래 변경 사항을 포함하세요. 라이브러리를 연결하고 "overlay-tn" 클래스 엘리먼트 내에 표시성 오버레이 컴포넌트를 삽입합니다.
그 후 판매 제품 목록을 표시할 새로운 컴포넌트인 "StoreFront.js"를 만드세요.
죄송합니다, 코드는 원문 링크를 참조하세요.
마지막으로 각 상점 제품의 데이터를 표시할 "StoreItem.js"라는 새 컴포넌트를 만드세요.
설정 단계: Create-React-App / webpack 5 기준 변경사항 반영, 또는 이전에 준비된 완성본으로 전환.
Webpack 5 버전부터는 Node.js 코어 모듈이 더 이상 기본 제공되지 않으며, 개발자가 필요에 따라 직접 가져와야 합니다. 이는 Create-React-App을 포함한 많은 프로젝트에 영향을 미칩니다. 다행히 다음 해결책이 있습니다:
https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5?ref=hackernoon.com
또는 이 단계를 생략하고 싶다면 다음 링크에서 완성된 예제 코드를 확인하세요:
https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website?ref=hackernoon.com
좋습니다, 이제 설정이 완료되었으므로 애플리케이션 테스트를 시작할 수 있습니다. 서비스를 실행하면 다음과 같은 화면이 나타납니다:
프로젝트 디렉터리에서 명령줄에서 다음을 실행하세요:
npm run start
1. Token Negotiator 컴포넌트의 FAB 버튼을 클릭하면 토큰 사용에 필요한 모든 설정 세부 정보가 표시됩니다.
2. 다음으로 최종 사용자는 자신의 지갑을 연결해야 하며, 이곳에서 토큰을 찾을 수 있습니다.
3. 사용자는 자신의 토큰 컬렉션 중 어느 것을 웹사이트에 로드할지 선택할 수 있습니다. 본 예제에서는 단일 토큰 컬렉션만 사용했지만, 실제 세계에서는 여러 다른 기능을 포함할 수 있으며, 사용자의 웹 경험에서 토큰은 직접적으로 다양한 기능을 개발할 수 있습니다.
4. 이제 최종 사용자는 자신의 토큰을 웹사이트에 로드하여 할인 혜택을 누릴 수 있습니다. 이 기술은 특정 토큰 시리즈 소지자에게 특별 서비스를 제공하는 웹사이트 기업에 활용될 수 있습니다.
요약하면
본문에서는 React JS 프로젝트에 Token Negotiator(Brand Connect)를 설치하는 방법을 보여주었으며, 이를 통해 특정 NFT 컬렉션 소유자가 할인이나 기타 전용 서비스를 활성화할 수 있게 되었습니다.
본 글이 여러분에게 영감을 주기를 바라며, TokenScript 기술 프레임워크를 사용함으로써 토큰이 무한한 가능성을 가질 수 있기를 바랍니다.
"TokenScript는 Web3의 미래에서 토큰의 조합성(composability)을 위한 새로운 표준을 제공할 것이며, 토큰은 웹페이지처럼 어디에나 존재하며, 소유권, 신원, 상호작용의 주요 객체가 될 것입니다." -- CTO Weiwu
읽어주셔서 감사합니다
저희의 비전은 모두를 위한 더 나은 네트워크를 구축하기 위한 오픈소스 기술을 개발하는 것입니다.
아래에 귀하의 피드백이나 생각을 자유롭게 공유해 주세요. 곧 체인 외부 토큰 사용에 관한 또 다른 글을 발표할 예정이며, 이 토큰들은 암호 기술로 설계되었지만 블록체인 학습 없이도 사용할 수 있습니다.
관련 링크:
TechFlow 공식 커뮤니티에 오신 것을 환영합니다
Telegram 구독 그룹:https://t.me/TechFlowDaily
트위터 공식 계정:https://x.com/TechFlowPost
트위터 영어 계정:https://x.com/BlockFlow_News
Smart Token Labs 中文爱好者
