AiRWARDS

개요

군 내부망(국방망)에서 MAU(월간 활성 사용자) 5천 명 이상이 사용하는 공군 특화 AI 서비스입니다. 2.0에서 3.0으로 전환하며, 모드별로 나뉘어 있던 질의응답을 하나의 대화 화면에서 보여주는 프론트엔드 개발을 맡았습니다.

코드와 표가 포함된 긴 응답에서 스크롤과 입력이 느려지는 원인을 프로파일링으로 확인했습니다. 토큰을 화면에 반영하는 주기와 다시 렌더링할 영역을 나눠 개선했습니다.

기능 정의와 UX 설계에 참여하고, 채팅 인터페이스와 상태 관리 구조를 담당했습니다. 페이지별 개발 기여는 채팅 80%, 문서 요약 50%, 음성 인식(ASR) 50%입니다.

공군 복무 중 맡은 다른 내부 서비스 작업은 공군 경험에 정리했습니다.

주요 기능

• AI 질의응답: 국방망에서 대화형 AI를 사용하고 생성 중인 답변 확인
• 문서 요약: 문서의 핵심 내용 정리
• 음성 인식: 음성을 텍스트로 변환

구현과 개선

1. 프로파일링으로 반복 렌더링 병목 확인

   코드 블록과 Markdown 표가 많은 긴 응답을 만들 때 화면이 버벅이고 스크롤과 입력 반응이 느려졌습니다. Chrome DevTools의 Performance 패널에서 응답 생성 과정을 녹화해 메인 스레드에 작업이 몰리는 구간을 확인하고, React Developer Tools의 Profiler로 컴포넌트 렌더링을 살폈습니다.

   토큰(AI가 생성하는 짧은 텍스트 단위)을 받을 때마다 상태를 갱신하면서 완성된 코드 블록과 표까지 다시 렌더링하고 있었습니다. 응답이 길수록 렌더링 대상이 쌓여 부담이 커지는 것을 확인하고, 화면 갱신 빈도와 렌더링 범위를 나누어 개선했습니다.

2. 토큰 수신과 화면 갱신 빈도 분리

   SSE(서버가 생성한 토큰을 실시간으로 보내는 방식)로 들어오는 토큰을 버퍼에 일정량 모아 한 번에 반영하는 Buffer and Flush 방식으로 바꿨습니다. 토큰마다 React 상태를 갱신하지 않고 모아 둔 내용을 한 번에 반영해 반복 갱신을 줄였습니다. 렌더링 비용이 높은 메시지에는 더 큰 버퍼를 적용했습니다.

   토큰 수신 → 버퍼 누적 → 일정량 도달 시 반영 → 화면 렌더링
   

3. 완성된 블록과 스트리밍 영역의 렌더링 분리

   메시지를 구성 요소 단위로 나누고, 완성된 코드 블록, 표, 다이어그램의 렌더링 결과는 고정(freeze)했습니다. 새 토큰이 들어올 때 생성 중인 영역을 갱신하고, 완성된 블록은 반복해서 렌더링하지 않도록 했습니다.

   New Message
    ├ Text streaming 영역
    ├ CodeBlock (freeze)
    ├ Table (freeze)
    └ Diagram (freeze)
   

사용 기술

결과와 현재 상태

토큰마다 발생하던 화면 갱신과 완성된 블록의 반복 렌더링을 줄였습니다. 이를 통해 긴 응답에서 생기던 메인 스레드 부하를 낮추고 스크롤과 입력 지연을 완화했습니다.

공군 부스에서 소개한 AiRWARDS

공군 자체 개발 AI 체계를 소개하는 부스 현장입니다. 서비스 화면과 안내 자료를 함께 전시했습니다.