01
문제 정의
투자 정보 플랫폼은 차트, 호가, 주문, 뉴스, AI 분석 등 서로 다른 책임을 가진 패널을 조합해 화면을 구성합니다. 기능 수가 늘어날수록 각 패널이 레이아웃·제목·크기·공통 액션을 개별 구현하면 중복이 커지고 UI 정책을 일관되게 유지하기 어렵습니다.
- 43종 패널의 공통 UI 중복을 줄여야 했습니다.
- 새 패널을 추가할 때 기존 레이아웃 코드를 수정하지 않아야 했습니다.
- AI가 화면 구성을 요청하더라도 등록되지 않은 UI가 임의로 생성되지 않아야 했습니다.
02
설계 목표
| 목표 | 설계 기준 |
|---|---|
| 일관성 | 제목, 크기 제약, 공통 액션을 Common Frame에서 관리 |
| 확장성 | 패널 추가를 Registry 등록 작업으로 제한 |
| 안전성 | Layout Agent 명령을 Runtime Validation 후 변환 |
| 응집도 | Feature Panel은 도메인 데이터와 인터랙션에 집중 |
03
Component Architecture
Layout Agent / User Action
↓
Panel Command
↓
Runtime Validation
↓
Panel Registry
↓
Common Frame + Feature Panel| 레이어 | 책임 | 변경 이유 |
|---|---|---|
| Common Frame | 레이아웃, 제목, 크기, 공통 액션, 오류 경계 | 제품 전반의 UI 정책 변경 |
| Panel Registry | 패널 타입과 컴포넌트·메타데이터 연결 | 기능 등록 또는 배치 정책 변경 |
| Feature Panel | 도메인 조회, 상태 표현, 사용자 인터랙션 | 개별 기능 요구사항 변경 |
TypeScript Registry 설계 예시
type PanelDefinition = {
component: React.ComponentType<PanelProps>
minSize: { width: number; height: number }
defaultPlacement: GridPlacement
priority: number
}
const panelRegistry: Record<PanelType, PanelDefinition> = {
// panel type → component & layout metadata
}04
Runtime Validation
- Layout Agent가 패널 타입과 배치 명령을 생성합니다.
- 명령의 구조와 값이 허용 범위인지 검증합니다.
- Registry에 등록된 패널인지 확인합니다.
- 검증을 통과한 명령만 React 컴포넌트로 변환합니다.
AI가 React 코드를 직접 생성하는 방식이 아니라, 검증된 패널 조합만 선택하게 만들어 예측 가능성을 확보했습니다.
05
결과
- 43종 패널이 동일한 프레임과 상호작용 규칙을 재사용합니다.
- 기능 패널과 레이아웃 정책의 변경 범위를 분리했습니다.
- 새 패널은 Registry 등록만으로 기존 화면 구성 흐름에 참여할 수 있습니다.
- Agent-driven UI에서도 허용된 컴포넌트만 생성됩니다.