한 번 더 생각해 보는 구글드라이브와 워드프레스 연동

Posted on
구글의 정책이 변경되어 구글 드라이브에 저장한 이미지 등의 미디어를 웹페이지에 출력하는 데 오류가 발생할 수 있습니다. 구글 드라이브 미디어 URL 패턴 변경 글을 먼저 확인하면 좋겠습니다.

이 글에서 안내하는 Google Drive WP Media 플러그인의 개선, 워드프레스의 업데이트 등으로 다음의 글을 먼저 확인한 후 Url 이미지의 표현이 제대로 되지 않을 때만 이 글의 해당 부분을 참고하는 것이 좋습니다.

구글 드라이브를 워드프레스 미디어 저장 공간으로

웹사이트 트래픽과 웹호스팅 용량을 절약하기 위한 워드프레스 사용자들의 몸부림은 지금도 여전합니다. 특히 구글드라이브, 드롭박스 등 무료 클라우드 서비스를 워드프레스와 연동하여 효율을 모색하는 방법이 많이 소개되고 있습니다. 하지만 미디어 삽입의 방법, 갤러리 표현 등 워드프레스의 특징을 그대로 사용하거나 표현하기 어려운 경우가 많아 한 번 경험하는 것에 그치고 있습니다. 혹시 우리가 잘 못 알고 있어서 조금 더 활용할 수 있는데 못한 것은 아닌지, 아주 완벽한 것을 찾거나 원했던 것은 아닌지, 어려운 기술과 프로그래밍 지식만으로 해결하려고 했던 것은 아닌지 생각해볼 필요가 있습니다.

워드프레스 범주에서 플러그인과 워드프레스 기본 특징을 활용하여 구글드라이브를 워드프레스 미디어 저장 공간으로 완전히 사용하고, 제한적인 것으로 생각했던 링크 이미지의 갤러리 및 대표이미지(Featured) 표현 등에 관해 이야기합니다. 환경과 시간 여유가 있다면 따라 해보는 것도 좋습니다.

환경

크롬 브라우저, Gmail 계정, 워드프레스 3.8.1 영문, 테마 twenty twelve, 카페24 웹호스팅 환경에서 이야기합니다. 따라할 때 모든 요소가 같지 않아도 되지만, 크롬 브라우저와 새로운 Gmail 계정을 준비하면 좋습니다. 이제는 이야기하지 않아도 될 것 같은 ‘사용하는 테마’의 의미, 워드프레스 특정 경로, 플러그인 설치 등에 대한 설명은 생략합니다.

플러그인 Google Drive WP Media 설치와 설정

Google Drive WP Media 플러그인을 설치 후 활성화하고, Media > Google Drive WP Media 경로에 접속합니다. Warning 창이 나오면 Ok 버튼을 클릭하세요.

플러그인 Google Drive WP Media

Google Drive API Key 정보를 입력해야 하는데 방법은 Documentation 탭에 나와 있으므로 참고하면 됩니다. 이해가 안되면 다음 동영상을 참고하세요.

Private Key Url Path 정보는 입력하지 않았는데, API Key 생성할 때 Key 파일이 자동으로 다운로드 됩니다. 그 파일을 찾아서 웹호스팅 계정, 간단히 루트 디렉터리에 업로드합니다.

KEY 파일 업로드

업로드한 Key 파일의 경로를 파악하고, Private Key Url Path에 입력하고 저장합니다. 플러그인에서는 Key 파일의 위치를 Url 형식으로 입력하라고 안내하지만 Key 파일을 해석하지 못하는 경우가 발생합니다. 따라서 웹호스팅 디렉터리 전체 경로를 입력합니다. 아래는 카페24 웹호스팅 기준이며, test 디렉터리에 key 파일을 업로드 한 것으로 Key 파일 위치 및 Key 파일명은 자신에게 맞도록 변경하면 됩니다. 다른 웹호스팅을 사용할 때도 상황에 맞도록 입력하세요.

/home/hosting_users/웹호스팅아이디/www/test/a8147b9c80432e8582fac014be54637d6e0f9c20-privatekey.p12

Goole Drive API Key 설정

My Google Drive 탭으로 이동하여 폴더를 생성합니다. 원하는 폴더명을 입력하고 Create Folder 버튼을 클릭합니다. 이 폴더는 구글 드라이브의 ‘공유 문서함’에 생성됩니다.

구글 드라이브 공유 폴더 생성

구글 드라이브에 공유 문서함에 생성된 폴더

최소 1개의 폴더를 생성하면 My Google Drive 하위에 설정 탭이 늘어납니다. Upload 탭은 포스트 작성 시 미디어 삽입에 관한 설정입니다. Add to Media Library 항목은 실제 파일은 구글 드라이브에 저장되고, 워드프레스 미디어 라이브러리에는 링크 정보만 저장된다는 것이며, 링크를 삭제해도 구글 드라이브의 파일은 삭제되지 않습니다. 이 항목을 선택 해제하면 불편하므로 그대로 유지하기 바랍니다.

Upload 탭

Option 탭은 웹사이트 전체 설정으로 워드프레스 미디어 저장 경로를 구글 드라이브로 변경하는 설정입니다. 워드프레스 미디어 파일을 등록은 포스트를 작성할 때만이 아니라, Media > Add New 경로를 이용할 수도 있으므로 이 경우에도 미디어 저장 경로를 구글 드라이브로 변경하는 설정입니다. 관리의 효율을 위해서 아래 그림을 참고하여 모든 항목을 선택하고 저장합니다. 폴더명도 처음에 생성한 폴더명과 같게 입력하면 좋습니다. Add to Media Library 항목은 앞에서 이야기한 것처럼 미디어 파일의 링크 정보를 미디어 라이브러리에 등록하겠다는 의미입니다.

Option 탭

이 설정을 통해 발생하는 조금 유연하지 못한 부분이 있는데, 포스트 작성 시 Add Media 버튼 클릭 후 Insert Media 화면에서 업로드하면 에러 메시지가 나타나며, 관리페이지 미디어 메뉴를 통해 미디어 업로드 시 ‘처리 중(Crunching)’ 메시지가 없어지지 않습니다. 하지만 구글 드라이브에 파일은 업로드되며, 미디어 라이브러리에 링크 정보도 생성되므로 신경쓸 필요 없습니다.

