프론트엔드 인프라
07 / 12
Bifront SDK
여러 제품 프론트엔드가 공유하는 TypeScript 지갑, provider, asset, React 추상화입니다.
- 역할
- Frontend / SDK Lead
- 문제
- 표준을 지원하는 지갑도 연결 수명주기, 이벤트, extension injection, 모바일 동작이 서로 달랐습니다.
- 전략
- Provider 탐색과 wallet 상태를 분리했습니다. 각 구현을 공통 wallet interface에 맞추고 이벤트는 SDK 소유 계층으로 전달했으며, 제품 React 코드는 안정된 provider와 hooks를 사용했습니다.
- 성과
- 여러 제품 프론트엔드가 지갑과 asset 동작을 재사용하게 했습니다.
01
문제 정의
왜 이 문제를 해결해야 했는가
Bifront SDK는 제품마다 반복되던 지갑 연결, provider 호출, 네트워크 전환, 컨트랙트 실행, 자산 데이터를 공통 TypeScript 패키지로 정리했습니다.
사용자와 시스템이 마주한 문제
각 제품이 지갑 동작과 오류를 서로 다르게 구현하고 있었습니다.
여러 injected wallet이 하나의 브라우저 provider 자리를 두고 충돌할 수 있었습니다.
계정, 체인, 연결, 모바일 deeplink, 재연결 동작이 지갑마다 달랐습니다.
프론트엔드 오너십
패키지 경계, 지갑 정규화, React API, 테스트 애플리케이션, 프로덕션 연동까지 SDK 프론트엔드 아키텍처와 핵심 구현을 리드했습니다.
Nx 패키지 경계와 공통 utility
Provider utility, wallet core, React provider
Asset, balance, price, chain hooks
Unit, integration, 지갑 테스트 애플리케이션
02
해결 전략
프로덕션까지 이어지는 시스템 전략
Provider 탐색과 wallet 상태를 분리했습니다. 각 구현을 공통 wallet interface에 맞추고 이벤트는 SDK 소유 계층으로 전달했으며, 제품 React 코드는 안정된 provider와 hooks를 사용했습니다.
시스템 모델
제품 UI는 React provider와 hooks를 사용하고, 이 계층은 wallet core와 asset 패키지를 호출합니다. 패키지는 EIP-1193 provider, API, contract 동작을 정규화합니다.
주요 구현 결정
지갑 provider를 공통 인터페이스 뒤로 정규화했습니다.
EIP-1193, EIP-6963 탐색, 이벤트, 안정적인 provider 선택을 처리했습니다.
서명, call, send, gas estimate, 네트워크 전환, receipt wait를 제공했습니다.
동시 데이터 요청을 deduplicate하고 request lifecycle을 정리했습니다.
03
성과
무엇이 달라졌고 무엇을 배웠는가
여러 제품 프론트엔드가 지갑과 asset 동작을 재사용하게 했습니다.
제품별로 반복되는 연동 경로를 줄였습니다.
동시 요청 deduplication과 lifecycle 정리로 중복 API 작업을 줄였습니다.
배운 점
공통 인프라는 method signature뿐 아니라 오류와 lifecycle 계약까지 정의해야 성공합니다.
지금이라면
버전이 있는 지원 행렬과 오류 모델을 먼저 공개하고, 브라우저 provider를 완전히 lazy load하며, tree-shaking과 bundle budget을 강제하고, 지갑 contract test를 CI에서 실행하겠습니다.
사용 기술
공개 링크
아키텍처 수준의 설명만 제공합니다. 비공개 소스와 내부 payload는 의도적으로 공개하지 않습니다.
함께 일하기