리얼파이 - 토큰 증권화 조각거래 플랫폼

프로젝트 개요

로디언즈에서 개발한 토큰증권화 조각거래 플랫폼으로, Web 2명, CMS 1명, Backend 2명, 디자이너 1명으로 구성된 팀에서 개발했습니다.

기술적 도전과 해결

1. Apollo Client 캐싱 전략 최적화

문제: 페이지 전환 시마다 동일한 API를 반복 호출하여 네트워크 부하 및 로딩 지연이 발생했습니다.

해결: Naver D2 기술 발표를 통해 인사이트를 획득하여, Server-Side와 Client-Side 캐싱 전략을 수립하고 적용했습니다.
Apollo Client의 InMemoryCache를 활용하여 효율적인 캐싱 정책을 구현했으며, fetchPolicy와 nextFetchPolicy를 적절히 조합하여 최적의 성능을 달성했습니다.

성과:

• 반복 API 호출 최소화로 네트워크 트래픽 절감
• 페이지 전환 시 캐시된 데이터를 활용하여 로딩 시간 단축
• 사용자 경험(UX) 대폭 개선

2. GraphQL Subscriptions 실시간 거래 시스템

실시간 주문 체결 알림을 구현하기 위해 GraphQL Subscriptions를 도입했습니다.
WebSocket 기반 양방향 통신을 통해 사용자가 주문 체결 상태를 실시간으로 확인할 수 있도록 했으며,
거래소의 10호가 정보와 체결 내역을 즉시 업데이트하여 실제 거래소와 유사한 경험을 제공했습니다.

3. Intersection Observer API 무한 스크롤

거래 내역과 주문 내역을 효율적으로 표시하기 위해 Intersection Observer API를 활용한 무한 스크롤을 구현했습니다.
가상 스크롤 없이도 부드러운 사용자 경험을 제공하면서, 필요한 데이터만 로드하여 성능을 최적화했습니다.

4. 실시간 거래 차트 구현

chart.js를 활용하여 실시간으로 업데이트되는 거래 차트를 구현했습니다.
캔들 차트, 라인 차트 등 다양한 차트 타입을 지원하며, GraphQL Subscriptions와 연동하여 실시간으로 데이터를 갱신했습니다.

성과

• 기술적 성과: Apollo Client 캐싱 최적화로 페이지 로딩 속도 대폭 개선
• 실시간 시스템: GraphQL Subscriptions로 실제 거래소와 유사한 실시간 거래 경험 제공