신규: Helius가 Light Protocol을 인수했습니다
Helius와 Dynamic SDK를 활용한 Solana 임베디드 지갑 튜토리얼
블로그/개발

Solana 앱 온보딩: 임베디드 지갑이 필요한 이유

개발자 경험 @ Dynamic.xyzX의 Matthew FoyleLinkedIn의 Matthew Foyle
읽는 데 7분

모바일 또는 웹 앱을 위한 획기적인 아이디어가 있다고 가정해 보겠습니다.

Solana가 구축에 가장 적합한 블록체인이라는 사실을 알고 있으며, 출시 첫날부터 사용자를 사로잡을 다양한 기능을 갖춘 경험을 빠르게 선보이고 싶습니다.

이를 실현하려면 개발자 툴킷에 무엇이 필요할까요?

Cursor와 v0 같은 도구는 우선순위가 높을 가능성이 크며, 프런트엔드 프레임워크로는 Next.js가 유력한 선택입니다.

그렇다면 앱의 Solana 관련 요구 사항을 충족하면서 원활하게 출시하고 효과적으로 확장하려면 어떤 솔루션이 필요할까요?

Solana에서 앱을 구축하고 확장하려면 두 가지 핵심 구성 요소가 필요합니다.

  1. 인증 및 지갑 관리를 위한 원활한 온보딩 솔루션
  2. 고성능 트랜잭션을 처리할 수 있는 강력한 RPC 서비스

이러한 필수 요소는 개발을 간소화할 뿐 아니라 원활한 사용자 경험도 제공합니다.

각 요소를 자세히 살펴보겠습니다.

Solana Wallet Adapter

가장 간단한 온보딩 방식은 Phantom이나 Solflare 같은 기존 지갑을 통해 사용자를 연결하는 것입니다. 이 방식은 Solana에 익숙하고 이미 지갑을 설정한 사용자를 온보딩할 때 효과적입니다.

좋은 출발점은 다음 기능을 제공하는 Solana Wallet Adapter입니다.

  • 간편한 통합을 위한 표준화된 API
  • 지갑 연결 및 트랜잭션 서명을 위한 기본 기능
  • 앱 요구 사항에 맞게 사용자 지정할 수 있는 오픈 소스 유연성

Solana Wallet Adapter는 빠르고 간단하게 구현할 수 있어 기존 지갑이 있는 사용자에게 안정적인 선택입니다.

여러 지갑을 지원할 뿐 아니라 일관된 지갑 기능을 위한 표준화된 통합과 지갑 연결 버튼 같은 즉시 사용 가능한 UI 컴포넌트도 제공합니다. 또한 window.solana 같은 원시 API보다 트랜잭션 서명 및 전송 성능을 최적화합니다.

Solana Wallet Adapter는 오픈 소스로 설계되어 개발자가 앱의 구체적인 요구 사항에 맞게 사용자 지정할 수 있습니다. 커뮤니티 구현을 통해 Vue, Angular, Svelte, TypeScript 같은 프레임워크로 호환성을 확장할 수도 있습니다.

하지만 어댑터를 사용하면 프로젝트에 추가 종속성이 생겨 개발 부담이 커질 수 있습니다.

어댑터는 기본적으로 다양한 기능을 제공하지만, 폭넓게 사용자 지정하려면 코드베이스를 살펴보거나 우회 방법을 만들어야 할 수 있습니다. 사용 사례에 따라 많은 시간이 들 수 있습니다.

다른 서드 파티 라이브러리와 마찬가지로 개발자가 통제할 수 없는 버그나 문제를 겪을 수 있습니다. 이는 앱 안정성에 영향을 주거나 해결을 위해 외부 지원이 필요할 수 있습니다.

지갑 어댑터는 크립토에 익숙한 사용자에게 실용적이지만, 더 폭넓은 사용자를 온보딩하려는 경우에는 한계가 있습니다. 특히 블록체인에 익숙하지 않거나 아직 지갑이 없는 사용자에게는 부족합니다.

