신규: Helius가 Light Protocol을 인수했습니다
Solana 토큰 게이팅 - Solana 모바일 튜토리얼
블로그/개발

Solana 토큰 게이팅 - Solana 모바일 튜토리얼

통합 엔지니어X의 0xSolanaGirl
읽는 데 8분
목차

소개

2023년 초, Solana Mobile은 블록체인 기반 스마트폰을 출시했습니다. 현재 15,000대 이상 활성화된 Solana Saga는 지갑 경험에 통합된 칩 수준의 시드 볼트로 온체인 보안을 강화하는 맞춤형 Android 기기입니다. 하지만 모바일 지갑 경험은 Saga만의 기능이 아닙니다. 동일한 모바일 지갑 어댑터가 표준 흐름을 제공해 크로스 플랫폼으로 출시하는 개발자의 복잡성을 줄여줍니다. 그렇다면 Saga만의 차별점은 무엇일까요?

Saga 소유자가 되는 첫 단계로 사용자는 소울바운드 NFT 토큰인 Saga Genesis Token을 민팅합니다. 이 토큰 컬렉션은 Solana Saga 사용자의 기본 주소를 정확히 파악할 수 있게 하며, 커뮤니티를 위한 다양한 활성화 활동을 지원합니다. Saga Genesis Token 덕분에 커뮤니티 대상 에어드롭이 그 어느 때보다 쉬워졌습니다. 하지만 사용자의 지갑이 중고품 가게처럼 빠르게 가득 차면서 Saga 보유자 커뮤니티의 참여를 이끌 맞춤형 솔루션이 필요해지고 있습니다. 한 가지 방법은 사용자에게 개인화된 독점 경험을 제공하는 토큰 게이팅 dApp을 개발하는 것입니다. 

토큰 게이팅은 연결된 지갑의 토큰 소유 여부에 따라 클라이언트 측 정보를 표시하는 방식입니다. 개인의 정보 접근 가능 여부를 결정하며, Saga DAO 같은 커뮤니티에 독점 접근 권한을 제공하는 데 사용할 수 있습니다. 이 튜토리얼에서는 Saga Genesis Token을 게이팅 컬렉션의 예로 사용해 Helius DAS API와 React Native로 Solana 토큰 게이팅 dApp을 구축합니다. 토큰 주소와 조건을 변경하면 원하는 토큰 그룹에 게이팅을 적용하도록 튜토리얼과 데모를 수정할 수 있습니다. GitHub 저장소는 여기에서 확인할 수 있습니다: @helius_labs/saga-token-gating-tutorial.

환경 설정

이 튜토리얼에서는 USB-C 케이블로 Solana Saga에 연결된 PC를 사용합니다. Saga가 없다면 Android 에뮬레이터나 Android 기기로도 충분합니다. 개발자 모드가 활성화된 Saga에서 테스트하고 PC에 Android SDK 도구와 최신 버전의 NodeJS가 설치되어 있다면 이 단계는 건너뛸 수 있습니다.

모바일 개발용으로 Saga를 구성하려면 설정으로 이동해 **빌드 번호.**를 검색하세요. ‘이제 개발자가 되셨습니다!’ 팝업이 표시될 때까지 해당 옵션을 7번 탭합니다. 개발자 옵션을 검색해 활성화한 다음, 같은 드롭다운에서 USB 디버깅을 활성화하세요.

컴퓨터에 NodeJS가 설치되어 있고 v20.9.0으로 업그레이드되었는지 확인하세요. Android SDK 도구를 설치하고 ANDROID_HOME 변수를 설정합니다.

Git Bash를 사용해 Helius GitHub에서 데모 저장소를 복제하고 코드 편집기에서 여세요. Git Bash 명령 프롬프트에서 app 폴더로 이동한 후 yarn을 실행해 앱을 설치합니다. 기기가 연결되어 있거나 Android 에뮬레이터가 실행 중인 상태에서 다음 명령어를 입력해 앱을 실행하세요.

코드
yarn react-native run-android

Solana Saga 토큰 게이팅

토큰 게이팅 워크플로의 전체 흐름은 다음과 같습니다.

  1. 사용자가 지갑으로 세션을 승인하고 공개 키를 dApp에 제공합니다.
  2. dApp이 searchAssets DAS API 엔드포인트에서 데이터를 가져옵니다.
  3. 응답의 JSON을 구조 분해해 결과에 접근합니다.
  4. 결과를 검증하고 토큰 소유 여부를 확인합니다.
  5. 검증 상태를 설정하고 이에 따라 클라이언트를 렌더링합니다.

이제 코드를 살펴보겠습니다. 먼저 사용자와 사용자의 Saga Genesis Token 소유 여부에 관한 정보를 받도록 Helius DAS API 요청을 구성합니다.

Saga Genesis Token 정보를 받기 위해 SagaGenesisToken 변수를 컬렉션의 토큰 주소로 설정합니다. 다른 컬렉션에 토큰 게이팅을 적용하려면 이 변수를 해당 토큰 주소로 교체하세요.

