docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

10_Wiki/Topics/Frontend_Mastery/SaaS 대시보드 및 이커머스 레이아웃 구축.md

@@ -1,7 +1,7 @@
-# [[SaaS 대시보드 및 이커머스 레이아웃 구축]]
+# [[SaaS 대시보드 및 이커머스 레이아웃 구축|SaaS 대시보드 및 이커머스 레이아웃 구축]]
 
-## 📌[[ brief]] 시 Summary
-[[SaaS]] 대시보드 및 이커머스 레이아웃 구축은 방대한 데이터와 제품 정보를 다양한 크기의 화면에서 일관되고 직관적으로 보여주기 위한 반응형 설계 과정입니다. 이를 위해 [[CSS Grid]]와 [[Flexbox]]를 결합하여 견고한 레이아웃을 구성하고, 컨테이너 쿼리([[Container Queries]])를 통해 컴포넌트 단위의 유연성을 확보합니다. 또한, 시각적 계층 구조를 명확히 하고 상호작용에 대한 즉각적인 피드백을 제공하기 위해 의도적인 애니메이션(Motion Design)을 전략적으로 적용하여 유지보수성과 사용자 경험(UX)을 동시에 향상시킵니다.
+## 📌Brief 시 Summary
+[[SaaS|SaaS]] 대시보드 및 이커머스 레이아웃 구축은 방대한 데이터와 제품 정보를 다양한 크기의 화면에서 일관되고 직관적으로 보여주기 위한 반응형 설계 과정입니다. 이를 위해 CSS Grid와 Flexbox를 결합하여 견고한 레이아웃을 구성하고, 컨테이너 쿼리([[Container Queries|Container Queries]])를 통해 컴포넌트 단위의 유연성을 확보합니다. 또한, 시각적 계층 구조를 명확히 하고 상호작용에 대한 즉각적인 피드백을 제공하기 위해 의도적인 애니메이션(Motion Design)을 전략적으로 적용하여 유지보수성과 사용자 경험(UX)을 동시에 향상시킵니다.
 
 ## 📖 Core Content
 
@@ -20,7 +20,7 @@
 *   **애니메이션 성능 최적화:** 대시보드나 이커머스와 같이 렌더링할 컴포넌트가 많은 곳에서 너비(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]])
+- **Related Topics:** [[CSS Grid|CSS Grid]], Flexbox, 컨테이너 쿼리 (Container Queries), 모바일 중심 설계 ([[Mobile-First Design|Mobile-First Design]]), 마이크로 인터랙션 ([[Micro-interactions|Micro-interactions]])
 - **Projects/Contexts:** 데이터 중심 대시보드 (Data-heavy Dashboards), 반응형 이커머스 웹사이트 (Responsive E-commerce Websites)
 - **Contradictions/Notes:** 뷰포트 기반의 일반적인 미디어 쿼리(Media Queries)는 사이드바나 영웅 영역 등 컴포넌트가 배치된 개별 컨텍스트의 가용 공간을 파악하지 못하는 근본적인 한계가 있습니다. 따라서 대시보드나 이커머스처럼 복잡하고 모듈화된 레이아웃에서는 화면 크기가 아닌 컴포넌트 부모 크기에 반응하는 컨테이너 쿼리가 2026년의 새로운 표준으로 권장됩니다 [3].