중첩 컴포넌트 아키텍처

요청하신 중첩 컴포넌트 아키텍처 개념에 대한 고품질 한국어 위키 노트를 작성하여 LLM Wiki 경로(llm-wiki/wiki/중첩 컴포넌트 아키텍처.md)에 성공적으로 생성 및 정립하였습니다.

Frontmatter 규격 준수:
- type: workflow
- status: draft
- core: false
- tags: ['llm', 'agent', 'workflow', 'UI-UX', 'design-system']
- sources: ['raw/10 Figma Component Structures Used by the World’s Best Design Teams.md']
- created: 2026-08-27 / updated: 2026-08-27
한 줄 정의: 브래드 프로스트의 아토믹 디자인 방법론을 바탕으로 Atoms → Molecules → Organisms 계층 구조를 수립하고, 베이스 컴포넌트 및 속성을 활용하여 UI 일관성과 재사용성을 높이는 워크플로우로 정의.
핵심 요지 & 상세:
- 3단계 아토믹 계층 구조 및 단방향 인스턴스 반영 구조 정리
- 베이스 컴포넌트와 Component Property(Boolean, Text, Instance Swap, Variant)를 통한 배리언트 60~80% 절감 방안
- Auto Layout 100% 적용 및 디자인-코드 명명 규칙 동기화(Developer-Aligned Naming)
- 통계 지표 수록: 디자이너 생산성 38% 증가, 개발자 생산성 31% 증가, 작업 완료량 34% 향상 (출처 표기 완료)
구체적 예시:
- Figma 구조 명세: UserChip Molecule의 아토믹 레이어 및 속성 매핑 예시
- 프론트엔드/코딩 에이전트 연동용 UserChip.tsx (React/TypeScript) 코드 구현 예시
연관 노트 링크: [[디자인 시스템 우선 접근 방식]], [[아토믹 디자인]], [[Antigravity]], [[코딩 에이전트]] 등 기존 위키 개념들과 유기적으로 상호 연결.

LLM Wiki