요청에는 Helius API 키가 필요하며, 튜토리얼에서는 의도적으로 비워 두었습니다. 키를 안전하게 보호하는 가장 좋은 방법은 프록시 서버를 사용해 요청을 전달하는 것입니다. @helius_labs/helius_rpc_proxy 저장소에는 클릭 한 번으로 배포할 수 있는 Cloudflare Worker가 포함되어 있습니다. 이를 RPC URL로 사용하면 API 키를 숨길 수 있습니다.

코드
import { PublicKey } from "@solana/web3.js";

export default async function findSagaGenesisToken(address: PublicKey) {
  // Replace this with the token address you want to gate for
  const SagaGenesisToken = '46pcSL5gmjBrPqGKFaLbbCmR6iVuLJbnQy13hAe7s6CC';

  // Populate your Helius API key
  const HELIUS_APIKEY = '';
  const url = `https://mainnet.helius-rpc.com/?api-key=${HELIUS_APIKEY}`

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      id: 'my-id',
      method: 'searchAssets',
      params: {
        ownerAddress: address.toString(),
        grouping: ["collection", SagaGenesisToken],
        page: 1,
        limit: 10
      },
    }),
  });

  const { result } = await response.json();
  return (result.items)
};

findSagaGenesisToken 함수는 사용자의 지갑 주소를 인수로 받아 Helius RPC URL로 전송되는 POST 요청의 매개변수에 사용합니다.

이 요청은 searchAssets 메서드를 사용해 ownerAddress이 소유하고 특정 collection별로 그룹화된 자산을 조회합니다. 이후 API 응답을 JSON으로 구성하고 구조 분해해 결과에 접근합니다.

다음은 Saga Genesis Token 소유를 보여주는 응답입니다.

코드
{
   "items":[
      {
         "authorities":[Array],
         "burnt":false,
         "compression":[Object],
         "content":[Object],
         "creators":[Array],
         "grouping":[Array],
         "id":[Token_Address],
         "interface":"V1_NFT",
         "mutable":true,
         "ownership":[Object],
         "royalty":[Object],
         "supply":[Object]
      }
   ],
   "limit":10,
   "page":1,
   "total":1
}

다음은 Saga Genesis Token이 없는 지갑의 응답입니다.

코드
{
   "items":[],
   "limit":10,
   "page":1,
   "total":0
}

이 함수를 사용하려면 screens 폴더로 이동해 MainScreen.tsx을 찾으세요. 앱은 이 함수형 컴포넌트를 메인 화면으로 렌더링합니다. 여기에 함수 같은 추가 컴포넌트를 가져와 사용자 인터페이스에서 사용할 수 있습니다.

토큰 게이팅 함수를 호출하려면 콜백 함수 안에 findSagaGenesisToken 함수를 가져와 배치하세요. 여기서는 사용자가 연결 버튼을 누를 때 콜백 함수가 호출되므로 함수 이름을 handleConnectPress()으로 지정했습니다.

코드
// Checks if the user's wallet has a Saga Genesis Token
const handleConnectPress = useCallback(async () => {
  return await transact(async (wallet: Web3MobileWallet) => {
    const authorizationResult = await authorizeSession(wallet);

    const message = "Confirm that you own this wallet.";
    const messageBuffer = new Uint8Array(
      message.split("").map((c) => c.charCodeAt(0))
    );

    const signedMessages = await wallet.signMessages({
      addresses: [authorizationResult.address],
      payloads: [messageBuffer],
    });

    const verified = sign.detached.verify(
      messageBuffer,
      signedMessages[0],
      authorizationResult.publicKey.toBytes()
    );

    if (verified) {
      const result = await findSagaGenesisToken(authorizationResult.publicKey);

      // Checks that user has exactly 1 Saga Genesis Token
      if (result.length === 1) {
        setVerified(true);
      } else {
        setVerified(false);
      }
    } else {
      setVerified(false);
    }
  });
}, [authorizeSession]);

비동기 콜백 함수 안에서 @solana-mobile/mobile-wallet-adapter의 transact 함수를 호출해 Web3MobileWallet 객체를 노출합니다. 이 객체를 사용해 세션을 승인할 수 있습니다.

프로토콜은 사용 가능한 지갑으로 이동하고 기본값으로 Phantom을 선택해 세션을 시작합니다. 사용자는 앱으로 돌아오기 전에 지갑 인터페이스에서 애플리케이션을 승인해야 합니다. 또한 메시지에 서명해 지갑 소유권을 검증해야 합니다.

이 튜토리얼에서는 서버 측에서 검증합니다. 하지만 프로덕션 앱에서는 계정 소유권의 적법성을 보장하기 위해 API를 통해 백엔드에서 메시지를 검증해야 합니다.

사용자의 지갑이 승인되면 승인 결과를 구조 분해해 공개 키를 가져올 수 있습니다. 이제 사용자의 publicKey로 Saga Genesis Token 소유 여부를 검색할 수 있습니다.

