쉽고 빠른 썸네일 만들기, 퀵썸네일 (Quick Thumbnails) 소개 | 사이드 프로젝트

안녕하세요! 오늘은 제가 진행한 사이드 프로젝트, '퀵썸네일'에 대해 소개해 보려고 합니다. 인스타그램, 유튜브, 블로그 등의 플랫폼에서 썸네일은 콘텐츠의 첫인상을 결정짓는 매우 중요한 요소입니다. 하지만, 디자인 스킬이 부족한 사람들에게는 썸네일 제작이 결코 쉬운 일이 아닙니다. 이러한 어려움을 해결하고자 시작한 '퀵썸네일'은 디자인 도구에 익숙하지 않은 사용자도 멋진 썸네일을 쉽고 빠르게 만들 수 있도록 돕는 웹서비스로 개발되었습니다.

퀵썸네일 바로가기

🚀 프로젝트의 시작

저는 블로그 운영 중 썸네일 제작에 지속적인 불편함을 겪었습니다. 포토샵과 같은 디자인 도구를 전혀 다룰 줄 몰랐고, 온라인상의 썸네일 제작 도구는 기능이 너무 제한적이었습니다. 썸네일을 한 번 만들어두고 재사용할 수 있는 것이 아니라 계속 같은 템플릿을 제작해야 하는 수고로움도 겪고 있었습니다.

이러한 불편함을 회사 동료인 정민님과 공유할 기회가 있었습니다. 정민님과 짧은 대화 끝에 '디자인 툴을 잘 다루지 못하는 사람들도 멋진 썸네일을 빠르게 만들 수 있는 프로덕트를 만들어보자'라는 결론에 이르렀고, 함께 '퀵썸네일' 프로젝트를 시작하게 되었습니다. 정민님은 디자인을, 저는 개발을 맡아 개발을 시작했습니다.

💡 퀵썸네일 기능 소개

퀵썸네일은 썸네일을 만들기 위한 과정을 4가지 단계로 정리했습니다. 각 단계는 디자인 도구에 숙련도가 없는 사람들도 쉽게 사용할 수 있도록 어려운 부분을 과감히 덜어내고자 했습니다.

1. 해상도 설정

가장 흔히 사용되는 비율인 '16:9', '9:16', '4:3', '1:1' 들 중에 원하는 비율을 선택하고, '미리 보기'화면을 통해 즉시 확인할 수 있습니다.

1. 해상도 설정

2. 배경 설정

썸네일 배경으로는 '단일 색상', '그라데이션', '이미지 업로드'를 사용할 수 있습니다. 특히 그라데이션은 10가지 옵션을 제공해 쉽게 멋진 배경을 설정할 수 있습니다. 이미지는 해상도에 따른 비율을 걱정하지 않아도 알맞게 잘려서 들어가고, 밝기를 조정하여 제목을 돋보이게 할 수 있습니다.

2. 배경 설정

3. 텍스트입력

'텍스트입력' 단계에서는 '제목'과 '부제목'의 배치를 쉽게 조정할 수 있는 기능을 제공합니다. 좌상단부터 우하단까지 총 9가지의 옵션을 선택해 보면서 썸네일에 가장 잘 어울리는 배치를 찾을 수 있습니다. 또한, 폰트 선택의 어려움을 덜어주기 위해 폰트를 5가지를 선정하여 제공합니다. 추가로, '외곽선' 기능을 통해서 제목과 부제목을 강조할 수 있습니다.

3. 텍스트입력

4. 배경 꾸미기

배경 꾸미기를 통해서 배경의 외곽선을 설정할 수 있습니다.

4. 배경 꾸미기

이 외에도 퀵썸네일은 반응형 디자인을 지원하며, 총 11개의 다국어를 지원하고 있습니다. (GPT4의 도움으로 쉽게 번역할 수 있었습니다.)

일본어 버전의 퀵썸네일 (모바일)

🖥️ 개발과정에서 겪은 기술적 이슈들

1. 브라우저 크기에 따른 캔버스 크기 조정

퀵썸네일은 브라우저 크기에 따라서 캔버스(미리 보기 화면)가 동적으로 조정되며, 사용자가 캔버스의 크기를 조정할 필요가 없습니다. 사용자는 폰트 크기와 외곽선 두께 등을 지정할 수 있는데, 화면이 동적으로 변경되면 폰트와 외곽선의 두께가 이에 비례해서 조정될 필요가 있었습니다.

처음에는 이를 SVG를 통해 해결하려고 하였으나, SVG의 경우 텍스트 입력을 받는데 문제가 있었습니다. 결국 CSS transform의 scale을 활용하여 문제를 해결하였습니다. 브라우저 너비에 비례해서 scale 값이 조정되고, 캔버스 크기가 동적으로 변하게 됩니다.

<MainCanvas
  :width="canvasWidth"
  :height="canvasHeight"
  :thumbnail="thumbnail"
  :style="{
    transform: `scale(${scale})`,
  }"
/>

2. 텍스트 외곽선 뒤로 배치하기

css의 -webkit-text-stroke 속성을 이용하면 텍스트에 외곽선을 넣을 수 있습니다. 문제는 아래와 같이 외곽선이 텍스트 앞에 그려져 텍스트를 가리는 문제가 발생합니다. 해당 문제를 해결하기 위해서 제목 요소를 복제하여 텍스트를 겹치게 배치하고, 뒤에 있는 제목 요소에 외곽선을 적용함으로써, 외곽선이 뒤에 배치되도록 하였습니다.

