Home » » 블로그스팟(Blogger) 포스팅에 전자책 원고- PDF를 넣는 2가지 방법

블로그스팟(Blogger) 포스팅에 전자책 원고- PDF를 넣는 2가지 방법

By 

블로그스팟(Blogger) 포스팅에 전자책 PDF 넣는 2가지 방법

블로그스팟은 PDF 직접 업로드 기능이 없기 때문에, 보통 외부 저장소에 PDF를 올린 뒤 iframe으로 불러오는 방식으로 전자책을 게시합니다. 여기서는 구글 드라이브와 GitHub 두 가지 방법을 정리합니다.

블로그스팟(Blogger) 포스팅에 전자책 PDF 넣는 2가지 방법

1. 구글 드라이브에 올린 PDF 임베드하기

1-1. 드라이브에 PDF 업로드

  1. 구글 드라이브에 접속해 로그인합니다.
  2. [새로 만들기] → [파일 업로드]를 눌러 전자책 PDF를 업로드합니다.
  3. 업로드가 끝난 PDF를 우클릭 → [공유] → “링크가 있는 모든 사용자” 보기 권한으로 설정합니다.

1-2. embed용 iframe 코드 만들기

  1. PDF 우클릭 → [링크 가져오기]를 눌러 공유 링크를 복사합니다.
  2. 공유 링크 예시: https://drive.google.com/file/d/1AbCdEFgHIjkLmNOP/view?usp=sharing
  3. /d/와 /view 사이의 값(1AbCdEFgHIjkLmNOP)이 파일 ID입니다.
  4. 아래처럼 iframe 코드를 만들어 사용합니다.
<iframe
  loading="lazy"
  width="100%"
  height="800"
  src="https://drive.google.com/file/d/1AbCdEFgHIjkLmNOP/preview"
  frameborder="0"
  allowfullscreen>
</iframe>

1-3. Blogger 포스트에 붙여 넣기

  1. Blogger 대시보드 → [게시물] → 새 글 작성 또는 기존 글 수정으로 들어갑니다.
  2. 에디터에서 HTML 모드로 전환합니다.
  3. PDF를 보여 주고 싶은 위치에 위의 iframe 코드를 붙여 넣습니다.
  4. 미리보기로 PDF가 잘 표시되는지 확인한 뒤 글을 발행합니다.

2. GitHub에 올린 PDF를 iframe으로 삽입하기

GitHub 저장소에 PDF를 올려 두고, raw 파일 URL을 이용해 Blogger에 임베드할 수도 있습니다. 코드를 함께 관리하거나 버전 관리가 필요할 때 유용한 방식입니다.

2-1. GitHub에 전자책 PDF 올리기

  1. GitHub에 로그인 후, PDF를 올릴 저장소(repository)를 선택합니다. 없으면 새 저장소를 만들거나 기존 블로그용 저장소를 사용합니다.
  2. 저장소 페이지에서 [Add file] → [Upload files]를 클릭합니다.
  3. 전자책 PDF 파일을 드래그하거나 선택해 업로드한 후, 커밋 메시지를 입력하고 [Commit changes]를 눌러 저장합니다.

2-2. PDF의 raw URL 가져오기

  1. 저장소 파일 목록에서 방금 올린 PDF 파일을 클릭합니다.
  2. 파일 뷰 화면 오른쪽 상단의 [Download] 또는 […] → View raw 버튼을 찾습니다.
  3. View raw를 클릭하면 브라우저에서 PDF가 직접 열리거나 다운로드 됩니다.
  4. 이때 주소창에 보이는 URL이 raw URL입니다. 예시:
https://raw.githubusercontent.com/username/reponame/branch/path/to/ebook.pdf

username, reponame, branch(보통 main), path/to/ebook.pdf 부분은 본인 저장소에 맞게 바뀝니다.

2-3. GitHub PDF를 iframe으로 임베드

이제 raw URL을 사용해 Blogger 글에 iframe을 삽입하면 됩니다. 

<iframe
  loading="lazy"
  width="100%"
  height="800"
  src="https://raw.githubusercontent.com/username/reponame/main/path/to/ebook.pdf"
  frameborder="0">
  이 브라우저에서는 PDF 미리보기가 지원되지 않습니다.
</iframe>
  • width는 100%로 두면 모바일·PC에서 화면 폭에 맞게 꽉 차게 표시됩니다.
  • height는 PDF 길이에 맞춰 600~1000 사이에서 조절하면 됩니다.
  • 일부 브라우저에서는 보안 설정 때문에 raw URL이 바로 렌더링되지 않을 수 있으니, 아래처럼 다운로드 링크를 함께 달아 주는 것이 좋습니다.
<p>
  <a href="https://raw.githubusercontent.com/username/reponame/main/path/to/ebook.pdf" target="_blank" rel="noopener">
    전자책 PDF 전체 보기/다운로드
  </a>
</p>

2-4. Blogger 포스트에 GitHub PDF 코드 넣기

  1. Blogger에서 글 작성 화면을 열고, 우측 상단에서 HTML 모드로 전환합니다.
  2. PDF를 보여주고 싶은 위치에 위의 GitHub용 iframe 코드와 다운로드 링크 코드를 붙여 넣습니다.
  3. 다시 작성 모드 또는 미리보기로 전환해 PDF 뷰어가 제대로 표시되는지 확인한 뒤 발행합니다.

3. 어떤 방식을 쓸지 선택하는 기준

  • 구글 드라이브: 설정이 쉽고, 대부분 브라우저에서 미리보기 호환성이 좋습니다.
  • GitHub: 코드·자료와 함께 PDF를 버전 관리하고 싶을 때, 공개 리포지토리에서 무료로 호스팅할 때 유리합니다.

두 방식 모두 결국 iframe + 외부 PDF URL 구조이기 때문에, 한 번 세팅해 두면 이후 전자책 PDF 파일만 교체해도 블로그스팟 포스트를 계속 재활용할 수 있습니다.

#가나 투데이 #ganatoday

그린아프로
Share:  Facebook Twitter Google+