프로덕션 Web3

03 / 12

Everdex

Swap, 브릿지 경로, 유동성, pool, LP rewards를 제공하는 멀티체인 DEX의 프론트엔드 개선을 리드했습니다.

역할
Frontend Lead
문제
사용자가 확인한 quote와 실제 실행 시점의 상태가 달라질 수 있다는 점이 핵심 문제였습니다.
전략
입력 변경에 따라 quote를 통제된 방식으로 갱신하고, 실행에서는 일관된 route context를 사용했습니다. 중요한 조건을 다시 확인하고 사용자 거절, RPC, slippage, contract 실패를 구분했습니다.
성과
Swap에서 유동성, pool, rewards, route-aware 경험으로 제품을 확장했습니다.

01

문제 정의

왜 이 문제를 해결해야 했는가

Everdex는 swap, 브릿지 경로, 유동성, pool, LP rewards를 하나의 멀티체인 DEX에서 제공합니다.

사용자와 시스템이 마주한 문제

  • 사용자가 금액, 경로, 네트워크, 토큰을 바꾸는 동안 quote가 오래된 상태가 될 수 있었습니다.

  • Approve, swap, bridge는 서로 다른 실패와 완료 상태를 가집니다.

  • 실행 전에 slippage, price impact, deadline, allowance reset을 이해할 수 있어야 했습니다.

프론트엔드 오너십

제품 초기 생성 이후 프론트엔드 리드를 맡아 프로덕션 아키텍처와 핵심 흐름 대부분을 재구축하거나 확장했습니다.

  • Quote와 execution context

  • Swap, 브릿지 route, pool, 유동성, LP rewards, 이력

  • 지갑 표준, 네트워크 전환, 트랜잭션 추적

  • 성능, 보안, 관측성, 장기 유지보수

02

해결 전략

프로덕션까지 이어지는 시스템 전략

입력 변경에 따라 quote를 통제된 방식으로 갱신하고, 실행에서는 일관된 route context를 사용했습니다. 중요한 조건을 다시 확인하고 사용자 거절, RPC, slippage, contract 실패를 구분했습니다.

시스템 모델

Quote context가 선택한 체인, 토큰, 경로, 예상 결과, slippage, deadline을 묶습니다. 실행 전에 context를 다시 검증한 뒤 필요한 approve와 swap 또는 브릿지 단계를 수행합니다.

주요 구현 결정

  • 토큰, 체인, 경로, 예상 결과를 하나의 execution context로 유지했습니다.

  • 실행 전에 allowance, gas, route 조건을 다시 검증했습니다.

  • Approve와 swap·bridge를 구분하고 계정별 이력을 기록했습니다.

  • EIP-6963을 포함해 변화하는 지갑 탐색 표준에 대응했습니다.

03

성과

무엇이 달라졌고 무엇을 배웠는가

  • Swap에서 유동성, pool, rewards, route-aware 경험으로 제품을 확장했습니다.

  • 지갑 표준, API, 프레임워크, 네트워크 변화 속에서도 호환성을 유지했습니다.

  • 무거운 모듈을 교체하고 필요한 시점에 불러와 불필요한 번들 비용을 줄였습니다.

배운 점

금융 quote는 버전이 있는 약속입니다. 언제 만들어졌고 어떤 상태를 설명하며 지금도 안전하게 실행 가능한지 UI가 알아야 합니다.

지금이라면

Quote와 execution을 명시적 상태 머신으로 나누고 서명 직전에 freshness를 검증하며, 복구 가능한 트랜잭션 이력을 브라우저 저장소 밖으로 옮기겠습니다.

사용 기술

  • TypeScript
  • React
  • Next.js
  • SWR
  • WalletConnect
  • EIP-6963
  • Sentry

공개 링크

함께 일하기

이 정도의 프론트엔드 오너십이 필요한가요?

연락하기