Lighthouse 98점 달성과 Flash-free Dark Mode를 구현한 Next.js 대시보드 설계

Context

대부분의 SaaS 템플릿이 정적 이미지 기반 차트와 모바일 대응 부족으로 인한 낮은 완성도를 보임. 특히 localStorage 읽기 시점과 First Paint 사이의 간극으로 인해 발생하는 Dark Mode Flash 현상이 사용자 경험의 주요 병목으로 작용함.

Technical Solution

• Blocking Inline Script를 Document Head에 배치하여 렌더링 전 테마 상태를 결정하는 동기적 실행 구조 설계
• React 19 및 Next.js App Router 기반의 Server Components 활용을 통한 초기 로딩 최적화
• 6개의 CSS Variable 기반 Token-system을 구축하여 디자인 시스템의 유연한 Reskin 가능 구조 구현
• TypeScript Strict Mode 및 noUncheckedIndexedAccess 설정을 통한 런타임 타입 안정성 강화
• Recharts 라이브러리를 통합하여 단순 시각화를 넘어선 Interactive Data Visualization 구현
• Tailwind CSS v4 적용을 통한 스타일 정의 효율화 및 런타임 오버헤드 감소

Impact

• Lighthouse 성능 점수 98점 달성
• 템플릿 기반 구축 시 기존 2~4주 소요되던 개발 기간을 수 시간 단위로 단축

Key Takeaway

클라이언트 사이드 상태에 의존하는 UI 테마 설정은 반드시 브라우저의 First Paint 이전 단계에서 동기적으로 처리하여 FOUC(Flash of Unstyled Content)를 방지해야 함.