개발자가 .NET, React, Angular 또는 Vue 웹 앱에 PDF, Office 및 CAD 뷰어를 삽입하여 사용자 친화성과 효율성을 높이는 방법: 단계별 가이드
문서가 많은 .NET 애플리케이션을 사용자가 실제로 즐길 수 있는 형태로 바꾸고 싶다면, PDF, Word 파일, Excel 시트, PowerPoint 프레젠테이션 및 CAD 도면을 모두 처리할 수 있는 뷰어가 필요합니다. 이때 사용자가 데스크톱 앱을 다운로드하거나 외부 클라우드 서비스에 의존하도록 강요하지 않아야 합니다. 바로 Doconut이 그런 역할을 합니다. Doconut은 서버‑사이드 문서 뷰어로, 렌더링된 페이지를 지원되는 웹 브라우저로 스트리밍하고, 기본적으로 네이티브 주석, 전체 텍스트 검색(OCR 포함) 및 제어된 인쇄 기능을 제공합니다. 이 가이드에서는 ASP.NET Core 백엔드에서 Doconut 변환 엔진을 구성하는 단계부터 React, Angular, Vue 프런트엔드에 뷰어를 삽입하는 과정까지 전체 워크플로를 살펴봅니다. 부드럽고 효율적인 문서 경험을 제공할 준비가 되셨나요? 바로 시작해 보겠습니다.
1. 전용 뷰어가 엔터프라이즈 웹 앱에 중요한 이유
“다운로드‑및‑열기”의 숨겨진 비용
대부분의 레거시 포털은 파일이 저장된 공유에 대한 링크만 제공할 뿐입니다. 사용자가 해당 링크를 클릭하면 파일이 다운로드되거나 로컬에 설치된 프로그램으로 열리게 됩니다. 실제로는 다음과 같은 여러 문제가 발생합니다:
- 맥락 손실 – 사용자가 포털을 떠나 별도 창에서 문서를 열고, 다시 포털로 돌아올 때 이전 위치를 기억해야 합니다.
- 일관성 없는 렌더링 – 로컬에 설치된 Word, Excel, CAD 뷰어가 파일을 서로 다르게 해석해 레이아웃 오류가 발생하고, 이는 법률·엔지니어링 판단에 영향을 줄 수 있습니다.
- 보안 위험 – 파일이 기업 경계 밖으로 유출되어 감사 로그와 데이터 손실 방지 정책을 관리하기 어려워집니다.
- 생산성 저하 – 검토자가 주석, 검색, 인쇄 등을 위해 여러 도구를 전전하면서 승인 속도가 느려집니다.
개발자가 실제로 필요로 하는 것
현대적인 솔루션은 다음을 만족해야 합니다:
- 브라우저에서 모든 지원 포맷을 렌더링 (PDF, DOCX, XLSX, PPTX, DWG, DXF 등).
- .NET 백엔드와 React, Angular, Vue 프런트엔드를 위한 깔끔한 API 제공.
- 주석, 전체 텍스트 검색(OCR 포함) 및 제어된 인쇄 기능을 별도 라이브러리 없이 포함.
- 보안적으로 확장—서버에서 문서를 처리하고 이미지 타일로 스트리밍하며, 원본 파일을 클라이언트에 절대 노출하지 않음.
Doconut은 이러한 모든 요구 사항을 충족합니다. 뷰어 라이브러리는 .NET 서버에서 실행되며, 필요에 따라 소스 문서를 래스터 페이지로 변환하고, 경량 HTTP 엔드포인트를 통해 지원되는 프런트엔드와 통신합니다.
2. ASP.NET Core 애플리케이션에서 PDF 변환을 위한 Doconut 미들웨어 구성
먼저 Doconut 미들웨어를 등록해 백엔드가 문서 타일, 썸네일, 주석 데이터를 제공할 수 있도록 해야 합니다. 이는 ASP.NET Core 요청 파이프라인에 몇 가지 서비스(캐시 및 HTTP 컨텍스트 액세서)만 추가하면 됩니다.
미들웨어 등록
ConfigureServices에서 분산 메모리 캐시와 IHttpContextAccessor 서비스를 추가합니다. 그 다음 Configure 메서드에서 Doconut 엔드포인트(보통 DocImage.axd)를 Doconut 미들웨어에 매핑합니다. 미들웨어 옵션을 통해 안전한 렌더링을 강제하고 내부 진단 정보를 사용자에게 숨길 수 있습니다.
라이선스 초기화
Doconut은 시작 시 라이선스 파일이 필요합니다. 일반적인 방법은 라이선스를 리소스로 포함하고 애플리케이션 시작 시 스트림으로 로드하는 것입니다. 라이선스 스트림을 Doconut 뷰어 인스턴스에 전달하면 SDK가 완전히 활성화되어 문서 처리를 할 준비가 됩니다.
문서 열기 및 토큰 획득
사용자가 문서를 요청하면 백엔드는 Doconut API를 통해 파일을 열고, 비밀번호 보호, 이미지 해상도, 타임아웃 등 선택적 파라미터를 전달합니다. Doconut은 열려 있는 문서를 고유하게 식별하는 짧은 토큰(보통 GUID)을 반환합니다. 프런트엔드는 이 토큰을 모든 타일 요청에 포함시키며, 예를 들어 /DocImage.axd?token=abcd1234&page=1&zoom=100 와 같이 사용합니다.
3. JavaScript 프레임워크를 위한 보안 문서 스트림 API 제공
Doconut이 미들웨어를 통해 저수준 타일 핸들러를 이미 제공하지만, 대부분의 팀은 인증, 로깅, 선택적 워터마킹을 추가하는 얇은 래퍼 컨트롤러를 선호합니다.
일반적인 컨트롤러 역할
- Open 엔드포인트 – 문서 식별자를 받아 물리 경로를 확인하고 Doconut에 문서를 열게 하여 토큰을 반환합니다.
- Thumbnail 엔드포인트 – 지정 페이지에 대한 작은 PNG를 반환하여 네비게이션 스트립에 활용합니다. 컨트롤러는 적절한 쿼리 문자열을 붙여 Doconut 타일 핸들러로 리다이렉트하면 됩니다.
보안 고려 사항
토큰을 사용자의 세션에 저장하거나 단기간 유효한 JWT 클레임에 포함시킵니다. 토큰만으로는 서버‑사이드 캐시 없이는 원본 파일에 접근할 수 없으므로 문서는 안전하게 보호됩니다. 동일한 REST API가 이 가이드에서 설명하는 React, Angular, Vue 통합 패턴을 모두 지원합니다.
4. React 애플리케이션에 뷰어 삽입
React 개발자는 다음과 같은 기능형 컴포넌트를 만들 수 있습니다:
/open엔드포인트를 호출해 요청된 문서에 대한 토큰을 가져옵니다.- 각 페이지에 대해 Doconut 타일 핸들러를 가리키는 이미지 URL 배열을 생성합니다(처음 10페이지부터 시작하고 필요 시 추가 로드).
<img>요소로 페이지를 렌더링하고, 스크롤·줌 이벤트가 발생하면 URL 파라미터를 업데이트합니다.
Doconut JavaScript 통합 포인트와의 상호 작용
Doconut은 페이지에 가벼운 JavaScript 헬퍼를 주입합니다. 이 헬퍼를 통해 다음과 같은 명령을 실행할 수 있습니다:
- 용어 강조 – 문서 전체에 대한 전체 텍스트 검색을 요청하고 일치하는 단어를 강조합니다.
- 주석 추가 – 페이지 번호, 주석 유형, 좌표 및 추가 데이터를 포함한 JSON 페이로드를 전송해 특정 페이지에 메모, 스탬프, 그림 등을 삽입합니다.
무거운 렌더링 작업은 서버에서 처리되므로 React 번들은 작게 유지되고 UI는 반응성이 뛰어납니다.
5. Angular 및 Vue에 뷰어 삽입 – 재사용 가능한 컴포넌트 패턴
Angular
작은 .NET API(문서 열기, 썸네일 가져오기)를 그대로 모방하는 Angular 서비스를 생성합니다. 서비스는 HttpClient를 사용해 백엔드 엔드포인트를 호출하고 토큰을 Observable 형태로 반환합니다.
그 후, 초기화 시 토큰을 요청하고 페이지 이미지 URL을 구성한 뒤 *ngFor 로 표시하는 컴포넌트를 만듭니다. 이 컴포넌트는 React 예시와 유사하게 주석 및 검색을 위한 Doconut JavaScript 헬퍼를 호출하는 버튼을 노출할 수 있습니다.
Vue
Vue에서는 created 라이프사이클 훅을 이용해 fetch 혹은 axios 로 토큰을 요청합니다. 토큰과 생성된 페이지 URL을 컴포넌트의 data 객체에 저장하고, v-for 루프를 사용해 페이지를 렌더링합니다. Vue의 반응성 덕분에 사용자가 스크롤·줌하거나 Doconut JavaScript 통합을 통해 주석 작업을 트리거할 때 뷰를 쉽게 업데이트할 수 있습니다.
세 프레임워크 모두 동일한 백엔드 계약을 사용하므로 ASP.NET Core 컨트롤러를 수정 없이 그대로 재사용할 수 있습니다.
결론
전체 기능을 갖춘 문서 뷰어를 삽입하기 위해 이제는 다수의 서드‑파티 플러그인이나 비용이 많이 드는 클라우드 서비스를 조합할 필요가 없습니다. Doconut을 사용하면 개발자는 PDF, Office, CAD 파일을 렌더링하고, 주석, OCR 기반 검색, 제어된 인쇄 기능을 제공하는 단일 서버‑사이드 라이브러리를 얻을 수 있으며, 문서는 안전하고 확장 가능한 방식으로 처리됩니다.
.NET, React, Angular, Vue 애플리케이션에서 문서 경험을 한 단계 끌어올리고 싶으신가요? 오늘 바로 Doconut을 사용해 보세요. 여러분의 사용자가 사랑할 수준 높은 엔터프라이즈 뷰어를 빠르게 배포할 수 있습니다.