구글 드라이브를 외부 이미지 링크 저장소로 사용하기

최근들어 블로그를 시작했는데 글을 쓰면서 캡쳐한 이미지나 동적으로 움직이는(움짤?) 이미지등이 필요할 때가 많다. 이미지 몇개 저장하자고 호스팅을 할 수도 없는 노릇이니 다른 방법을 찾아야 했다. 그래서 생각해낸 것이 구글 드라이브다. 공유만 걸어 놓으면 블로그에 붙여서 얼마든지 쓸 수 있다. 이미지가 뜨는 게 좀 느리긴 하다. 블로그 글이 로딩될때 이 방법을 이용해서 이미지를 링크하면 나중에 이미지가 로딩되면서 글이 들썩들썩 한다. 그래도 공짜인데다가 15GB 까지 저장할 수 있다는 걸 생각하면 모든 게 용서된다.

이미 다 해본 다음 되는거 보고 글을 올려서 그렇지 사실 구글 드라이브에 저장되어 있는 파일의 공유 주소를 바로 이미지 링크로 사용할 수는 없다. 구글드라이브 공유 주소를 브라우저에 입력해서 들어가보면 무슨 말인지 대번에 알게된다. 이 주소로는 구글이 제공하는 뷰어에서만 볼 수 있다. 누구나 접근할 수 있고 다운받을 수 있다는 뜻이지 호스팅 서비스에서 처럼 html 소스에서 링크로 쓸 수 있다는 뜻은 아니다.


실제로 많은 블로그에서 구글 드라이브를 외부 이미지 저장소로 쓰는 방법에 대해서 설명하고 있고, 또 어떤 분은 자동으로 공유 주소를 링크 가능한 주소로 변환하는 스크립트를 올려놓으신 분도 있다. 그냥 그걸 쓸까 하다가 개인적인 호기심이 발동하기도 하고, 내 연장은 내가 만들어 쓰자는 주의라 원리만 파악하고 후딱 만들어 버렸다.