Google Drive WP Media 플러그인의 오류 또는 아쉬운 점 하나가 위에서 이야기한 것 외에 미디어 파일 업로드 후 목록에 바로 나타나지 않는다는 것인데, 새로고침(Refresh)이 되지 않는다는 것입니다. 포스트 작성 시 조금 불편합니다. 미디어 파일 형식(media item) 선택 목록에서 유형을 변경하여 사용하는 방법 또는 관리페이지 미디어 메뉴에서 업로드 후 포스트를 작성하는 것이 현재 간단한 대안입니다. 아니면 페이지를 새로고침해도 됩니다.

구글 드라이브를 미디어 저장 공간으로

플러그인 사용의 이해를 돕기 위해 다음의 동영상을 확인하세요. 미디어 메뉴에서 이미지 삽입, 포스트 작성 시 Insert Media 탭과 Google Drive WP Media 탭에서 이미지 삽입에 관한 간단한 영상입니다.

동영상에는 없지만, 구글 드라이브에 이미지를 직접 업로드 한 후 플러그인의 File & Folder List 탭에서 불러와 미디어 링크 추가 후 사용할 수도 있습니다. 약간의 불편한 점은 있으나 몇 번 사용하다 보면 익숙해지므로 문제없을 것입니다.

이번에는 완전한 가상의 포스트를 작성하면서 구글 드라이브에 저장된 이미지를 포스트에 삽입하고, 이미지 크기와 정렬 기능, 갤러리 표현, Featured Image를 등록하여 결과를 확인해 봅니다. 다음의 동영상을 확인하세요.

여기까지 따라 하신 분이 있다면 이후의 내용은 이야기할 때까지 따라 하지 않아도 됩니다.

URL로 삽입한 이미지 표현의 한계

한 가지 마음에 들지 않는 부분은 포스트 작성 시 갤러리 삽입과 Featured Image 등록을 했지만, 프런트 엔드에 표현되지 않는 것을 동영상에서 볼 수 있었습니다. 정확하게 말하면, 표현되지 않는 것이 아니라 너무 작아서 보이지 않는 것입니다.

Url 정보로 삽입한 Featured Image와 Gallery

이 글에서 사용한 twenty twelve 테마는 포스트 목록과 싱글 페이지에서 Featured Image(Post-thumbnail)를 표현하도록 정의되어 있습니다. 하지만 Url 정보로 삽입한 경우 이미지 크기가 1px로 표현되는 것을 다음의 웹페이지 확대 그림에서 확인할 수 있습니다.

Url 정보로 삽입한 Featured Image 크기

마찬가지로 Url 정보로 삽입한 갤러리도 다음 그림과 같이 1px 크기로 삽입된 것을 확인할 수 있습니다.

Url 정보로 삽입한Gallery Image 크기

테마의 오류인지 확인하기 위해 다른 워드프레스 공식 테마로 변경해봐도 마찬가지 결과가 나옵니다. 공식 테마 외의 테마 하나를 선정해서 활성화 후 확인하니 다음 그림처럼 Featured Image가 1px로 정의되어 나옵니다. 테마는 Stargazer 입니다.

테마 Stargazer에서 Url로 삽입한 Featured Image

하지만 갤러리는 다음 그림처럼 표현됩니다.

테마 Stargazer에서 Url로 삽입한 Gallery

플러그인으로 Url 이미지 표현?

왜 테마 Stargazer에서는 Url 정보로 삽입한 이미지의 갤러리 표현이 가능할까요? 갤러리 이미지의 html 소스 코드를 보면 1px로 나옴에도 실제 표현되는 이미지가 다르게 나타나는 것은 어떤 기능이나 정의된 함수가 있어서 일까요?

지난 글에서 힌트를 얻을 수 있습니다. 테마 Stargazer에는 Cleaner Gallery 플러그인이 적용되어 있기 때문인데, 워드프레스 기본 갤러리 코드가 올바르지 않게 생성되기 때문에 변경하는 기능이 테마에 있기 때문으로 생각하면 됩니다. 그렇다면 다시 twenty twelve 테마에서 이 플러그인을 설치하여 Url 정보의 갤러리 표현이 가능한지 확인해 보면 다음 그림과 같습니다.

테마 twenty twelve에서 Cleaner Gallery 플러그인 설치 후 확인한 Url 정보로 삽입한 Gallery

플러그인 설치 후 Url 정보로 삽입한 갤러리 표현이 가능함을 알 수 있습니다. 그러나 여기서 한 가지 문제가 또 있습니다.

워드프레스는 포스트에 삽입한 이미지를 클릭할 때 첨부 페이지(Attachment Page) 또는 파일(Media File)로 링크 선택이 가능한데, 갤러리는 보통 첨부 페이지로 링크됩니다. 플러그인을 사용하여 표현한 갤러리에서 하나의 이미지를 클릭하면 다음 그림처럼 나옵니다.

Attachment Page에서 나타나는 Url 정보 삽입 이미지

첨부 페이지에서 Url 정보로 삽입한 이미지가 제대로 표현되지 않는 것을 볼 수 있습니다. 결국 Cleaner Gallery 플러그인을 사용하여 갤러리 표현은 가능했지만, 이미지 하나의 표현은 해결할 수 없다고 볼 수 있습니다. 이 부분만 해결하면 Url Featured Image도 표현할 수 있지 않을까 하는 생각이 듭니다.

훌륭한 플러그인 Get the Image, 하지만 귀찮은

플러그인 Get the Image는 이미지 표현에 관련된 섬네일, Featured Image, 슬라이드, 갤러리 등을 더 쉽게 표현하기 위한 스크립트 플러그인입니다. 이 플러그인을 사용하여 기능을 만들고 유료로 판매하는 테마도 제법 많이 있습니다.

