웹 뷰어와 URL 파라미터(?file=)의 작동 원리 알아보기 (+ PDF.js 구조 쉽게 이해하기)

웹 브라우저에서 문서를 볼 때 주소창에서 ?file=~ 로 시작하는 긴 글자를 본 적이 있으실 겁니다. 웹 뷰어는 이 file= 파라미터 뒤에 붙은 주소를 읽어와 어떤 PDF 파일을 화면에 띄워야 할지 인식하게 됩니다. 이때 서버에 저장된 원본 파일의 위치를 정확하게 가리키는 것이 핵심입니다. 사용자가 원하는 특정 문서의 경로를 뷰어 프로그램에 배달해 주는 일종의 ‘우편 주소’라고 생각하면 이해하기 쉽습니다.

1. 웹 뷰어(Web Viewer)란?

인터넷에서 PDF 파일을 열어보면 별도의 프로그램을 설치하지 않아도 브라우저 안에서 바로 문서를 확인할 수 있는 경우가 많습니다.

이처럼 웹 브라우저 안에서 PDF를 표시하는 프로그램을 일반적으로 웹 뷰어(Web Viewer) 라고 합니다.

대표적으로 PDF.js와 같은 오픈소스 라이브러리가 많이 사용되며, 다양한 웹사이트에서 브라우저 기반 PDF 열람 기능을 제공할 때 활용됩니다.

소개해 드린 주소는 앞부분의 웹 뷰어 주소(...viewer.html?file=)와 뒤에 이어지는 실제 파일 경로로 구성되어 있습니다. 즉, ...viewer.html?file= 뒤에 이어지는 실제 파일 주소(또는 경로)를 살펴보면 웹 뷰어가 어떤 파일을 불러오는지 이해할 수 있습니다.

2. URL 파라미터(Parameter)는 무엇일까?

웹 주소(URL)를 보면 다음과 같은 형태를 자주 볼 수 있습니다.

https://example.com/viewer.html?file=document.pdf&page=3

여기에서

• ? : 파라미터 시작
• file= : 불러올 파일 지정
• page= : 처음 열 페이지 지정

처럼 프로그램에게 필요한 정보를 전달하는 역할을 합니다.

이를 URL 파라미터(Query Parameter) 라고 합니다.

3. file= 파라미터는 어떤 역할을 할까?

많은 PDF 웹 뷰어는

viewer.html?file=document.pdf

와 같은 형태를 사용합니다.

여기서

file=

이라는 항목은

“이 PDF 파일을 화면에 표시하세요.“

라는 의미를 웹 뷰어에게 전달하는 역할을 합니다.

다만 모든 웹사이트가 동일한 방식을 사용하는 것은 아니며, 서비스마다 구현 방식은 서로 다를 수 있습니다.

4. 모든 사이트가 같은 구조를 사용하는 것은 아닙니다.

웹 서비스마다 보안 방식은 매우 다양합니다.

일부 사이트는

• 접근 권한 확인
• 토큰(Token) 인증
• 암호화된 URL
• 서버 내부 API

등을 사용하여 파일을 관리합니다.

따라서 같은 형태의 URL이라고 하더라도 내부 동작 방식은 사이트마다 다를 수 있습니다.

5. PDF.js는 어떻게 동작할까?

PDF.js는 Mozilla에서 공개한 오픈소스 PDF 렌더링 프로젝트입니다.

일반적으로 다음과 같은 순서로 동작합니다.

1. 웹 브라우저에서 URL 요청
2. 서버에서 PDF 파일 응답
3. PDF.js가 파일을 읽음
4. 각 페이지를 Canvas에 렌더링
5. 브라우저 화면에 표시

덕분에 별도의 PDF 프로그램을 설치하지 않아도 브라우저 안에서 문서를 열람할 수 있습니다.

6. 마무리

웹 뷰어와 URL 파라미터는 웹에서 PDF를 효율적으로 표시하기 위한 일반적인 기술 구조 중 하나입니다. 다만 실제 구현 방식과 접근 권한은 서비스마다 다를 수 있으므로, 동일한 구조가 모든 사이트에 적용되는 것은 아닙니다.

이러한 기본 원리를 이해해 두면 PDF뿐만 아니라 다양한 웹 기반 문서 서비스가 어떤 방식으로 동작하는지도 보다 쉽게 이해할 수 있습니다.

❓자주 묻는 질문 (FAQ)