임베디드 지갑으로 신규 사용자 온보딩하기

임베디드 지갑은 Solana 온보딩을 크게 개선해 개발자가 더 많은 사용자를 확보하도록 돕습니다. 신규 사용자는 가입과 동시에 앱 내에서 자동으로 지갑을 받을 수 있습니다.

사용자는 다음 작업을 할 수 있습니다.

  • 서드 파티 지갑을 설정하지 않고 바로 시작
  • 자산을 원활하게 수령
  • 온체인 트랜잭션 실행

이 접근 방식은 마찰을 최소화하므로 대중화를 목표로 하는 소비자용 앱에 유용합니다.

Dynamic의 데이터에 따르면 기존 지갑을 연결하는 대신 임베디드 지갑을 선택하는 사용자가 50%를 넘습니다.

다만 도입률은 온보딩 방식과 대상 사용자층에 따라 달라집니다.

크립토에 익숙한 사용자는 기존 지갑 연결을 선호할 수 있지만, 일반 사용자는 임베디드 솔루션의 편리함을 선호할 가능성이 큽니다.

적절한 균형을 찾는 것이 중요합니다.

개인 투자자의 유동성은 여전히 주로 핫 월렛에 있습니다. 따라서 임베디드 지갑이 온보딩을 간소화하더라도 항상 최선의 출발점인 것은 아닙니다. 개발자는 초기 대상 사용자를 고려하고 그들의 요구에 맞는 온보딩 경험을 설계해야 합니다.

온보딩과 지갑 인프라를 위한 종합 SDK

Solana Wallet Adapter가 제공하는 범위를 넘어선 기능이 필요한 개발자라면 Dynamic SDK 같은 솔루션으로 더 종합적인 접근 방식을 활용할 수 있습니다.

Dynamic을 사용하면 다음이 가능합니다.

1. 여러 지갑 옵션 지원

사용자가 Phantom 같은 기존 Solana 지갑을 연결하도록 지원하고, 신규 사용자에게는 임베디드 지갑을 발급할 수 있습니다.

2. 소셜 및 이메일 로그인 지원

X와 Telegram처럼 익숙한 로그인 방식으로 지갑 설정을 간소화합니다.

3. 사용자 경험 맞춤 설정

사전 구축된 UI 컴포넌트로 빠르게 통합하거나, 완전한 헤드리스 옵션을 선택해 자체 플로를 설계할 수 있습니다.

4. 앱의 미래 경쟁력 확보

다중 지갑 지원, 사기 방지 도구, 분석 기능을 추가해 애플리케이션을 확장하고 최적화할 수 있습니다.

5. 다른 체인의 사용자 확보

준비가 되면 Solana를 넘어 다른 체인으로 앱 기능을 확장할 수 있습니다.

Dynamic 같은 솔루션을 사용하면 개발을 간소화하는 동시에 사용자에게 원활한 온보딩 경험을 제공할 수 있습니다.

Dynamic은 Solana Wallet Adapter를 보완하며, 개발자에게 더 강력한 온보딩 기능과 확장성, 사용자 지정 옵션을 제공합니다.

Solana Wallet Adapter와 임베디드 지갑 비교

다음 비교표를 참고하세요.

기능Solana Wallet AdapterDynamic
지갑 연결✅✅
임베디드 지갑❌✅
소셜 로그인❌✅
멀티체인 지원❌✅
사용자 지정 가능한 UI❌✅
사기 방지❌✅
액세스 목록❌✅
사용자 관리❌✅
Webhooks❌✅

기능과 관계없이 구현 시간은 언제나 중요한 결정 요인입니다. 이처럼 많은 기능 때문에 Dynamic이 Solana Wallet Adapter보다 구현하기 복잡할 것이라 생각할 수 있지만, 실제로는 그렇지 않습니다.

기본 React 구현을 비교해 보겠습니다.

Solana Wallet Adapter: 기본 구현

코드
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic: 기본 구현

