Mobile-First Responsive Design Principles (모바일 우선 반응형 설계 원칙)

📌 한 줄 통찰 (The Karpathy Summary)

"가장 작은 화면과 가장 열악한 네트워크 환경을 설계의 기준점으로 삼아 핵심 가치에 집중하고, 화면이 커짐에 따라 경험을 점진적으로 확장(Progressive Enhancement)하라" — 모바일 트래픽 60% 시대의 웹 디자인 필수 생존 전략.

추출된 패턴: "Mobile-Centric Constraints and Desktop Expansion" — 정보 밀도가 높은 데스크톱이 아닌, 공간이 제한된 모바일에서 가장 중요한 콘텐츠를 먼저 배치하고 확장하는 패턴.
핵심 기술 및 전략:
- Fluid Layouts: 고정 폭 대신 %, vw, vh 등 유연한 단위를 사용하고, CSS Grid와 Flexbox로 적응형 레이아웃 구축.
- Media Queries (Min-width): 모바일 스타일을 기본으로 작성하고, @media (min-width: ...)를 통해 큰 화면용 스타일을 덧붙임.
- Touch-Friendly UI: 최소 44x44px 이상의 터치 타겟 확보 및 스와이프 제스처 고려.
- Performance Priority: 불필요한 데스크톱용 리소스가 모바일에서 다운로드되지 않도록 최적화.
의의: Google의 모바일 우선 인덱싱(Mobile-first Indexing)에 완벽히 대응하며, 기기 종류에 상관없이 일관된 가치를 제공함.

과거 데이터와의 충돌: 과거에는 데스크톱 버전을 만든 후 요소를 숨기거나 줄이는 '우아한 퇴보(Graceful Degradation)' 방식을 썼으나, 현대 정책은 반대로 모바일에서 시작해 확장하는 '점진적 향상(Progressive Enhancement) 정책'을 표준으로 함.
정책 변화: Antigravity 프로젝트는 모든 웹 레이아웃 설계 시 모바일 시안(360px) 작성을 첫 번째 의무 정책으로 하며, 모바일 성능 점수가 데스크톱보다 높게 유지되도록 하는 'Mobile-Performance-Priority' 정책을 시행함.

Modern-Web-Design-Best-Practices-2025, UX-Design-Principles, Responsive-Images, SEO-Foundations
Raw Source: 00_Raw/Mobile-First Design.md, 00_Raw/Mobile-First Responsive Design.md