id: FE-ARCH-001 category: Dev confidence_score: 1.0 tags: Frontend, software-Architecture, web-development, react, State-Management] last_reinforced: 2026-04-26

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

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

추출된 패턴: 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).
의의: 복잡해지는 웹 애플리케이션의 유지보수성을 확보하고, 초저지연 인터랙션을 보장함.

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