현이의 개발 이야기

구글 드라이브로 이미지 호스팅하기 (<img>용 링크 변환)

일상 2024. 12. 24. 14:35

지금껏 블로그에 올리는 이미지들은 대부분 파이어베이스 스토리지를 사용하고 있었다.

파이어베이스 무료 요금제로는 용량과 대역폭 제한이 있기 때문에 이미지를 올릴 때 원본을 올리기가 망설여졌다.
휴대폰으로 찍은 원본 이미지 몇 장만 들어가도 전송량이 너무 커지기 때문에 유료 요금제로 바꿔야 하나 싶었다.

구글 드라이브

그런데 나는 구글 드라이브 5TB 용량을 구독하고 있다. (회사 복지 아님. 돈 내고 쓰는 중)
아직 이 중 1.5TB도 사용하고 있지 않다.

넉넉한 구글 드라이브 저장 공간

구글 드라이브에 블로그 용 이미지를 저장하고, 그 링크를 이용하면 용량이나 대역폭 걱정 없이 이미지를 마음껏 넣을 수 있을 것 같아 알아본 방법을 공유한다.

이미지를 블로그에 넣으려면 <img> 태그의 src 속성에 넣을 수 있어야 한다.
그러나 구글 드라이브는 웹에서 들어갔을 때 얻을 수 있는 링크가 이미지 파일 자체 링크가 아닌, 이미지 뷰어의 링크이기 때문에 <img> 태그에 직접 넣어줄 수 없고, 변환을 해주어야 한다.

구글 드라이브에 이미지 저장용 폴더를 만들고 <img> 태그용 링크를 얻는 것 까지의 과정은 다음과 같다.

1. 이미지 저장용 폴더 생성

나는 블로그에 들어갈 이미지를 호스팅할 것이기 때문에 Blog 폴더 아래에 Images 폴더를 생성해주었다.

이미지 저장용 폴더 생성

이 폴더에 있는 이미지들은 모두 공개되어야 한다.
다음과 같이 폴더에 우클릭 -> 공유 -> 공유 를 선택해준다.

Images 폴더 공유 선택

공유 다이얼로그가 뜨면 일반 액세스에 링크가 있는 모든 사용자를 선택해 뷰어 권한을 준다.

뷰어 권한 공유

2. 이미지 업로드

생성한 Images 폴더에 들어가 공유할 이미지를 업로드한다.
나는 블로그를 작성하면서 찍은 스크린샷들을 올려놓았다.

이미지 업로드

Images 폴더가 공유되어 있기 때문에 이 안의 이미지들은 자동으로 공개되어 있는 상태이다.

3. 이미지 링크

이미지를 <img> 태그에서 보여주기 위해서는 우선 이미지의 id를 알아야 한다.
이를 위해 이미지에 우클릭 -> 공유 -> 링크 복사를 선택한다.

이미지 링크 복사

그러면 다음과 같은 링크가 생성된다.

https://drive.google.com/file/d/1iV4jl41tIfLpSvwZdPpxryO2nkcCIq8u/view?usp=drive_link

이 중 가운데 부분이 이미지의 id이다.

1iV4jl41tIfLpSvwZdPpxryO2nkcCIq8u

이 것을 다음 링크 뒤에 붙여준다.

https://lh3.googleusercontent.com/d/{이미지 id}

그러면 다음과 같이 <img> 태그 안에 넣을 수 있는 이미지 링크가 된다.

<img src="https://lh3.googleusercontent.com/d/1iV4jl41tIfLpSvwZdPpxryO2nkcCIq8u" />

게시글을 쓸 때마다 이미지 용량이 걱정이었는데, 이제 마음껏 올릴 수 있게 되어서 마음이 편하다.

다만 매번 링크를 변환해주어야 하는 것이 번거로운데, 게시글 작성하는 페이지에 간단하게 변환 툴 하나 넣어놓아야겠다.

로그인이 필요합니다.

로그인