워드프레스이미지 구글드라이브와 연동하게되면 구글드라이브의 무료스토리 15GB를 사용할 수 있습니다. 워드프레스 블로그 사이트의 포스팅 작업에서 다양한 크기의 이미지들을 추가하게되는데 이미지들의 용량을 최적화하기 위해서 플러그인을 사용해보지만 호스팅 하드용량은 계속 포스팅 작업으로 인해 추가가 필요하게 되므로 하드용량 증설에 대한 보완으로 15GB의 무료 구글스토리지를 사용할 수 있는 방법을 소개합니다. 블로그 마지막에서는 구글드라이브 공유 링크주소로 사이트에서 사용할 수 있는 이미지의 주소를 추출하는 것도 테스트해보실 수 있습니다.
1. 워드프레스이미지에 사용할 소스파일 최적화하여 저장하기
블로그 포스팅에 삽입할 이미지의 폭사이즈는 웹 빌더 플러그인에서 일반적으로 1200픽셀로 설정되어 있으므로 전체 폭을 모두 사용할 경우는 1200픽셀의 폭사이즈를 기준으로 이미지 작업을 진행해주고, 2단으로 레이아웃을 설정했을 경우는 폭사이즈를 작게 설정하여 이미지를 편집해주고 저장할 때도 이미지 옵션의 품질을 조정하여 이미지를 최적화 하게되면 서버에 업로드되는 이미지의 크기를 줄일 수 있습니다.
1-1. 이미지 웹용으로 저장하기
웹에 최적화된 상태로 이미지를 저장할 때는 포토샵에서 내보내기/웹용으로 저장하기를 선택하면 이미지의 품질을 조정할 수 있으므로 저장되는 이미지의 크기도 화면으로 바로 확인이 가능합니다.포토샵 기본설정_포토샵GTQ자격증 답안작성에 도움!
1-2. 웹용으로 저장: 최적화 선택
이미지는 “웹용으로 저장” 버튼을 선택하게되면 최적화 선택에 따라 파일의 용량을 미리 확인이 가능하므로 이미지의 사전 설정에 따라 이미지의 품질을 적절하게 설정할 수 있습니다.
2. 구글드라이브로 이미지 파일 업로드하기
저장된 이미지 파일은 다음 단계로 로컬 컴퓨터로 부터 구글드라이브로 업로드하여 저장해주고, 구글드라이브에 새로운 폴더를 만들어서 내컴퓨터에서 작업한 이미지파일을 구글드라이브 폴더로 드래그하여 해당파일을 업로드합니다.2-1. 구글드라이브에 업로드된 이미지 공유 링크복사하기
다음은 구글드라이브로 업로드된 파일의 추가작업 부분(:)을 마우스로 우클릭하여 “공유/ 링크복사” 항목들을 순서대로 선택하여 파일의 링크정보를 복사합니다.
2-2. 구글드라이브에서 추출한 공유 링크주소 편집하기
이 과정에서 공유 항목을 클릭하여 링크 복사된 주소를 웹브라우저를 통해서 확인해보면 이미지가 저장된 주소로 바로 사용하기 어렵습니다. 아래 샘플이미지 컷과 같이 구글드라이브에 저장된 파일의 링크정보를 동일하게 사용할 수 없으므로 구글드라이브로 부터 확인된 공유주소 중에서 해당되는 부분만 추출해서 ‘open?id=’의 내용을 ‘file/d/’ 형식으로 내용을 편집해서 이미지의 URL주소로 추가하여 사용하시면 됩니다.
공유 주소의 뒷부분만 추출하여서 기존의 'open?id='의 내용을 'file/d/' 형식으로 변경3. OPEN AI를 활용하여 URL주소로 변환하기
구글드라이브에 업로드된 이미지 파일을 웹사이트에서 인식되게 하려면 번거로운 편집작업이 추가로 파일마다 진행되어야 하므로 번거로움을 해결해보고자 OPEN AI를 이용하여 스크립트로 작성해보았습니다.
3-1. 공유링크 주소 추출을 위한 작업 순서
웹브라우저에서 구글드라이브에 업로드된 그대로의 상태로 보여진 이미지가 간단하게 공유 링크를 웹사이트에서 참조 가능한 주소로 변환하는 방법은 다음과 같은 단계로 진행해 주시면 됩니다.
1 단계: 이미지 편집한 파일을 구글드라이브 폴더에 업로드 하기
2 단계: 구글드라이브 폴더에 업로드한 파일의 링크 정보를 주소 변환기를 이용하여 변환하기
3 단계: 워드프레스 웹사이트에서 2단계에서 추출한 이미지 주소를 URL삽입 기능으로 적용하기
공유이미지의 링크 주소를 사이트 주소로 추출하기 위한 작업단계
3-2. 공유링크 주소 추출기능 사용방법
3-3. 워드프레스에서 이미지 URL주소 삽입 방법
워드프레스 빌더(예.Elementor: https://elementor.com/, ASTRA: https://wpastra.com/)를 사용하고 있다면 좀 더 간단하고 편리하게 아래 참고이미지와 같이 이미지를 내컴퓨터로 부터 바로 블로그내에 추가할 수 있습니다.
이미지 추가는 워드프레스 알림판 목록에서 미디어 추가기능을 선택하면 내컴퓨터에 저장되어 있는 라이브러리에 등록해두었다가 필요할 때 불러오기하여 바로 페이지에 사용할 수도 있습니다.
그러나 외부에 있는 구글드라이브에 저장해두었던 이미지 파일은 URL 주소을 입력하는 방식으로 해당이미지를 해당 페이지내에 불러오기를 하면 됩니다. 아래 참고이미지의 파란색의 번호 순서로 이미지를 등록하는 방법은 워드프레스 기본 하드에 이미지를 추가할 경우에 순서대로 파일을 업로드하면 되고, URL 주소로 이미지를 추가할 때는 그린색으로 보이는 번호 순서대로(1.메뉴 2.URL에서 삽입 3.URL주소 입력) 이미지 파일을 추가해주시면 됩니다.
기본 편집기를 이용하여 이미지의 주소를 추가할 경우는 페이지 편집기 왼쪽 상단에 있는 “+” 버튼을 클릭하여 이미지 블록을 불러오기를 하여 아래 참조이미지와 같이 “URL 주소를 붙여넣기”를 해주시면 됩니다.
4. 워드프레스이미지 구글드라이브와 연동하기 위한 서 참조 가능한 주소로 변환하기
입력창 영역에 구글드라이브에서 이미지의 링크정보를 복사하여 붙여넣기를 하고, 이미지 보기 버튼을 클릭하면 미리보기 창영역에 붙여넣기한 이미지를 확인할 수 있습니다. 이미지 하단 아래쪽에 있는 “주소복사” 버튼을 클릭하여 추출된 이미지의 URL 주소를 사이트에 서 이미지 등록에 바로 사용하시면 됩니다.
이미지 URL 주소 변환하기
블로그포스팅 후기
포털사이트를 이용한 블로그포스팅에서는 이미지의 크기와 용량에 대한 제약을 그 동안 크게 느끼지 못했는데 일반 홈페이지가 아니라 일정한 기간마다 포스팅하는 블로그작업을 할 때 기본적으로 사용되는 메모리에 대한 관심이 높아지게되고 이미지 최적화에 대한 플러그인 및 이미지 작업후 소프트웨어에서 저장하는 최적화에 대한 체크도 좀 더 필요하다는 것을 절감하게 되었습니다.
물론, 게시물을 발행하기전 미디어 라이브러리에 업로드할 수 있는 일부 외부 이미지가 있다는 메시지와 다른 도메인에서 가져온 이미지는 항상 올바르게 표시되지 않거나 방문자에게 느리게 로드되거나 예기치 않게 제거될 수 있다는 메시지가 확인되었지만, 어느정도 느리고 제거되는지 앞으로 계속 지켜보면서 보완해 가려고 합니다. 그리고, 외부링크 파일을 부분적으로 활용하는 방법도 다양할 것으로 생각됩니다.
