fix: GPU 모드 성능 저하(Layer Explosion) 해결 및 실험 변별력 확보

[PaleBlueNote]

📌 Summary

브라우저 렌더링 파이프라인의 **Reflow(Layout)**와 Repaint(Composite) 단계의 비용 차이를 시각적/정량적으로 증명하는 실험(Day 1)을 구현했습니다.
또한, 대량의 DOM 제어 시 발생하는 React 렌더링 병목과 GPU Layer Explosion(레이어 폭발) 현상을 분석하고 최적화했습니다.

🛠️ Key Changes

1. Core Logic & UI

• 렌더링 비교 엔진: left/top 속성(CPU)과 transform(GPU) 속성을 제어하여 브라우저 부하 비교.
• 실시간 모니터링: stats.js를 연동하여 FPS 측정.
• UI/UX 개선:
  • 직관적인 슬라이딩 토글 스위치 구현.
  • 모바일 환경 대응을 위한 반응형 레이아웃(GNB 가림 현상) 수정.

2. ⚡️ Performance Optimization (Deep Dive)

실험 과정에서 발견한 두 가지 핵심 병목 현상을 해결했습니다.

A. UI Blocking 해결 (INP 개선)

• 문제: 모드 전환 시 3,000개 컴포넌트의 상태 변경으로 인해 메인 스레드가 약 500ms~1s간 차단됨.
• 해결:
  • React.memo: 하위 아이템 컴포넌트의 불필요한 리렌더링 방지.
  • useTransition: 무거운 상태 업데이트를 비동기(Concurrent)로 처리하여 UI 응답성(Loading Indicator) 즉시 확보.

B. Layer Explosion (레이어 폭발) 해결

• 문제: 3,000개 요소에 will-change: transform 적용 시, GPU 텍스처 관리 오버헤드로 인해 오히려 GPU 모드가 CPU 모드보다 느려지는 역설적 현상 발생.
• 해결:
  • 아이템 개수를 1,000개로 축소하여 GPU 대역폭 확보.
  • box-shadow, border-radius 속성을 추가하여 개별 렌더링 비용을 높여 CPU Reflow 부하를 강조함.

📊 Result Analysis (Proof)

Chrome Performance 탭 분석 결과, CPU와 GPU의 결정적인 차이를 입증했습니다.

구분	CPU Mode (Slow)	GPU Mode (Fast)
Main Thread	Saturation (포화)	Idle Time (유휴)
Rendering	Solid Block (쉴 틈 없음)	Gaps (여유 있음)
결론	사용자 입력 처리가 불가능한 상태	입력 반응성 확보 및 배터리 절약

📸 Screenshots

[ GPU ]

[ CPU ]

🔗 Related Issue

Closes #5

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
frontend-engineering-lab	Ready	Preview, Comment	Jan 13, 2026 9:18am