feat(wiki): 코드 그라운딩 23문서 + MOC 학습지도 39개

- 코드 그라운딩: 기술 주제 문서의 '적용 사례'에 실제 레포 구현 위치
  (file:line)+커밋 자동 주입 (예: 문서 청킹 전략→connectai/src/retrieval/chunker.ts).
  멱등 마커(CODE-GROUNDING)로 재실행 시 갱신.
- MOC: 39개 클러스터 폴더에 _MOC.md 학습지도 생성(진입점+통찰 주석).
도구: Datacollect/scripts/{code_grounding,moc_generator}.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

10_Wiki/Topics/UI_UX_Assets/Design & Experience/_MOC.md

@@ -0,0 +1,70 @@
+---
+id: moc-design-&-experience
+title: "Design & Experience — 학습 지도 (MOC)"
+category: "MOC"
+status: "active"
+type: "map-of-content"
+tags: ["MOC", "Design & Experience"]
+updated_at: 2026-06-08
+---
+
+# 🗺️ Design & Experience — 학습 지도 (MOC)
+
+> 이 클러스터의 **53개 문서**에 대한 진입점과 학습 순서. 자동 생성(moc_generator.mjs) — 재실행 시 갱신.
+
+## 📚 전체 문서 (Topics)
+- [[가상 DOM (Virtual DOM)]] — 실제 DOM을 매번 직접 조작하는 대신, 메모리 상에 UI의 가상 표현을 구축한 뒤 이전 상태와 비교(Diffing)하여 실제 변경이 필요한 최소한의 부분만 DOM에 반영함으로써 렌더링 성능을 최적화하는 React의 핵심 아키텍처입니다.
+- [[계층형 아키텍처 (Layered Architecture)]] — 계층형 아키텍처(Layered Architecture), 또는 n-tier 아키텍처는 시스템을 수평적인 계층(Layer)들로 나누어 구성하는 전통적이고 영향력 있는 소프트웨어 설계 패턴입니다 [1, 2]. 각 계층은 특정한 책임을 가지며, 인접한 하위
+- [[라이브러리 타입 선언 (dts) 확장]] — 라이브러리 타입 선언(.d.ts) 확장은 타입스크립트 환경에서 외부 자바스크립트 라이브러리의 타입 정보를 제공, 패치(patch) 또는 연장하기 위해 수행하는 작업입니다 [1-3]. 주로 인터페이스(Interface)의 '선언 병합(Declaratio
+- [[몰입감 (Presence)]] — 몰입감(Presence)은 사용자가 가상 현실이나 전자 환경을 현실 세계보다 우선적으로 수용하여, 비물리적 세계에 실제로 "존재하는 것(being there)"처럼 느끼는 심리적 상태를 의미합니다 [1, 2]. 이는 가상현실(VR) 및 혼합현실(MR)
+- [[바운디드 컨텍스트 (Bounded Context)]] — 바운디드 컨텍스트(Bounded Context)는 도메인 주도 설계(DDD)에서 크고 복잡한 비즈니스 도메인을 더 작고 관리하기 쉬운 하위 도메인으로 분할한 단위를 의미합니다 [1, 2]. 각 컨텍스트는 고유한 소프트웨어 모델과 보편적 언어(Ubiqu
+- [[비동기 데이터 패칭 (Async Operations Pattern)]] — 비동기 데이터 패칭(Async Operations Pattern)은 API 요청과 같은 비동기 작업 및 UI 상태를 안전하게 관리하기 위한 재사용 가능한 아키텍처 패턴입니다. 주로 식별 가능한 유니온(Discriminated Unions)을 활용하여 
+- [[상태 관리(State Management)]] — 상태 관리(State Management)는 사용자 입력, API 응답, UI 구성 및 애플리케이션 설정 등 시간이 지남에 따라 변경되는 데이터를 추적하고 유지하는 방법론입니다 [1]. 상태 흐름을 명확하게 관리하지 못하면 애플리케이션의 동작을 예측할
+- [[상태 모델링 (State Modeling)]] — 상태 모델링은 애플리케이션에서 시간에 따라 변화하는 데이터(사용자 입력, API 응답, UI 설정 등)를 구조화하고 추적하는 과정입니다 [1]. 잘못된 상태 관리는 예측 불가능한 동작과 디버깅의 어려움 등 기술 부채를 초래하므로, 견고한 모델링이 필수
+- [[선언 병합(Declaration Merging)]] — 선언 병합(Declaration Merging)은 TypeScript에서 동일한 이름을 가진 여러 개의 인터페이스를 선언할 경우, 컴파일러가 이를 자동으로 하나의 단일 인터페이스로 합치는 고유한 기능입니다 [1]. 주로 라이브러리 제작자가 사용자에게 
+- [[인터페이스 분리 원칙 (Interface Segregation Principle)]] — 인터페이스 분리 원칙(ISP)은 객체 지향 프로그래밍(OOP)을 위한 5가지 기본 설계 원칙인 SOLID 중 하나로, 로버트 C. 마틴(Robert C. Martin)에 의해 정립되었습니다 [1-3]. 이 원칙은 클라이언트가 자신이 사용하지 않는 인터
+- [[자기 효능감(Self Efficacy)]]
+- [[재조정 (Reconciliation)]] — React가 렌더링 시 새로운 가상 DOM(Virtual DOM) 트리와 이전 트리를 비교하여, 실제 DOM에 적용해야 할 최소한의 변경 사항만을 찾아내어 업데이트하는 $O(n)$ 복잡도의 핵심 디핑(Diffing) 알고리즘 프로세스입니다.
+- [[철벽 수비대    TypeScript 타입 시스템 (인터페이스 설계)]] — TypeScript의 타입 시스템은 구조적 타이핑(Structural Typing)을 기반으로 유연성을 제공하면서도, 런타임 에러와 예기치 않은 상태 변경으로부터 애플리케이션을 보호하는 아키텍처적 도구입니다. 견고한 수비 체계를 구축하기 위해서는 성능
+- [[치타 사람 이미지 프롬프트]] — 거대한 모래 치타의 추격을 받으며 사막을 질주하는 육상 선수를 통해 속도감과 자연의 힘을 초현실적으로 담아낸 시네마틱 컨셉 아트 프롬프트입니다.
+- [[클린 아키텍처 (Clean Architecture)]]
+- [[클린 아키텍처(Clean Architecture)]] — **클린 아키텍처(Clean Architecture)**는 로버트 C. 마틴(Robert C. Martin, "Uncle Bob")이 대중화한 소프트웨어 설계 철학으로, 비즈니스 로직과 애플리케이션 규칙을 시스템의 중심에 두어 코드의 품질을 높이는 것
+- [[타입 가드 (Type Guards)]]
+- [[타입 별칭 (Type Alias)]] — 타입 별칭(Type Alias)은 TypeScript에서 기존 타입에 새로운 이름을 부여하여 재사용성을 높이는 기능입니다 [1]. 인터페이스(Interface)와 유사하게 객체의 형태를 정의하는 데 사용할 수 있으며, 그 외에도 원시 타입(Primit
+- [[Accessibility Compliance WCAG]] — 핵심 내용 요약 예정
+- [[Americans with Disabilities Act ADA]] — 핵심 요약 작업 진행 중
+- [[AODA Accessibility for Ontarians with Disabilities Act]] — 핵심 요약 작업 진행 중
+- [[Apple Human Interface Guidelines]]
+- [[Code Formatting]] — 코드 포맷팅(Code Formatting)은 들여쓰기, 공백, 줄 바꿈, 따옴표 등 소스 코드의 시각적 스타일과 레이아웃을 일관된 규칙에 맞게 정리하는 과정입니다. 이는 코드의 런타임 논리나 실행 의미를 변경하지 않고 코드의 구조적 형태만 변환하며, 
+- [[Declaration Merging]]
+- [[Digital Humanities]]
+- [[Environmental Storytelling]]
+- [[Ergodic Literature]]
+- [[Formalism vs Structuralism]]
+- [[Human Computer Interaction (HCI)]]
+- [[Interface Segregation Principle (ISP)]] — 인터페이스 분리 원칙(Interface Segregation Principle, ISP)은 클라이언트가 자신이 사용하지 않는 동작이나 액션에 의존하도록 강요받아서는 안 된다는 소프트웨어 설계 원칙입니다 [1, 2]. 이 원칙은 불필요한 기능까지 묶여 
+- [[Linked Data Principles]]
+- [[Ludo narrative Dissonance]]
+- [[Ludonarrative Dissonance]]
+- [[Monorepo Architecture]]
+- [[Nash Equilibrium]]
+- [[Redux 등 상태 관리 (State Management)]]
+- [[Redux 스타일 리듀서 및 액션 관리]] — Redux 스타일 리듀서 및 액션 관리는 TypeScript의 식별 가능한 유니언(Discriminated Unions) 패턴이 가장 효과적으로 적용되는 대표적인 사례 중 하나입니다 [1, 2]. 이 패턴을 통해 다양한 액션 객체들을 타입 안전하게 구
+- [[Redux Toolkit Architecture]]
+- [[Self Determination Theory]]
+- [[Snyk Open Source]] — Snyk Open Source는 애플리케이션을 구성하는 서드파티 종속성(third-party dependencies)을 스캔하여 알려진 보안 취약점을 탐지하는 소프트웨어 구성 분석(SCA, Software Composition Analysis) 도구입
+- [[Spatial Computing]]
+- [[Structural Type System]]
+- [[Structural Typing]]
+- [[Type Alias]]
+- [[Type Declaration]] — 타입 선언(Type Declaration)은 TypeScript에서 변수, 함수, 객체 등의 데이터 형태와 규칙을 명시적으로 정의하여 시스템의 예측 가능성을 높이는 과정이다[1, 2]. 주로 `type` 별칭(Type Alias)이나 `interfac
+- [[TypeScript 라이브러리 타입 확장]] — 지식 요약 정보 추출 중...
+- [[TypeScript 인터페이스 및 시스템 보호 아키텍처 설계]] — TypeScript의 타입 시스템은 구조적 타이핑을 기반으로 하여 복잡한 비즈니스 로직을 보호하고 개발자의 의도를 명확히 규정하는 아키텍처적 도구이다 [1]. 인터페이스(Interface)와 타입 별칭(Type Alias)을 전략적으로 선택하여 컴파일
+- [[TypeScript 컴파일러 캐싱 최적화]] — TypeScript 컴파일러는 타입 검사 속도와 IDE 응답성을 향상시키기 위해 타입 관계를 캐싱하는 최적화 메커니즘을 사용합니다. 이 캐싱 메커니즘은 객체를 확장할 때 주로 `interface extends`를 사용할 경우 해당 이름을 기준으로 효과
+- [[TypeScript Compiler API]]
+- [[TypeScript의 안전한 인터페이스 설계]] — TypeScript의 인터페이스 설계는 언어의 근본적인 특성인 구조적 타이핑(Structural Typing)의 유연성을 수용하면서도, 의도치 않은 데이터 유입과 런타임 에러를 방어하는 것을 핵심으로 합니다 [1-3]. 이를 위해 개발자는 `inter
+- [[TypeScript의 인터페이스 및 객체 타입 설계]] — TypeScript의 인터페이스와 객체 타입 설계는 명시적인 이름이 아닌 객체의 실제 형태와 속성을 기준으로 타입 호환성을 결정하는 구조적 타이핑(Structural Typing)을 근간으로 합니다. 확장성과 컴파일 성능을 고려하여 인터페이스(Inte
+- [[Union Types]]
+- [[Variance (Covariance Contravariance Invariance)]]
+
+_53 docs · 자동 생성 2026-06-08_