사용자의 공개 키로 findSagaGenesisToken을 호출하면 DAS API에 요청을 전송하고 배열에서 찾은 토큰의 결과를 반환합니다. 사용자가 Saga Genesis Token을 정확히 하나 보유했다면 검증 상태를 true로 설정합니다. 그렇지 않으면 검증 상태를 false로 설정합니다. 

검증 상태에 따라 화면과 컴포넌트를 조건부로 렌더링합니다. 이 튜토리얼에서는 연결 대기, 검증 완료, 검증 실패 상태를 사용합니다.

Mainscreen.tsx에서 조건부 렌더링 로직을 확인하세요. 검증 상태에 따라 정보를 표시하는 방법을 단순화해 보여줍니다. GitHub 저장소를 수정하거나 참고해 더 세밀하게 맞춤 설정할 수 있습니다. 구현 예시로는 토큰 게이팅을 React Native 내비게이션에 연결해 조건에 따라 화면을 전환하는 방법이 있습니다.

토큰 게이팅 활용 사례

토큰 게이팅은 Web3와 함께 등장한 새로운 개념으로, 자산 소유권에 따라 콘텐츠 접근 권한을 부여합니다. 이 로직은 보안, 소비재, 출판, 유통 등 다양한 분야에 적용할 수 있습니다.

Discord 보안 도구는 커뮤니티에 토큰 게이팅을 적용해 토큰 소유 여부와 보유 수량에 따라 제한된 접근 권한을 제공합니다.

소비재와 서비스 분야에서는 판매자가 토큰 게이팅을 기반으로 커뮤니티에 쿠폰, 할인, 구매 기회를 제공할 수 있습니다.

이는 자산 소유의 활용 가치를 높이고 디지털 자산을 실제 기능에 사용하는 더 구체적인 방법을 제공합니다.

자산 소유권은 소유를 수익화하고 맞춤형 경험을 제공함으로써 미디어와 콘텐츠 분야의 가능성을 확장합니다.

토큰 게이팅으로 구축할 수 있는 몇 가지 예시는 다음과 같습니다.

  • 독점 추천 코드와 쿠폰
  • Substack 스타일 블로그
  • 에어드롭 청구 
  • 비공개 대시보드 
  • 게임화된 스토리텔링 dApp
  • 비밀 그룹 채팅 
  • 온체인 설문조사
  • 맞춤형 게임 혜택과 이벤트

DAS API를 활용한 토큰 게이팅의 장점은 어떤 토큰이든 사용할 수 있다는 것입니다. DeFi 앱은 사용자가 접근 권한을 얻으려면 최소 수량의 Solana를 보유하도록 요구할 수 있습니다. NFT 그룹 채팅에서 구성원이 최소 수량의 토큰을 보유했는지 검증하도록 요구하는 것과 같습니다. 동일한 DAS API 로직을 사용해 SPL 토큰, NFT, SFT, SBT, cNFT를 기준으로 dApp 접근을 제한할 수 있습니다.

결론

이 튜토리얼에서는 DAS API를 사용해 React Native로 구축한 dApp에 토큰 게이팅을 적용하는 방법을 간단히 살펴봤습니다. 이 로직은 모든 컬렉션이나 토큰에 적용할 수 있으며 특정 사용 사례에 맞게 조정할 수 있습니다. 토큰 게이팅 경험은 커뮤니티에 독점성과 가치를 제공합니다. Saga Genesis Token은 강력한 커뮤니티를 대상으로 한 에어드롭을 지원하고 크리에이터와 사용자 모두에게 다양한 기회를 열어줍니다. Web3는 디지털 상품의 자체 수탁 소유권을 도입했습니다. 이에 따라 자산 소유권으로 연결된 커뮤니티가 등장하고 있습니다. Solana Saga가 물리적 기술과 디지털 기술을 결합해 Solana 네이티브 경험을 제공하는 만큼, 그 경험을 강화하고 보상하는 애플리케이션을 구축해야 합니다. 토큰 게이팅은 수익을 넘어 새로운 인터넷 시대에 디지털 자산 소유권의 활용을 촉진합니다.

Saga 모바일 dApp 개발 콘텐츠를 더 알아보고 싶으신가요? 15,000명 이상의 Saga 소유자가 참여하는 Saga DAO에 가입해 최신 dApp 출시, 혜택, 보상 소식을 가장 먼저 확인하세요. 이 토큰 게이팅 튜토리얼에서 구현 아이디어를 얻었다면 Helius Discord에서 개발자 커뮤니티와 소통하고 Helius 블로그에서 최신 소식을 확인하세요. Helius와 함께 블록체인 도입을 가속하고 최고 성능의 기술 위에 구축하세요.

추가 자료

관련 아티클

Helius 구독하기

최신 Solana 개발 소식을 확인하고 새 게시물 알림을 받아보세요

확대 이미지