데브허브 | DEVHUB | UI Engineering for the AI Age | Tejas Kumar | React Day by Frontend Nation 2025UI Engineering for the AI Age | Tejas Kumar | React Day by Frontend Nation 2025
- AI 언어 모델의 긴 응답은 사용자 경험을 저해하며, 전체 응답을 기다리는 시간(예: 15초)은 매우 불쾌하다. ⏳
- 서버에서 응답을 청크 단위로 스트리밍하고 클라이언트에서 이를 실시간으로 UI에 반영하면, 사용자는 즉각적인 피드백을 받아 체감 성능이 크게 향상된다. 🚀
- 스트리밍된 데이터가 완전한 JSON 형식이 아닐 경우
JSON.parse는 실패하며, 이는 구조화된 데이터를 실시간으로 처리하는 데 주요 장애물이 된다. 🚫
- 배열 대신 각 JSON 객체를 새 줄로 구분하여 전송하는 NDJSON (New Line Delimited JSON) 형식을 사용하면, 부분적인 JSON 객체도 개별적으로 파싱하여 UI를 점진적으로 업데이트할 수 있다. 📄
- AI 모델이 원하는 형식(예: NDJSON, 특정 스키마)으로 응답하도록 유도하기 위해 시스템 프롬프트를 매우 구체적으로 설계하는 정교한 프롬프트 엔지니어링이 중요하다. ✍️
- AI 모델의 불규칙한 청크 출력을 NDJSON과 같은 유효한 구조로 변환하기 위해 서버에서 텍스트 버퍼를 사용하여 완전한 JSON 객체를 구성한 후 클라이언트로 전송하는 로직이 필요하다. 🧠
- 클라이언트 측에서는
Response.body를 스트림으로 읽고 TextDecoder를 사용하여 바이트 배열을 텍스트로 변환하며, 재귀적인 함수 호출로 UI 상태를 지속적으로 업데이트하는 패턴이 효과적이다. 🔄
- AI 시대의 UI 엔지니어링은 프론트엔드, 백엔드, AI 모델과의 상호작용을 아우르는 풀스택 접근 방식과 스트리밍, 데이터 파싱 등 복합적인 기술 이해를 요구한다. 💻