MetaMask(구 Consensys Software Inc)은 세계 최대의 자기 수탁형 금융 플랫폼으로, 암호화폐와 전통 자산 모두에 걸쳐 자산을 보유하고, 사용하고, 저축하고, 불릴 수 있는 단일 공간을 제공합니다. MetaMask는 결제, 저축, 투자, 디지털 자산을 하나의 seamless한 경험으로 통합하는 소비자 플랫폼을 구축하고 있습니다. 세계에서 가장 널리 사용되는 자기 수탁형 지갑에서 성장한 MetaMask는 약 190개국에 걸쳐 사용자가 자신의 자금과 자산을 직접 통제할 수 있도록 합니다. MetaMask는 2016년부터 이더리움의 성장에 핵심적인 역할을 해왔습니다. 오늘날 MetaMask는 블록체인 경제의 중심에 자리하며, 오픈 머니(Open Money)를 위한 운영 체제를 구축하고 사람들이 자신의 금융 생활을 완전히 주도할 수 있도록 하고 있습니다.
모든 글 읽기
KyberSwap은 DEX 애그리게이터를 통해 500만 명이 넘는 사용자의 거래 1,500억 달러 이상을 처리한 탈중앙화 트레이딩 플랫폼입니다. KyberSwap 팀은 프론트엔드를 Wagmi v3와 Viem으로 통합하면서, 직접 구현했던 MetaMask 감지 코드를 MetaMask Connect의 공식 metaMask() 커넥터로 대체했습니다. 이 사례 연구에서는 KyberSwap이 이러한 전환을 결정한 이유, 모바일 웹에서 달라진 점, 그리고 MetaMask 사용자에게 스왑 시세를 제공하는 KyberSwap의 별도 역할과 Connect 연동이 어떻게 함께 자리하는지를 살펴봅니다.
KyberSwap의 역할은 모든 거래에서 최적의 환율을 제공하는 것입니다
KyberSwap의 DEX Aggregator는 모든 거래에서 최적의 환율과 안정적인 체결을 제공하도록 설계된 탈중앙화 트레이딩 솔루션입니다. 이는 여러 체인의 깊은 유동성에 접근해 결과 수량을 극대화하고 슬리피지를 최소화하도록 설계된 스마트 라우팅 알고리즘, Smart Settlement를 기반으로 작동합니다. 그 중심을 둘러싸고 지정가 주문, 23개 네트워크를 아우르는 크로스체인 스왑, 수익 기회를 제공하는 Kyber Earn이 있습니다.
체결 품질을 중심으로 만든 플랫폼이라면, 입구에 대한 요구 사항은 단순합니다. 지갑 연결은 고민 없이 할 수 있어야 한다는 것입니다.
직접 구현한 지갑 코드는 유지 보수 비용으로 돌아옵니다
KyberSwap의 이전 구성은 Wagmi v2와 ethers.js, 그리고 MetaMask를 감지하고 연결하는 맞춤 코드를 포함한 임시 방편의 injected 커넥터 레이어를 결합한 형태였습니다. Wagmi v3와 Viem으로 전환하면서 팀은 해당 코드를 없애고 MetaMask Connect의 공식 커넥터를 사용하기로 했습니다.
이 결정에는 세 가지 이유가 있었습니다. 이제 하나의 커넥터로 데스크톱의 브라우저 확장 프로그램과 모바일 웹의 딥링크 및 릴레이 플로우를 모두 지원합니다. 유지 보수해야 할 맞춤 지갑 감지 코드도 줄었습니다. 또한 MetaMask가 지원하는 경로를 따르면, EIP-6963과 MetaMask Wallet Protocol(MWP)이 지갑과 dapp이 서로를 찾는 표준 방식으로 자리 잡는 흐름에 KyberSwap도 발맞출 수 있습니다.
이전 | MetaMask Connect 도입 후 |
Wagmi v2, ethers.js, 임시 방편의 injected 커넥터 구성 | Wagmi v3와 Viem, 공식 metaMask() 커넥터 |
직접 구현한 MetaMask 감지 및 연결 코드를 유지 보수해야 함 | 감지와 연결을 커넥터가 처리 |
모바일 웹에서는 WalletConnect QR에 의존 | MWP 릴레이를 통해 MetaMask 앱에 네이티브 딥링크로 연결 |
지갑 검색 표준을 따라가기 위한 맞춤 코드 | MetaMask가 지원하는 경로를 통해 EIP-6963 및 MWP에 부합 |
모바일 전환을 매끄럽게 만들기
모바일 웹에서 QR 코드는 불편한 방식입니다. 사용자는 이미 휴대폰을 쓰고 있기 때문입니다. MetaMask Connect는 MWP 릴레이를 통해 MetaMask 앱을 여는 딥링크 연결 플로우를 KyberSwap에 제공하므로, 휴대폰으로 접속한 트레이더는 아무것도 스캔하지 않고 연결할 수 있습니다.
KyberSwap은 특히 iOS 전환 과정에 많은 공을 들였습니다. 목표는 사용자가 MetaMask 승인 화면으로 곧바로 이동하여, 연결을 탭한 순간부터 승인하기까지 추가 단계가 없도록 하는 것이었습니다. 그 결과 트레이더가 데스크톱 확장 프로그램으로 접속하든 모바일 앱으로 접속하든 동일한 연결 경험을 누릴 수 있습니다.
기술 스택
레이어 | 구성 요소 |
트레이딩 | KyberSwap DEX Aggregator, Smart Settlement, 지정가 주문, 크로스체인 스왑(23개 네트워크), Kyber Earn |
프론트엔드 | Wagmi v3, Viem |
지갑 연결 | MetaMask Connect (connect-evm), metaMask() 커넥터 |
검색 및 전송 | EIP-6963, MetaMask Wallet Protocol 릴레이 |
지갑 | MetaMask 브라우저 확장 프로그램(데스크톱), MetaMask 모바일 앱 |
현재까지의 성과
KyberSwap은 MetaMask Connect를 도입한 이후 사용자의 연결이 안정적으로 이루어지고 있으며, 첫날부터 배포가 원활했고 불만이나 문제도 접수되지 않았다고 전했습니다.
KyberSwap의 표현에 따르면, 사용자 입장에서 달라진 점은 연결과 거래가 이제 하나의 단계처럼 느껴진다는 것입니다. 트레이더는 MetaMask로 연결한 뒤 중간 과정 없이 곧바로 최적의 환율로 스왑을 진행합니다. 이 플로우의 입구는 MetaMask Connect가, 그 나머지는 Smart Settlement가 맡습니다.
두 가지 연동, 하나의 관계
Connect 연동은 KyberSwap과 MetaMask 관계의 절반입니다. 나머지 절반은 반대 방향으로 이루어집니다. KyberSwap Aggregator API가 MetaMask 사용자에게 여러 체인에 걸친 스왑 시세와 체결을 제공합니다. MetaMask Connect는 MetaMask 사용자를 KyberSwap으로 이끌고, Aggregator API는 KyberSwap의 라우팅을 MetaMask로 가져옵니다.
“MetaMask는 두 가지 측면에서 소중한 파트너였습니다. MetaMask Connect는 트레이더가 KyberSwap에 연결하는 방식을 간소화하여, 확장 프로그램이든 모바일 앱이든 안정적이고 일관된 경험을 제공합니다. 동시에 KyberSwap Aggregator API는 MetaMask 사용자에게 여러 체인에서 이용 가능한 최적의 스왑 시세와 체결을 제공합니다. 이 파트너십은 우리가 가장 중요하게 생각하는 원칙, 즉 모두를 위해 DeFi 트레이딩을 더 간단하고, 더 매끄럽고, 더 효율적으로 만든다는 원칙 위에 세워졌습니다.” — Ken Tran, KyberSwap 비즈니스 개발 매니저
빌더를 위한 KyberSwap의 조언
공식 문서를 적극 활용하세요. 공식 문서를 따르면 통합 구성이 표준에 맞게 유지되고, 오래된 예제나 커스텀 방식으로 작업할 때보다 더 깔끔하게 전환할 수 있습니다.
지갑 연결 마이그레이션은 더 큰 규모의 스택 정리의 일환으로 진행하세요. KyberSwap은 Wagmi v3와 Viem으로 전환하면서 MetaMask 코드를 교체했습니다. 그래서 커넥터 변경은 별도의 프로젝트가 아니라 계획된 통합 작업의 일부였습니다.
모바일 핸드오프를 처음부터 끝까지 테스트하세요. 사용자에게 중요한 부분은 연결 버튼을 탭한 뒤 어디로 이동하느냐입니다. KyberSwap은 iOS 사용자가 MetaMask 승인 화면으로 바로 이동하는지 확인했습니다.
자사의 아키텍처에 맞는지 따져보세요. KyberSwap의 환경에서는 마이그레이션이 순조롭게 진행되었지만, 팀마다 스택이 다르므로 올바른 결정은 제품의 요구 사항에 따라 달라집니다.
MetaMask Connect로 빌드하세요. 사용자가 어떤 방식으로 연결하든 모든 사용자에게 통하는 하나의 통합 구성입니다.
MetaMask 개발자 문서: https://docs.metamask.io/
MetaMask Connect: https://metamask.com/developer/sdk
KyberSwap: https://kyberswap.com/
AI가 번역했습니다. 오류가 있을 수 있습니다. 항상 정보를 확인하시기 바랍니다.
