블로그 타이틀 이미지 웹에서 쉽게 만들기

블로그에서 글을 작성할 때에 이미지가 없는 글을 만드는 것은 아쉬움이 있습니다.

글을 대표하는 썸네일이 하나라고 있다면 리스트를 표현할 때나 이미지를 통해 검색할 때에도 가독성이 좋을 것입니다.

그러나 썸네일을 만들기 위해서 매번 그래픽 도구를 열어서 이미지를 만들고 크기를 조정하는 것도 번거로운 일입니다.

혹시 이런 문제를 쉽게 해결할 수 있는 방법들이 있을까요? 궁금함을 참지 못하고 자료를 조사해 보았습니다. 그리고 마침내 필요에 맞게 간단하게 문제를 해결할 수 있는 방법을 만들었습니다. 

먼저 다음과 같은 사이트가 있더군요.

https://dummyimage.com/

Dynamic Dummy Image Generator - DummyImage.com

사이트를 둘러보니 이미지의 크기와 색상을 정하고 글씨의 색상과 내용을 API로 전달하면 PHP 를 통해서 서버사이드에서 이미지를 생성해 줍니다. 한번의 검색으로 빠르게 문제를 해결할 수 있다면 이방법도 좋겠다고 생각했습니다. 그런데 몇가지 문제가 있더군요.

일단, 한글지원이 안됩니다. 이건 바로 탈락입니다. URI인코딩 처리를 했다고 하는데 전혀 듣지 않네요. PHP 서버페이지에서 한글에 대한 처리를 해주어야 할 것으로 보여지기 때문에 문제가 있습니다. 

한글지원뿐 아니라 기왕이면 글자의 위치도 맞추어주는 기능이 되어야 좋지만 그런 부분은 전혀 기대할 수 없습니다. 빠르게 찾았지만 아쉽지만 사용할 수가 없겠네요.

검색을 통해서 몇개의 온라인 그래픽 도구들을 찾을 수 있습니다. 그런데  저는 최대한 쉽게 처리하고 쉽고 처음부터 300x250 의 배너형태의 사이즈로 타이틀을 만들고 싶습니다. 미리 배경 이미지의 사이즈를 정하는 기능은 좀처럼 찾아보기 힘들군요.

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

열심히 자료를 검토하던 중에 위의 자바스크립트 라이브러리를 찾았습니다. 데모사이트에서 훌륭하게 서버의 도움없이 이미지를 캡쳐하는 것을 확인했습니다. 이제 한글이 되고 텍스트 위치를 드래그로 조정할 수 있다면 될 것 같습니다.

약간의 테스트를 통해 처음부터 Canvas 의 사이즈를 300, 250으로 지정하고 텍스트의 위치를 조정하는 기능을 구현했습니다. 

그런데 또 문제가 있네요. HTML Canvas 가 Textarea 에서 전달되는 문장의 멀티라인을 인식하지 못하는군요. 이를 위해서 별도의 처리가 필요합니다. 이미지로 만들어서 바인딩하면 좋겠지만 번거로운 작업이라 텍스트 입력은 한번에 여러줄을 하지만 각 라인별로 텍스트객체가 분리되어 Canvas 에 추가되고 위치를 조정할 수 있도록 했습니다. 미리 배경색과 폰트색상과 크기를 지정하면 언제든지 글자만 입력하고 원하는 타이틀 이미지를 얻을 수 있습니다.

---

타이틀 이미지 생성 기능

내용을 입력하고 이미지에 텍스트를 삽입한 후에 적절한 위치를 조정하고 "to image" 버튼으로 PNG 이미지를 다운로드할 수 있습니다. 블로그 글 생성에 많은 도움이 되시길 바랍니다. 혹시 해당 기능을 더 고민하여 적용하기 원하신다면 의견 부탁드립니다.