최근의 웹기술은 다양한 크기화면을 가진 기기들에 좀 더 쉽고 아름다운 화면을 구현하기 위해 반응형(responsive)웹의 구현이 추세이며 워드프레스는 테마라는 개념을 적용하기 때문에 더욱 세련되면서도 경제적으로 부응하기에 적합한 플랫폼으로 각광 받고 있다.
워드프레스가 크기가 아주 다양한 기기에 대하여 반응형으로 작동하는 기본원리는 하나의 이미지를 가지고 다른 크기의 화면에 뿌려 주는 것이지만 이 방법으로는 일정한 비율의 크기 이내의 기기에 대해서 만 가능하고 어느 이상의 비율을 벋어나게 되면 이미지가 흐려진다던지 하는 문제가 발생하기 때문에 글에 여기에 연결된 이미지가 업로드 되면 워드프레스가 원본이미지와는 별개로 미리 정해진 크기의 더 작은 크기의 이미지를 여러개 더 만들어두고 접속자의 기기화면 크기에 따라서 적합한 크기의 이미지 데이타를 전송하는 방법을 사용한다.
위 그림은 wp-content/upload/ 디렉토리에 저장된 이미지 파일들을 보여주고 있다. 원본이미지 이외에 4가지 다른 크기의 이미지가 존재하는 것을 볼 수 있다. 따라서 서버의 용량은 대략적으로 만 보아도 원본 크기보다 2 내지 3배 정도 더 큰 용량이 필요하게 된다는것을 쉽게 알 수 있다 .( 워드프레스는 글 즉 텍스트 데이타는 DB에 별도로 보관하게 되지만 이미지 등의 경우에는 워드프레스 설치 디렉토리에 저장하는 방식을 사용한다.) 따라서 DB서버의 용량에는 크게 제한이 없더라도 web서버의 저장 용량에는 크게 제한이 있는 무료호스팅의 경우에는 웹 브로그를 개설한지 얼마되지 않은 시점에서도 이미지 용량이 큰 부담으로 작용하게 되는 것이 일반적이다.
이러한 문제점을 해결하기위해서 많이 시도되고 있는 방법 중의 하나가 CDN 을 이미지 서버로 활용하는 것이다. CDN이 뭐지? 검색해보자….
CDN : 콘텐츠 전송 네트워크
CDN을 활용하면 저장용량의 확장 뿐아니라 데이타 전송의 병복현상도 피할 수 있고 결과적으로 트래픽 용량도 줄일 수 있으므로 일거 양득이 된다. 웹 상에는 수 많은 무료 CDN 서비스가 있지만 여기서는 워드프레스 플러그인이 제공되어 설치가 간편한 ‘cloudinary‘를 적용해보자.
- cloudinary 설치방법
그림과 같이 데쉬보드에 있는 플러그인 메뉴의 검색창에서 cloudinary 라고 쳐보자.
별표를 4.5개나 받은 플러그인이 검색된다.
이제 ‘바로 설치’버튼을 누른 다음 활성화한다.
데쉬보드의 좌측메뉴에 Cloudinary 버튼이 생성된것을 볼 수있다. 누르자..
setting메뉴가 작은 창으로나타난다. 또 누른다.
cloudinary url을 입력하라는 창이 나타난다. 가입해야한다. 가입 후에 다시 돌아오려면 새창 열림이 편리하다. 여길 누르면 새창으로 사이트가 열린다
이렇게 생긴 버튼이 가운데에 버티고있을것이다. 이걸 누르자. ^^
클라우디너리 가입화면이다. 4)번까지는 적당히 입력한다. 다만 필자는 5)번 항목에 사이트 url를 입력하였으며 6)번 항목은 이에 따라서 추천이름이 자동으로 생성되는데 만일 마음에 들지 않는다면 ‘edit’버튼을 눌러서 수정할 수 있다. 6)번 항목은 디스커스에서의 short name과 마찬가지로 사이트의 고유주소(여기서는 CDN 서비스 되는 이미지 저장 영역의 주소가 된다. )가 될 것이므로 중복되거나하면 에러메시지가 나타날 것이라고 예측되지만 필자는 경험하지는 못했다. 엔터키를 누르면 가입끝…
이제 계정이 생성되고 아래와같 은’GETTING STARTED’ (대쉬보드화면)이 나타날 것이다. (만일 아래 그림과 동일한 화면이 나타나지 않는다면 상단의 CLOUDINARY 로고 바로옆에 있는 DASHBOARD를 누른다.)
최상단에 있는 길다란 박스내부의 텍스트를 (등호표시 이후부터 끝까지 ‘cloudinary://————-‘ ) 카피해서 cloudinary url 입력 창에 붙여넣기 한 다음 ‘update setting’버튼을 누른다. 이것으로 일단 설치는 완료되었다고 볼 수 있다.
글 내용이 길어서 일단 여기서 끊고 사용방법은 다음 글에서 올린다.
Thanks, it’s quite informative