# Mobile-First Strategy: How to Implement Device-Specific Rendering without Frameworks (프레임워크 없이 구현하는 모바일 퍼스트 렌더링 전략)

웹 성능 최적화(WPO)의 세계에서 **"Content is King"**이라는 말이 있습니다. 하지만 화려한 비주얼(Visual) 역시 포기할 수 없는 요소입니다. 특히 브랜드의 신뢰도가 중요한 검증 사이트나 데이터 분석 플랫폼에서는 더욱 그렇습니다.

이번 포스트에서는 제가 운영 중인 [**MT-LAB (먹튀랩)**](https://mt-lab.net) 프로젝트에서 구글의 Core Web Vitals 점수를 방어하면서도, 데스크톱 사용자에게는 풍부한 시각적 경험을 제공한 **'하이브리드 렌더링 전략'**을 소개합니다.

### 🚀 Key Optimization Strategies (핵심 전략)

**1\. Conditional Resource Loading (조건부 리소스 로딩)** 단순히 CSS 미디어 쿼리(`@media`)로 숨기는 것은 성능에 도움이 되지 않습니다. 자바스크립트의 `window.innerWidth`를 사용하여 뷰포트 크기를 감지하고, 모바일 환경에서는 무거운 미디어 자산(Assets)의 로딩 자체를 차단해야 합니다.

**2\. Removing Bloatware (불필요한 라이브러리 제거)** 초기에는 애니메이션을 위해 GSAP을 사용했으나, 이를 제거하고 브라우저 네이티브 API(`IntersectionObserver`, `CSS Transitions`)로 전환했습니다. 이를 통해 TBT(Total Blocking Time)를 0ms에 가깝게 줄일 수 있었습니다.

**3\. Font Display Strategy (폰트 전략)** `font-display: swap` 속성을 사용하여 네트워크가 느린 환경에서도 텍스트가 즉시 보이도록 처리했습니다. 이는 LCP 점수 향상에 결정적인 역할을 했습니다.

### 📊 Conclusion (결론)

성능 최적화는 단순히 코드를 줄이는 것이 아니라, **"사용자의 환경에 맞는 콘텐츠를 전달하는 것"**입니다. 모바일 사용자에게는 속도를, PC 사용자에게는 감성을 전달하는 것이 진정한 반응형 웹입니다.

이러한 최적화 기술이 궁금하다면, 아래의 레퍼런스 사이트를 참고하시기 바랍니다.

> [**Reference:** **MT-LAB: Safe Betting Verification System**](https://mt-lab.net/)