feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
@@ -14,7 +14,7 @@ E-commerce Platforms(이커머스 플랫폼)은 제품 카탈로그, 장바구
  * 이러한 모듈식 접근 방식을 통해 비즈니스가 확장됨에 따라 새로운 결제 옵션을 추가하거나 제품 추천 기능을 갱신해야 할 때, 플랫폼 전체에 중단을 일으키지 않고 특정 컴포넌트만 쉽게 교체하거나 확장할 수 있는 유연성을 확보합니다 [2, 10].

 ## 🔗 Knowledge Connections
- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Incremental Static Regeneration (ISR)]], [[Component-Based Architecture]], [[Search Engine Optimization (SEO)]]
+- **Related Topics:** [[Server-Side Rendering (SSR)]], Incremental Static Regeneration (ISR), [[Component-Based Architecture]], [[Search Engine Optimization (SEO)]]
 - **Projects/Contexts:** 대규모 트래픽을 처리하면서도 검색 엔진 노출을 극대화하고 실시간 재고/가격 변동을 반영해야 하는 프론트엔드 웹 성능 최적화 및 렌더링 아키텍처 구축 맥락 [3, 4, 7].
 - **Contradictions/Notes:** 제공된 소스는 이커머스 플랫폼의 백엔드 비즈니스 로직이나 운영 모델보다는 주로 프론트엔드의 화면 렌더링 최적화(SSR/ISR)와 아키텍처(컴포넌트화) 측면에 초점을 맞추고 있어, 결제 시스템의 내부 동작 원리 등에 대해서는 소스에 관련 정보가 부족합니다.

@@ -11,7 +11,7 @@ Meta Quest Store는 Meta에서 운영하는 플랫폼으로, 제공된 문서

 ## 🔗 Knowledge Connections
 - **Related Topics:** [[React Compiler]], [[Performance Optimization]]
