구글 드라이브 이미지 URL(Google Drive Image URL) 변환 방법

Google Drive Image URL

 

Google Drive Image URL 변환 방법 (Google Drive URL Conversion)

 

구글 드라이브(Google drive)에 이미지를 올리고 공유 기능을 통해 html 문서에 img src 태그를 사용할 수 있습니다.  "공유" 버튼에서 생성되는 링크를 약간 수정을 해야 하는데요, 그 방법에 대해서 잠깐 살펴보도록 하겠습니다.

자신의 웹 호스팅(Web Hosting) 계정에서 이미지를 불러오는 것과 구글 드라이브(Google Drive)에 올린 이미지를 URL 변환하여 가져오는 로딩 속도는 차이가 많이 납니다. 구글 드라이브(Google Drive)의 이미지 로딩 시간이 더 오래 걸리기 때문에 전체 홈페이지의 이미지를 이런 방식으로 홈페이지를 구축하는 것은 검색 엔진 최적화(SEO)에 안 좋은 영향을 끼치게 될 것입니다.

웹 호스팅 공간이 없지만 필요에 의해 이미지나 파일을 html 문서에 삽입하거나 링크로 사용하고 싶은 경우 적당할 것 같습니다.

 

구글 드라이브에 이미지 업로드 및 공유 링크 생성

 

구글 드라이브 이미지 업로드

 

구글 드라이브에 적절한 폴더를 생성하고 링크를 생성할 이미지를 업로드합니다.

업로드가 완료되면 이미지를 선택하고 "마우스 오른쪽 클릭" 하여 "공유" 메뉴를 클릭합니다.

 

구글 드라이브 - 공유

 

"일반 액세스" 권한을 "제한됨"에서 "링크가 있는 모든 사용자" 권한으로 수정 합니다.

 

일반 액세스 - "링크가 있는 모든 사용자"

 

'링크 복사" 버튼을 눌러 주세요.

복사된 URL은 바로 html문서에 img src에 사용할 수 없습니다. 약간 수정이 필요합니다.

 

구글 드라이브 - 공유 - 링크 복사

 

일반 액세스 - "링크가 있는 모든 사용자" 권한으로 설정되는 경우, 이미지의 우측에 "공유 아이콘" 표시가 나오게 됩니다.

 

링크가 있는 모든 사용자 - 공개 설정 후 아이콘 표시

 

구글 드라이브 URL 변환 방법(How to convert google drive URL)

 

구글 드라이브 Image conversion에 사용하는 prefix

 

https://drive.google.com/uc?id=

 

"링크 복사"로 복사된 공유 URL (id 추출이 필요함)

 

https://drive.google.com/file/d/1ssUF38HstSFnoVa5dLRlkfpUN9DPvp2-/view?usp=sharing

위 링크("링크 복사" 버튼 누르면 복사되는 링크)에서 id 부분만 복사 & 붙여넣기 해서 사용

id= 1ssUF38HstSFnoVa5dLRlkfpUN9DPvp2-

 

구글 드라이브 URL 변환 (prefix + id)

 

https://drive.google.com/uc?id=1ssUF38HstSFnoVa5dLRlkfpUN9DPvp2-

 

google drive에 업로드한 이미지를 html 문서에 삽입하기 위해서는 "https://drive.google.com/uc?id=", prefix뒤에 공유 링크 id를 붙여서 생성하게 됩니다

 

구글 드라이브 URL 변환 이미지 img src 태그 결과 확인

 

구글 드라이브 변환 링크 확인

 

먼저, 변환한 URL을 그대로 브라우저 시크릿 모드에 붙여넣기해서 접속이 잘 되는지 확인합니다.

정상적으로 잘 표시됩니다.

 

일반 액세스 - 제한됨으로 설정

 

많이 실수하는 부분이 "일반 액세스" 권한을 "제한됨" 상태에서 구글 드라이브 이미지 URL을 만드는 경우인데요.
"제한됨" 상태에서 변환된 이미지 주소를 확인하려고 브라우저에 복사 & 붙여넣기하면 "구글 로그인 창"이 뜨게 됩니다.

html 문서에 해당 링크를 삽입하게 되면 깨진 이미지만 나오게 됩니다.

 

일반 액세스 - 제한됨 상태에서 이미지 링크

 

개인 홈페이지에 google drive URL을 삽입하거나 html 형식을 제공하는 포털 게시판에 구글 드라이브 이미지의 주소를 변환해서 태그로 입력하시면 됩니다.

img 삽입 코드는 <img src="URL"> 입니다.

 

HTML에 img src로 구글 드라이브 이미지 연결

 

이미지 로딩 속도는 약간 느리지만 정상적으로 잘 로딩 됩니다.

액세스 권한에 "링크가 있는 모든 사용자" 권한으로 설정되어 있어야 가능합니다. 꼭 확인하세요.

 

"링크가 있는 모든 사용자" 권한의 이미지

 

구글 드라이브에 이미지를 올리고 URL로 변환하는 작업이 조금 번거롭습니다.

따라서 Google Sheet에 자신이 생성한 이미지 이름 및 URL을 기록해두시면 관리하기 편할 것 같습니다.
이미지 매번 사용할 때마다 변환하기 조금 귀찮잖아요.

 

 

액세스 권한 "제한됨" 상태에서 링크를 삽입하시면, 아래 이미지처럼 이미지 깨진 상태로 표시됩니다.
만약, 이런 결과가 나온다면 액세스 권한을 바꿔주세요.

 

일반 액세스 - "제한됨" 상태의 구글 드라이브 이미지 링크