프롬프트 중심 UI를 위한 React + TypeScript 아키텍처 설계
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 엔지니어 및 LLM 애플리케이션 개발자 (중간~고난이도)
핵심 요약
- 모듈화된 컴포넌트 구조 :
PromptTemplateForm
,LLMApiCaller
,ResponseRenderer
등 명확한 역할 분리 - 레이어드 상태 분리 :
usePromptVariables()
,usePromptHistory()
등 커스텀 훅을 활용한 상태 관리 - 프롬프트 실행 환경 설계 :
PromptFormContainer
가 컴포넌트 간 데이터 흐름을 조율하는 핵심 역할 수행
섹션별 세부 요약
1. LLM UI의 핵심 도전 과제
- 비정형 입력 처리 : 자연어/코드 하이브리드 형식의 프롬프트 입력 관리 필요
- 확률적 출력 처리 :
streaming
및error management
를 통한 예측 불확실성 대응 - 탐색적 반복 패턴 :
PromptHistoryManager
를 통한 프롬프트 버전 관리 및 재사용 지원
2. 모듈화된 UI 아키텍처
- PromptTemplateForm :
TextInput
,Select
컴포넌트를 활용한 구조화된 입력 템플릿 생성 - PromptCompiler :
topic
,tone
등 변수를 기반으로prompt string
생성 - LLMApiCaller :
/api/llm
엔드포인트 호출 및ReadableStream
기반 스트리밍 처리 - ResponseRenderer :
Markdown
컴포넌트를 통한 모델 출력 포맷팅
3. 상태 분리 및 훅 기반 설계
interface AppState {
currentPrompt: string;
variables: Record;
output: string;
history: PromptSession[];
isStreaming: boolean;
}
usePromptExecution()
: API 호출 및 스트리밍 로직 캡슐화usePromptHistory()
:add()
메서드를 통한 세션 저장 및 복구usePromptVariables()
:PromptFormContainer
에서 상태 추적
4. 컴포넌트 간 협업 흐름
PromptFormContainer
→PromptTemplateForm
으로topic
,tone
전달PromptCompiler
→LLMApiCaller
에prompt string
전달LLMApiCaller
→ 스트리밍 응답을responseText
상태에 저장ResponseRenderer
→Markdown
으로 최종 출력 렌더링usePromptHistory().add()
→ 현재 프롬프트/출력 쌍 저장
결론
- *React + TypeScript 기반 프롬프트 UI는 모듈화된 컴포넌트와 레이어드 상태 관리**를 통해 확장성과 유지보수성을 달성해야 합니다.
PromptFormContainer
가 데이터 흐름을 중앙에서 조율하고,usePromptHistory()
등 커스텀 훅을 통해 상태 분리가 가능합니다. 이 구조는 테스트 용이성과 팀 협업을 지원하며,preset templates
또는multi-agent threads
등 기능 확장에도 유리합니다.