하지만 이 플러그인은 필요한 테마 파일마다 코드를 삽입하거나, 함수를 정의하는 등의 작업이 필요하므로 일반 사용자에게 사용의 어려움이 생길 수 있습니다. 그래도 간략히 Featured Image를 표현하는 부분에 기본 코드를 삽입하여 결과를 확인해 보면 다음 그림과 같습니다.

테마 twenty twelve의 루프 파일 content.php 파일의 <?php the_post_thumbnail();?> 부분을 <?php get_the_image();?> 코드로 대체한 결과입니다.

플러그인 Get the Image를 사용하여 Featured Image 표현

Featured Image가 드디어 나타납니다. 하지만 이미지가 영역을 벗어납니다. 이 이미지를 콘텐츠 영역에 맞게 나타나도록 아래의 CSS 코드를 추가 정의합니다.

.entry-header img{width:100%}

결과는 다음 그림처럼 나타납니다.

CSS 코드를 정의하여 표현한 Featured Image

CSS 코드를 추가하여 Featured Image를 표현하고 보니 “Url 정보를 삽입한 이미지는 나타나지 않는 것이 아니라, 1px 크기로 표현되므로 이미지가 제대로 표현되지 않는 부분을 CSS 코드로 정의한다면 한 번에 해결되지 않을까!” 라는 생각이 듭니다. 앞에서 살펴본 Url 정보로 삽입한 이미지들의 소스 코드를 보면 이미지 크기가 1px로 나왔으므로 이 부분만 해결하면 간단하지 않을까 합니다.

원한다면 다음의 내용부터 따라 하면 됩니다.

CSS 정의로 Url 이미지 표현 가볍게 해결하기

문제를 해결할 때 기술적 요소에 큰 비중을 두면, 간단한 방법이 있음을 모르고 지나칠 때가 많습니다. 이 글은 그 의미를 조금 이야기하고 있습니다. 어쨌든 Google Drive WP Media 플러그인으로 하나의 완전한 포스팅을 작성한 후 갤러리와 Featured Image가 제대로 표현되지 않는 상황에서 CSS 코드로 이미지를 표현해 봅니다.

플러그인에 사용자 정의 CSS 추가

테마의 스타일을 변경하여 사용한다면 Child 테마를 만들어 사용하는 것이 일반적이나, 글에서는 사용자 정의 CSS 코드를 등록할 수 있는 플러그인을 사용해 봅니다. 플러그인에 등록한 CSS 코드는 우선 적용되며 테마에 영향을 받지 않는다는 것을 한 번 되새겨 보기 바랍니다.

CSS 코드 추가를 위한 플러그인은 특별히 검토하여 선택할 필요가 없습니다. 만약 Jetpack의 Custom CSS 모듈이 활성화 되어 있다면 거기에 추가해도 됩니다. 하지만 Jetpack의 Custom CSS 모듈은 테마 변경 시 입력한 코드가 초기화(Reset)되는 현상이 이 글을 작성하는 지금도 나타나므로 간단한 플러그인을 설치합니다.

플러그인 PC Custom CSS 설치 후 활성화 하고, Appearance > Custom CSS 경로에 접속합니다. 아래의 CSS 코드를 복사하여 붙여 넣은 후 저장합니다.

img[class*="attachment-"] {width:100%}

PC Custon CSS 플러그인

프런트 엔드를 확인해 보면 다음 그림처럼 표현됩니다.

CSS 코드 추가 후 프런트 엔드

갤러리 이미지 하나를 클릭하여 첨부 페이지로 이동하면 다음 그림처럼 이미지가 제대로 표현됩니다.

첨부 페이지의 이미지

위에서 입력한 CSS 코드는 워드프레스 이미지, 특히 포스트에 삽입하는 이미지를 제외한 갤러리 이미지, Featured Image, 첨부 페이지 등에서 이미지 소스 코드에 생성되는 CSS Class 규칙, 즉 class="attachment- 패턴이 있는 모든 이미지의 표현을 정의한 것입니다. 따라서 이 코드만으로 글에서 표현하고자 했던 Url 정의로 삽입한 이미지의 표현이 가능합니다. 물론 이 코드는 테마의 스타일 파일을 열어보면 있습니다. 대신 width:100% 속성이 없으므로 추가한 것 뿐입니다.

CSS 코드 등록 후 표현된 갤러리는 이 글에서 사용한 twenty twelve 테마에서 확인하면 위의 그림과 같이 제대로 적용된 것으로 보이지만 실제 조금 어긋난 표현이며, 다른 기본 테마(twenty thirteen, twenty eleven)에서 확인하면 제대로 표현되지 않거나 어긋난 부분을 확연하게 알 수 있습니다. 이것을 보완하기 위해 앞에서 이야기한 Cleaner Gallery 플러그인을 설치합니다. 직접 설치하고 활성화 하세요. 그리고 다른 테마로 변경하여 플러그인을 활성화 또는 비활성화 했을 때 갤러리가 어떻게 표현되는지 확인해 보세요.

CSS 코드나 함수로 올바른 표현을 할 수 있다면 직접 추가해도 상관없습니다. 웹사이트 전체 미디어 파일을 구글 드라이브에 저장하고, Url 정보를 삽입한 이미지 표현이 목적이므로 최대한 좀 더 간단하게, 그리고 테마 변경에 영향을 받지 않는 방법을 선택하고 있다는 것을 한 번 더 염두에 두기 바랍니다.

Cleaner Gallery 플러그인을 사용할 때 Jetpack의 Carousel 등의 기능을 사용할 수 없다는 이야기를 지난 글에서 했는데, 이 글에서는 사용하지 않는다는 것을 가정합니다. 갤러리 이미지의 슬라이드 기능을 원한다면 Cleaner Gallery 플러그인을 깊이 연구해 보세요. 이 플러그인의 설정은 Appearance > Cleaner Gallery 경로에 있습니다. 갤러리 섬네일과 링크 등 몇 가지 설정이 가능하며 외부 스크립트도 설정할 수 있습니다.

플러그인 설치와 간단한 CSS 코드 추가로 Url 이미지의 표현을 가능하게 할 수 있었습니다. 물론 위젯의 이미지 표현이나, Url 이미지일 때 사용하기 어려운 플러그인 등 많은 경우가 있겠지만, 가장 기본적인 콘텐츠 표현은 우선 이것으로 충분합니다. 필요하다면 CSS 정의를 추가하여 원하는 결과도 얻을 수 있을 것입니다.

