문서 다루는 앱 만들 때 바닥부터 짜지 마세요 — 오픈소스 UI 키트 Extend UI

무슨 일이냐면요

PDF 뷰어, 계약서 검토 도구, AI가 문서를 읽고 요약해주는 서비스... 요즘 '문서를 다루는 앱'이 정말 많아졌죠. 그런데 이런 앱을 직접 만들어보면 의외의 복병을 만나요. "문서 화면 UI를 바닥부터 만드는 게 생각보다 엄청 귀찮다"는 거예요. Extend라는 팀이 이 고통을 알고 Extend UI라는 오픈소스 UI 키트를 내놨어요.

문서 앱 UI가 왜 어렵냐면

버튼이나 입력창 같은 일반 컴포넌트는 이미 좋은 라이브러리가 많아요. 그런데 문서 앱에는 그것만으로 안 되는, 문서 전용 화면 요소들이 필요하거든요. 예를 들면 이런 것들이에요.

• 문서 뷰어: PDF나 이미지 문서를 화면에 띄우고, 확대·축소하고, 페이지를 넘기는 기능. 보기엔 단순해도 직접 만들면 까다로워요.
• 하이라이트/주석(annotation): 문서의 특정 부분에 형광펜을 긋거나 메모를 붙이는 기능. "이 문장의 좌표가 어디냐"를 정확히 잡아내야 해서 손이 많이 가요.
• 추출 결과 표시: AI나 OCR(이미지 속 글자를 읽어내는 기술)이 "이 계약서의 계약 금액은 여기 있어요" 하고 짚어줄 때, 그 위치를 문서 위에 박스로 표시하고 옆에 데이터로 보여주는 화면. 요즘 AI 문서 앱의 핵심 UI죠.

핵심 특징

이 키트가 영리한 점은 요즘 프론트엔드 트렌드를 잘 따랐다는 거예요. 요즘 인기 있는 shadcn/ui 스타일, 즉 "라이브러리를 통째로 설치하는 게 아니라, 컴포넌트 코드를 내 프로젝트 안으로 복사해 와서 마음대로 고쳐 쓰는" 방식을 따를 가능성이 높아요. 이게 왜 좋냐면, 디자인을 우리 서비스에 맞게 자유롭게 바꿀 수 있고, 라이브러리에 발목 잡히지 않거든요. React와 Tailwind CSS 기반으로 만들어져서 기존 프로젝트에 얹기도 수월해요.

게다가 오픈소스라는 점이 커요. 코드를 직접 들여다보고, 우리 요구에 맞게 뜯어고치고, 문제가 생기면 직접 패치할 수 있으니까요. 문서 처리 같은 민감한 데이터를 다룰 때 내부 동작을 확인할 수 있다는 건 큰 안심이고요.

업계 맥락

문서 처리 영역은 지금 AI 덕분에 가장 뜨거운 분야 중 하나예요. 비정형 문서(계약서, 영수증, 청구서)에서 데이터를 뽑아내는 회사들이 우후죽순 생기고 있죠. 그런데 다들 백엔드 AI 모델 경쟁에만 집중하다 보니, 정작 사용자가 그 결과를 보고 검토·수정하는 화면은 매번 새로 만드느라 고생해요. Extend UI는 이 빈틈, 즉 "문서 AI의 프론트엔드"를 공략한 거예요. PDF 렌더링 쪽엔 PDF.js, 캔버스 주석엔 여러 상용 SDK가 있었지만, 그것들을 "바로 쓰는 완성형 UI"로 묶어주는 오픈소스는 드물었거든요.

한국 개발자에게는

국내에도 전자계약, 세금계산서 처리, 보험 서류 심사, 리걸테크(법률 기술) 스타트업이 많고, 다들 비슷한 문서 UI를 반복해서 만들고 있어요. 사내 문서 관리 시스템을 만드는 일반 기업 개발팀도 마찬가지고요. 이런 분들이라면 MVP(최소 기능 제품)를 빠르게 만들어 검증하는 단계에서 시간을 크게 아낄 수 있어요. 처음부터 완벽한 자체 뷰어를 만들기보다, 오픈소스로 빠르게 띄워 사용자 반응을 보고, 정말 필요할 때 깊이 커스터마이징하는 전략이 합리적이거든요.

물론 한국어 문서, 세로쓰기, 한글 폰트 렌더링 같은 부분은 직접 테스트해봐야 해요. 영어권 기준으로 만든 도구라 한글 OCR 좌표나 줄바꿈에서 미묘한 이슈가 생길 수 있으니, 도입 전에 실제 우리 문서로 검증하는 건 필수예요.

마무리

정리하면, Extend UI는 "문서 AI 앱의 가장 귀찮은 화면 부분을 대신 만들어주는 오픈소스 조립 키트"예요. 여러분은 이런 특화 UI 키트를 적극 가져다 쓰는 편인가요, 아니면 핵심 화면만큼은 직접 만들어야 마음이 놓이는 편인가요?