Trouble Shooting
2025년 12월 03일

반응형 UI 설계 도입

반응형 설계 비교 & 선택 근거

반응형 처리 방식별 특징

CSS @media

  • 렌더링 엔진이 스타일만 판단하므로 JS 실행·리렌더링이 없습니다.
  • SSR과 CSR이 같은 마크업을 공유해 하이드레이션 불일치가 없습니다.
  • 브라우저가 자동으로 레이아웃을 조정해 리플로우가 최소화됩니다.
  • 다만, 데이터 로딩·로깅 등 로직 제어를 직접적으로 연결하기 어렵습니다.

JS 훅(useResponsiveBreakpoint)

  • matchMedia 이벤트를 구독해 React 상태로 뷰포트 모드를 전달합니다.
  • data-mode, isDesktop, isMobile 등을 통해 로직 분기와 테스트가 쉬워집니다.
  • 하이드레이션 불일치를 피하기 위해 pending→실제 모드 전환, opacity 제어 등의 관리가 필요합니다.
  • 브레이크포인트 변화 시 관련 컴포넌트가 리렌더링되지만, memoization으로 최소화했습니다.

JS 훅 방식을 채택한 이유

  1. 로직과 뷰포트 상태를 즉시 연동
  2. 테스트·디버깅·접근성 향상
  3. App Router + SSR 환경에서의 확장성
  4. 컴포넌트/훅 역할 분리 철학 반영
  5. CSS + JS 혼합 전략으로 확장 가능

> 요약

  • CSS @media가 가장 가볍고 안정적이지만, 이번 프로젝트는 뷰포트 모드에 따라 로직을 제어해야 했습니다. 따라서 useResponsiveBreakpoint 훅을 통해 모드를 상태로 관리하고, ResponsiveContainer에서 데이터 속성·스타일을 제어하는 방식을 선택했습니다. 하이드레이션 불일치를 방지하기 위해 pending 상태와 opacity 컨트롤을 도입했고, 이 덕분에 로직·테스트·확장성 측면에서 유연한 구조를 확보했습니다.