Files

T

Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

2026-07-05 00:33:48 +09:00

5.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)

매 한 줄

"매 작은 화면부터 design — 큰 화면 의 progressive enhancement". Luke Wroblewski (2009)가 제창, smallest viewport 기준 baseline CSS, larger breakpoint 의 min-width media query 의 progressive enhancement. 매 2026 의 mobile traffic 60%+ 환경의 default approach.

매 핵심

매 vs Desktop-first

	Mobile-first	Desktop-first
Baseline	smallest viewport	largest viewport
Media query	`min-width` (up)	`max-width` (down)
Mindset	progressive enhancement	graceful degradation
Default 2026	✓	(legacy)

매 3원칙 (Wroblewski)

Constraints force focus — small screen 매 essential content prioritize.
Capabilities expand — touch, GPS, camera 의 leverage.
Progressive enhancement — base 의 small + add 의 large.

매 응용

Performance budget — mobile network slow → minimal payload first.
Touch-first UX — 44×44px tap target (Apple HIG), 48×48dp (Material).
Content hierarchy — most important top, fold concept abandoned.

💻 패턴

1. CSS mobile-first media query

/* base — mobile (< 640px implicit) */
.container {
  padding: 1rem;
  font-size: 14px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* tablet ≥ 640px */
@media (min-width: 640px) {
  .container { padding: 2rem; font-size: 16px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* desktop ≥ 1024px */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

2. Tailwind mobile-first utilities

// base 의 mobile, sm:/md:/lg: 의 enhancement
export function Card() {
  return (
    <div className="p-4 sm:p-6 lg:p-8">
      <h2 className="text-xl sm:text-2xl lg:text-3xl">Title</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <Item />
        <Item />
        <Item />
      </div>
    </div>
  );
}

3. Container queries (modern 2026)

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card { display: flex; flex-direction: column; }

@container card (min-width: 400px) {
  .card { flex-direction: row; }
}

4. Responsive image (srcset)

<img
  src="hero-mobile.webp"
  srcset="hero-mobile.webp 480w, hero-tablet.webp 1024w, hero-desktop.webp 1920w"
  sizes="(min-width: 1024px) 1920px, (min-width: 640px) 1024px, 100vw"
  alt="Hero"
  loading="lazy"
/>

5. Viewport meta + safe area

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

6. Touch-friendly tap targets

button, a {
  min-width: 44px;
  min-height: 44px;
  padding: 0.75rem 1rem;
  /* Apple HIG: 44×44pt minimum */
}

7. Performance: critical CSS inline

<head>
  <style>/* critical above-fold CSS, < 14KB */</style>
  <link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
</head>

매 결정 기준

상황	Approach
New project 2026	mobile-first default.
Legacy desktop site	gradual migration via container queries.
Internal tool (desktop only)	desktop-first 도 OK 매 — but mobile-first 매 future-proof.
Component library	container queries > viewport media queries (component reusability).

기본값: Tailwind mobile-first utilities + container queries 매 component-level.

🔗 Graph

변형: 컨테이너 쿼리 (Container Queries)
응용: CSS_Architecture_and_Styling
Adjacent: Core Web Vitals Optimization (INP, LCP, CLS)

🤖 LLM 활용

언제: 새 web project, e-commerce, content site, public-facing app, PWA. 언제 X: desktop-only enterprise tool 의 absolute desktop-first 가 효율적인 case (rare).

❌ 안티패턴

max-width 만 의 의존: 매 reverse mobile-first defeats purpose.
고정 px 의 layout: rem/em/% 의 use.
Hover-only interactions: touch 의 hover 없음 — tap fallback 필수.
Fold obsession: 매 mobile 의 scrolling natural — fold 없음.
Tap target < 44px: thumb miss-tap.

🧪 검증 / 중복

Verified (Wroblewski "Mobile First" 2011, Google Web.dev 2026, MDN responsive design).
신뢰도 A.
Canonical 매 모바일 퍼스트(Mobile-First) — 매 모바일 우선주의 (Mobile-First) 디자인, 모바일 퍼스트 및 다양한 디바이스 환경을 위한 반응형 레이아웃 구축 redirect 매 here.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — canonical full content + 7 patterns (CSS, Tailwind, container queries)

5.3 KiB Raw Blame History Unescape Escape