동영상, 오디오, 문서, 파일

미디어 파일은 이미지뿐 아니라 동영상, 오디오, 문서, 압축 파일 등 다양합니다. 글에서 사용한 Google Drive WP Media 플러그인으로 동영상이나 오디오 파일을 업로드하고 포스트에 삽입하면 재생 형태가 아닌 파일 링크로 삽입됩니다. 구글 드라이브의 동영상을 웹사이트에서 재생하는 방법에 대한 참고 이 있지만, 동영상과 오디오 파일은 유튜브와 같은 외부 서비스를 이용하는 것이 효율적입니다.

구글 드라이브에 있는 문서를 웹사이트, 특히 워드프레스 포스트에 삽입하는 방법과 플러그인은 간단하며 많이 있습니다. 문서 파일 저장 공간은 구글 드라이브를 사용하고, 포스트에 임베드하기 위한 방법은 플러그인, Shortcode 또는 일반적인 방법을 사용하는 것이 좋습니다. 압축 파일도 구글 드라이브에 저장하고 포스트에 링크 형태로 삽입하면 간단합니다.

이와 같은 미디어 파일 또는 일반 파일도 Google Drive WP Media 플러그인을 사용하여 업로드하고, 링크 정보를 미디어 라이브러리에 추가하는 과정을 진행한 후 파일에 따라 효율적인 표현 방법을 선택하면 됩니다.

관리페이지(Back-End)의 Url 이미지 표현

관리페이지의 미디어 라이브러리(Media > Library) 페이지로 이동하면 다음 그림과 같이 구글 드라이브에 저장된 미디어 파일들의 목록이 나옵니다. 물론 모두 링크 정보가 추가된 것이며, 이 목록을 지운다 해도 구글 드라이브에 있는 파일들은 삭제되지 않는다고 이야기했습니다.

Url 정보의 미디어 라이브러리

그림을 보면, ‘Uploaded to’ 열에서 ‘Unattached’로 나와 있는 이미지는 Featured Image와 Gallery 이미지로 사용한 것들임을 알 수 있으며, 포스트 내에 단일 이미지로 삽입한 이미지는 포스트 제목이 나와 있는 것을 볼 수 있습니다. Url 정보로 삽입한 이미지의 첨부 여부가 이렇게 나온다고 생각하면 그것으로 충분합니다.

그런데 한 가지 답답한 점이 있습니다. 섬네일이 보이지 않습니다. 보이지 않는 것이 아니라 1px의 점으로 나타납니다. 위에서 CSS 코드로 이미지를 표현한 것처럼 이 부분도 해결하면 좋겠습니다.

플러그인을 사용하여 관리페이지 CSS 코드 추가하기

프런트 엔드의 표현을 변경하려면 사용자 정의 CSS 코드를 추가할 수 있는 플러그인이나 Child 테마의 스타일 정의 파일을 이용하면 된다는 것은 말할 필요가 없습니다. 관리페이지의 스타일도 플러그인을 사용하여 변경할 수 있습니다. 간단히 Add Admin CSS 플러그인을 설치하여 다음의 CSS 코드를 추가하고 저장합니다. 이 플러그인의 설정 경로는 Appearance > Admin CSS 입니다.

#wpbody td.media-icon img {width:80px;height:60px}

관리페이지를 위한 CSS 코드 추가

미디어 라이브러리 페이지에 다시 접속하여 다음의 그림처럼 섬네일이 나타나는지 확인해 보세요.

관리페이지에 CSS 코드 추가 후 섬네일

플러그인을 만들어 CSS 코드 적용하기

위에서 설치한 Add Admin CSS 플러그인을 삭제하세요. 그리고 미디어 라이브러리 목록으로 이동하여 섬네일이 제대로 표현되지 않는 것을 확인하세요.

이번에는 플러그인을 직접 만들어 섬네일을 표현해 봅니다. 자주 사용하는 텍스트 에디터 프로그램을 실행하고, 아래의 코드를 복사하여 붙여넣은 후 파일 이름을 ‘mymedialib.php’로 지정하여 UTF-8 인코딩으로 저장합니다. 파일명은 원하는 것으로 지정해도 상관없습니다. 이 파일을 웹호스팅 서버의 워드프레스 플러그인 디렉터리 /wp-content/plugins/ 에 업로드합니다.

<?php
/**
* Plugin Name: URL 이미지의 섬네일
*/

function my_custom_medialib() {
echo '<style>
#wpbody td.media-icon img {width: 80px;height: 60px;}
</style>';
}
add_action('admin_head', 'my_custom_medialib');

관리페이지의 플러그인 설치 목록으로 이동하여 ‘URL 이미지의 섬네일’ 플러그인을 활성화합니다.

URL 이미지의 섬네일 플러그인 활성화

미디어 라이브러리 목록 페이지로 이동하여 섬네일이 표현되는지 확인하세요.

플러그인을 만들지 않고 테마의 functions.php 파일에 위의 코드를 추가해도 미디어 라이브러리에 섬네일이 나옵니다. 플러그인을 사용하여 CSS 코드를 추가한 것이 더 간단하고 쉽지만, 플러그인을 만들어 표현할 수 있다는 것을 한 번 짚어보는 것으로 생각하면 됩니다. 두 가지 방법중에 원하는 방법을 사용하면 됩니다.

트래픽과 용량, 퍼포먼스

구글 드라이브 저장 공간은 현재 하나의 계정에 15GB 정도로 제공됩니다. 구글 드라이브만의 용량이 아니라 특정 서비스의 용량을 포함한 전체 크기로 이해하면 됩니다. 워드프레스 기본 미디어 경로를 사용하지 않으므로 미디어 파일 업로드 시 생성되는 파일은 원본 파일 외에 없으므로 일정 부분의 용량 절약을 기대할 수 있습니다. 그래도 적절한 크기의 이미지를 사용하는 것이 좋을 것입니다. 트래픽에도 영향을 미칠 것은 분명합니다.

