조직마다 사용할 AI 봇과 문서, 사용자 권한을 관리하고, 운영자가 설정한 내용을 실제 대화에 반영하는 관리 환경이 필요했습니다.

관리부터 대화까지의 담당 범위 화면에 하드코딩된 모델 목록과 서버의 지원 모델을 일치시키고, 사용자가 선택한 모델이 실제 대화 실행에 반영되도록 관리 기능과 실행 경로를 연결해야 했습니다.

조직과 봇, 문서 관리 화면 조직 트리와 사용자 할당, 봇별 설정과 문서 접근 범위를 관리하는 화면을 구성했습니다. React Query에는 서버 조회와 변경 결과를, Zustand에는 선택 항목과 화면 상태를 두어 데이터의 책임을 나눴습니다.

모델 카탈로그와 실행 설정 연결 화면마다 나뉜 모델 목록을 백엔드 카탈로그 기준으로 통합하고, 모델 등록 화면과 Spring API를 추가했습니다. 사용자가 선택한 모델을 서버의 활성 모델 목록으로 검증한 뒤 실제 실행 설정에 우선 적용하도록 수정했습니다.

관리 설정이 실제 대화로 이어지는 흐름 운영자가 조직별 봇과 문서를 관리하고, 지원 모델을 등록한 뒤 같은 플랫폼에서 대화를 실행할 수 있도록 구성했습니다. 프론트엔드의 모델 선택과 서버가 사용하는 모델 설정도 일치시켰습니다.

AI는 텍스트와 차트뿐 아니라 도구 실행 단계와 진행률을 스트리밍으로 보냈습니다. 생성 중인 답변과 임시 상태를 구분하고, 긴 응답을 읽는 동안 질문 위치를 유지해야 했습니다.

본문과 실행 상태의 분리 SSE 이벤트 규칙을 백엔드와 합의하여 응답 생성, MCP 도구 실행, 완료와 오류를 화면 상태에 연결했습니다. 대화 전환이나 사용자 중단 이후에는 이전 응답이 현재 화면에 섞이지 않도록 처리했습니다.

SSE 파싱과 형식별 렌더링 SSE 이벤트 파싱과 누적된 JSON 콘텐츠 해석을 분리하고, 텍스트, 이미지, 링크와 차트를 각 렌더러에 전달했습니다. 긴 Markdown은 코드 블록, 표와 리스트의 경계를 유지하는 블록 단위로 나눠 표시했습니다.

도구 상태와 완료 결과 처리 실행 단계와 진행률은 답변 본문과 별도로 관리했습니다. 단계 설명은 순서대로 쌓고 같은 도구의 진행률은 최신 값으로 교체했습니다. final 이벤트가 오면 임시 상태를 지운 뒤 최종 콘텐츠와 차트를 표시하도록 구성했습니다.

응답 갱신과 읽기 위치 제어 requestAnimationFrame으로 화면 갱신을 프레임 단위로 묶었습니다. ResizeObserver로 질문과 답변 높이를 측정해 응답 아래의 가변 여백을 줄이고, 답변이 화면을 채우기 전까지 질문 위치를 유지했습니다. 대화 전환 시에는 AbortController로 이전 스트림을 중단했습니다.

대화 안에서 확인하는 실행 과정과 결과 사용자가 답변 생성 중에도 질문을 읽고, 도구의 실행 상태에서 최종 차트와 결과까지 이어서 확인할 수 있도록 구현했습니다. 응답 생성, 완료, 중단과 오류 상황의 표시와 상태 정리를 검증했습니다.

폰트, 차트와 편집기를 처음부터 불러오는 비용이 컸고, 문서 편집기는 서버 렌더링 뒤 높이가 커지며 아래의 설정과 저장 버튼을 밀어냈습니다.

로딩 비용과 화면 밀림을 나눠 점검 페이지별 로딩을 점검해 처음부터 필요한 자원과 사용 시점에 불러와도 되는 자원을 구분했습니다. 문서 편집 화면은 편집기 표시 전후의 높이를 일치시키는 것이 과제였습니다.

폰트 서브셋과 기능별 지연 로딩 Pretendard를 자주 쓰는 한글 서브셋과 필요할 때 불러오는 나머지 글자로 나눴습니다. 대시보드 차트와 프롬프트 편집기는 next/dynamic으로 분리해 초기 로딩 경로에서 제외했습니다.

서버와 클라이언트의 편집기 높이 일치 문서 편집기에 고정 높이를 적용하고 긴 내용은 내부에서 스크롤하도록 바꿨습니다. 서버 렌더링과 클라이언트 초기화 이후의 높이를 맞춰 아래 설정과 저장 버튼의 위치를 유지했습니다.

초기 전송량 약 54% 감소 당시 페이지 점검에서 초기 전송량이 2.8MB에서 약 1.3MB로 줄었습니다. 두 근사값으로 계산한 감소율은 약 54%입니다.

문서 편집 화면의 CLS 0.225에서 0으로 개선 문서 편집 화면의 로컬 Lighthouse 점검에서 레이아웃 밀림 지표인 CLS가 0.225에서 0으로 줄었습니다.

관리 화면과 대화 화면의 UI를 일관되게 유지하고, 고객사별 기능 변경 시 공통 컴포넌트의 표시와 동작을 검증할 기준이 필요했습니다.

화면 간 일관성과 변경 검증 기준 화면마다 달랐던 색상과 컴포넌트 사용 방식을 정리하고, 모달과 입력 요소의 상태를 실제 브라우저에서 반복 확인할 수 있는 검증 환경이 필요했습니다.

공통 컴포넌트와 자동 테스트 구성 색상, 타이포그래피와 테마를 디자인 토큰으로 정리하고 공통 컴포넌트의 상태와 사용 기준을 Storybook에 문서화했습니다. 상호작용 테스트를 Vitest와 Playwright에 연결하고 PR에서 타입 검사, lint, 컴포넌트 테스트와 프로덕션 빌드를 실행하도록 CI를 구축했습니다.

Storybook 접근성 검사로 발견한 문제 수정 Storybook 접근성 검사에서 발견한 색상 대비 문제를 텍스트용 색상 토큰으로 수정했습니다. 파일 삭제 버튼에는 파일명을 포함한 접근 가능한 이름을 부여해 버튼의 용도를 구분할 수 있도록 했습니다.

오류 배지의 글자 대비 3.76:1에서 6.47:1로 개선 오류 배지의 글자와 배경 색상값 기준 대비를 3.76:1에서 6.47:1로 개선해 일반 텍스트의 WCAG AA 최소 기준인 4.5:1을 충족했습니다. 공통 컴포넌트의 상태와 사용 기준, 자동 테스트 결과도 Storybook과 PR에서 확인할 수 있도록 구성했습니다.