Fix: Restore unified Topics folder and reorganize specialized category folders

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

@@ -0,0 +1,28 @@
+# [[SaaS 대시보드 및 이커머스 레이아웃 구축|SaaS 대시보드 및 이커머스 레이아웃 구축]]
+
+## 📌Brief 시 Summary
+[[SaaS|SaaS]] 대시보드 및 이커머스 레이아웃 구축은 방대한 데이터와 제품 정보를 다양한 크기의 화면에서 일관되고 직관적으로 보여주기 위한 반응형 설계 과정입니다. 이를 위해 CSS Grid와 Flexbox를 결합하여 견고한 레이아웃을 구성하고, 컨테이너 쿼리([[Container Queries|Container Queries]])를 통해 컴포넌트 단위의 유연성을 확보합니다. 또한, 시각적 계층 구조를 명확히 하고 상호작용에 대한 즉각적인 피드백을 제공하기 위해 의도적인 애니메이션(Motion Design)을 전략적으로 적용하여 유지보수성과 사용자 경험(UX)을 동시에 향상시킵니다.
+
+## 📖 Core Content
+
+**1. SaaS 대시보드 레이아웃 및 스타일링 전략**
+*   **CSS Grid를 통한 2차원 배치:** 대시보드는 다양한 위젯과 데이터 구조를 한 화면에 배치해야 하므로, 행과 열을 동시에 정밀하게 제어할 수 있는 CSS Grid가 매우 적합합니다 [1]. 
+*   **컨테이너 쿼리를 활용한 데이터 반응성:** 분석 대시보드나 CRM 등 데이터가 많은 인터페이스는 화면이 좁아질 때 표와 차트가 자연스럽게 축소되지 않는 문제를 겪습니다 [2]. 이를 해결하기 위해 전체 화면 너비가 아닌 '부모 컨테이너의 너비'를 기준으로 반응하는 컨테이너 쿼리를 사용합니다 [3, 4]. 좁은 너비에서는 막대 차트를 단순한 숫자 카드로 변경하거나, 데이터 테이블의 각 행을 라벨이 붙은 카드 스택으로 변환하는 방식이 최선의 구현으로 꼽힙니다 [2].
+*   **애니메이션을 통한 데이터 시각화 강화:** 대시보드에서 카드와 차트를 독립적으로 움직이게 하는 계층형 모션(Layered Motion)을 적용하면, 배경 패널보다 전경의 핵심 지표를 약간 빠르게 이동시켜 중요한 정보로 사용자의 시선을 유도할 수 있습니다 [5]. 또한 애니메이션이 적용된 데이터 시각화를 통해 복잡한 정보와 변화 추이를 사용자가 빠르게 소화할 수 있도록 돕습니다 [6].
+
+**2. 이커머스 레이아웃 및 UI 구축 전략**
+*   **모바일 중심(Mobile-First) 구조와 콘텐츠 재배치:** 선도적인 이커머스 인터페이스는 모든 중단점(Breakpoint)에서 제품 이미지를 최우선에 두고 가격, 리뷰, 옵션, CTA(콜투액션) 등의 지원 콘텐츠를 그 주위에 재배치합니다 [7]. 모바일 환경에서는 스크롤을 하더라도 항상 접근할 수 있도록 구매 버튼을 뷰포트 하단에 고정하며, 필터 및 정렬 컨트롤은 사이드바 대신 전체 화면 오버레이나 하단 시트 패턴으로 축소하여 제공합니다 [7].
+*   **카드 기반 레이아웃 (Card-Based Layouts):** 제품 목록에는 카드 기반 레이아웃을 사용하는 것이 가장 신뢰할 수 있는 패턴입니다 [8]. 큰 화면에서는 여러 카드가 나란히 놓이지만, 작은 화면에서는 레이아웃이 깨지지 않고 수직으로 자연스럽게 쌓이므로 탐색이 매우 용이해집니다 [8].
+*   **사용자 피드백을 위한 마이크로 인터랙션:** 장바구니에 제품을 추가할 때 짧은 애니메이션으로 장바구니 아이콘을 강조하면, 사용자의 현재 탐색 흐름을 방해하지 않으면서 작업이 완료되었음을 명확히 피드백할 수 있습니다 [9]. 주문 후 결제 등 시간이 걸리는 과정에서는 스켈레톤 스크린(Skeleton screens)과 같은 로딩 애니메이션을 배치하여 체감 대기 시간을 줄이고 시스템 상태에 대한 확신을 줍니다 [10].
+
+**3. 유지보수성과 성능을 고려한 구조 설계**
+*   **역할에 따른 Flexbox와 Grid 분리:** 페이지의 전체적인 골격이나 뼈대(대규모 레이아웃)를 잡을 때는 CSS Grid를 사용하고, 그 내부 컴포넌트 요소들을 정렬할 때는 Flexbox를 혼합하여 사용하는 것이 효율적이고 유지보수하기 좋은 아키텍처를 만듭니다 [11, 12].
+*   **애니메이션 성능 최적화:** 대시보드나 이커머스와 같이 렌더링할 컴포넌트가 많은 곳에서 너비(width), 높이(height), 여백(margin) 등 레이아웃에 영향을 주는 속성을 애니메이션화하면 값비싼 리플로우(Reflow)와 리페인트(Repaint)가 발생하여 성능이 저하됩니다 [13, 14]. 따라서 렌더링 성능을 최적화하기 위해서는 GPU 가속을 활용할 수 있는 `transform`이나 `opacity` 위주로 애니메이션을 설계해야 합니다 [14-16].
+
+## 🔗 Knowledge Connections
+- **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]. 
+
+---
+*Last updated: 2026-04-26*