개발자가 PDF, Office 및 CAD 뷰어를 .NET, React, Angular 또는 Vue 웹 앱에 삽입하여 사용자 친화성과 효율성을 높이는 방법: 단계별 가이드

문서가 많은 .NET 애플리케이션을 사용자가 실제로 즐길 수 있는 형태로 바꾸고 싶다면, PDF, Word 파일, Excel 시트, PowerPoint 프레젠테이션 및 CAD 도면을 처리할 수 있는 뷰어가 필요합니다—사용자가 데스크톱 앱을 다운로드하거나 외부 클라우드 서비스를 이용하도록 강요하지 않아야 합니다. 바로 여기서 Doconut이 등장합니다. 이는 서버‑사이드 문서 뷰어로, 렌더링된 페이지를 지원되는 웹 브라우저로 스트리밍하고 기본적으로 네이티브 주석, 전체 텍스트 검색(OCR 포함) 및 제어된 인쇄 기능을 제공합니다. 이 가이드에서는 ASP.NET Core 백엔드에서 Doconut의 변환 엔진을 구성하는 것부터 React, Angular, Vue 프런트엔드에 뷰어를 삽입하는 전체 워크플로우를 단계별로 살펴봅니다. 원활하고 효율적인 문서 경험을 제공할 준비가 되셨나요? 바로 시작해 보겠습니다.

React, Angular, Vue 애플리케이션에서 문서 뷰어와 연결된 서버‑사이드 .NET 문서 처리

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 요청 파이프라인에서 수행되며, 캐시와 요청 컨텍스트를 위한 서비스 등록 몇 개만 필요합니다.

미들웨어 등록

ConfigureServices에서 필요한 서비스(분산 메모리 캐시 및 HTTP 컨텍스트 액세서)를 추가합니다. 그런 다음 Configure에서 Doconut 엔드포인트(보통 DocImage.axd)를 Doconut 미들웨어에 매핑합니다. 미들웨어 옵션을 통해 안전한 렌더링을 강제하고 내부 진단 정보를 최종 사용자에게 숨길 수 있습니다.

라이선스 초기화

Doconut은 시작 시 라이선스 파일이 필요합니다. 일반적인 방법은 라이선스를 리소스로 포함하고 애플리케이션 시작 시 스트림으로 로드하는 것입니다. 라이선스 스트림을 Doconut 뷰어 인스턴스에 제공하면 SDK가 완전히 활성화되어 문서 처리 준비가 됩니다.

문서 열기 및 토큰 얻기

사용자가 문서를 요청하면 백엔드는 Doconut API를 통해 파일을 열고, 비밀번호 보호, 이미지 해상도, 타임아웃 등 선택적 매개변수를 전달합니다. Doconut은 열려 있는 문서를 고유하게 식별하는 짧은 토큰(보통 GUID)을 반환합니다. 프런트엔드는 이 토큰을 모든 타일 요청에 포함시키며, 예시: /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. JavaScript 프레임워크용 보안 문서 스트림 API 노출

Doconut이 미들웨어를 통해 저수준 타일 핸들러를 제공하지만, 대부분의 팀은 인증, 로깅 및 선택적 워터마크 기능을 추가하는 얇은 래퍼 컨트롤러를 선호합니다.

일반적인 컨트롤러 역할

열기 엔드포인트 – 문서 식별자를 받아 물리적 파일 경로를 확인하고 Doconut을 호출해 문서를 연 뒤, 생성된 토큰을 반환합니다.
썸네일 엔드포인트 – 특정 페이지에 대한 작은 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

Doconut이 제공하는 작은 .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을 사용해 보세요 그리고 사용자가 사랑할 수준 높은 엔터프라이즈급 뷰어를 얼마나 빠르게 제공할 수 있는지 확인해 보세요.