Antigravity Agent
30 lines
2.6 KiB
Markdown
30 lines
2.6 KiB
Markdown
---
|
|
id: UX-MOBILE-FIRST-001
|
|
category: Unified
|
|
confidence_score: 1.0
|
|
tags: [mobile-first, responsive-design, ux, css-grid, [[Flexbox|Flexbox]], progressive-enhancement, mobile-indexing]
|
|
last_reinforced: 2026-04-26
|
|
---
|
|
|
|
# Mobile-First Responsive Design [[Principles|Principles]] (모바일 우선 반응형 설계 원칙)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "가장 작은 화면과 가장 열악한 네트워크 환경을 설계의 기준점으로 삼아 핵심 가치에 집중하고, 화면이 커짐에 따라 경험을 점진적으로 확장(Progressive Enhancement)하라" — 모바일 트래픽 60% 시대의 웹 디자인 필수 생존 전략.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **추출된 패턴:** "Mobile-Centric Constraints and Desktop Expansion" — 정보 밀도가 높은 데스크톱이 아닌, 공간이 제한된 모바일에서 가장 중요한 콘텐츠를 먼저 배치하고 확장하는 패턴.
|
|
- **핵심 기술 및 전략:**
|
|
- **Fluid Layouts:** 고정 폭 대신 `%`, `vw`, `vh` 등 유연한 단위를 사용하고, [[CSS Grid|CSS Grid]]와 Flexbox로 적응형 레이아웃 구축.
|
|
- **Media Queries (Min-width):** 모바일 스타일을 기본으로 작성하고, `@media (min-width: ...)`를 통해 큰 화면용 스타일을 덧붙임.
|
|
- **Touch-Friendly UI:** 최소 44x44px 이상의 터치 타겟 확보 및 스와이프 제스처 고려.
|
|
- **Performance Priority:** 불필요한 데스크톱용 리소스가 모바일에서 다운로드되지 않도록 최적화.
|
|
- **의의:** Google의 모바일 우선 인덱싱(Mobile-first Indexing)에 완벽히 대응하며, 기기 종류에 상관없이 일관된 가치를 제공함.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 과거에는 데스크톱 버전을 만든 후 요소를 숨기거나 줄이는 '우아한 퇴보(Graceful Degradation)' 방식을 썼으나, 현대 정책은 반대로 모바일에서 시작해 확장하는 '점진적 향상(Progressive Enhancement) 정책'을 표준으로 함.
|
|
- **정책 변화:** Antigravity 프로젝트는 모든 웹 레이아웃 설계 시 모바일 시안(360px) 작성을 첫 번째 의무 정책으로 하며, 모바일 성능 점수가 데스크톱보다 높게 유지되도록 하는 'Mobile-Performance-Priority' 정책을 시행함.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[Modern-Web-Design-Best-Practices-2025|Modern-Web-Design-Best-Practices-2025]], [[UX-Design-Principles|UX-Design-Principles]], Responsive-Images, SEO-Foundations
|
|
- **Raw Source:** 00_Raw/[[Mobile-First Design|Mobile-First Design]].md, 00_Raw/Mobile-First Responsive Design.md
|