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

Update 2020/6/19: 최근 구글 드라이브의 공유주소가 약간 변경되었나 봅니다. 몇몇분이 댓글로 알려주셔서 새롭게 바뀐 Prefix로 변환하도록 수정하였습니다. 다들 관심가져주셔서 감사합니다.

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

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


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

사실상 원리는 매우 간단한데, 구글드라이브 공유 주소의 id (https://drive.google.com/file/d0B-HVWNWBwUkrb0dxX19fWDhyVlE) 부분만 추출하여 export 할 수 있는 prefix만 붙여놓으면 외부에서도 참조 가능한 링크가 된다. 구글 정책의 변경으로 prefix가 몇번 바뀌었다고 들었지만, 현재 이 글의 이미지나 움짤도 모두 구글 드라이브에서 가져온 것이므로 글에 첨부된 이미지가 제대로 보인다면 지금 설명하는 방법이 아직까지는 유효하다고 할 수 있다. 최근에 공유주소의 prefix가 변경된 듯하다. 기존의 'open?id=' 에서 'file/d/'형식으로 바뀐것을 확인했다. 소스코드와 변환기에 변경사항을 반영하였다.(2020/6/18)

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

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


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

공유 주소의 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. 감사합니다 유용하게 사용할 것 같아요

    답글삭제
  25. https://drive.google.com/file/d/1oTvsRg5ksBHdHcsd7cGmnt

    등등 이런 상태로 공유링크가 나오는데 글쓴이 분과는 다른 링크입니다.

    이것은 어떻게 해결해야할까요?

    답글삭제
    답글
    1. 이미지 선택 후 오른쪽 마우스 클릭 후 공유를 눌러서 그런 것 같습니다.
      오른쪽 마우스 클릭 후 공유 가능한 링크 가져오기를 눌러서 공유링크를 받아오세요!

      삭제
  26. 감사합니다! 많은 도움이 되었어요

    답글삭제
  27. 감사합니다! 저의 홈페이지 운영할 때 유익하게 잘 쓰겠습니다. 앞으로 항상 행복한 일들만 일어나셧으면 좋겠습니다. 정말 이런기술 배우고싶네요!!! 앞으로도 자주 들릴게요 !

    답글삭제
  28. 최고입니다. 구글드라이브 링크에선 바로 이미지가 전송되지 않아 아쉬웠는데, 한방에 해결합니다. 감사합니다!

    답글삭제
  29. 감사합니다. 잘 쓰겠습니다. :)

    답글삭제
  30. 감사합니다. 링크를 통해서만 이미지 첨부가 가능했는데 이걸로 해결했습니다. 잘 쓸게요.

    답글삭제
  31. 오른쪽 마우스 클릭 후 공유 가능한 링크 가져오기를 눌려도, id= ~ 라는 링크가 생성되지 않습니다. 혹시 어떤 점이 바뀐걸까요?ㅜㅠㅠ 사용해보고 싶은데 방법이 없네요..

    답글삭제
    답글
    1. 알려주셔서 감사해요. 구글드라이브 공유주소가 조금 바뀌었네요. 안알려주셨으면 쭉 몰랐을거에요^^. 코드랑 변환기 수정했습니다. 지금 쓰시면 될거에요.

      삭제
  32. 언제부턴가 링크 가져오기 눌러도 공유랑 같은 주소로 나오네요~
    그래도 id에 해당하는 부분만 빼서 하면 어찌 되기는 한데 코드 만들어주신걸로 바로 변환은 안되는 상태인거 같아요

    답글삭제
    답글
    1. 알려주셔서 감사합니다. 수정했어요^^

      삭제
  33. 잘 사용했습니다. 고맙습니다. 그런데 최근에 정상적으로 되질 않습니다. 무슨 이유가 있을까요?

    답글삭제
    답글
    1. 알려주셔서 감사합니다. 주소변경된거 반영했어요. 이유는 제가 게을러서에요^^

      삭제
  34. 안녕하세요 혹시 이미지 말고 폴더도 링크 가져와서 링크안의 이미지로 접근 가능하게 할 수 있을까요,,,?

    답글삭제
    답글
    1. 글쎄요... 구글 드라이브에서 폴더 링크 주소를 가져올수 있는 방법이 있나요? 해보지 않아서 잘 모르겠네요.

      삭제
  35. 진짜 유용하게 쓰고 있습니다. 혹시 소스 퍼가도 될까요?

    답글삭제
  36. 안녕하세요, 좋은 게시글 감사합니다.

    혹시, 작성자분께서 사용하시는 것처럼 블로그의 이미지 호스팅 용도로 사용할 때 요청이 많은 경우 일시적으로 이미지 접근을 제한하거나 하는 조치는 없는가요?

    감사합니다.

    답글삭제
  37. 정말 정말 감사합니다!
    HTML 공부 중인데, 이 부분이 정말 궁금했어요

    정말 감사합니다!

    답글삭제
  38. 정말 정말 도움되었습니다!
    감사합니다!!

    답글삭제
  39. 정말 감사합니다! 제 블로그에 코드 첨부해도 괜찮을까요?

    답글삭제
  40. 정말 찾던 기능입니다. 감사합니다!

    답글삭제
  41. 이 방법을 아주 잘 사용하고 있었는데, 공유가능한 링크가 사라졌습니다 ㅜ.ㅜ 제가 잘못하고 있는걸까요

    답글삭제
  42. 감사합니다!! 블로그에 공유해서 올려놓고 사용하겠습니다!!

    답글삭제
  43. 감사합니다! 덕분에 소스코드를 사용하기 편해졌습니다!

    답글삭제
  44. 잘 사용하고있었는데 어제부터 갑자기 안되네요 ㅠㅠ

    답글삭제
  45. 혹시 지금은 문제가 있는걸까요? 소마님 이미지도 안 보이네요ㅠㅠ

    답글삭제
    답글
    1. 그런가요? 저는 잘 보이는데... 확인해 볼게요^^

      삭제
    2. 다시 한번 해보시겠어요? 테스트 해봤는데 문제 없이 되는 것 같습니다만... d-.-b;

      삭제
    3. 확인해보니 크롬에서만 되고 사파리나 익스플로러 웨일에서는 안되네요ㅠㅠ

      삭제
    4. 알려주신 내용 보고 저도 급 궁금해져서 맥이랑 윈도우에서 테스트 해봤는데요. 웨일,Edge,Chrome(맥,윈도우), Safari(맥) 이렇게 테스트 해봤네요.
      제가 했을때는 전부 잘되네요. 어떻게 안되시는지 구체적으로 알려주시면 확인해보겠습니다. 꼴랑 글 한두개 있는 블로그에 관심가져주셔서 감사해요^^

      삭제
    5. 앗,, 제문제인가봐요 제가 조금 더 알아볼게요!
      신경써주셔서 감사합니다ㅠㅠ! 번창하세요 :)

      삭제
    6. 넵^^. 문제 있으시면 또 알려주세요^^

      삭제
  46. 안녕하세요 somanet 님. 변환링크 마지막에 .jpg를 넣고 싶은데 어떻게 해야할까요? 어렵네요 ㅠ

    답글삭제
  47. 안녕하세요 somanet 님. 너무 감사드립니다. 그런데 이미지가 다 깨져보이는데..혹시 또 prefix 가 변경된 걸까요...?

    답글삭제
  48. 감사합니다. 덕분에 움짤을 쉽게 올릴수 있게 되었습니다.

    답글삭제
  49. 마크다운 이미지 넣기가 훨 수월해졌어요 너무 감사합니다

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

    답글삭제
  51. 덕분에 잘 사용했습니다! 감사합니다 :)

    답글삭제
  52. 안녕하세요! SOMANET님, 혹시 해당 블로그 내용을 제가 운영하는 블로그와 저희 솔루션 사이트 고객님들께 소개해도 될까요? 메일 주소 알려주시면 저희 회사 소개 자료 드리겠습니다. :)

    답글삭제
    답글
    1. 필요하면 쓰셔도 괜찮습니다. 저도 방문할 수 있게 블로그 주소 공개해주실 수 있을까요?

      삭제
    2. 안녕하세요! SOMANET님.
      아래 블로그 주소 공유 드립니다.
      https://blog.naver.com/easywinner11/222694959584
      감사합니다. :)

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

    답글삭제
  54. 덕분에 잘쓰고 있습니다. 근데 요즘에 엑박으로 보이고 작동을 안하는데 수정이 가능할까요

    답글삭제
  55. 너무 잘 사용하고 있었는데 엑박이 생기고 있네요.. 아무래도 주소가 변경된 것 같아요 ㅠㅠ

    답글삭제

댓글 쓰기

가장 많이 본 글