Projects
01 / 03 · 인스티즈
아이차트(iChart)
흩어진 음원 플랫폼 데이터를 한 화면에서 비교하는 실시간 차트 서비스
- 회사
- 인스티즈
- 역할
- Frontend Lead
- 기간
- 2024.12 - Present
인스티즈아이차트(iChart)
6개
수집 플랫폼
-42%
LCP 개선
12만+
일 평균 방문
멜론·지니·플로 등 여러 음원 플랫폼의 차트는 집계 주기와 형식이 모두 달라, 팬들은 순위를 비교하려고 여러 앱을 오가야 했습니다.
아이차트는 각 플랫폼 데이터를 주기적으로 수집·정제해 하나의 기준으로 맞추고, 시간대별 추이를 차트로 보여 주는 서비스입니다. 프론트엔드 리드로서 화면 구조 설계부터 렌더링 성능, 배포 파이프라인까지 담당했습니다.
- 01
차트 렌더링 구조 설계
수백 개 데이터 포인트를 가진 차트 여러 개가 한 화면에 뜨는 구조라, 뷰포트에 들어온 차트만 그리도록 지연 렌더링하고 데이터 다운샘플링을 적용했습니다.
- 02
실시간 갱신 캐싱 전략
React Query 의 staleTime 을 수집 주기에 맞춰 조정하고, 정각 갱신 시점에만 무효화해 불필요한 요청을 줄였습니다.
- 03
모노레포 공통 UI 정리
인스티즈 본 서비스와 공유하는 컴포넌트를 패키지로 분리해 두 서비스의 디자인 일관성을 맞췄습니다.
- 문제
- 정각마다 트래픽이 몰리며 차트 API 응답이 3초 이상 지연됐습니다.
- 해결
- 집계 결과를 Redis 에 미리 적재하고, 프론트에서는 직전 스냅샷을 먼저 보여 준 뒤 최신 데이터로 교체하도록 바꿨습니다.
- 결과
- 정각 피크 응답 시간 3.2s → 0.4s
Frontend
- Next.js
- TypeScript
- TailwindCSS
- Chart.js
- React-Query
- Zustand
Backend
- Django
- Celery
- Python
- MySQL
- Redis
- Scrapy
Infra
- Sentry
- Jest
- Docker
- AWS
- CloudFlare
- Nginx
데이터가 핵심인 서비스일수록 화면보다 데이터 흐름을 먼저 설계해야 한다는 것을 배웠습니다. 다음에는 수집 단계부터 타입을 공유해 백엔드와의 계약을 더 단단하게 만들고 싶습니다.