좌: 단순히 css를 통해 외곽선 설정 / 우: 요소를 겹쳐서 외곽선을 뒤에 설정

3. URL 공유시 이미지

썸네일을 공유할 때 데이터를 URL에 포함시켜 공유하는 방식을 사용하고 있습니다. 다른 데이터들은 URL에 담아도 크게 문제가 없습니다. 하지만, 이미지의 경우 이를 Base64 문자열로 변환하는 경우 최대 URL 길이의 허용범위를 넘어가는 문제가 발생합니다. 물론 서버를 구축하고, 이를 서버에 저장하는 방식도 있지만 1차적으로 프론트에서 이를 해결하고자 했습니다.

템플릿을 공유하는 경우 대부분 템플릿에 포함된 이미지는 변경하여 사용할 것이라고 판단했습니다. 따라서, 임의의 프리셋 이미지를 미리 클라우드에 업로드하고, 이미지 데이터를 담은 Base64 문자열이 아니라 프리셋 이미지의 URL을 썸네일 링크에 포함함으로써 URL의 크기를 줄일 수 있었습니다. 물론 이것이 정답은 아니지만, MVP의 빠른 출시를 위해 전략적으로 진행한 의사결정이었습니다.

좌: 제작한 썸네일 / 우: 공유한 썸네일

4. 썸네일 다운로드

썸네일 다운로드 시에는 HTML을 이미지로 바꿀 수 있는 라이브러리인 modern-screenshot을 이용했습니다. 해당 라이브러리 중 가장 유명한 것은 html-to-image라는 라이브러리는 사파리 브라우저에서 이미지 저장이 제대로 되지 않는 문제가 있었습니다. modern-screenshot은 html-to-image를 포크 하여 해당 라이브러리의 여러 문제를 해결한 라이브러리입니다. html을 이미지로 저장할 필요가 있을 때 추천드리기 위해 소개하였습니다.

GitHub - qq15725/modern-screenshot: 📸 Quickly generate image from DOM node using HTML5 canvas and SVG

 

🧰 프로젝트를 도와준 도구들

프로젝트를 시작하기 전에 아래와 같은 도구들을 사용하기로 결정했습니다. 회사에서 주로 사용하던 친숙한 도구들이었기 때문에 잘 활용할 수 있었고, 빠르게 선택해서 시작할 수 있었습니다.

협업툴

1. 노션

노션을 통해 1-Pager 작성, 백로그 관리등을 진행했습니다. 문서화가 필요한 경우들은 노션을 통해 관리했습니다.

노션-  1-Pager 및 백로그

2. 디스코드

빠른 의사결정이 필요한 것들이나 프로젝트 진행 과정에서 발생한 이슈들은 디스코드로 논의하여 처리하였습니다.

디스코드 - 빠른 이슈 논의

3. 피그마

디자인 전달이나, 디자인 관련 이슈 논의는 피그마로 진행하였습니다. 피그마에서는 디자인 요소들에 직접 코멘트를 남길 수 있어 디자인과 관련된 소통은 피그마를 통해서 하는 것이 용이했습니다.

피그마 - 디자인 시안 전달 및 디자인 관련 이슈 논의

개발 언어 및 프레임워크

1. Vue / Nuxt

프론트엔드 라이브러리 및 프레임워크로 Vue.js와 서버사이드 렌더링을 위한 프레임워크로 Nuxt.js를 사용하였습니다. Vue가 저한테 가장 친숙한 라이브러리였기 때문에 빠르게 MVP를 만들 수 있었고, SEO를 통해서 트래픽을 확보하고자 하는 목적으로 Nuxt를 사용하였습니다.

2. Tailwind

CSS 스타일링을 위해서는 Tailwind를 사용했습니다. 클래스명이나 스타일 스코프를 고민할 필요가 없고 빠르게 스타일들을 적용해 볼 수 있어 사이드 프로젝트를 진행할 때 굉장히 좋다는 느낌을 많이 받았습니다.

3. Vercel

프론트엔드 배포를 위해서는 Vercel을 이용했습니다. 해당 프로젝트는 만들기 시작할 때부터 Vercel을 통해 배포하고 시작했는데, 배포가 너무 쉬워서 깜짝 놀랐습니다. 또한, 개발과정에서 결과물을 디자이너와 함께 지속적으로 확인하면서 피드백을 나눌 수 있어 좋았습니다.

4. No Server

저는 주로 서버 개발을 담당하는데, 이번 MVP에서는 서버 작업을 전혀 하지 않았습니다. 이는 빠르게 MVP를 만들어서 출시하기 위한 결정이었습니다. 저희가 최초 MVP에서 목표로 한 기능들은 서버작업 없이도 충분히 가능하고, 이후 기능들은 유저 반응을 보면서 서버 개발을 진행할 계획입니다.

 

🚄 향후 계획

단기적으로는 미리 만들어진 썸네일 템플릿들을 제공하고, 로그인 및 본인만의 썸네일 템플릿 저장 기능을 구현할 계획입니다. 동시에 여러 커뮤니티에서 사용자분들을 만나 다양한 의견을 받고, 이를 통해 '퀵썸네일'의 방향을 지속적으로 수정하고 제품을 개선해나가고자 합니다.

---

이렇게 퀵썸네일 프로젝트에 대해 간단히 소개해 보았습니다. 여러분들도 한 번 사용해 보시고 다양한 피드백 남겨주시면 퀵썸네일을 보다 나은 제품으로 만드는데 도움이 될 것 같습니다. 감사합니다. 😄

퀵썸네일 바로가기

퀵썸네일