리디북스의 '이미지로 멋지게 공유하기'처럼 텍스트를 이미지로 만들 수 있는 사이트를 만들었다. 시작은 딜리헙 대표 이미지 만들기였으나 하다보니 그렇게 됐다.
난 이 기능을 리디북스에서만 썼는데 이제 카카오페이지나 네이버에도 추가된 기능이더라.
딜리헙에 글을 써보고 싶어서 새 프로젝트를 만들었더니 표지를 포함한 대표 이미지를 무려 4장이나 요구해서 당황스러웠다. 그림이나 웹툰을 올릴 거라면 있던 이미지를 적당히 잘라서 올리면 되겠지만 간단하게 글만 써보려고 한 터라 부담스러웠다.
나만 당황한 건가 싶어 검색해보니 '딜리헙은 글러들의 무덤'이라는 글이 있었다. 그만큼 소설을 올리기엔 진입장벽이 있는 플랫폼인 모양이다.
딜리헙에 소설을 쓰는 사람들은 어떤 대표 이미지를 사용하는지 궁금해서 찾아봤는데 대부분은 같은 이미지를 중복해서 넣었다.(각 이미지의 이름을 다르게 하면 같은 이미지를 4장 올릴 수 있다.) 대부분은 소설의 느낌을 표현하는 사진을 넣었고, 아예 단색의 이미지를 사용하기도 했다.
이중 눈에 들어온 건 표지용으로 1장은 풍경 사진을 넣고 나머지 3장에 본문 내용을 캡처하여 넣은 프로젝트였다. 어차피 무료라서 바로 볼 수 있지만 본문 미리보기 같은 느낌으로 넣은 것 같았다.
여기에서 아이디어를 얻어 텍스트를 이미지로 만들 수 있으면 딜리헙을 사용하려는 소설 작가들이 좀 더 편하지 않을까 싶었다.
만들 때 html2canvas를 사용하여 div를 이미지로 저장하는 방식을 사용했다.
해당 방법은 브라우저 화면 크기에 따라 이미지 끝에 흰 줄(혹은 검은 줄)이 생기는 버그가 있는데 검색해보고 여러 방법을 시도했지만 해결할 수 없었다... 사용자가 기본 화면에서 사용하길 바랄 수밖에 없다. 브라우저 창 크기를 최대화로 놓고 저장하면 버그가 생기지 않는다.
선택지가 너무 많으면 오히려 힘들어하는 사람들이 있을 수 있으니 옵션을 최대한 줄이려고 했는데 하다보니 좀 많아진 것 같기는 하다.
전체적인 색상이 가장 먼저 눈에 들어오기 때문에 글자색과 배경색은 자유롭게 선택할 수 있게 했다.
배경색 프리셋은 최대한 다양하게 넣어두었는데 다른 사람이 보기에도 괜찮을지 모르겠다.
3:4 비율로 만들면 딜리헙에 이용할 수 있다.
디자인적인 요소를 더 많이 넣을 수도 있지만 뭔가 더 하면 할수록 '간단함'과 거리가 멀어질 것 같아서 선 긋는 걸로 끝냈다.
여담으로... 프로젝트 이름이 영문으로 excerpt to image인데 excerpt라는 단어를 (아마도?)처음 써봐서 자꾸 헷갈린다.
여담2... 라디오 버튼 만드는 거 너무 귀찮아서 chatGPT한테 시키니까 편하더라. 이거 해주는 vscode 확장 프로그램이 따로 있나?
0 댓글