One Book

초·중등 학습자가 매일 사용하는 영어 학습 SaaS. 저사양 디바이스에서도 끊김 없는 학습 흐름을 위해 SVG Sprite·Intersection Observer·번들 분석 기반의 최적화를 적용하고, 같은 TS 생태계인 Nest.js 백엔드와 타입·DTO를 정렬했습니다.

• ▸수십 개 아이콘과 학습 자료가 개별 요청으로 로드되어 네트워크 오버헤드 발생.
• ▸초기 진입 시 번들 사이즈가 커 저사양 디바이스에서 학습 흐름이 끊김.
• ▸window.onscroll 기반 무한 스크롤이 잦은 리렌더와 끊김 유발.
• ▸Nest.js (TypeScript) 백엔드와 같은 TS 생태계 — 타입·DTO 정렬 기회.

• ▸아이콘을 SVG Sprite로 통합하고 <Icon name="..." /> 컴포넌트로 추상화.
• ▸IntersectionObserver로 가로 스크롤·무한 스크롤·이미지 지연 로딩을 단일 훅으로 통합.
• ▸이미지 lazy loading은 native + IO fallback으로 구형 브라우저까지 호환성 확보.
• ▸Zustand 기반 학습 상태 모델링으로 리렌더링 영역 최소화.
• ▸@next/bundle-analyzer로 분기별 번들 사이즈 변화 추적 + 회귀 방지.

• ▸관련 번들 용량 50% (~600KB) 감축.
• ▸초기 진입 LCP 개선, 저사양 디바이스 학습 흐름 안정화.
• ▸스크롤·뷰포트 이벤트의 리렌더링 비용 감소.