Lemonade

LEDGIS 블록체인 생태계의 탈중앙화 금융(DeFi) 플랫폼입니다.

프로젝트 개요

아키텍처

주요 기능

스테이킹 시스템

LED 토큰을 예치하고 연 10~50%의 수익을 얻을 수 있는 스테이킹 서비스입니다. 사용자는 예치 기간과 수량에 따라 차등화된 보상을 실시간으로 확인하고 인출할 수 있습니다.

비트코인 배틀 게임

비트코인 가격의 상승(롱) 또는 하락(숏)을 예측하여 배팅하는 게임 시스템입니다. 실시간 가격 차트와 함께 참여자들의 배팅 현황을 시각화하여 보여주며, 결과에 따라 자동으로 보상이 분배됩니다.

실시간 대시보드

LEDGIS 네트워크의 블록 생성, 거래량, 토큰 유통량 등 주요 지표를 ApexCharts로 시각화합니다. GraphQL WebSocket을 통해 초 단위로 업데이트되는 데이터를 제공하여 사용자가 생태계 현황을 실시간으로 모니터링할 수 있습니다.

다중 지갑 연동

크롬 확장 프로그램과 모바일 앱 지갑을 모두 지원합니다. 사용자는 선호하는 방식으로 지갑을 연결하고 서명 없이도 안전하게 토큰을 관리할 수 있습니다.

다국어 지원

i18n을 활용한 한국어/영어 전환 기능을 제공합니다. 모든 UI 텍스트, 에러 메시지, 알림이 사용자의 언어 설정에 맞춰 표시됩니다.

프로젝트 특징

Server-Side Rendering (SSR)

Next.js 12의 SSR을 활용하여 초기 로딩 속도를 개선하고 SEO를 지원합니다. 동적 데이터는 클라이언트에서 실시간으로 갱신되도록 하이브리드 렌더링을 구현했습니다.

블록체인 데이터 통합

EOSIO RPC API와 GraphQL WebSocket을 병행하여 블록체인 데이터를 조회합니다. RPC는 트랜잭션 전송에, WebSocket은 실시간 구독에 사용하여 각 프로토콜의 장점을 활용했습니다.

상태 관리 전략

Recoil로 전역 상태(지갑 정보, 사용자 설정)를 관리하고, React Query로 서버 데이터(스테이킹 현황, 배틀 게임 데이터)를 캐싱합니다. 두 라이브러리의 역할을 명확히 분리하여 데이터 흐름을 단순화했습니다.

UI/UX 시스템

Material-UI 5 컴포넌트를 기반으로 Emotion을 사용한 커스텀 스타일링을 적용했습니다. 다크 모드 지원, 반응형 레이아웃, 접근성 개선을 통해 다양한 환경에서 일관된 사용자 경험을 제공합니다.

도메인 주도 설계

Domain-Driven Design 패턴으로 비즈니스 로직을 도메인별로 분리하고, Presentation-Container 패턴으로 UI와 로직을 분리했습니다. 이를 통해 코드 재사용성을 높이고 테스트 용이성을 확보했습니다.

모니터링 및 에러 추적

Sentry를 통합하여 프로덕션 환경의 런타임 에러를 실시간으로 수집하고 알림을 받습니다. 에러 발생 시 사용자 컨텍스트와 브레드크럼을 함께 기록하여 디버깅 시간을 단축했습니다.

기술적 도전

블록체인 트랜잭션 처리

블록체인 트랜잭션은 비동기적이며 지연이 발생할 수 있습니다. 트랜잭션 제출 후 폴링 방식으로 상태를 확인하고, WebSocket을 통해 최종 컨펌을 감지하여 사용자에게 피드백을 제공했습니다.

실시간 데이터 동기화

GraphQL Subscription을 활용하여 여러 클라이언트 간 데이터 동기화를 구현했습니다. 네트워크 단절 시 자동 재연결 로직과 데이터 재동기화 메커니즘을 추가하여 안정성을 확보했습니다.

지갑 연동 표준화

크롬 확장과 모바일 앱 지갑의 인터페이스를 추상화하여 공통 API를 설계했습니다. 이를 통해 지갑 종류에 관계없이 동일한 코드로 연동할 수 있도록 했습니다.

성과

• LEDGIS 생태계 내 주요 DeFi 플랫폼으로 자리매김
• 일평균 1,000건 이상의 스테이킹 트랜잭션 처리
• 비트코인 배틀 게임 누적 참여자 5,000명 돌파
• SSR 적용으로 초기 로딩 시간 40% 단축
• Sentry 모니터링을 통해 에러 발생률 0.5% 이하 유지