구글 드라이브로 이미지 호스팅하기
대부분의 개발자가 한 번쯤은 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.
뭐.. 대부분 이미지보다는 텍스트 위주의 블로그라서 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 Api의 구조를 통해서도 유추할 수 있다.API 문서를 이런 용도로 쓸때 볼려고 컴퓨터공학을 전공한 건 아닐텐데 아닌가 맞나??
아무튼 file의 id를 얻었고 이를 통해 접근할 수 있다는 걸 알았으니 다음 차례는 어떻게 하면 이미지만 빼올 수 있을지 고민해보았다.
구글링을 좀 해보니 외부에서 파일을 열때 아래와 같은 URL을 쓰면 된다고 한다.
Google Drive Api나 SDK 코드도 훑었지만 따로 어떤 역할을 하는지는 못 찾고 빠르게 포기 후 테스트해보기로 한다.
1 | https://drive.google.com/open?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 |
uc는 usercontent의 약자인가??
리다이렉트된 URL로도 이미지는 잘 열리지만 이게 임시로 발행된 URL이거나 하면 또 데드링크가 될 지도 모른다.
결국 https://drive.google.com/uc?id={FILE_ID} 키워드를 쓰되, 리다이렉트되면서 사용하게 되는 시간 비용은 안정성을 위해 감수하기로 했다.
여기까지 수행하고 나면 일단 호스팅은 가능하긴 한데.. 너무 귀찮다.
사람이 할 필요가 없는 일이라고 생각이 들면 뭐다? 자동화해보자.
url을 관리할 스프레드시트를 하나 생성하자.
이미지 파일들로부터 file id를 얻어내려면 어떤 방법을 쓸까 고민하다가 사진 관리용 애드온을 찾았다.
애드온을 설치한 후
부가기능 메뉴를 통해 실행한 뒤
이미지들을 몰아놓은 폴더를 선택하면
이렇게 자동으로 긁어서 뿌려준다.
우리가 필요한 것 file id이므로 나머지를 숨김처리하고,
스프레드시트의 특성을 이용해 우리가 알아낸 링크와 조합하면 위와 같이 바로 링크를 생성해서 쓸 수 있다.
1 | ="https://drive.google.com/uc?export=view&id=" & {FILE_ID가 있는 셀의 주소} |
사용한 수식은 위와 같다.
뭐 결과는 보는 바와 같이 본 포스팅의 모든 이미지는 구글 드라이브의 호스팅을 이용해 첨부하였다.
다만 이미지 폴더는 따로 생성해서 보기 권한을 모든 사람에게 부여해야 하므로 사용에 주의하자.
