당신은 주제를 찾고 있습니까 “구글 이미지 호스팅 – [Google Sheet로 만드는 Simple Blog #6] google drive 이미지 호스팅“? 다음 카테고리의 웹사이트 https://hu.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: https://hu.taphoamini.com/photos/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 제주코딩베이스캠프 이(가) 작성한 기사에는 조회수 163회 및 좋아요 5개 개의 좋아요가 있습니다.
Table of Contents
구글 이미지 호스팅 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 [Google Sheet로 만드는 Simple Blog #6] google drive 이미지 호스팅 – 구글 이미지 호스팅 주제에 대한 세부정보를 참조하세요
굳이 만들어보는 Simple 블로그 With. Google spreadsheet!!
Google spreadsheet, Google app script, Google drive, bootstrap 이 4가지만 사용하여 24시간 무료로 동작하는 Simple 한 Blog를 만들어 볼 것입니다!
백엔드, 서버, SQL 등을 공부하지 않고 바로 나만의 Blog를 만들어볼 수 있습니다.🔥
인프런 강의에서도 무료로 수강 가능하십니다.
강의 링크 : https://inf.run/35dg
노션 링크 :
– 링크1 : https://www.notion.so/paullabworkspace/Page-1-0e0a60e633114a93af59e084d9e0f539
– 링크2 : https://www.notion.so/paullabworkspace/page-2-666609afc3a0431f944a6fe3a324dd52
구글 이미지 호스팅 주제에 대한 자세한 내용은 여기를 참조하세요.
무료로 이미지 호스팅 하기 – 구글 드라이브 사용 : 네이버 블로그
이미지 호스팅이란 무엇일까요? 이미지 호스팅은 이미지만을 따로 처리하는 서버를 두어 웹서버의 트래픽을 줄여 비용과 서버 부담을 줄여주는 역할을 …
Source: blog.naver.com
Date Published: 7/22/2021
View: 6858
구글 드라이브로 이미지호스팅 하기 – PSPS
이미지 1장 구글 드라이브로 호스팅하기. 첫 번째로, 본인의 구글 드라이브에 들어가서 이미지 파일 하나를 업로드 해봅니다. 드라이브에 있는 이미지 …
Source: psps.world
Date Published: 3/6/2021
View: 7213
(Topic) 001. 구글 드라이브로 이미지 호스팅하기 | Coding Log
구글 드라이브로 이미지 호스팅하기대부분의 개발자가 한 번쯤은 github에 블로그를 만들어 보지 않을까? 가장 유명한 jekyll부터해서 hexo, …
Source: namhoon.kim
Date Published: 11/7/2022
View: 8744
구글 드라이브로 온라인 상품 상세페이지 무료 이미지 호스팅 …
구글 드라이브로 온라인 상세페이지 무료 이미지 호스팅 하기 For 온라인 쇼핑몰 안녕하세요! 따남입니다. 삶의 지혜를 나누고파 적는 포스팅입니다!
Source: reshiet.tistory.com
Date Published: 4/3/2022
View: 371
구글 드라이브를 이미지 호스팅처럼 사용하는 방법 – 클리앙
구글 드라이브에 있는 이미지를 웹페이지에 직접 불러 사용할 수 있는 방법을 찾아서 소개합니다. 구글 드라이브를 이미지 호스팅처럼 사용할 수 있는 …
Source: www.clien.net
Date Published: 8/16/2021
View: 4739
구글 드라이브로 이미지 호스팅 – about being 42
구글 드라이브로 이미지 호스팅 · 1. 구글 드라이브에 원하는 사진을 업로드한다. · 2. 업로드 한 사진에 마우스를 올리고 마우스 우클릭 · 3. 링크생성 클릭.
Source: dwangdwangg.tistory.com
Date Published: 9/24/2022
View: 1416
구글 드라이브로 이미지 호스팅하고, 웹사이트에 배너로 띄워보기
목차 지인에게 연락이와서 찾아본 방법이다. 이런 방법도 있구나 ㅋㅋㅋ 하고 느낀다 ㅎㅎ 구글 드라이브 1. 구글 드라이브에 파일을 올리고, …
Source: lotuus.tistory.com
Date Published: 3/24/2022
View: 4173
이미지 호스팅 서버 추천, 구글은 안좋다 – Wonny
이미지 호스팅 서버 추천, 구글은 안좋다 … 처음에는 구글 드라이브의 사진 저장 기능을 사용하려고 했으나, 사진을 불러오는데 시간이 너무 오래 …
Source: wonnyhouse.tistory.com
Date Published: 3/9/2021
View: 6316
무료 이미지 호스팅, 구글 드라이브 이미지 웹페이지에 사용하기
몇 년 전까진 구글 드라이브로 호스팅이 가능했습니다. 무료 계정으로도 웹 호스팅을 할 수 있었으니 완전 무료 호스팅이었던 것이죠.
Source: lovedweb.com
Date Published: 8/30/2022
View: 9096
주제와 관련된 이미지 구글 이미지 호스팅
주제와 관련된 더 많은 사진을 참조하십시오 [Google Sheet로 만드는 Simple Blog #6] google drive 이미지 호스팅. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![[Google Sheet로 만드는 Simple Blog #6] google drive 이미지 호스팅](https://i.ytimg.com/vi/vZpdIh2SpTk/maxresdefault.jpg)
주제에 대한 기사 평가 구글 이미지 호스팅
- Author: 제주코딩베이스캠프
- Views: 조회수 163회
- Likes: 좋아요 5개
- Date Published: 2021. 5. 11.
- Video Url link: https://www.youtube.com/watch?v=vZpdIh2SpTk
무료로 이미지 호스팅 하기 – 구글 드라이브 사용
프로그래밍 무료로 이미지 호스팅 하기 – 구글 드라이브 사용 여우 ・ URL 복사 본문 기타 기능 공유하기 구글 드라이브를 무료 이미지 호스팅 서버로 사용하기 안녕하세요. 사진 찍는 IT 블로거 여우입니다. 오늘은 구글 드라이브를 사용하여 이미지 호스팅을 하는 방법을 알아볼 것인데요. 이미지 호스팅이란 무엇일까요? 이미지 호스팅은 이미지만을 따로 처리하는 서버를 두어 웹서버의 트래픽을 줄여 비용과 서버 부담을 줄여주는 역할을 하는데요. 구글 드라이브 만으로 15GB 용량의 이미지 호스팅 서비스를 무료로 사용할 수 있습니다. 인터넷에 찾아보면 이미지 무료 호스팅 사이트가 많이 있지만 구글처럼 안정적인 서비스가 가능할지는 알 수 없기 때문에 구글 드라이브를 사용해 보는 것을 추천드립니다. 자, 그러면 시작하도록 하겠습니다. 먼저 구글 드라이브로 들어가주세요. 드라이브 로고는 이렇게 생겼습니다. 그다음 새로 만들기를 눌러주세요. 파일 업로드를 눌러주세요. 파일을 선택하고 열기를 눌러주세요. 업로드가 될 때까지 조금만 기다려주세요. 방금 업로드한 사진을 눌러주세요. 그럼 이렇게 나오는데요. (제가 사용한 사진은 크기가 좀 작아서 작게 나오네요.) 점 3개가 세로로 되어있는 추가 작업 버튼을 눌러주세요. 여기서 공유를 눌러주세요. 사용자 및 그룹과 공유 창이 뜨셨다면 아래에 있는 링크가 있는 모든 사용자로 변경을 눌러주세요. 그런 다음에 완료를 눌러주세요. 방금 공유를 한 이유는 모두에게 이미지가 잘 보이게 하기 위함으로 공유를 하지 않으면 나에게만 보이고 남에게는 이미지가 안 보이는 사태가 벌어집니다. by. 경험자 그다음에 점 3개가 세로로 배열되어 있는 추가 작업 버튼을 눌러서 새 창에서 열기를 선택해 주세요. 그러면 새 창에서 열리는데요. 열린 창에서 다시 추가 작업을 눌러주세요. 그런 다음에 항목 삽입이라는 것을 눌러주세요. 제대로 따라오셨다면 아래와 같이 뜨는데요. iframe으로 이루어진 코드로 짜여 있는데요. 이 코드를 그대로 쓰면 이상하게 나올 수 있기 때문에 일부분만 복사해 줍니다. d/ 와 /preview 사이에 있는 부분을 복사하시면 됩니다. 아래에 있는 빨간색으로 표시되어 있는 부분을 복사해 주세요. 복사한 부분은 파일 아이디라고 하는 것인데요. 파일마다 고유한 아이디를 가지고 있답니다. 이제 복사한 파일 아이디를 아래 코드의 id= 뒤에 넣어주세요.
(Topic) 001. 구글 드라이브로 이미지 호스팅하기
(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.
뭐.. 대부분 이미지보다는 텍스트 위주의 블로그라서 1GB를 넘기기는 쉽지않겠지만, 용량이 어차피 우상향인 건 어쩔 수 없고 증가세를 최소화 하려면 어떻게 할까 고민하고 있었다.
flicker나 imgur가 대표적인 사이트이지만 뭔가 찜찜하달까.
그러던 차.. 어차피 공유를 위해 메인 클라우드로 쓰는 구글 드라이브로 이미지를 포스팅하면 어떨까 싶었다.
한 번 무작정 업로드를 해보았다.
시험용 짤은 컴퓨터 그래픽의 영원한 친구 레나 포르센으로 해야하는 것이 마땅하고 옳은 일이다.
업로드 후 확인해보면 이렇게 구글 드라이브의 자체 뷰어로 이미지가 보인다.
자 업로드가 끝나고 외부 공개를 해보면…
외부 공개 URL 로도 구글 드라이브 뷰어로 올라오는 것을 알 수 있다.
하지만 우리가 하고 싶은 것은 순수 이미지만 뽑아내는 것이다.
외부 링크로 접근한 위의 화면에서 우상단의 메뉴를 눌러 항목 삽입을 눌러보면
1
< iframe src = "https://drive.google.com/file/d/1aBjz332Io2wnoK-FVD3H0hCUsqOXYRHd/preview" width = "640" height = "480" >
위와 같은 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
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
uc 는 usercontent 의 약자인가??
리다이렉트된 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가 있는 셀의 주소}
사용한 수식은 위와 같다.
뭐 결과는 보는 바와 같이 본 포스팅의 모든 이미지는 구글 드라이브의 호스팅을 이용해 첨부하였다.
다만 이미지 폴더는 따로 생성해서 보기 권한을 모든 사람에게 부여해야 하므로 사용에 주의하자.
구글 드라이브로 온라인 상품 상세페이지 무료 이미지 호스팅 하기!
구글 드라이브로 온라인 상세페이지 무료 이미지 호스팅 하기 For 온라인 쇼핑몰
안녕하세요! 따남입니다.
삶의 지혜를 나누고파 적는 포스팅입니다!
최근들어 창업에 대한 욕구와 열정으로
오프라인 보다 비교적 시장 진입이 쉬운,
온라인 쇼핑몰 창업을 하시는 분들이 많으시죠~?
오프라인 창업에 비해
시간적, 공간적 부담이 적은
온라인 쇼핑몰 창업은,
CAFE24나 고도몰 등을 통한 자사몰 개설이나
오픈마켓이나 소셜커머스 등을 통한 온라인 채널 입점 등
진입할 수 있는 방법과 매체들이 정말 다양합니다!
네이버에서 운영하는 네이버 쇼핑만 보더라도,
수 많은 온라인 판매자들을 만나 실 수 있습니다.
각설하고!
오늘의 포스팅에서 말씀드릴 내용은,
바로 온라인 쇼핑몰을 운영 함에 있어
소비자 소구를 이끌어 내는
가장 중요한 요소 중 하나인!
온라인 상품 상세페이지의
무료 이미지 호스팅에 대한
한 가지 방법을 공유하고자 합니다!
바로 우리에게 익숙한(?!)
구글 드라이브를
활용한 방법인데요.
제가 이미지 호스팅을 위해
사용하고 있는 방법이기도 하여 공유드리고 하며,
꼭 온라인 상품 상세페이지의
이미지 호스팅 뿐만 아니라
다양한 목적으로 이미지 호스팅이 필요하신 분들께
유용한 방법이 아닐까 조심히 생각해 봅니다 🙂
그럼 같이 한 번 살펴보실까요~?
구글 드라이브로 온라인 상품 상세페이지 무료 이미지 호스팅 하기!
※ WARNING ※
이미지 호스팅의 방법은 구글 드라이브가 아니더라도
다양한 FTP 서비스 등을 이용할 수 있습니다.
개인적으로 구글 드라이브 사용 전에는
ESMplus를 통한 FTP로 이미지 호스팅을 하였으나,
아래에서 말씀 드릴 다양한 장점으로 인해
살짝 불편하여도 구글 드라이브로
이미지 호스팅을 하고 있습니다.
이 방법이 꼭 저에게 그랬듯 장점만 있다고 말씀드릴 수 없으니
꼭 다른 다양한 이미지 호스팅 방법들도 살펴보시고
본인의 상황에 적합한 방법을 찾으시길 바라겠습니다 🙂
[ STEP – 1 ]구글 드라이브는 무엇인가?
구글 드라이브는,
구글에서 운영 중인
클라우드 스토리지로써
개인이라도 구글 계정만 있다면
15GB의 클라우드 저장용량을 무료로 이용할 수 있는
아주아주 활용성이 높은
클라우드 스토리지 서비스 입니다.
구글 드라이브 사용 구분
구글 드라이브는 크게
개인용과 비즈니스용으로 서비스를 제공하고 있으며,
오늘은 개인용 버전 사용을 가정하고
이미지 호스팅에 대한 방법을 설명드릴 예정입니다.
구글 드라이브의 특징이라고 한다면
먼저 구글 드라이브와 연동되는
강력한 뷰어 기능의 구글 문서도구를 통해
다양한 파일을 손쉽게 열어볼 수 있다는 점으로
가장 많이 사용하는 MS OFFICE(엑셀, 워드, PPT)와 더불어 각종 이미지, 영상파일, 포토샵, 일러스트레이터 파일로 확인이 가능합니다.
엑셀, 워드, PPT를 비롯한
일러스트레이터와 포토샵 등에서 사용하는 파일도
구글 문서도구로 구글 드라이브에서
열어 보실 수 있습니다.
(가끔 필요 프로그램이 설치 안된 컴퓨터에서도 파일 확인할 수 있다는게 큰 장점이죠!)
PC, 스마트폰, 태블릿 등 다양한 환경에서 내 파일들을 확인할 수 있습니다.
구글 드라이브가 가신 두 번째 특징은,
대부분 클라우드 스토리지가 그렇듯
언제, 어디서든 온라인 네트워크만 있다면
PC / 스마트폰 / 태블릿 등의 다양한 플랫폼으로
내 파일을 확인하고, 편집할 수 있다는 점으로
다양한 기기로 파일을 관리할 수 있습니다!
손 쉽게 다른 사람과 공동 작업을 할 수 있다는 점이야 말로 가장 큰 장점이 아닐까 생각되네요!
그리고 가장 중요한 특징인
다른 사람들과 파일을 공유하고
공동으로 파일을 편집/수정하는 등
공동작업이 손 쉽게 가장하다는 점이야 말로
많은 클라우드 스토리지 서비스 중
제가 구글 드라이브를 쓰는 가장 큰 이유가 아닐까 생각합니다 🙂
(잘만 활용한다면 정말 훌륭한 공동 작업 툴이라고 생각됩니다.)
오늘은 구글 드라이브를 통한 이미지 호스팅에 대한 포스팅이니,
구글 드라이브에 대한 설명은 여기까지 하고,
실제 이미지 호스팅하는 방법에 대해서 설명드리도록 하겠습니다!
[ STEP – 2 ]구글 드라이브를 통한 이미지 호스팅을 위한 준비 사항
구글 드라이브로 이미지 호스팅을 하기 위해서는
당연하게도 가장 먼저
구글 계정을 생성하셔야 합니다!
구글 드라이브 홈페이지 링크
위 링크로 구글 드라이브 홈페이지 접속하셔서
구글 계정을 새로 생성하셔도 되나,
만약 안드로이드 스마트폰을 사용 중이시라면,
일반적으로 구글 플레이스토어 이용을 위해
구글 계정을 이미 생성하셨을테니
그 계정을 사용하셔도 무방 합니다!
구글 드라이브 우측 상단의 “구글 드라이브로 이동” 클릭 하시면 나타나는 로그인 창에서 계정을 만드시거나, 로그인 하시면 됩니다.
구글 계정은 한 사람이 여러 개를 만드실 수 있으니,
클라우드 전용 계정을 따로 만들어서 사용하셔도 됩니다만
개인적으로는 하나의 구글 계정으로 활용하시는게 좋다고 생각됩니다 🙂
(구글 서비스 간, 강력한 연동 기능을 사용하기 편리하기 때문이죠!)
구글 계정을 생성하셨다면,
하기의 구글 드라이브 HTML 소스 변환기 파일을 다운로드 해 주세요!
(SOMANET님의 블로그에서 발췌 / http://www.somanet.xyz/2017/06/blog-post_21.html)
구글드라이브 HTML 소스 변환기.html 0.00MB
구글 드라이브 HTML 소스 변환기 / 출처 : somanet.xyz
구글 드라이브의 파일들은 구글 문서도구로만
파일을 확인할 수 있는데
html 소스에서 링크로는 사용할 수 없기에
구글 드라이브에서의 이미지 공유 링크 주소를
html 소스로 사용할 수 있도록 변환 해 주는 것이라 보시면 될 듯합니다!
(이 자리를 빌어 만들어 주신 능력자분께 감사 말씀드립니다!)
여기까지
구글 드라이브 사용을 위한 구글 계정과
포스팅에 첨부한 HTML 변환 파일을 다운받으셨다면
이미지 호스팅을 위한 사전 준비는 마쳤다고 생각하시면 됩니다 🙂
[ STEP – 3 ]본격적으로 구글 드라이브로 이미지 호스팅을 해보자!
자~! 이제 사전 준비도 끝났으니
본격적으로 이미지 호스팅을 위한 방법을
같이 살펴보도록 하겠습니다!
복잡 해 보일 수 있기에
단계별로 요약을 먼저 하자면,
1. 구글 드라이브에 이미지 호스팅할 온라인 상세페이지 업로드
2. 구글 드라이브(웹 버전)에 접속하여 호스팅할 온라인 상세페이지 우클릭 후,
“공유 가능한 링크 가져오기”로 공유 링크 복사
3. 다운받은 HTML 변환 파일의 “Google Drive path” 부분에 링크 주소 붙여넣기
4. HTML 변환 파일의 “Make Google Drive Path Linkable” 클릭하여 html 변환시작
5. HTML 변환 파일의 “Image Tag” 부분에 있는 html 소스 복사하기(또는 “Save to clipboard” 클릭)
6. html소스를 지원하는 온라인 쇼핑몰의 상품등록란에 html 소스를 붙여 넣으면 끝!
꽤 복잡해 보일 수 있으나,
차근차근 저와 함께 해보시면 그리 어려우시지 않으실테니
함께 살펴보도록 하겠습니다!
[ STEP – 3-1 ]1. 구글 드라이브에 이미지 호스팅할 온라인 상세페이지(이미지) 업로드
이미지 호스팅을 위해서
구글 드라이브에 호스팅할 온라인 상세페이지 이미지를
업로드 해 주시는 것을 먼저 해주셔야 합니다!
구글 드라이브 홈페이지 접속하셔서 이미지를 업로드 해주시면 되며,
페이지 좌측 상단의 “새로만들기->파일 업로드”나
그냥 이미지 파일을 드래그 해서 웹페이지 가져다 놓는 방법으로도
구글 드라이브에 이미지 업로드가 가능하오니
편하신 방법으로 이미지를 업로드 해주시면 됩니다!
예시 : 꽃 이미지를 업로드 한 상태
이미지 업로드를 마무리 하셨다면 1단계 완료!
[ STEP – 3-2 ]2. 구글 드라이브(웹 버전)에 접속하여 “공유 가능한 링크 가져오기”로 이미지 공유 링크 복사
구글 드라이브에 이미지 호스팅할
온라인 상세페이지 이미지를 업로드 하셨다면
이미지를 우클릭하여
“공유 가능한 링크 가져오기”를 클릭 해주세요!
예시 : 구글 드라이브(웹 버전)에서 이미지 우클릭 후, 공유 가능한 링크 가져오기 클릭!
웹 버전의 구글 드라이브를 통하셔야만
이미지 우클릭 시,
공유 가능한 링크 가져오기가 나타나니 유의 해 주세요!
“공유 가능한 링크 가져오기”를 클릭하시면,
자동으로 클립보드에 링크 주소가 복사되어 있습니다!
(메모장 등에 붙여넣기(컨트롤+V)하시면 링크가 복사된 걸 확인하실 수 있습니다!)
링크 복사까지 완료 하셨다면 2단계 완료!
[ STEP – 3-3 ]3. 다운받은 HTML 변환 파일의 “Google Drive path” 부분에 복사한 링크 주소 붙여넣기
2단계에서 링크 주소를 복사한 채로
다운받으신 “HTML 소스 변환 파일”을 실행 해 주세요 🙂
(크롬이나 익스플로러 등 웹으로 실행 해 주시면 됩니다)
그리고 “Google Drive path” 부분에
복사하셨던 2단계 링크 주소를 붙여넣어 주세요!
예시 : 구글 드라이브에서 복사한 이미지 파일의 공유 링크 주소를 붙여넣은 상태
위에 이미지처럼
구글 드라이브에서 복사하셨던
이미지 공유 링크 주소를 넣주시면 3단계 완료!
[ STEP – 3-4 ]4. HTML 변환 파일의 “Make Google Drive Path Linkable” 클릭하여 html 소스 변환
공유 링크 넣으셨던 부분 바로 밑에
“Make Google Frive Path Linkable” 부분을 클릭 해 주세요!
예시 : 변환 버튼을 클릭 해 html 소스로 변환된 모습
버튼을 클릭하시면
위에 이미지처럼
html로 링크 가능한 이미지 주소(Linkable Image path)와
이미지 태그까지 걸린 html 주소가
짜잔하고 자동으로 변환됩니다!
그리고 변환된 이미지의 프리뷰까지
한 번에 확인하실 수 있습니다!
위의 이미지 처럼 html 변환이 완료되면 4단계 완료!
[ STEP – 3-5 ]5. HTML 변환 파일의 “Image Tag” 부분의 html 소스를 복사하기
우리는 이미지 태그까지 걸린 html 소스를 사용하기 때문에
우측 최하단에 있는 두 번째 “Image Tag” 칸에 있는
“Save to Clipboard”를 클릭 해 주세요!
예시 : 이미지 태그에 있는 img src가 걸린 html 주소를 복사 해 주세요.
여기까지 이미지 태그된
html 주소를 복사하시면
사실상 이미지 호스팅을 위한
html 주소를 확보하신 것으로
이후에는 html을 지원하는 온라인 쇼핑몰에
상품등록으로 가셔서
복사하신 html 주소를 붙여 넣기 하시면
구글 드라이브를 통한 이미지 호스팅이 완료가 됩니다!
제 경우에는 이렇게 확보한
온라인 상품 상세페이지 html 주소를
바로 온라인 쇼핑몰에 가서 상품등록을 하는 것이 아니라
엑셀에 상품별로 기록하여 사용 중입니다 🙂
(상품별 이미지 호스팅 주소를 따놓고 관리하는 것 이지요!)
[ STEP – 3-6 ]6. html 소스를 지원하는 온라인 쇼핑몰에 상품등록을 해보자
마지막으로는
html 소스를 지원하는
온라인 쇼핑몰에 상품등록을 같이 해보도록 할까요~?
대표적인 온라인 쇼핑몰인
네이버 스마트스토어(구 스토어팜)에서 테스트 해보겠습니다!
상품등록으로 가셔서 상품 상세설명에
위에서 만들어진 이미지 태그가 붙은 html 주소를 붙여 넣었습니다.
예시 : 네이버 스마트스토어 상품등록에 html 주소를 붙여 넣은 모습
이렇게 HTML 작성으로 바꾸고
우리가 위에서 확보한 html 주소를 붙여 넣으시면!
예시 : PC버전 상세내용 미리보기 모습
PC버전 미리보기를 눌렀을 때도,
예시 : 모바일 상세내용 미리보기 모습
모바일 버전으로 미리보아도
이미지가 잘 적용되는 모습을 보실 수 있습니다!
[ STEP – 4 ]굳이 구글 드라이브를 통해 이미지 호스팅을 했을 때 이점은?
제가 구글 드라이브를 온라인 상세페이지
이미지 호스팅으로 추천드리는 가장 큰 이유는
위와 같이 상품의 html 코드를 한 번 따놓으면
이후 상품 수정 시,
수정 이미지를 기존의 동일 파일명으로만 바꾸어 주시면(덮어씌우기)
대부분 온라인 쇼핑몰에 등록된 html 코드의 수정없이
이미지만 일괄적으로 수정할 수 있다는 점으로
(html로 작성해도 쇼핑몰 자체 서버에 이미지를 저장하는 경우는 불가 합니다/예 : 쿠팡)
단순히 수정 이미지를 덮어씌우는 것은
ESMplus의 FTP 서비스에서도 가능하나
구글 드라이브는 여기에 한 가지 강점이 더 있으니…!!
바로 구글 드라이브 PC버전을 함께 사용하시면
상품 수정이 매우 편해 진다는 점 입니다!
풀어서 설명드리면,
바로 위에서 설명드린바와 같이
구글 드라이브에 업로드된 이미지는
파일 이름이 바뀌지 않는 이상
다른 이미지로 바꾸어도 따놓은 html 코드가 변하지 않는데,
구글 드라이브 PC버전을 사용해
PC에 동기화시킨 구글 드라이브 폴더에 수정된 이미지를 바로 작업 해
상품 이미지 수정 등이 가능하다는 점 입니다.
예시 : PC버전 구글 드라이브에서 웹 버전과 동일하게 업로드 파일 확인 가능
위에 이미지를 보시면
앞서 우리가 함께 테스트한 이미지가
PC버전 구글 드라이브 폴더에 똑같이 있는 걸 확인하실 수 있습니다!
방법을 설명드리자면
PC에서 포토샵 등 프로그램으로 상세페이지를 수정 후,
바로 저 구글 드라이브 PC버전의 폴더에 들어가서
수정된 이미지로 덮어 씌우면
알아서 온라인 쇼핑몰에 등록된 상품 상세페이지가
수정된 이미지로 바뀌는 모습을 보실 수 있으실 겁니다~!
비단 PC뿐만 아니라,
모바일에서도
구글 드라이브 APP이나 웹 버전 접속으로
수정이 가능하다는 점!!
즉,
구글 드라이브로 이미지 호스팅을 하면
언제, 어디서든 PC나 스마트폰이 있으면
상품 상세페이지 이미지를
손쉽게 일괄 수정할 수 있다는 말이 됩니다!
또한, 저는 회사 PC와 노트북에 모두 구글 드라이브를 설치해
어디서든 바로 수정이 가능하게 해두었고
상세페이지 폴더 공유를 통해 다른 작업자와 공동 작업도 가능하도록 해두었습니다 🙂
자~! 이렇게
구글 드라이브에 대한 간력한 설명과
구글 드라이브를 통한
온라인 상품 상세페이지 이미지 호스팅 방법에 대해 알아보왔습니다 🙂
제 경우에는 여러모로 구글 드라이브를
다양하게 사용하고 있기
정말정말 편리한 클라우드 스토리지라 생각하며,
앞으로도 구글 문서 공동작업 등
구글 드라이브 관련 다양한 기능에 대해
포스팅을 작성할 예정이니 자주 찾와주시면 감사하겠습니다!
감사합니다.
따남 드림
구글 드라이브를 이미지 호스팅처럼 사용하는 방법 : 클리앙
구글 드라이브에 있는 이미지를 웹페이지에 직접 불러 사용할 수 있는 방법을 찾아서 소개합니다.
구글 드라이브를 이미지 호스팅처럼 사용할 수 있는 셈입니다.
절차를 간략하게 정리합니다. 자세한 사항이 궁금하시면 출처 링크를 참고 하세요.
1. 구글 드라이브에 이미지를 올립니다.
2. 이미지를 인터넷의 모든 사용자가 찾고 볼 수 있도록 공유 옵션을 설정합니다.
3. 해당 이미지 미리보기를 클릭합니다.
4. 미리보기 화면의 오른쪽 상단에 보면 점 3개짜리 아이콘이 있습니다. 이 아이콘을 클릭한 후 ‘새 창으로 열기’ 메뉴를 클릭합니다.
5. 새창으로 미리보는 주소가 나옵니다. (제 개인정보가 노출된다는 첩보가 있어서 미리보기 주소 지웠습니다.)
6. 이 주소에서 /file/d/ 뒷 부분부터 /view 전까지의 1iFmkZJiKcwkLkTUhY7KDcie1iGBt6QSV 글자조합이 핵심입니다.
7. 글자조합 내용을 https://drive.google.com/uc?id= 뒷 부분에 붙여 넣습니다. 그러면 이 주소가 구글 드라이브에 올린 이미지를 웹페이지에서 사용할 수 있는 주소가 됩니다. https://drive.google.com/uc?id=1iFmkZJiKcwkLkTUhY7KDcie1iGBt6QSV
8. 웹페이지 등에 사용할 때 img 태그 속의 src 경로 속에 이 주소를 넣으면 일종의 이미지 호스팅과 같이 사용할 수 있게 됩니다.
이미지를 많이 사용하는 경우 이 방법을 적절하게 사용하면 트래픽 절감에 약간이라도 도움이 될 것 같네요.
<참고> 구글이 정책을 바꿔 언제 막힐지는 모르겠네요.
출처 : https://blog.usejournal.com/host-static-images-for-your-apps-or-website-on-google-drive-hotlink-to-gdrive-images-358d6fcf8ef7
구글 드라이브로 이미지 호스팅
반응형
지난번에 한번 해봤는데 까먹어서 기록용으로 다시 쓰는 구글 드라이브로 이미지 호스팅하기.
이미지를 바로 삽입하지 않고 호스팅해서 넣으면 좋은 점 : 수정이 용이하다.
구글 드라이브로 하는법!
1. 구글 드라이브에 원하는 사진을 업로드한다.
2. 업로드 한 사진에 마우스를 올리고 마우스 우클릭
3. 링크생성 클릭
4. 제한됨 부분을 클릭해서 <링크가 있는 모든 사용자에게 공개>로 전환
5. 링크복사 클릭
여기까지 하면
http://drive.google.com/file/d/1t0dr4WKRG0a0ir4STOX8m1Qg6Ex5Hdh_/view?usp=sharing
와 같은 주소를 얻게 된다. 여기서
http://drive.google.com/file/d/
뒷부분
/view?usp=sharing
앞부분
1t0dr4WKRG0a0ir4STOX8m1Qg6Ex5Hdh_
이것만 따로 떼서
http://drive.google.com/uc?id=
뒤에 붙여넣으면 끝!
http://drive.google.com/uc?id=1t0dr4WKRG0a0ir4STOX8m1Qg6Ex5Hdh_
이렇게!
밑의 작업을 하지 않고 바로 복사한 링크를 사용하면 링크를 클릭해야 사진이 보인다.
반응형
구글 드라이브로 이미지 호스팅하고, 웹사이트에 배너로 띄워보기
728×90
반응형
목차
지인에게 연락이와서 찾아본 방법이다.
이런 방법도 있구나 ㅋㅋㅋ 하고 느낀다 ㅎㅎ
구글 드라이브
1. 구글 드라이브에 파일을 올리고, 우클릭 하여 “공유” 메뉴를 클릭한다.
2. 처음에는 권한이 “제한됨” 으로 설정되어있다. “링크가 있는 모든 사용자로 변경” 클릭
3. 아래 화면이 뜨면 권한이 “모든 사용자에게 공개”로 업데이트 된 것이다. “링크복사” 를 클릭하고 “완료”를 누른다.
(만약 링크를 복사하지 못하고 창을 닫았을 때는, 이미지파일을 우클릭하여 “링크생성”을 클릭해서 팝업창을 연다.)
4. 복사한 링크를 수정할 것이다. 메모장을 켜자.
기존 링크에서 [ s: ], [ file/d/ ], [ /view?usp=sharing ] 3가지를 삭제하고
[ uc?export=view&id= ] 를 추가해준다.참고 : http://www.somanet.xyz/2017/06/blog-post_21.html
이제 변환된 링크만 있으면 어디에든 내 이미지를 보여줄 수 있다.
간단하게 웹사이트 만들어보기
웹사이트는 기본적으로 HTML 이란 마크업 언어로 구성되어있다.
아래처럼 ~ 태그 안에
~, ~ 라는 2가지 태그를 작성하는게 기본 틀이다.지금은 정말 간단하게만 HTML파일을 만들어보자.
HTML파일은 메모장으로도 작성 가능하니 메모장을 열자.
일단 아래와 같이 입력하자.
파일을 저장할건데, 기본적으로 *.txt로 되어있는 것을
원하는 파일이름 .html 로 바꾸고 사진처럼 맞춘 후에 저장하자.
저장위치에 가보면 아래처럼 웹페이지가 생성된 것을 볼 수 있다.
(지금은 실행시켰을 때 빈화면만 나오는 것이 맞다.)
웹사이트에 배너 이미지 생성하기
일단 head는 메타정보가 들어가는 곳이니 우리가 손대지말자. 개발자들이 열심히 채워넣을 것이다.
우리는 body 안에서만 태그를 작성할 것이다.
메타정보 화면에 보여줄 태그들로 작성
태그는 이미지를 보여줄 수 있는 태그이다.
src 속성에 구글 드라이브에서 변환했던 이미지 링크를 넣어주면되고
width, height 속성으로 이미지의 크기를 잡아주면된다. (width, height를 잡지 않으면 원본 크기만큼 출력된다.)
속성 값은 ” ” 로 묶어서 작성한다.
위에처럼 작성한 코드를 저장하고 다시 파일을 열어보면, 이미지가 표시되는 것을 확인할 수 있다.
배너 이미지에 링크 걸기
링크를 만들 때는 ~ 태그를 사용한다.
href 속성에 이동할 링크를 작성해주면된다.
지금은 이미지에 링크를 만들 것이니, 위에서 만든
태그를 ~ 로 감싸주면된다.
저장하고 다시 HTML파일을 열어보자
이전과 다르게 이미지 태그위에 마우스를 올려보면 마우스 모양이 바뀌면서 클릭 가능해진 것을 확인할 수 있다.
클릭하면 네이버로 이동하게된다!
간단하게 HTML을 작성해보고, 이미지를 띄우고, 링크를 걸어봤다.
여기서 중요한건
, 태그이니 HTML파일의 구조는 ‘아~ 그렇구나’ 하고 참고만하자.
728×90
반응형
이미지 호스팅 서버 추천, 구글은 안좋다
반응형
서버에 직접 사진을 올려놓고 싶었으나 BLOB형식으로 저장되어서 불편했고, 결국에는 이미지를 저장하는 서버가 필요했습니다.
처음에는 구글 드라이브의 사진 저장 기능을 사용하려고 했으나, 사진을 불러오는데 시간이 너무 오래 걸려 안좋았습니다.
이미지가 나올 때 까지 로딩 애니메이션이 있는데, 저 글을 보시면 402개의 로딩 애니메이션 프레임을 건너뛰었다고 나옵니다. 그리고 어플리케이션이 Main Thread에서 너무 많은 일처리를 한다고 하여 수정이 필요했습니다.
그래서 처음에는 컴퓨터가 공유기로부터 멀리 떨어져 있어서 속도가 느린 것이 아닐까 생각했으나, 구글이 사진이나 파일 호스팅하는데 속도처리가 늦다고 하여 다른 사이트를 알아보았습니다.
이 사이트를 추천드립니다.
사용법은 어렵지 않습니다.
사이트에 접속하시고 나서 사진을 변환하면 여러개의 코드가 나오는데, 저같은 경우는 링크를 클릭했을 때 사진이 바로 나오는 url이 필요했습니다. 그런 링크를 핫링크라고 부르며 위에서 두 번째에 있는 직접링크입니다.
안드로이드 스튜디오 사용하시는 분은 두 번 째 직접링크 사용하시면 됩니다.
그 결과 57개의 프레임만 놓친 것을 확인할 수 있습니다.
혹시 프레임을 하나도 안놓치는 법이 있다던가, 더 나은 사이트가 있으면 댓글 부탁드립니다.
끝까지 읽어주셔서 감사합니다.
궁금한 점이나 틀린 부분이 있다면 댓글로 남겨주세요.
댓글이 달리면 저에게 알림이 와서 바로 확인할 수 있으니 최대한 빠른 시일 내에 답변 드리도록 하겠습니다.
반응형
무료 이미지 호스팅, 구글 드라이브 이미지 웹페이지에 사용하기
몇 년 전까진 구글 드라이브로 호스팅이 가능했습니다. 무료 계정으로도 웹 호스팅을 할 수 있었으니 완전 무료 호스팅이었던 것이죠. 웹법사가 생각하기로는 구글이 생각했던 것 보다 구글 드라이브를 이용한 웹 호스팅 사용자가 많았던 것 같습니다. 그랬으니 서둘러 종료했죠. 참고로 구글 드라이브의 웹 호스팅은 2016년 8월 말 종료되었습니다. 현재는 웹 호스팅을 할 수 없습니다.
구글 드라이브의 웹 호스팅 서비스는 종료되었지만, 파일 호스팅은 현재도 가능합니다. 구글 드라이브는 클라우드 서비스입니다. 서비스마다 지원 기능이 다르긴 하지만 클라우드 서비스에는 동기화 기능과 공유 기능이 기본으로 제공됩니다. 구글 드라이브는 공유 기능에 웹에 공개(웹페이지 게재)하는 옵션이 있습니다. 이 웹 게재 기능을 이용하면 구글 드라이브에 저장된 파일을 웹사이트 및 블로그에 게재할 수 있습니다.
이해가 안된다굽쇼? 포털 사이트의 블로그, 카페 등의 서비스는 무료로 사용하죠. 커뮤니티도 무료로 이용하고요. 하지만 커뮤니티, 사이트, 블로그 등을 운영하는 운영자들은 사용료를 냅니다. 사진, 동영상, 파일, DB 등을 저장할 수 있는 저장 공간을 돈을 주고 사용합니다. 방문자가 페이지 열어 볼 때마다 발생하는 트래픽도 돈을 주고 구입한 것입니다. 쉽게 스마트폰 데이터와 비슷하다고 이해하면 됩니다. 사용한 트래픽 만큼 비용을 냅니다. 사진 열릴 때도 동영상 재생할 때도 음악 재생 되어도 심지어 텍스트 보여지는 것도 다 비용이 듭니다. 구글 드라이브를 이용하면 이 비용을 절약할 수 있습니다.
구글 드라이브에는 사진, 이미지, 동영상, 소프트웨어 등의 파일을 저장할 수 있습니다. 공유 기능의 웹 게재 옵션을 이용하면 사진은 물론이고 동영상도 웹페이지에 사용할 수 있습니다. 공짜로 말입니다. 원한다면 동영상 스트리밍도 할 수 있습니다. 유튜브 두고 직접 동영상을 스트리밍 하는 경우는 흔치 않겠지만 말입니다.
구글 드라이브의 무료 이미지 호스팅
구글 드라이브에서 웹페이지에 게재하고 싶은 파일을 사진을 선택합니다. 웹페이지에 게재하려는 사진이나 이미지는 모든 웹 사용자에게 공유 설정이 되어 있어야 합니다.
사진 혹은 이미지를 선택한 후 컨텍스트 메뉴에서 미리보기를 클릭합니다.
이미지 미리 보기 페이지가 열리면 우측 상단의 삼 점 모양 메뉴 버튼을 클릭합니다. 눈 크게 떠야만 메뉴 버튼이 보일 겁니다.
메뉴에서 새 창에서 열기를 선택합니다.
새 창 혹은 새 탭에서 이미지 보기가 열리면 메뉴에서 항목 삽입을 클릭합니다.
항목 삽입 창이 열리면 표시된 아이프레임 소스를 복사합니다. 복사한 아이프레임 소스를 웹페이지에 삽입하면 해당 이미지가 표시됩니다.
구글 드라이브 이미지 항목 삽입 소스 예제
구글 드라이브의 이미지 이미지를 항목 삽입 소스로 게재하면 그렇습니다.
아이프레임으로 게재되어 위와 같이 조금 멍텅구리하게 이미지가 표시됩니다. 높이와 너비를 수정해주면 회색 부분이 표시되지 않게 할 순 있지만 이미지를 아이프레임으로 넣는 것은 좀 그렇죠. 참고로 위 이미지는 기본 항목 삽입 소스에 중앙 정렬을 추가한 것입니다.
이미지 태그로 넣으면 되지 않냐굽쇼? 네 지금 맞습니다. 이제 그 방법을 알려드릴 겁니다. 구글 드라이브에 저장된 이미지들은 공유 링크로는 웹페이지에 게재할 수 없습니다. 엑박 뜹니다. 구글 드라이브 이미지의 공유 링크 혹은 항목 삽입 소스를 살짝 변형해 주면 이미지 태그를 이용하여 웹페이지에 이미지를 사용할 수 있습니다. 당연하지만 모든 웹 사용자에게 공유 설정된 이미지만 웹페이지에 게재할 수 있습니다.
https://drive.google.com/file/d/1zYf52Kxct1ig0WT-K_V3IFOD4a0tveXJ/view?usp=sharing
위의 링크는 구글 드라이브의 기본 이미지 공유 링크(예시)입니다.
https://drive.google.com/file/d/1zYf52Kxct1ig0WT-K_V3IFOD4a0tveXJ/view?usp=sharing
이미지 공유 링크 id뒤쪽의 파란색으로 표시한 숫자 및 문자 부분이 이미지 주소를 특정 하는 중요한 부분인데요. 중요한 부분이기에 공유 링크나 항목 삽입 소스에 모두 포함되어 있습니다. 숫자 및 문자 부분을 복사합니다.
https://drive.google.com/uc?export=view&id=
위의 주소 뒤쪽에 복사한 숫자 및 문자 부분을 붙여 넣어 한 줄로 만들어 줍니다.
https://drive.google.com/uc?export=view&id=1zYf52Kxct1ig0WT-K_V3IFOD4a0tveXJ
위쪽의 주소 id뒤쪽 숫자 문자를 추가해주면 요렇게 되겠죠. 변형한 주소를
위와 같이 이미지 태그로 만들어 웹페이지에 삽입하면 됩니다. 정렬, 높이, 너비는 이미지 크기 혹은 웹페이지 본문 크기에 맞춰주면 됩니다. 변형한 소스로 만든 이미지 태그 이용하여 구글 드라이브의 이미지를 웹페이지에 게재하면
이렇게 보여집니다. 구글 드라이브의 항목 삽입 소스를 이용한 것 보다는 훨씬 낫죠. 위의 이미지는 링크만 봐도 구글 드라이브에 저장된 이미지란 것을 알 수 있을 겁니다. 그런데 신민아씨 어후야 정말 예쁘네요. 정말 보기 좋습니다. 끝~
키워드에 대한 정보 구글 이미지 호스팅
다음은 Bing에서 구글 이미지 호스팅 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 [Google Sheet로 만드는 Simple Blog #6] google drive 이미지 호스팅
- Google spreadsheet
- Google app script
- Google drive
- bootstrap
- 구글스프레드시트
- 구글시트
- 구글드라이브
- 부트스트랩
- 블로그
- 블로그만들기
- 코딩
- HTML
- CSS
- JavaScript
- 심플코딩
- 제주코딩베이스캠프
YouTube에서 구글 이미지 호스팅 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 [Google Sheet로 만드는 Simple Blog #6] google drive 이미지 호스팅 | 구글 이미지 호스팅, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