코드
import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

DynamicWidget을 사용하므로 온보딩 설정이 모두 완료됩니다. 이 올인원 UI 컴포넌트는 로그인/가입 버튼, 전체 인증 플로, 사용자 프로필 등을 처리합니다.

앱을 시작하면 다음 화면이 표시됩니다.

자체 UI를 구축하거나 특정 요소를 사용자 지정하려는 경우 모든 항목을 픽셀 단위까지 완전히 설정할 수 있습니다. 자세한 안내는 디자인 문서 또는 헤드리스 통합 옵션을 확인하세요.

Solana에서 임베디드 지갑 가입을 활성화하려면 대시보드로 이동해 다음 단계를 따르세요.

이것으로 끝입니다!

이메일, 전화번호 또는 소셜 미디어 계정으로 가입한 모든 사용자에게 Solana 지갑이 제공되며, 즉시 앱을 사용할 수 있습니다.

몇 줄의 코드만으로 현재와 미래에 필요한 모든 기능을 포함한 업계 최고 수준의 온보딩을 구현할 수 있습니다.

RPC 제공업체 추가 및 우선순위 수수료 설정

현재 사용자에게 가장 큰 마찰 요소 중 하나가 온보딩이라면, 그다음은 트랜잭션 처리입니다. Solana의 네트워크 혼잡에 대응하는 일은 까다로울 수 있습니다. 전용 RPC 서비스가 없으면 트랜잭션이 누락되어 사용자가 불편을 겪을 수 있습니다. 마찬가지로 우선순위 수수료를 잘못 설정하면 사용자 경험을 해치고 앱의 안정성을 떨어뜨릴 수 있습니다.

RPC 엔드포인트에 Helius를 사용하고 Priority Fee API로 수수료를 동적으로 설정하면 이를 간단히 방지할 수 있습니다. Dynamic 대시보드에서 RPC URL을 설정하기만 하면 됩니다.

트랜잭션을 생성할 때 Priority Fee API를 사용해 수수료를 가져오세요.

코드
async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Magic Eden 사례 연구

강력하고 확장 가능한 Solana 앱을 개발하려면 견고한 지갑 인프라가 필수입니다.

선도적인 NFT 마켓플레이스인 Magic Eden은 새로운 체인을 추가하며 빠르게 확장해 왔습니다. 이러한 전략을 지원하고 NFT 민팅처럼 트래픽이 급증하는 시기에도 뛰어난 성능을 발휘할 유연한 지갑이 필요했습니다.

Dynamic SDK를 통합한 결과, Magic Eden은 멀티체인 지갑 지원, 소셜 계정 연결, 다중 지갑 관리 기능을 제공할 수 있게 되었습니다. 여러 지갑을 관리하고 다양한 네트워크에서 자산을 수집하는 과정도 간단합니다.

Magic Eden은 RPC 노드를 관리하고 트랜잭션 처리량을 최적화하기 위해 Helius도 사용합니다. Helius의 Priority Fee API를 통해 트래픽이 몰리는 시간에도 안정성과 속도를 유지합니다.

Dynamic과 Helius의 조합 덕분에 Magic Eden은 매월 수백만 명의 사용자에게 뛰어난 경험을 제공하면서 효율적으로 확장할 수 있었습니다.

Magic Eden은 확장성, 속도, 사용자 경험을 우선시해 NFT 마켓플레이스가 구현할 수 있는 가능성의 기준을 제시합니다.

크립토에 익숙한 사용자와 일반 사용자 모두에게 매력적인 앱을 구축하려는 개발자는 신뢰할 수 있는 지갑 솔루션에 투자해야 합니다. 이를 통해 개발을 간소화하고 더 폭넓은 사용자를 확보하며 장기적인 성장 기반을 마련할 수 있습니다.

추가 자료

이 글의 이전 버전을 검토해 주신 @__lostin__ 님과 Brady Werkheiser 님께 감사드립니다.

Helius 구독하기

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

확대 이미지