---
id: FE-ARCH-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [[Frontend|[Frontend]], software-[[Architecture|Architecture]], web-development, react, [[State|State]]-[[Management|Management]]]
last_reinforced: 2026-04-26
---

# Frontend Architecture (프론트엔드 아키텍처)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "복잡한 UI 상태를 예측 가능한 흐름으로 관리하고, 사용자 경험(UX)을 기술적 구조로 구현하라" — 단순한 화면 구성을 넘어 컴포넌트 설계, 상태 관리 전략, 렌더링 성능 최적화, 그리고 에이전트 인터랙션을 아우르는 현대 웹 기술의 설계도.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** UI를 독립적인 컴포넌트로 분리하고, 단방향 데이터 흐름(Unidirectional Data Flow)을 통해 상태 변화에 따른 부수 효과를 제어하는 선언적 UI 아키텍처 패턴.
- **핵심 구성 요소:**
    - **Component-Driven Development (CDD):** 재사용 가능한 원자적 단위의 UI 설계.
    - **State Management:** 전역 상태(Redux, Zustand)와 로컬 상태의 균형.
    - **Rendering Strategies:** CSR, SSR, SSG, ISR 등 비즈니스 요구사항에 맞는 렌더링 방식 선택.
    - **Micro Frontends:** 대규모 애플리케이션을 독립적으로 배포 가능한 작은 단위로 분리.
    - **AI-Driven UI:** 에이전트의 응답에 따라 실시간으로 변화하는 동적 인터페이스(Generative UI).
- **의의:** 복잡해지는 웹 애플리케이션의 유지보수성을 확보하고, 초저지연 인터랙션을 보장함.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 단순히 정적 페이지를 보여주던 방식에서, 수만 개의 상태를 실시간으로 동기화하고 에이전트와 대화하는 '지능형 애플리케이션 플랫폼'으로 진화.
- **정책 변화:** Antigravity 프로젝트는 에이전트의 지식 탐색 결과와 지식 지도를 시각화하기 위해 최신 [[Next.js|Next.js]] 기반의 서버 컴포넌트 아키텍처를 표준으로 채택함.

## 🔗 지식 연결 (Graph)
-[[_system|system]]-Design-for-AI-Scale, UX-Design, [[Context-Aware-Computing|Context-Aware-Computing]], [[Domain-Driven-Design-DDD|Domain-Driven-Design-DDD]]
- **Raw Source:** 10_Wiki/Topics/AI/Frontend-Architecture.md