[Blogger] 블로그스팟 파일 첨부 및 PDF 미리보기(임베드) 완벽 가이드

구글 블로거(Blogspot)는 이미지와 동영상 외에 PDF, 한글 파일 같은 일반 파일을 직접 업로드하여 첨부하는 기능을 제공하지 않는다. 구글 드라이브를 활용해 링크를 거는 방식과 Embed(임베드) 방식을 사용해 이미지로 미리 보여주는 방법을 알아보자.

블로그스팟 파일 첨부 방법

1. 구글 드라이브에 파일 업로드하기

- 블로거 계정과 연결된 구글 계정으로 구글 드라이브에 접속한다.

1) 왼쪽 상단의 '+ 신규'를 누르고 '파일 업로드'를 클릭해 파일을 올린다.

2) 업로드한 파일 위에서 마우스 오른쪽 버튼을 클릭하거나 세로 점 3개(⋮)를 눌러, 공유 → '공유'를 선택한다.

구글 드라이브 파일 공유 선택 화면

3) '일반 액세스' 항목에서 '제한됨'을 '링크가 있는 모든 사용자'로 변경한다.

4) 왼쪽 하단의 '링크 복사'를 누른 후 '완료'를 클릭한다.

일반 액세스 링크가 있는 모든 사용자로 변경 화면

2. 블로그스팟 글쓰기에서 링크 삽입하기

1) 상단 도구 모음에서 '링크 삽입 또는 수정 아이콘(사슬 모양)'을 클릭한다.

2) '링크 붙여넣기'에 복사한 URL 링크를 붙여넣는다.

3) '새 창에서 링크 열기'에 체크하고 '적용'을 누르면 끝.

Embed code로 이미지처럼 미리 보여주기

내용 추가: 2026.01.08.

0) 블로그스팟 관리자 [테마] → [맞춤설정] → [고급] → [CSS 추가]에 아래의 코드를 복사해서 붙여 넣는다.

CSS


/* [반응형 컨테이너] 구글 드라이브 중앙 정렬 및 폭 수정 */
.drive-embed-container {
  position: relative;
  width: 100%;
  max-width: 640px !important;  /* 사진/영상/코드박스와 똑같이 640px로 통일 */
  margin: 35px auto !important; /* 위아래 여백을 주고, 좌우 auto로 중앙 정렬 */
  aspect-ratio: 16 / 9;         /* 16:9 비율 유지 */
  border-radius: 12px;          /* 다른 요소들처럼 둥근 모서리 유지 */
  overflow: hidden;             /* 둥근 모서리 밖으로 내용이 나가지 않게 함 */
}

/* 컨테이너 안에 들어가는 iframe은 부모 크기에 꽉 맞춤 */
.drive-embed-container iframe {
  position: absolute;           /* 컨테이너 안을 꽉 채우기 위해 설정 */
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;         /* 중복 여백 제거 */
  border: none;                 /* 기본 테두리 제거 */
}

1) 만약 블로그 본문에 PDF 파일을 이미지처럼 미리 보여주기 원하다면, 다음의 임베드 코드를 '글쓰기 HTML 모드'에 붙여넣는다.

HTML


<div class="drive-embed-container">
  <iframe src="https://drive.google.com/file/d/파일ID/preview" allow="autoplay"></iframe>
</div>

2) '파일 ID' 부분만 바꿔주면 끝.

파일ID 찾는 법: 파일의 공유 링크 주소(https://drive.google.com/file/d/이 부분/view...)에서 중간에 있는 긴 영문+숫자 조합이 파일 ID임.

- 업로드한 파일 위에서 마우스 오른쪽 버튼을 클릭하거나 세로 점 3개(⋮)를 눌러, '연결 앱' → '새 탭에서 열기'를 누르면 아래 예시 화면처럼 확인 가능하다.

복사할 URL 주소에서 파일 ID 부분

※ 예시 파일: Jabra Talk 45 사용설명서

예시 1. 파일 첨부 다운로드하기 (클릭!)
예시 2. 이미지처럼 미리 보여주기 (▼)

- 새 창에서 링크를 열거나 다운로드 하기 전, 첨부 파일을 이미지처럼 미리볼 수 있다. 마우스 휠을 스크롤하여 페이지 전체를 볼 수 있음.

오늘의 한마디

어렵진 않지?
- 코드 출처는 Google Gemini

내가 쓴 글을 읽다보니 'CSS 코드 삽입 부분'을 빼먹고, '어렵지 않지?' 이러고 있다. 아 놔...

이 블로그 검색

더한스픽