(Topic) 001. 구글 드라이브로 이미지 호스팅하기

구글 드라이브로 이미지 호스팅하기

대부분의 개발자가 한 번쯤은 github에 블로그를 만들어 보지 않을까?

가장 유명한 jekyll부터해서 hexo, gatsby 등등.. 엄밀하게 얘기하면 어떤 방식을 쓰든

정적 사이트를 만들어내고, 결과물을 github에 업로드하면 된다.

이 기능을 Github Pages라고 부른다.

참고 Github Pages

지금 글을 쓰는 이 블로그도 Hexo Framework로 정적 사이트를 빌드하고 github pages에 호스팅하고 있다.

네이버 블로그나 티스토리 등 상용 블로그를 쓸때완 다르게 고민해야할 점은 바로 이미지의 처리이다.

왜냐하면 Github Pages의 용량은 1GB까지 밖에 지원을 하지 않기때문에 이미지를 난사할 수가 없다.

제약사항이 여러 개 있는데, 사이트에서 원문을 인용하면 아래와 같다.

GitHub Pages sites are subject to the following usage limits:

  • GitHub Pages source repositories have a recommended limit of 1GB. For more information, see “What is my disk quota?”
  • Published GitHub Pages sites may be no larger than 1 GB.
  • GitHub Pages sites have a soft bandwidth limit of 100GB per month.
  • GitHub Pages sites have a soft limit of 10 builds per hour.

참고 About GitHub Pages - Usage limits

뭐.. 대부분 이미지보다는 텍스트 위주의 블로그라서 1GB를 넘기기는 쉽지않겠지만, 용량이 어차피 우상향인 건 어쩔 수 없고 증가세를 최소화 하려면 어떻게 할까 고민하고 있었다.

flicker나 imgur가 대표적인 사이트이지만 뭔가 찜찜하달까.

그러던 차.. 어차피 공유를 위해 메인 클라우드로 쓰는 구글 드라이브로 이미지를 포스팅하면 어떨까 싶었다.

한 번 무작정 업로드를 해보았다.

시험용 짤은 컴퓨터 그래픽의 영원한 친구 레나 포르센으로 해야하는 것이 마땅하고 옳은 일이다.

업로드 후 확인해보면 이렇게 구글 드라이브의 자체 뷰어로 이미지가 보인다.

자 업로드가 끝나고 외부 공개를 해보면…

외부 공개 URL 로도 구글 드라이브 뷰어로 올라오는 것을 알 수 있다.

하지만 우리가 하고 싶은 것은 순수 이미지만 뽑아내는 것이다.

외부 링크로 접근한 위의 화면에서 우상단의 메뉴를 눌러 항목 삽입을 눌러보면

1
<iframe src="https://drive.google.com/file/d/1aBjz332Io2wnoK-FVD3H0hCUsqOXYRHd/preview" width="640" height="480"></iframe>

위와 같은 iframe 코드를 얻을 수 있다.

이걸 포스팅에 넣어보면..

…?

다시 한 번 말하지만 우리는 순수 이미지만 원한다.

항목 삽입을 통해 획득한 코드 중 뭔가 수상해보이는 값을 살펴보자.

1
https://drive.google.com/file/d/1aBjz332Io2wnoK-FVD3H0hCUsqOXYRHd/

뭔가 unique id같이 생기지않았는가?

1
https://drive.google.com/file/d/{FILE_ID}

그렇다. 이게 구글 드라이브에 해당 파일에 부여한 식별자다.

참고 Google Drive v3 Api docuements - files

위의 참고 링크에 가면 Google Drive Api의 구조를 통해서도 유추할 수 있다.
API 문서를 이런 용도로 쓸때 볼려고 컴퓨터공학을 전공한 건 아닐텐데 아닌가 맞나??

아무튼 file의 id를 얻었고 이를 통해 접근할 수 있다는 걸 알았으니 다음 차례는 어떻게 하면 이미지만 빼올 수 있을지 고민해보았다.

구글링을 좀 해보니 외부에서 파일을 열때 아래와 같은 URL을 쓰면 된다고 한다.

Google Drive Api나 SDK 코드도 훑었지만 따로 어떤 역할을 하는지는 못 찾고 빠르게 포기 후 테스트해보기로 한다.

1
2
https://drive.google.com/open?id={FILE_ID}
https://drive.google.com/uc?id={FILE_ID}

open 키워드는 동일하게 구글 드라이브 뷰어로 열리는 것으로 확인되었고, uc는 정확히 이미지만 열린다..!!

이게 원하는 모든 것을 찾았다.

그런데 하단의 링크가 돌고돌아 googleusercontent.com으로 리다이렉트된다.

1
https://doc-08-a4-docs.googleusercontent.com/docs/securesc/1i7kcnmrmshhq61sbbhslen3ddpjjurl/7lkgarm9cd0sp7i6sbvit1l8dr4kkanj/1593705150000/06530021166002787048/06530021166002787048/1aBjz332Io2wnoK-FVD3H0hCUsqOXYRHd?h=15355250352797384391&authuser=0&nonce=2mr6u7qfq30oi&user=06530021166002787048&hash=5dks0p3t2kkh8cacdnsu00gif21tqmja

ucusercontent의 약자인가??

리다이렉트된 URL로도 이미지는 잘 열리지만 이게 임시로 발행된 URL이거나 하면 또 데드링크가 될 지도 모른다.

결국 https://drive.google.com/uc?id={FILE_ID} 키워드를 쓰되, 리다이렉트되면서 사용하게 되는 시간 비용은 안정성을 위해 감수하기로 했다.

여기까지 수행하고 나면 일단 호스팅은 가능하긴 한데.. 너무 귀찮다.

사람이 할 필요가 없는 일이라고 생각이 들면 뭐다? 자동화해보자.

url을 관리할 스프레드시트를 하나 생성하자.

이미지 파일들로부터 file id를 얻어내려면 어떤 방법을 쓸까 고민하다가 사진 관리용 애드온을 찾았다.

참고 Photo Gallery by Awesome Table

애드온을 설치한 후

부가기능 메뉴를 통해 실행한 뒤

이미지들을 몰아놓은 폴더를 선택하면

이렇게 자동으로 긁어서 뿌려준다.

우리가 필요한 것 file id이므로 나머지를 숨김처리하고,

스프레드시트의 특성을 이용해 우리가 알아낸 링크와 조합하면 위와 같이 바로 링크를 생성해서 쓸 수 있다.

1
="https://drive.google.com/uc?export=view&id=" & {FILE_ID가 있는 셀의 주소}

사용한 수식은 위와 같다.

뭐 결과는 보는 바와 같이 본 포스팅의 모든 이미지는 구글 드라이브의 호스팅을 이용해 첨부하였다.

다만 이미지 폴더는 따로 생성해서 보기 권한을 모든 사람에게 부여해야 하므로 사용에 주의하자.