feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

10_Wiki/Topics/AI_and_ML/단일 코드베이스를 통한 멀티 디바이스(모바일-데스크톱) 웹 인터페이스 구축.md

@@ -1,10 +1,26 @@
+---
+id: wiki-2026-0508-단일-코드베이스를-통한-멀티-디바이스-모바일-데스크톱-웹-
+title: 단일 코드베이스를 통한 멀티 디바이스(모바일 데스크톱) 웹 인터페이스 구축
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
+tags: [uncategorized]
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+---
+
 # 단일 코드베이스를 통한 멀티 디바이스(모바일/데스크톱) 웹 인터페이스 구축
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 반응형 웹 디자인([[Responsive Web Design|Responsive Web Design]])은 모바일과 데스크톱용 사이트를 별도로 구축하는 대신, 유동적 그리드, 유연한 이미지, CSS 미디어 쿼리 등을 활용해 단일 코드베이스로 모든 기기에 유연하게 적응하는 인터페이스를 구축하는 방법론입니다 [1-3]. 이는 다양한 기기와 화면 크기에 일관된 사용자 경험을 제공하며, 모바일 우선 인덱싱(Mobile-first indexing) 및 [[Core Web Vitals|Core Web Vitals]]와 같은 SEO 및 성능 최적화에 필수적인 요소로 자리 잡았습니다 [4-6].
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 **1. 핵심 원칙 (Core [[Principles|Principles]])**
 단일 코드베이스로 멀티 디바이스에 대응하기 위해 다음과 같은 5가지 핵심 원칙이 사용됩니다.
 * **유동적 그리드 (Fluid Grids):** 고정된 픽셀(px)이 아닌 백분율(%)이나 `fr`과 같은 상대적인 단위를 사용하여 뷰포트 크기에 맞춰 레이아웃이 자연스럽게 확장 및 축소되도록 설계합니다 [2, 7]. [[Flexbox|Flexbox]]와 [[CSS Grid|CSS Grid]]를 활용하면 여러 기기에서 복잡한 계산 없이 일관된 정렬과 레이아웃을 구현할 수 있습니다 [8-10].
@@ -24,7 +40,7 @@
 **4. 성능 최적화 (Performance [[Optimization|Optimization]])**
 * 다양한 디바이스 환경, 특히 느린 모바일 네트워크에서도 빠른 경험을 제공해야 합니다 [13, 27]. 폴드 아래 이미지는 지연 로딩(lazy-loading)하고, LCP(Largest Contentful Paint)에 해당하는 핵심 이미지는 `fetchpriority="high"`로 로드하며, 사용하지 않는 뷰포트별 CSS는 분리해 렌더링 블로킹을 최소화해야 합니다 [28-31].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** 반응형 웹 디자인(Responsive Web Design), [[모바일 우선 설계(Mobile-First Design)|모바일 우선 설계(Mobile-First Design]], 컨테이너 쿼리(Container Queries), CSS Grid / Flexbox, [[유동적 타이포그래피 (Fluid Typography)|유동적 타이포그래피(Fluid Typography]]
 - **Projects/Contexts:** 디자인 시스템 컴포넌트화, Core Web Vitals 및 SEO 성능 최적화
 - **Contradictions/Notes:**
@@ -32,4 +48,35 @@
   - `vw`나 `cqi` 같은 뷰포트 및 컨테이너 상대 단위만을 이용해 폰트 크기를 제어하면, 시각 장애인 등 접근성 사용자가 브라우저 확대/축소 기능을 사용할 때 글씨가 커지지 않는 문제(WCAG 1.4.4 위반)가 발생할 수 있습니다. 따라서 반드시 `calc()`나 `clamp()`를 통해 `rem`, `em` 단위와 결합하여 사용자의 줌(Zoom) 기본 설정을 존중해야 합니다 [34-39].
 
 ---
-*Last updated: 2026-04-26*
+*Last updated: 2026-04-26*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+
+- **과거 데이터와의 충돌:** 없음
+- **정책 변화:** 없음
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |