Extend UI: 현대적 문서 애플리케이션을 위한 오픈소스 UI 키트

Extend UI는 현대적 문서 애플리케이션을 위해 특별히 설계된 오픈소스 UI 키트입니다. 복잡한 파일 유형과 문서 워크플로우를 처리하기 위한 전문화된 컴포넌트 세트를 제공합니다. 이를 통해 개발자는 이러한 고마찰 인터페이스를 처음부터 구축할 필요 없이 전문적인 수준의 파일 뷰어와 문서 관리 도구를 사용자용 플로우, AI 에이전트 또는 내부 관리 도구에 통합할 수 있습니다.

전문화된 문서 뷰어 및 컴포넌트

Extend UI는 다양한 문서 형식의 렌더링 및 상호작용을 처리하는 고수준 컴포넌트를 제공합니다. 이는 네이티브 렌더링 라이브러리가 부족한 개발자들이 흔히 사용하는 대안인 서버 측 PDF 변환의 필요성을 제거합니다.

지원되는 파일 형식

  • PDF Viewer: PDF 문서를 렌더링하기 위한 전용 컴포넌트.
  • DOCX Viewer: Microsoft Word 문서에 대한 네이티브 렌더링.
  • DOCX Editor: Word 문서를 편집하기 위한 블록.
  • XLSX Viewer: 시트 및 셀 범위 검색 지원을 포함하여 Excel 스프레드시트를 보기 위한 컴포넌트.

워크플로우 및 관리 도구

  • File System: "Miller columns" (다중 열 브라우징 인터페이스) 지원을 포함하여 파일을 관리하고 탐색하는 컴포넌트.
  • Schema Builder: 데이터 구조와 속성 키를 정의하기 위한 도구.
  • File Upload: 파일 수집을 위한 전용 드롭존.
  • File Thumbnail: 파일 시스템 내 파일의 시각적 미리보기.
  • E-Signature: 전자 서명을 처리하기 위한 통합 컴포넌트.

고급 문서 상호작용 기능

Extend UI는 바운딩 박스 인용(bounding box citations)과 같은 AI 네이티브 워크플로우를 위한 전문화된 블록을 포함합니다. 이를 통해 애플리케이션은 문서의 특정 영역을 강조하여 AI가 생성한 답변에 대한 근거를 제공할 수 있으며, 이는 AI 에이전트를 소스 문서에 근거하게 하는 데 매우 중요한 기능입니다.

기술적 구현 및 커뮤니티 피드백

Extend UI는 React 컴포넌트 세트로 구축되었습니다. React 개발자에게는 깊은 통합을 제공하지만, 일부 커뮤니티 구성원들은 프레임워크 지원의 다양성 부족(예: 웹 컴포넌트의 부재)이 다른 스택을 사용하는 개발자들의 접근성을 제한한다고 언급했습니다.

성능 및 사용성 관찰

고성능 하드웨어(예: MacBook Pro M3 및 M4 칩)에서 라이브러리를 테스트한 사용자들은 랜딩 페이지에서 성능 문제를 보고했습니다. 구체적으로 Schema Builder 팝오버와 같은 컴포넌트와 상호작용할 때 랙(lagging)과 지연이 발생한다고 합니다. 커뮤니티 피드백에 따르면 이러한 무거운 컴포넌트의 로드 시간을 최적화하기 위해 지연 로딩(lazy loading)이 필요할 수 있습니다.

통합 인사이트

AI 네이티브 문서 도구를 구축하는 개발자들은 사용자가 Microsoft Word나 PowerPoint와 같은 외부 소프트웨어를 열 필요 없이 네이티브 파서(예: Rust로 작성된 것)의 출력을 시각화하는 데 이 키트의 유용성을 강조했습니다.

"We were looking to add DOCX and XLSX preview to our app, and were planning to do server-side conversion to PDF... and this is exactly what we were looking for!"

현재의 한계

  • Search Functionality: Excel 뷰어 내의 검색 기능이 예상대로 작동하지 않으며 브라우저 네이티브 검색으로 셀 내부의 콘텐츠를를 찾을 수 없다는 보고가 있습니다.
  • Mobile Compatibility: 랜딩 페이지가 모바일 Safari에서 로드되지 않을 수 있다는 보고가 있습니다.
  • Framework Lock-in: 라이브러리는 현재 React 생태계로 제한되어 있습니다.

Sources