웃짤동 유튜브 프로필
웃짤동[↗] 은 2023년 유튜브 쇼츠에 커뮤니티 유머글 영상이 범람하기 이전, 커뮤니티 글 더빙 영상 형태를 최초로 도입한 유튜버이다.
2023년 유튜브 쇼츠에 커뮤니티 유머글 영상이 범람하기 이전, 나는 자신이 재미있게 본 유머글이나 커뮤니티 게시글을 캡쳐본 처럼 저화질이 아니게 공유할 수 있었으면 좋았겠다는 생각을 했다.
커뮤니티 글 또한 웹 콘텐츠이므로, HTML DOM을 이미지로 바꾸는 방법만 있다면 간단하게 만들 수 있을거라 생각하고 제작을 시작하게 되었다.
Stack
DOM을 이미지로 바꾸는 라이브러리는 대부분 document의 직접적 사용이 필요했고 DOM을 다루기에, HTML 문법이 아닌 JSX 문법과 virtual DOM을 사용하는 React는 복잡성을 늘릴 수 있다고 판단했다.
HTML 문법을 그대로 사용하는 웹 프레임워크는 Svelte와 Vue가 있는데, 나는 Vue를 배우지 않았기에, Svelte를 선택하였다.
(추후 알게된 사실은 Vue 또한 virtual DOM을 사용한다는 것.)
Input
Profile
웃짤동의 특징중 하나는 커뮤니티 글을 그대로 캡쳐하는 것이 아닌, 자체적인 인터페이스를 가지고, 모든 글마다 말장난으로 이루어진 닉네임이라고 할 수 있다.
예) 영문도모르고영문학과왔다, 아무리생강캐도난마늘, 캐리비안의해녀
이러한 특징을 반영하여, 닉네임의 인풋에 이러한 이름을 랜덤으로 가져오는 기능을 포함하였다.
마찬가지로, 프로필 사진 또한 DiceBear API[↗] 를 사용하여 랜덤한 사진을 사용할 수 있도록 했다.
Content
내용을 강조하고, 이미지를 넣을 수 있게 GFM(Github Flavored Markdown)을 렌더하는 기능을 포함하였다.
DOM to Image
본 프로젝트의 가장 중요한 부분이라 할 수 있는 DOM을 이미지로 변환하는 작업이다.
이 프로젝트를 위해 서버를 하나 돌릴 생각은 없었고, 브라우저에서 렌더링된 DOM을 이미지로 변환하는 것이 더 편할 것이므로, DOM을 이미지로 변환하는 것은 client에서 이루어 져야했다.
탐색 결과 나온 라이브러리는 두 개 정도가 있었다.
dom-to-imagehtml2canvas