프롬프트 중심 UI를 위한 React + TypeScript 아키텍처 설계

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 엔지니어 및 LLM 애플리케이션 개발자 (중간~고난이도)

핵심 요약

  • 모듈화된 컴포넌트 구조 : PromptTemplateForm, LLMApiCaller, ResponseRenderer 등 명확한 역할 분리
  • 레이어드 상태 분리 : usePromptVariables(), usePromptHistory() 등 커스텀 훅을 활용한 상태 관리
  • 프롬프트 실행 환경 설계 : PromptFormContainer가 컴포넌트 간 데이터 흐름을 조율하는 핵심 역할 수행

섹션별 세부 요약

1. LLM UI의 핵심 도전 과제

  • 비정형 입력 처리 : 자연어/코드 하이브리드 형식의 프롬프트 입력 관리 필요
  • 확률적 출력 처리 : streamingerror 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. 컴포넌트 간 협업 흐름

  1. PromptFormContainerPromptTemplateForm으로 topic, tone 전달
  2. PromptCompilerLLMApiCallerprompt string 전달
  3. LLMApiCaller → 스트리밍 응답을 responseText 상태에 저장
  4. ResponseRendererMarkdown으로 최종 출력 렌더링
  5. usePromptHistory().add() → 현재 프롬프트/출력 쌍 저장

결론

  • *React + TypeScript 기반 프롬프트 UI는 모듈화된 컴포넌트와 레이어드 상태 관리**를 통해 확장성과 유지보수성을 달성해야 합니다. PromptFormContainer가 데이터 흐름을 중앙에서 조율하고, usePromptHistory() 등 커스텀 훅을 통해 상태 분리가 가능합니다. 이 구조는 테스트 용이성과 팀 협업을 지원하며, preset templates 또는 multi-agent threads 등 기능 확장에도 유리합니다.