Jekyll 블로그 Post에 이미지를 올리는 방법은 크게 두 가지가 있다. 1) repository에 이미지 직접 업로드하는 방법과 2) Google Drive나 OneDrive 등에 호스팅해서 embed로 링크만 따오는 방법. 지금까지는 1번의 방법을 사용해왔는데 용량 제한이나 최적화의 문제 때문에 2번을 시도해보기로 했다. 여러 호스팅 방법들 중에서 OneDrive를 이용한 방법을 이용했기 때문에 이에 대해 자세히 설명하려고 한다.

기존 이미지 업로드 방식

내가 선택한 jekyll 템플릿에는 “/assets/img/” 경로에 이미지를 업로드하도록 되어있다. 예를 들어 “example.jpg”의 이미지를 해당 경로에 업로드하면 Post에서는 markdown이나 html 문법으로 “/assets/img/example.jpg” 경로를 지정해주면 쉽게 불러올 수 있다. 하지만 이 방법에는 몇 가지 단점이 존재하는데, 1) github repository 용량 제한과 2) 블로그의 몸뚱이가 커지면 그만큼 시간이 오래걸려 최적화가 힘들어진다는 것이다.

github 공식 문서에 따르면 하나의 repository당 1GB의 무료 storage quota(저장 공간 할당량)이 주어진다는 것을 알 수 있다. 지금 당장은 큰 문제가 되지 않지만 Post당 2-3개의 이미지가 들어가게 되면 50편의 Post만 작성해도 슬슬 Storage가 차오르기 시작하기 때문이다. 또한 그에 비례하여 deploy하는 시간이나 불러오는 시간이 더 느려지게 된다.

새로운 이미지 업로드 방식 - 이미지 호스팅

따라서 이미지 호스팅은 다른 플랫폼에서 하고, 링크를 불러오는 방식을 택했다. 직접 호스팅을 하는 방법은 너무 번거롭고, Google Drive도 가능하지만 매번 링크를 수정해서 올려야한다는 것이 번거롭게 느껴져서, 한번에 Embed 기능을 제공해주는 OneDrive를 활용했다.

OneDrive는 기본적으로 5GB의 무료 저장 공간을 제공하는데, 일단 기본적인 블로깅을 위해서라면 이정도면 충분한 용량이라고 생각된다. 드라이브에 ‘jekyll-image-hosting’이라는 폴더를 만들어주고 여기에 jekyll 블로그에 들어갈 모든 사진들을 넣어주었다.

OneDrive의 가장 좋은 점은 임베드(Embed)기능을 바로 지원해준다는 것이다. 하지만 여기에서 주의할 점은, 개인 OneDrive에서는 지원해주지만 기업계정이나 대학교 단체계정의 경우 지원하지 않는다는 것이다. @korea.ac.kr 대학교 계정 용량이 여유가 있어서 그걸 활용하려했는데 Embed는 없고 파일 공유만 있길래 찾아봤더니 개인 계정만 지원하는 기능이라는 답을 얻게 되었다. (…) 그래도 개인 용량 5GB 주는게 어디야 감지덕지 하면서 사용하려고 한다.

임베드 버튼을 누르면 간단하게 크기 설정을 할 수 있다. 크기가 클수록 선명하고 화질 좋은 이미지를 불러올 수 있지만 그만큼 인터넷 속도에 따라 불러오는 속도가 느려져 User면에서 답답하게 느껴질 수 있다는 문제가 있다. 따라서 상황에서 따라 이미지의 크기를 조절해주는게 좋다. 또한 HTML 태그를 포함할지의 여부를 결정할 수 있는데, Post 본문에 Image를 삽입할 때에는 HTML태그가 필요하지만 yaml상에 이미지를 넣을 때에는 반드시(!!!) 링크만을 넣어야 한다. (그렇지 않으면 deploy 과정에서 yaml에 issue가 발생한다.)

한동안은 이 방식을 사용할 듯! 시간 되면 사진 center align이나 device에 따라 reponsive하게 바꿔주도록 수정해봐야겠다.