구글 드라이브 트래픽에 대한 정확한 정보는 찾을 수 없습니다. 제한이 없는 것은 아닐 것이다 라는 의견이 많으므로 미디어, 특히 이미지의 크기를 조정하여 사용하는 것이 가장 효율적입니다. 또 큰 용량의 이미지는 구글 드라이브의 트래픽뿐 아니라, 웹사이트 콘텐츠 로딩 속도에 영향을 미치므로 고려해야할 내용임은 분명합니다.

다른 서비스보다 제공되는 용량이 많다는 것은 이점인데 그래도 용량을 줄이기 위한 방법을 생각한다면 Featured Image, Gallery 이미지 등 Url 정보 삽입만으로 제대로 표현되지 않는 요소에 이미지를 사용할 때는 워드프레스 기본 미디어 경로에 저장하는 것도 하나의 방법이 될 수 있습니다. Url 이미지를 표현하기 위한 수고도 줄어들 것입니다.

이 때는 글에서 사용한 Google Drive WP Media 플러그인의 설정에서 구글 드라이브를 기본 미디어 저장 공간으로 사용하는 부분을 해제해야 합니다. 또 이미지 등의 파일을 업로드할 때에는 포스트 작성 시 나타나는 미디어 등록 팝업 레이어의 ‘Google Drive WP Media’ 탭에서 등록하고 삽입해야 합니다. Featured Image를 삽입할 때에는 나타나지 않으므로 업로드 후 다시 등록하는 반복 과정을 거쳐야 하므로 조금 귀찮을 수 있습니다. 사용자의 선택 문제입니다.

하지만 트래픽이나 용량 걱정하지 말고, 마음껏 편하게 사용했으면 합니다. 신경을 써야 할 만큼의 웹사이트라면 적당한 비용을 투자하는 것이 좋습니다.

Google Drive WP Media 탭

구글 드라이브와 같은 서비스를 사용하여 이미지를 표현하면 상대적으로 로딩 속도가 느리다는 이야기가 많습니다. 개인 느낌으로 신경 쓸 부분이 아닌 것 같습니다. 국내 웹호스팅에 의해 이미지가 로딩되는 모양을 ‘쨔안’으로 표현한다면, 구글 드라이브의 이미지는 ‘짜아안’ 정도로 표현할 수 있겠네요. 휴대 기기로 확인하면 로딩이 더 빠르고 안정감이 있다는 느낌이 들 정도입니다.

관리

PC Sync를 이용하여 미디어 파일 관리

Google Drive WP Media 플러그인을 사용하여 저장한 파일은 구글 드라이브의 ‘공유 문서함’에 저장된다고 했습니다. 구글 드라이브 데스크탑 어플리케이션을 사용하여 미디어 파일 크기 등의 수정이 필요할 때 PC에서 작업하여 저장하면 구글 드라이브 파일도 업데이트 되고, 웹사이트에도 자동 반영되므로 효율을 기대할 수 있을 것입니다. PC에서 파일 조절이 가능하므로 미디어 파일 백업도 어렵지 않을 것입니다. 이 부분은 테스트하지 않았으므로 원한다면 직접 해보기 바랍니다.

워드프레스 기본 미디어 경로로 복원

구글 드라이브를 미디어 저장 공간으로 사용하다가 워드프레스 기본 경로로 되돌릴 때 가장 간단한 방법은 데이터베이스 파일(*.sql)을 사용하여 미디어 Url 정보의 공통 부분을 일괄변경 후 복원하는 과정이 가장 쉬운 방법으로 생각합니다. 하지만 구글 드라이브에 있는 이미지의 Url로 공통점을 찾아 일괄 변경하는 것은 어렵습니다. 이 글에서 사용한 이미지 2개의 Url은 다음과 같습니다. 포스트에 삽입된 소스의 Url 입니다.

https://docs.google.com/uc?id=0B-Mf5juqxZU4ck9tR1FGSkZneDQ&export=view
https://docs.google.com/uc?id=0B-Mf5juqxZU4NFh6OEtaUHlCbk0&export=view

파란색 부분이 개별 이미지의 정보인데, 구글 드라이브에서 보면 이미지 파일명이 그대로 나오지만 공유형태로 외부 페이지에 삽입될 때는 위와 같은 코드로 삽입되므로 이 코드를 제외한 부분을 일괄적으로 변경해도 복원하여 이미지를 표현하는 것은 어려울 것입니다. 일일이 하나씩 확인하여 대체하는 것은 그 수가 적을 때는 쉽지만, 반대라면 많은 시간이 필요할 것입니다. Url 이미지를 다운로드 받아 이미지를 대체해 주는 플러그인이나 코드 팁이 있다면 가능할 수도 있겠지만, 문제가 없다면 복원하지 않고 사용하는 것이 좋습니다.

도메인 변경

웹사이트 도메인을 변경하면, 많은 부분의 수정 작업이 필요합니다. 물론 쉽게 변경할 수 있도록 도움을 주는 플러그인도 있습니다. 플러그인이 아니라도 데이터베이스 파일에서 일괄 변경하는 방법도 있습니다. 미디어 저장 위치를 구글 드라이브와 같은 외부 서비스(공간)에 둔다면, 미디어 파일의 Url 변경은 신경 쓰지 않아도 될 것입니다.

요약

지금까지 워드프레스에서 콘텐츠 작성 시 미디어를 저장할 공간을 구글 드라이브로 설정하고, 워드프레스를 벗어나지 않고 미디어를 삽입하며, Url 정보로 삽입한 이미지 파일의 올바르지 못한 표현을 CSS 코드와 플러그인 설치로 해결하는 과정이었습니다. 설명은 길었지만 방법은 아주 간단합니다.

구글 드라이브가 아닌 다른 외부 서비스, 예를 들어 Dropbox를 지원하는 플러그인이 있다면 그 플러그인을 통해 Dropbox에 미디어 파일을 저장하고, 마찬가지로 Url 정보로 삽입한 이미지의 표현이 어긋난다면 CSS 코드 추가를 통해 문제를 해결할 수도 있습니다.

