정의
프론트엔드 시스템 디자인은 백엔드 시스템 디자인(트래픽·저장소·캐시·샤딩)과 대칭되는 프론트엔드 고유의 복잡도 영역. 컴포넌트 분리를 넘어 상태 원본 위치, 데이터 stale 허용 범위, 렌더링 전략(SSR/CSR), 관측성(telemetry), UX 흐름 구조화를 다룬다.
핵심 속성
- 다루는 복잡도: 협업 편집(OT/CRDT), 실시간 커서 동기화, 네트워크 지연 UX, 피드 무한 스크롤 성능, 대규모 대시보드 상태관리
- 결정 항목: 상태 원본 위치 / stale 허용 범위 / SSR vs CSR 경계 / telemetry 설계 / 사용자 이해 가능한 흐름 구조
- 대표 사례: Google Docs 협업 편집 UI, Threads 피드, Amazon 장바구니, Netflix 스트리밍 UI, Micro Frontend, Agentic UI
- 자료 현황: 백엔드 시스템 디자인 대비 프론트엔드 사례 중심 자료 희소
관계
- 20260512-ai-bottleneck-design-workflow — 대조: AI 시대 디자인 워크플로와 프론트엔드 역할 변화
- 20260510-agent-execution-right-is-new-moat — 연장: 실행권과 설계 능력이 모두 새 모트
- 20260528-jojoldu — entity: 이동욱, 이 개념을 제시한 저자
인용
“AI가 만든 화면을 그대로 붙이는 사람이 아니라, 복잡한 제품 요구사항을 상태, 데이터 흐름, 렌더링 전략, 성능, 관측성, 사용자 경험으로 구조화할 수 있는 사람이 더 중요해질 가능성이 높다.”