Github repository 속 PDF 파일을 웹 뷰어로 조회하는 방법

현재 나는 이 블로그를 통해 글도 쓰고 이후 CV나 자료 공유 등으로 확장해 나갈 예정이다. 다만 현재 아직 이쪽을 건드릴 시간이 되지 않아 이 페이지와 같이 임시로 CV를 $\LaTeX$로 작성해 올려놓고 있다. 몇 주 전에는 Ghost의 파일 첨부를 사용해 블로그 (클라우드) 서버에 직접 static하게 저장해 조회할 수 있도록 했다. 물론 지금처럼 많은 사람들이 조회하지만 않는다면 큰 문제는 없지만, 사용자가 다운을 받을수록 클라우드 요금이 더 나올 가능성이 있다는 문제가 있다.

이번 추석 때 CV를 수정하면서 $\LaTeX$ 파일을 Github로 관리하는 방식으로 바꾸면서 아예 Github repository에 올라와있는 PDF 파일을 올리면 어떨까 생각을 했다. CV가 변경될 때 굳이 블로그를 들어가지 않고도 편하게 CV를 업데이트하는 프로세스를 다음과 같이 만들어봤다. (아주 간단하다!)

1. 로컬에서 $\LaTeX$ 파일 변경 및 PDF로 빌드
2. Github repository로 변경사항 푸시
3. 이 페이지나 Github Profile에 넣은 CV 링크를 수정하지 않아도 Github repository의 HEAD PDF 파일을 가리켜 알아서 최신화

다만 현재 Github의 웹페이지 PDF 뷰어는 엄청 느리다. 내가 직접 접속했을 때 거의 3초가 걸리는데, 만약 이후 PDF 파일이 더욱 길어지면 더욱 로딩이 걸릴 것이다. 대신 Github에선 다운로드 링크를 제공한다. 링크를 클릭하면 즉시 PDF 파일이 다운된다. 다만 이번에 나는 아예 뷰어 형태로 바꿔보고 싶었다. 매번 다운로드 폴더에 같은 CV 파일이 여러 개 들어가는 것이 불필요한 느낌이 들었다.

최종적으로 나는 Github 파일을 직접 조회해 외부 웹 뷰어로 볼 수 있는 링크를 찾고 싶었다. 구글 검색을 하다보면, 특히 논문쪽으로 찾다 보면 크롬 등 브라우저엔 파일을 다운받지 않고 주소 자체로 PDF를 보는 뷰어가 있는 것을 여러번 경험해 봤을것이다. 다만 Github에선 직접적으로 브라우저 뷰어로 보는 링크를 제공하진 않다. 대신 이를 우회할 수 있는 여러 방식이 있다. 그래서 이 글을 통해 해당 방법을 정리해보자 한다.

쉬운 방법 - 외부 PDF 뷰어 서비스

위에서 언급했듯 Github은 다운로드 링크를 제공한다. 해당 Raw 링크를 받아 웹 뷰어로 조회하게 해주는 서비스가 있다. 바로 Mozilla PDF.js 뷰어와 Google Docs 뷰어다.

• 원본 Raw 링크 (클릭시 바로 다운로드) : https://raw.githubusercontent.com/cos18/cv/master/cv.pdf
• Mozilla PDF.js
  • URL: https://mozilla.github.io/pdf.js/web/viewer.html?file=[PDF Raw 링크]
  • 예시: https://mozilla.github.io/pdf.js/web/viewer.html?file=https://raw.githubusercontent.com/cos18/cv/master/cv.pdf
• Google Docs
  • URL: https://docs.google.com/viewer?url=[PDF Raw 링크]
  • 예시: https://docs.google.com/viewer?url=https://raw.githubusercontent.com/cos18/cv/master/cv.pd

다음 URL을 수정해 파일을 다운받지 않고 해당 서비스의 PDF 뷰어를 사용할 수 있다. 링크만 살짝 변경하면 되서 참 간단한 방법이다. 다만 링크가 길어 미관상 (...) 좋지 않다는 사소한 문제점과 (그럴 일은 없겠지만) 해당 서비스가 문제가 생기거나 다운된다면 이 링크 역시 작동되지 않는다는 의존성 문제가 있다.

확실한 방법 - Github Pages

만약 PDF 파일이 본인의 저장소에 있고, 이력서처럼 다른 사람에게 링크를 자주 공유해야 한다면 GitHub Pages 기능을 사용하는 것이 가장 좋다. Github Pages는 Github에서 제공하는 정적 웹사이트 호스팅 기능이지만, 파일을 직접 볼 수 있는 링크를 만드는 데에도 아주 유용한 기능이다.

설정하는 법도 간단하다. Repository 설정 페이지에서 Pages 메뉴를 찾아 기능을 켜주기만 (배포할 브랜치를 선택) 하면 된다. 기본적으로는 Github 에서 제공하는 도메인 (github.io)를 사용할 수 있다. 나의 경우 아래와 같이 변경할 수 있다.

• GitHub Pages 링크: https://[사용자명].github.io/[저장소명]/[파일경로]/파일.pdf
• 최종 예시: https://cos18.github.io/cv/cv.pdf

Github 서비스에 의존된다는 단점은 있지만, 어차피 파일 자체가 Github에 올라가 있으니 위 쉬운 방식과 같은 의존이 있는 것이기에 위 방식보다 단점이 적다고 볼 수 있다.