이 글에서는 테마 twenty twelve와 워드프레스 기본 테마 twenty eleven, twenty thirteen을 기준으로 추가한 CSS 코드이므로 특정 테마에서 적용되지 않을 수 있지만, 그 테마의 특징을 파악하여 정의한다면 어렵지 않게 해결할 수 있을 것입니다. 관리페이지에서 추가한 CSS 코드는 워드프레스 코어가 완전히 변경되지 않는 이상 그대로 사용해도 됩니다.

워드프레스가 가진 기본 특징을 문제 해결을 위한 우선 기준으로 생각하는 것이 원하는 결과를 얻기 위한 최선의 시작이 될 수 있습니다.

44 thoughts on “한 번 더 생각해 보는 구글드라이브와 워드프레스 연동”

  1. 좋은 글 올려 주셔서 유용하게 여러번 읽었습니다. 한가지 문의 사항이 있는데요.처음에 올렸을때는 홈페이지에 이미지가 잘 올라오다가 한 6개월정도가 지난후 부터는 한두개만 이미지링크가 되고 지금은 전혀 링크가 되지 않고 있는데 어떤 문제인지 한번 여쭤봐도 될까요? 3일정도를 구글링하고 찾아보아도 답이 않나오네요? 구글드라이브에 트래픽제한이 있나요? 혹시 팁이 있으면 알려 주시면 감사하겠습니다.

    1. 다음 링크의 구글 정책 변경이 원인으로 생각하고 있습니다.

      https://support.google.com/drive/answer/2881970?hl=ko
      http://googleappsupdates.blogspot.kr/2016/07/reminder-turn-down-of-google-drive-web.html

      구글 이미지 링크가 아래 패턴으로 구성된 것이 보통으로 말할 수 있는데, 이 패턴은 더는 지원하지 않는다고 합니다. 몇 회 이상 웹페이지에서 이미지가 출력된 후 나오지 않는 경우가 있다는 사용자 사례도 있습니다.

      https://www.googledrive.com/host/이미지ID

      다음 링크 패턴으로 웹사이트에 이미지를 삽입하면 이미지 출력 문제는 해결할 수 있을 것으로 생각합니다.

      https://drive.google.com/uc?id=이미지ID

      문제는, 플러그인 사용으로 구글 드라이브에 이미지를 업로드하는 것인데 아래와 같은 과제가 있습니다.

      • 기존 링크 수정
      • 신규 업로드 이미지 링크
      • 현재 해당 플러그인이 업데이트 되지 않았음

      여러 방법이 있지만, 아래 정도만 작업하면 사용하는 데 문제 없을 것 같습니다.

      • DB에서 기존 링크 일괄 수정
      • (업데이트가 될 지 모르지만) 플러그인 업데이트 전까지 임시로 플러그인 간략 수정 (구글 경로 링크만 수정)

      나중에 시간이 될 때 별도로 정보를 올리겠습니다.

  2. 저는 키 값이 이렇게 나오는데 맞을까요?
    API Project-f78935543489.p12

    호스팅아이디로 해도 안되고, 웹URL로 해도 안되고…. ㅡㅡ
    위의 키값이 제대로 된 게 아닌거 같은데….
    저 키값만 다른 거 빼고는 모두 정상대로 한 거 같은데….

    혹시, 시간 되시면 답글 좀 부탁드립니다.

    1. 저도 카페24 쓰고 있는데 privat key url path에서 막히네요.
      동영상에 나오는 것 처럼 아이디 부분 바꾸고 했는데도 계속 에러가 떠요.
      이거 도대체 뭘 어떻게 해야 된다는건지..ㅠㅠ

  3. 정말 유용한 포스팅이네요. 사실, 미디어 라이브러리의 이미지들을 폴더처럼 관리하기 위해 알아보고 있었는데, GDWPM가 답일 듯 합니다. 정말 감사해요. 근데 저 역시, key파일 입력해서 확 막혔습니다. p12파일을 직접 받아 url방식으로도 경로방식으로도 모두 접근해보는데 쉽지 않네요.. 푸신 분들 어떻게 푸셨는지 스터디도 해봤지만.. ㅠㅠ

    1. 많은 분이 순조롭게 진행되지 않는 것으로 파악되어 설치부터 연동까지 10번 정도를 했습니다. 플러그인과 구글 API 업데이트 전에 연동되었던 탓에 단순히 워드프레스 쪽만 새로 설치하고 연동하면 문제가 없었는데 고생하시는 분들이 많으셔서 모두 초기화하고 연동하는 과정을 매번 진행했습니다.

      어떤 것이 문제인지는 찾지 못했으나 결국은 ‘된다’ 입니다. API 등록 후 시간이 걸리는 것인지, 플러그인의 특정 설정이 문제인지는 알 수 없었습니다.

      구글 API 키를 연동될 때까지 생성하여 사용, 연동될 때까지 플러그인에서 폴더 및 파일 등록, 이런저런 설정 변경 등을 진행했습니다. 다음 동영상은 될 때까지 진행한 과정을 그대로 녹화한 것입니다. 참고해 보세요.

  4. 유용한 포스팅..잘봤습니다.
    이틀째 보고 있는데 잘 해결이 안되서 글 남겨요..

    설명대로 플러그인 설치후 셋팅을 했는데 구글드라이브와 워드프레스가 연동이 안됩니다.
    셋팅중 설명하신부분과 달랐던 점은 API Key 생성할 때 Key 파일이 자동으로 생성되는 부분에서 jason파일이 자동으로 생성되서 수동으로 p12파일을 다운받아서 www폴더에 넣었습니다.
    그리고 구글드라이브에 자동으로 공유폴더가 생성되지 않아서 이것도 수동으로 폴더를 만들었죠..
    그랬더니 구성은 된 것 같은데.실제로 연동이 전혀 안되고 뭔가 핀트가 어긋나 있는 모양입니다.

    셋팅을 한 10번은 더 반복한 것 같습니다.

    사이트 정보 (www.usherinmaking.com)
    테마 : the7
    호스팅 : 카페24

    1. 구글 API Key 인터페이스가 변경된거 같네요. Key 파일은 자동이 안되면 수동으로 받으시면 됩니다.

      테스트를 해봤는데 문제없이 잘 되는데 뭔가 빠진 부분이 있지 않을까 합니다. 아래 그림을 참고해서 한 번 더 확인해 보세요.

      안되면 첫 번째 그림에서 Private Key Url Path 정보를 플러그인에서 안내하는 데로 “http://” 같은 웹경로로 입력도 해보세요.

  5. WP Media 설치하고 사용중인데 특성이미지를 크게 나오게 하는 부분이 잘 안되네요.
    위에 설명대로 읽고 따라했는데 어렵습니다.
    특성이미지가 설정이 되는 것 같은데 말씀하신 것처럼 크기가 작아 안보이는듯한데, 이 부분 다시 한번 알려주시면 고맙겠습니다. 아직 초보라서 어렵네요.

    1. 글은 워드프레스 기본테마를 기준으로 작성한 것입니다. 테마마다 다를 수 있습니다. 안되는 세부상황(해당 페이지 url 등)을 알려주세요.

  6. 상세한 설명 올려주셔서 감사합니다! 차근차근 잘 따라해본 결과 막히는 부분 없이 정상 작동하네요. 다만 한 가지 해결하지 못하고 있는 부분이 있는데, 구글 드라이브 ‘공유 문서함(Shared with me)’에 폴더가 생성되지 않아요. 워드프레스 업로더를 이용해 파일도 올라가고 계정 용량을 차지하지 않는 것도 확인을 했지만 구글 드라이브 공유 문서함에 파일들이 들어오지 않아 제 드라이브로 잘 업로드 되고 있는 것인지 확인할 수가 없습니다. 혹시 어떤 문제인지 알려주실 수 있으실까요?

    1. 자동으로 폴더가 생성되지 않으면 구글드라이브에서 직접 폴더를 만들어 진행하면 어떨까요.

      • 구글드라이브에서 폴더를 하나 만들고 웹에 공개로 설정
      • 플러그인 설정의 Options 탭의 Google Drive folder name에 생성한 폴더명 입력 후 저장
      • 확인을 위해 이미지 하나를 업로드 해보기
      • 구글드라이브 공유문서함 확인

      플러그인 업데이트로 기능 추가가 있는 것 같습니다. 구글드라이브를 완전한 미디어 저장 경로로 사용할 것인지 먼저 결정한 후에 설정하고 확인하는 것이 좋습니다.

  7. 주말에 호스팅을 cafe24로 옮기고 오늘 오전까지 잘 사용했는데 3.9 업데이트 이후로 메인페이지가 안 보이며 ftp상에서는 플러그인이 다 있는데 wp-admin으로 접속한 대쉬보드에서는 플러그인도 하나도 없이 나오네요.

    DB가 꼬였나 해서 복구해도 안되고…

    책 내용을 한 번 다 보고 책 대로 했는데 혹시 이런것들도 초기화 할 수 있을까요??

    1. 몽실 사이트 둘러보니 링크 전부 에러가 나오네요. 관리페이지 접속이 가능하다면 설정에서 퍼머링크 재설정 등을 확인해 보세요. 원인은 정확히 모르겠습니다. 한 번 직접 보는 것이 가장 빠를 것 같습니다.

      가능하시다면 문의 페이지에서 접속가능한 정보 ftp, 관리자 남겨 주시면 도움을 드리겠습니다.

        1. Url을 찾을 수 없다는 말이 나오는 경우가 예전에 종종 있었는데, 퍼머링크 재설정으로 금방 해결되는 경우가 대부분이었습니다. 퍼머링크를 에러 나기전 설정으로 지정하여 콘텐츠 url이 그대로 유지되도록 하는 것이 좋겠네요.

  8. Private Key Url Path 여기서 막히는 듯 하네요…

    ftp상의 url을 해도 안되고…워드프레스에서 첨부파일로 올려서 주소를 찾으려고 했는데 파일 업로드 자체가 안되네요..

    public_html에 업로드를 했는데 경로를 어떻게 설정을 해야 할지 모르겠습니다.

    전 hostinger라는 무료 호스팅을 현재 사용중입니다.

    /home/hosting_user/자신의웹호스팅아이디/

    home과 hosting_user가 무슨 말인지 모르겠습니다…

    1. 본문 내용에 있는 ‘/home/hosting_user/~’ 경로는 카페24를 예로 들어 설명한 것입니다. 사용하는 웹호스팅마다 다를 수 있습니다. public_html은 본문 내용에서 ‘www’와 대체되는 것이라 생각하면 됩니다.

      FTP 상의 경로를 입력했다고 했는데, 짐작하면 public_html 위의 경로는 ftp에 나오지 않을 것입니다. 그 위의 경로를 알아야 합니다. Hostinger 서비스를 사용한적이 없으며, 짐작은 할 수 있지만 괜히 알려드려 불필요한 과정으로 수고하실까 염려되네요. 터미널 접속을 할 수 있다면 간단히 알 수 있지만, 이것도 몽실님께서 어렵게 느끼지 않을까 합니다.

      예전에 한 번 그랬던 것처럼 계정정보를 알려주시면 좋겠습니다.

      문의

    2. Hostinger 무료서비스에 가입하여 잠깐 둘러봤습니다.
      /home/u12345678/public_html/와 같은 경로를 안내하는데 ‘u12345678’ 부분을 몽실님의 계정아이디로 변경해서 한 번 시도해 보세요.

      Key 파일을 public_html에 업로드 했다 하였으니, 플러그인에 Key 파일 경로를 입력한다면 다음처럼 입력하면 됩니다.

      /home/몽실님꺼/public_html/몽실님키파일명

      1. /home/u12345678/public_html/ 이런 경로를 어떻게 알 수 있는지요…전 public_html밖에 모르겠던데^^;;

        문제를 해결을 하고 구글 드라이브를 미디어저장 공간으로라는 글을 보는데 유튜브 영상 두개가 다 api 설정 하는 걸로 되어 있습니다.

        책은 얼마전에 한 번 다 봤었는데 아직도 개념이 잘 안 잡히는게 많습니다.

        몇 번을 봐야 개념이 잡힐 것 같아요^^;;

        1. 관리패널에서 ftp계정 아이콘 클릭해서 접속하니 ftp 사용자 추가화면이 나오던데요. 그래서 하나 생성했습니다.

            1. 호스팅거는 기본 ftp계정이외에도 부가적으로 ftp계정을 두 개정도 더 만들 수 있도록 되어있습니다.
              (제가 호스팅거 사용 중이라 올바른 ftp접속 방법을 알려드릴께요… )
              위에 베테랑님이 만드신 계정은 추가계정이고요 main admin계정은 바로 u123456789 (위의 그림 사용자명에서 ‘.veteran’이걸 제외한 열자리 )입니다.

              비번만 새로 교체하시면 되는데 그림을 올릴 수가 없어서 제 사이트에 올린 후에
              여기 링크 걸었습니다. —>
              참고하세요..

              1. 감사합니다. 가입할 때 참고 링크이 그림과 같은 화면을 보고 그 정보로 적당히 접속하면 되는 줄 알았는데 안되더라고요. 그래서 관리 패널 둘러보다가 추가 계정을 생성하고 접속하니 즉시 가능했습니다.

                많은 옵션과 설정이 때로 고단함을 주기도 하네요.^^

    1. Key Url 때문에 설정 진행이 어려운 경우를 겪는 분들이 있는 것 같습니다. 고민 해결이 됐다니 기쁘네요.^^

  9. 와~ 정말 상세한 설명에 좋은 가이드네요. 설치형 워드프레스를 사용하면 트래픽에 신경 쓰일 수 밖에 없는데, 이 팁을 이용하면 트래픽과 하드용량을 상당 부분 절약할 수 있을 것 같습니다. 이 팁을 적용하면 가장 낮은 플랜의 웹호스팅으로도 블로그 정도는 충분히 운영할 수 있을 것 같네요. 좋은 가이드 감사합니다. ^^

    ps. 제가 검색해본 바로는 구글 드라이브의 트래픽 제한은 하루에 300GB 정도 되는 것 같습니다. 구글 드라이브를 이용해서 동영상을 올리면 그 정도 트래픽에서 제한이 걸리는 것 같더라구요.

    1. 구글 드라이브 트래픽이 300G/D 라면, 블로그 정도가 아니라 전 세계 90% 이상(대충 짐작)의 웹사이트에 사용해도 무방하지 않을까요? 동영상과 같은 멀티미디어는 제외한 이미지만, 그것도 일정 크기 편집해서 사용한다면 충분하지 않을까 하는 생각이 듭니다.^^

      1. 사실 구글 드라이브에서 제공하는 트래픽 양이 어마어마하긴 하죠. ^^
        그런데, 또 블로그 이상의 용도로 쓰려고 하면 최하 플랜의 웹호스팅으로는 힘든 부분이 많을 것 같아서요. 제가 듣기로는 동접자가 일정 이상이면 웹호스팅에서 쫒겨나기도 한다고 하더라구요.
        어쨌든 구글 드라이브를 워드프레스의 미디어 저장소를 활용할 수 있다는 건 정말 획기적이네요. 많은 분들에게 도움이 될 것 같습니다. ^^

        1. 동시 접속자 수가 많은 사이트라면 알아서 다른 방법을 쓰지 않을까요. 보통의 웹사이트나 블로그라면 문제 없지 않을까 하는데, 정확한 가이드가 있으면 좋겠네요. 그래서 찾아봤는데 다음 링크의 정보가 정확한건지 모르겠네요. ‘대역폭’이 아닌 ‘트래픽’으로 검색했으니 찾기 어려웠던 것 같네요.

          https://support.google.com/a/answer/1071518?hl=ko

          1. 제가 알기로는 구글은 트래픽 제한을 명확하게 밝히지 않는 경우가 많습니다. 피카사의 경우에도 트래픽 제한이 있지만 정확하게 얼머만큼의 트래픽을 제공하는 지는 밝히지 않더라구요.

            아마 Veteran님께서 알려주신 링크의 설명은 그 대상이 유료 사용자들이기 때문에 명확하게 설명해 놓은 것이 아닌가 싶습니다.

            구글 Product Forum에 이와 관련된 질문이 올라와 있던데 구글측의 명확한 답변은 없었습니다. 다음 링크를 참조해주세요.

            https://productforums.google.com/forum/m/#!msg/drive/qcbDorj-vYE/Kdu-Z0jCVe4J

            ps1. Veteran님께서 걸어주신 링크는 구글 앱스에 대한 것 같은데, 구글 드라이브와는 별개일 것 같습니다. 설명으로 봐서는 메일에 대한 대역폭 제한만을 설명하는 것 같습니다.

            ps2. 제가 댓글에서 하루에 300GB정도의 대역폭을 제공하는 것 같다고 말씀드렸는데, 그건 동영상 스트리밍시 몇명 정도가 보고 나서 영상이 짤렸는지를 보고 추측해 본 것 입니다. 그래서 그리 정확하지는 않습니다.

            ps3. 트래픽 제한 때문에 구글 드라이브를 워드프레스의 미디어 저장소로 사용하는 것을 꺼려할 필요는 없을 것 같습니다. 정확하게 얼마만큼의 트래픽을 제공하는 지는 밝히지 않고 있지만 하루에 수백만 뷰의 사이트가 아니면 괜찮다는 답변도 있더라구요.

            http://stackoverflow.com/questions/13675084/bandwidth-limits-for-google-drives-publish-site-feature

            1. 정보 감사합니다. 저는 트래픽과 용량에 대한 걱정을 하지 않는데, 그렇지 않은 분들이 있어서 생각해 봤습니다. ^^

              댓글 Hold, 링크 2개 이상으로 해놨네요. 댓글 달고 Hold되면 느낌이 별로 좋지 않더라고요. 불편을 드렸네요. 10개로 변경했습니다.^^ 또 마크다운 가능하도록 설정했습니다.

              1. 아. 그 설정 때문이었군요. 저도 바로 수정했습니다. 제 블로그에는 와서 댓글 남겨주시는 분들도 별로 없긴 하지만요. ^^;

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.