- **Projects/Contexts:** [[Meta's Internal Testing (React Compiler 성능 검증)]]
+- **Projects/Contexts:** Meta's Internal Testing (React Compiler 성능 검증)
 - **Contradictions/Notes:** Meta Quest Store에 대한 독립적이고 포괄적인 설명은 제공된 소스에 관련 정보가 부족합니다. 오직 React Compiler의 적용으로 인한 성능 최적화 지표를 보여주는 단편적인 사례(Case Study)로만 활용되었습니다.

 ---
@@ -20,7 +20,7 @@ SaaS 대시보드 및 이커머스 UI 개발은 복잡한 데이터와 다양한

 ## 🔗 Knowledge Connections
 - **Related Topics:** [[CSS Grid 및 Flexbox]], [[컨테이너 쿼리(Container Queries)]], [[성능 최적화(Reflow & Repaint)]], [[유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind)]]
- **Projects/Contexts:** [[데이터 중심의 SaaS 어드민 패널 및 CRM 대시보드 구축]], [[이커머스 모바일 최적화 및 상품 탐색 UX/UI 설계]]
+- **Projects/Contexts:** [[데이터 중심의 SaaS 어드민 패널 및 CRM 대시보드 구축]], 이커머스 모바일 최적화 및 상품 탐색 UX/UI 설계
 - **Contradictions/Notes:** 실무에서는 단일 CSS 방법론에 얽매이지 않습니다. Tailwind CSS는 레이아웃과 간격 설정 시 빠른 개발 속도와 일관성을 보장하지만 HTML이 길어지는 단점이 있고, CSS Modules는 표준 CSS를 사용할 수 있지만 컨텍스트 스위칭이 발생합니다. 이에 따라 대규모 엔터프라이즈 팀은 레이아웃에는 Tailwind를 사용하고, 복잡한 애니메이션이나 정밀한 스타일 제어가 필요한 개별 컴포넌트에는 CSS Modules(또는 SCSS)를 혼합하여 사용하는 하이브리드 전략을 채택하기도 합니다 [23-26].

 ---
@@ -20,8 +20,8 @@ SaaS 대시보드 및 이커머스 레이아웃 구축은 방대한 데이터와
 *   **애니메이션 성능 최적화:** 대시보드나 이커머스와 같이 렌더링할 컴포넌트가 많은 곳에서 너비(width), 높이(height), 여백(margin) 등 레이아웃에 영향을 주는 속성을 애니메이션화하면 값비싼 리플로우(Reflow)와 리페인트(Repaint)가 발생하여 성능이 저하됩니다 [13, 14]. 따라서 렌더링 성능을 최적화하기 위해서는 GPU 가속을 활용할 수 있는 `transform`이나 `opacity` 위주로 애니메이션을 설계해야 합니다 [14-16].

 ## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Grid]], [[Flexbox]], [[컨테이너 쿼리 (Container Queries)]], [[모바일 중심 설계 (Mobile-First Design)]], [[마이크로 인터랙션 (Micro-interactions)]]
- **Projects/Contexts:** [[데이터 중심 대시보드 (Data-heavy Dashboards)]], [[반응형 이커머스 웹사이트 (Responsive E-commerce Websites)]]
+- **Related Topics:** [[CSS Grid]], [[Flexbox]], [[컨테이너 쿼리 (Container Queries)]], 모바일 중심 설계 (Mobile-First Design), 마이크로 인터랙션 (Micro-interactions)
+- **Projects/Contexts:** 데이터 중심 대시보드 (Data-heavy Dashboards), 반응형 이커머스 웹사이트 (Responsive E-commerce Websites)
 - **Contradictions/Notes:** 뷰포트 기반의 일반적인 미디어 쿼리(Media Queries)는 사이드바나 영웅 영역 등 컴포넌트가 배치된 개별 컨텍스트의 가용 공간을 파악하지 못하는 근본적인 한계가 있습니다. 따라서 대시보드나 이커머스처럼 복잡하고 모듈화된 레이아웃에서는 화면 크기가 아닌 컴포넌트 부모 크기에 반응하는 컨테이너 쿼리가 2026년의 새로운 표준으로 권장됩니다 [3]. 

 ---
@@ -16,7 +16,7 @@ SaaS 플랫폼과 인터랙티브 대시보드는 실시간 데이터 업데이

 ## 🔗 Knowledge Connections
 - **Related Topics:** [[Client-Side Rendering (CSR)]], [[Component-Based Architecture]], [[Automatic Batching]], [[Concurrent Rendering]]
- **Projects/Contexts:** [[데이터 집약적 대시보드 성능 최적화 사례]], [[Sanity Studio]]
+- **Projects/Contexts:** 데이터 집약적 대시보드 성능 최적화 사례, [[Sanity Studio]]
 - **Contradictions/Notes:** React 서버 컴포넌트(RSC) 적용과 관련하여 소스 간 시각 차이가 존재합니다. 일부 소스는 읽기 전용 데이터 디스플레이(제품 카탈로그, 단순 대시보드)에 RSC를 사용하면 클라이언트 JavaScript 번들을 40-60%까지 줄일 수 있다고 주장하지만 [19], 다른 소스에서는 빈번한 리렌더링과 로컬 상태, 직접적인 브라우저 API에 크게 의존하는 '복잡한 대시보드 및 고도의 상호작용이 필요한 인터페이스'에는 RSC가 부적합(Poor fit)하며 클라이언트 컴포넌트를 사용해야 한다고 경고합니다 [20].

 ---
@@ -11,8 +11,8 @@
 - **유지보수를 위한 폴더 및 컴포넌트 구조화:** 대시보드(Dashboard) 화면은 프론트엔드 폴더 구조 내에서 고유한 페이지(Pages folder)로 관리되며, 여러 재사용 가능한 컴포넌트(Components)들이 결합하여 하나의 전체 뷰를 구성하게 됩니다 [6, 7]. 애플리케이션의 규모가 커짐에 따라 유지보수성을 높이기 위해서는 UI 시각 요소와 비즈니스 로직을 명확히 분리하는 구조적 접근이 필수적입니다 [6, 8].

 ## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Grid]], [[Container Queries]], [[데이터 시각화 애니메이션 (Animated Data Visualization)]], [[레이어 모션 (Layered Motion)]]
- **Projects/Contexts:** [[SaaS Dashboards]], [[데이터 테이블의 모바일 카드 스택 변환]], [[분석 대시보드 그리드 시스템]]
+- **Related Topics:** [[CSS Grid]], [[Container Queries]], 데이터 시각화 애니메이션 (Animated Data Visualization), 레이어 모션 (Layered Motion)
+- **Projects/Contexts:** SaaS Dashboards, 데이터 테이블의 모바일 카드 스택 변환, 분석 대시보드 그리드 시스템
 - **Contradictions/Notes:** 대시보드 및 CRM 구축 방법에 대하여 소스 데이터 내에 상충하는 의견이나 모순점은 발견되지 않았습니다.

 ---
@@ -1,4 +1,4 @@
-# [[이커머스 모바일 최적화 및 상품 탐색 UX/UI 설계]]
+# 이커머스 모바일 최적화 및 상품 탐색 UX/UI 설계

 ## 📌 Brief Summary
 이커머스 모바일 최적화 및 상품 탐색 UX/UI 설계는 제한된 모바일 화면에서도 사용자가 상품을 쉽게 탐색하고 결제에 이를 수 있도록 유연한 레이아웃과 반응형 디자인을 적용하는 과정입니다 [1]. 모든 화면 크기에서 상품 이미지를 우선시하며, 장바구니 담기와 같은 주요 행동에 목적 있는 애니메이션 피드백을 제공하여 쇼핑 경험의 마찰을 줄이고 직관성을 높이는 것이 핵심입니다 [2], [1].
@@ -12,8 +12,8 @@
    *   **결제 및 진행 상태**: 사용자가 주문을 완료하고 결제를 진행하는 동안, 스켈레톤 스크린(skeleton screens)이나 진행률 표시 애니메이션을 제공하면 체감 대기 시간을 줄이고 시스템이 정상적으로 로딩 중이라는 확신을 줄 수 있습니다 [7].

 ## 🔗 Knowledge Connections
- **Related Topics:** [[반응형 웹 디자인(Responsive Web Design)]], [[컨테이너 쿼리(Container Queries)]], [[CSS Grid와 Flexbox]], [[마이크로 인터랙션(Micro-interactions)]]
- **Projects/Contexts:** [[이커머스 컴포넌트 기반 레이아웃 설계]], [[모바일 퍼스트(Mobile-First) UI 개발]]
+- **Related Topics:** 반응형 웹 디자인(Responsive Web Design), [[컨테이너 쿼리(Container Queries)]], CSS Grid와 Flexbox, [[마이크로 인터랙션(Micro-interactions)]]
+- **Projects/Contexts:** 이커머스 컴포넌트 기반 레이아웃 설계, 모바일 퍼스트(Mobile-First) UI 개발
 - **Contradictions/Notes:** 소스에 따르면, 이커머스 모바일 최적화는 단순히 데스크톱 화면의 크기를 줄이는 방식이 아닙니다. 데스크톱용 화면을 억지로 축소하면 텍스트가 너무 작아지고 요소들이 답답하게 배치되므로, 처음부터 가장 작은 모바일 화면을 기준으로 필수 요소를 우선 배치(모바일 퍼스트)하는 접근법을 강력히 권장합니다 [8]. 또한 애니메이션은 시각적 장식이 아닌 시스템 상태 전달 등 명확한 목적(기능)을 가질 때만 유효하며, 과도한 애니메이션은 피해야 합니다 [9], [10].

 ---
@@ -16,8 +16,8 @@
  * 마케팅 캠페인이나 시즌별 프로모션에 맞춰 기본 비즈니스 기능을 손상시키지 않고 다양한 테마를 적용하여 사이트의 디자인을 신속하게 변경할 수 있습니다 [11].

 ## 🔗 Knowledge Connections
- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Incremental Static Regeneration (ISR)]], [[Component-Based Architecture (CBA)]]
- **Projects/Contexts:** [[제품 카탈로그 및 장바구니 시스템 (Product Catalogs and Shopping Carts)]]
+- **Related Topics:** [[Server-Side Rendering (SSR)]], Incremental Static Regeneration (ISR), [[Component-Based Architecture (CBA)]]
+- **Projects/Contexts:** 제품 카탈로그 및 장바구니 시스템 (Product Catalogs and Shopping Carts)
 - **Contradictions/Notes:** 소스 [5]에서는 높은 수준의 상호작용이 필요한 전자상거래 웹사이트에 CSR이 흔히 사용된다고 언급합니다. 하지만 다른 소스들은 검색 엔진 최적화(SEO)와 최신 데이터 제공의 중요성 때문에 제품 탐색 및 세부 페이지에는 SSR 또는 ISR을 사용하는 것이 훨씬 이상적이고 필수적이라고 강조합니다 [1, 4, 7].

 ---