사실상 원리는 매우 간단한데, 구글드라이브 공유 주소의 id (https://drive.google.com/open?id=0B-HVWNWBwUkrb0dxX19fWDhyVlE) 부분만 추출하여 export 할 수 있는 prefix만 붙여놓으면 외부에서도 참조 가능한 링크가 된다. 구글 정책의 변경으로 prefix가 몇번 바뀌었다고 들었지만, 현재 이 글의 이미지나 움짤도 모두 구글 드라이브에서 가져온 것이므로 글에 첨부된 이미지가 제대로 보인다면 지금 설명하는 방법이 아직까지는 유효하다고 할 수 있다.

구글드라이브 공유 링크 가져오기

일단 외부에서 접근 가능하도록 구글 드라이브에 저장된 공유 주소를 얻는 것부터 알아보자. 말로 하면 장황하고 이해가 어려울 듯해서 움짤로 준비했다. 보고 따라하자. 파일에서 '공유 가능한 링크 가져오기' 로 링크를 가져오자.


공유 링크를 외부에서 참조 가능한 주소로 변환하기

공유 주소의 id를 추출하여 참조 가능하도록 prefix를 붙이는 스크립트를 만들었다. 그냥 구글드라이브 공유 주소를 붙여 놓고 변환 버튼만 누르면 자동으로 참조 가능한 주소가 나온다. 어떤 분들이 코드에 바로 붙여 쓸 수 있도록 이미지 태그까지 만드는 기능을 넣으셨길래 따라 해봤다. 마크다운 문법으로 자동 변환하고 size, align까지 한번에 되도록 해보려고 했는데 이미지 넣는 markdown 문법이 저마다 조금씩 달라서 그냥 포기했다.

추가: 나중에 해보다 알게 된건데 이미지나 움짤 뿐만이 아니라 다른 파일도 변환만 하면 호스팅 서비스처럼 사용할 수 있는 것을 확인했다. 예를 들어 일반 파일이나 설치 파일 같은 경우도 변환 주소로 직접 다운로드가 가능했다. 참고 바란다.






Preview image

image preview

소스 코드 공유

혹시나 코드가 궁금하거나 직접 구현해보고 개선하고 싶은 사람들도 있을 것 같아서 소스를 공개한다. 굳이 번거롭게 이 블로그를 찾아와서 주소 변환하고 싶지 않은 사람은 아래 소스를 복사해다가 html 파일로 만들면 로컬에서 쓸 수도 있을 것이다.

댓글

  1. 멋지십니다. 여러 글 안 찾아다니고 단박에 해결한것도 모자라 소스까지....감사합니다.
    소스 공개 사용시 꼭 출처 남기도록 하겠습니다.

    답글삭제
    답글
    1. 오오...블로그 열고 첫 댓글 달아주셨네요. 감사합니다. 사실 다른분들이 많이 해놓으신거에 양념만 조금 친겁니다.

      삭제
  2. 감사합니다 유용하게 사용하겠습니다 ^^

    답글삭제
    답글
    1. 유용하게 사용해주신다니 감사하고 부끄럽네요^^

      삭제
  3. 오 한번 해 봐야 겠네요.

    저는 팀드라이브에 복사하는 걸 만드는 중입니다.

    http://naver.me/xlq6qe7G

    답글삭제
    답글
    1. 오오...주신 링크 찾아봤네요. 재미있는 걸 하시는 군요.^^

      삭제
    2. 찾아 주셔서 감사합니다.

      삭제
    3. 완성되시면 한번 더 찾아가겠습니다^^

      삭제
    4. 이제 쓸만합니다.
      단 유료입니다.
      https://copy.gfolder.net

      삭제
  4. 구글 링크 방법 찾다가 다 막혀버려서 개고생하고 있었는데 이런 방법이?
    게다가 자동 태그 변환 기능까지? 이런 대단한 일이?
    정말 감사합니다..고맙습니다.. 앞으로 정말 유용하게 쓰겠습니다.

    답글삭제
    답글
    1. 글 몇개 써놓고 거의 방치중인 블로그 찾아주셔서 감사하네요.

      삭제
  5. 와... 진심 정말 감사합니다!!

    답글삭제
  6. 감사합니다. 정말 많은 도움이 되었습니다

    답글삭제
  7. 감사합니다 덕분에 잘 쓰고 있네요~

    답글삭제
    답글
    1. 감사합니다. 잘 쓰고 계신다니 뭔가 뿌듯합니다. 딱히 한거도 없는데...^^

      삭제
  8. 너무 감사합니다..!!! 친구 청첩장 올려줘야되는데 이방법으로 간단히 해결했어요~! 너무너무 감사드립니다!

    답글삭제
    답글
    1. 작성자가 댓글을 삭제했습니다.

      삭제
    2. 잘 해결하셨다니 다행입니다.

      삭제
  9. 따라해서 붙여넣기 해도 반응이 없습니다. 초보입니다. 자세히 쫌....

    답글삭제
    답글
    1. 답이 늦었습니다. 아마 안되시는 분들은 아마도 "공유링크가져오기" 가 아니라 "공유"를 선택하셔서 나오는 주소를 복사하시지 않았을까 추측해 봅니다. 끝이 "~~~/view?usp=sharing"로 끝나는 링크를 사용하시는게 아니라 반드시 "공유링크가져오기"에서 나오는 주소를 사용하시면 될겁니다. "https://drive.google.com/open?id=XXXX" 과 같은 형식의 링크이면 현재도 잘 되는 걸 어떤분이 답글 달아주셔서 확인했네요. 관심가져주셔서 감사합니다. 일년지났으니 글 한개 더 쓸때가 됐나 봅니다.

      삭제
  10. 안녕하세요
    잘 할 줄은 모르지만 소스퍼다가 조금고쳐서 다른 사이트용으로 고쳐 써두 될까요?
    @@

    답글삭제
    답글
    1. 답이 너무 늦었습니다. 벌써 가져다 쓰셨는지도 모르겠지만 얼마든지 쓰셔도 됩니다^^

      삭제
  11. 구글 공유 링크의 양식이 조금 바뀐 것 같습니다. 파일 아이디만 따오면 되는 것은 같지만요.

    답글삭제
    답글
    1. 작성자가 댓글을 삭제했습니다.

      삭제
    2. 확인해보니 아직은 유효한것 같습니다. 움짤 보시면 "공유링크가져오기"가 아니라 "공유"를 선택하셔 나온 주소를 사용하신건 아닌지 확인해보시길 바랍니다. 관심가져주셔서 감사합니다.

      삭제
  12. 세번째에 있는 공유 링크를 외부에서 참조 가능한 주소로 변환하는 곳이 어디인가요? 아무리 찾아도 나오지 않고 여기도 링크가 안적혀있네요 알려주시면감사하겠습니다

    답글삭제
    답글
    1. 현재 페이지에서 "Google Drive path" 란에 구글드라이브에 저장해 놓으신 파일의 공유링크를 넣으시는 거에요. 움짤 보시고 본인 파일의 공유링크를 구하시면 되겠습니다.

      삭제
    2. 공유링크를 구했는데 넣는 프로그램이나 사이트는 없나보군요..

      삭제
  13. 와 진짜 너무 감사합니다.
    이런 방법이 있다니
    메가업로드 망하고 마땅한곳이 없었는데
    구글 드라이브 유료 지르러 갑니다
    이렇게 좋은 정보 알려주시고
    소스코드까지 만들어 주셔서 정말 감사합니다

    답글삭제
  14. 바로 다운로드도 됩니다.
    http://naver.me/F8M2TXmW

    답글삭제
  15. 감사합니다.
    제 블로그에 공유했습니다.

    구글 드라이브 호스팅
    https://blog.naver.com/gsuite-reseller/221507513707

    답글삭제
  16. 그런데 구글 뿐만 아니라 원드라이브도 되는것 같던데
    원드라이브는 어떻게 하면 될까요?

    답글삭제
  17. 와...!! 진짜 너무 감사합니다 생명의 은인이세요

    답글삭제
    답글
    1. 도움이 되셨다니 제가 다 기쁩니다.^^

      삭제
  18. 정말....가려운데를 한번에 긁어주는 글입니다. 감사합니다!

    답글삭제
    답글
    1. 별거 아닌데 도움이 되셨다니 다행이어요^^

      삭제
  19. 댓글을 안남길 수 업네요 ㅠㅡㅠ 도움이 되었습니다 정말 감사합니다!

    답글삭제
  20. 감사합니다!! 쉽게 변환가능해서 엄청 도움이 됐어요!!

    답글삭제
  21. 해결 못하던 문제에서 벗어나게 해주는 빛과 같은 글이었어요 ㅠㅠ
    너무 감사합니다! 소스를 오픈해주셨지만 저는 이 블로그에 계속 들려서 변환 할 것 같아요 ㅋㅋㅋ.. 소스를 활용해서 로컬에서 사용하라 하셨지만 거기까지는 레벨이....ㅎㅎㅎ
    아무튼 너무 감사합니다!!

    답글삭제
    답글
    1. 제가 감사합니다.^^ 좋은 하루되세요^^

      삭제
  22. 감사합니다!
    제 블로그에 출처를 남기고 퍼가될까요?!
    추석 알차게 보내시길 바랍니다! 감사합니다!!

    답글삭제
  23. 감사합니다! 어떻게 할지 난감했었는데 html 공부에 매우 큰 도움에 되었습니다!

    답글삭제
  24. 감사합니다 유용하게 사용할 것 같아요

    답글삭제

댓글 쓰기

가장 많이 본 글