Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

4.3 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

모바일 퍼스트(Mobile First)

매 한 줄

"매 small screen 으로 시작, progressively enhance". Luke Wroblewski 가 2009 에 명명. 매 2026 에 mobile traffic 이 글로벌 web traffic 의 ~62%, 매 Google mobile-first indexing 의 default — 매 desktop-first 는 legacy 결정.

매 핵심

매 원칙

Constraint-first design: 매 small viewport 가 제일 어려운 case → 매 먼저 풀면 desktop 은 자동.
Content priority: 매 small screen 에서 매 essential content 만 → 매 information architecture 강제.
Performance budget: 매 mobile network (3G/4G) 가정 → 매 KB 단위 절약.

매 CSS 전략

min-width media query (not max-width).
mobile = base styles, desktop = enhancement.

매 응용

Tailwind / Bootstrap 의 default approach.
PWA 의 Performance budget design.
Email template (Outlook 가 desktop 강제 때문에 fallback 필요).

💻 패턴

Mobile-First CSS

/* Base = mobile */
.card {
  padding: 1rem;
  font-size: 16px;
}

/* Tablet enhancement */
@media (min-width: 768px) {
  .card { padding: 1.5rem; }
}

/* Desktop enhancement */
@media (min-width: 1024px) {
  .card { padding: 2rem; font-size: 18px; }
}

Tailwind Mobile-First

<!-- Default = mobile, sm:/md:/lg: = enhancements -->
<div class="p-4 text-sm md:p-6 md:text-base lg:p-8 lg:text-lg">
  Content
</div>

Conditional Image Loading

<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop.webp">
  <source media="(min-width: 768px)" srcset="hero-tablet.webp">
  <img src="hero-mobile.webp" alt="hero" loading="lazy">
</picture>

Touch-First Interaction

button {
  min-height: 44px; /* Apple HIG, also covers Material 48dp */
  min-width: 44px;
  padding: 0.75rem 1rem;
}

Container Queries (2026)

/* Modern alternative — component responds to its container, not viewport */
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

Performance Budget Test

// Lighthouse CI gate
module.exports = {
  ci: {
    assert: {
      assertions: {
        'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
        'total-byte-weight': ['error', { maxNumericValue: 500_000 }]
      }
    }
  }
};

매 결정 기준

상황	Approach
새 web 프로젝트	Mobile-first (default)
B2B internal dashboard, desktop-only	Desktop-first 정당화 가능
Component library	Container query (2026 default)
Email template	Hybrid — fluid + mobile-first

기본값: Mobile-first + container query (2026).

🔗 Graph

부모: Responsive_Design · Frontend_Architecture
변형: Mobile-First Approach · 모바일 우선주의 (Mobile-First) 디자인
응용: Progressive_Web_App · Mobile_Offline_First
Adjacent: 모바일 퍼스트 인덱싱(Mobile-First Indexing) · Performance_Budget

🤖 LLM 활용

언제: 매 existing desktop-first CSS 의 mobile-first conversion, 매 Tailwind class 자동 생성, 매 breakpoint analysis. 언제 X: 매 visual design 결정 — 매 designer 의 영역.

❌ 안티패턴

Hidden mobile content: 매 display: none 으로 desktop content 만 숨김 → 매 SEO + accessibility 손해.
max-width-only media query: 매 mobile 이 fallback 이 됨 — 매 mobile-first 정신 반대.
Fixed pixel breakpoints: 매 device-specific (iPhone 12 width 등) — 매 future-proof X.
Desktop hover-only interaction: 매 touch device 에서 작동 X.

🧪 검증 / 중복

Verified (Wroblewski, Mobile First 2011; Google Search Central mobile-first indexing 공식 문서, 2024 update).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Tailwind / container query / Lighthouse CI 추가

4.3 KiB Raw Blame History