쉽고 빠른 썸네일 만들기, 퀵썸네일을 소개합니다
서비스 소개 겸 사이드 프로젝트 후기
오늘은 사이드 프로젝트로 진행했던 가장 쉽고 빠른 썸네일 메이커, '퀵썸네일'에 대해서 소개해보려고 한다.
퀵썸네일이 뭐야?
서비스 명에서부터 알 수 있듯 '퀵썸네일'은 블로그, 유튜브, 인스타 등에서 활용할 썸네일을 쉽고 빠르게 만들 수 있도록 도와주는 썸네일 메이커이다. PPT나 포토샵을 켤 필요 없이 4가지의 설정(해상도, 배경, 텍스트, 외곽선 유무)만 바꿔주면 그럴싸한 썸네일을 손쉽게 만들 수 있다.
썸네일 메이커 - 퀵썸네일추가 사진도 못 넣고! 글자 회전도 안되고! 디자인 툴 맞아?
사실 퀵썸네일은 디자이너를 위한 디자인툴은 아니다. 디자이너가 쓰기에는 부족한 기능이 많다.
그럼 왜 만들었을까?
디자인이 어렵게 느껴지는 사람도 '쉽고 빠르게' 썸네일을 만들 수 있도록 도와주는데 그 목적이 있다. 퀵썸네일의 타겟 유저는 디자인 경험이 적은 블로그, 유튜브 운영자들이다.
사실 이미 망고보드, 미리캔버스, 포토샵 등 썸네일을 만들 수 있는 도구들은 많다. 이 서비스들은 좋은 퀄리티의 에셋 이미지를 제공하고 다양한 기능을 제공하며 높은 디자인 자유도를 보장한다. 하지만 여기서 발생하는 문제가 있었으니 바로 '어렵다'는 것.
이번 프로젝트도 여기서 시작되었다. 개발 블로그를 운영하는 회사 동료 선우님과 대화하다 우연히 '블로그 썸네일 만드는 게 어렵고 귀찮다'는 이야기를 듣게 된 것. 글자 사이즈부터, 이미지는 어디에 배치해야 할지 하나부터 열까지 신경 쓸게 많아 불편하다고 하셨다.
'오! 그럼 진짜 쉬운 썸네일 생성기 하나 만들어 보면 어떨까요?' 이게 시작이었다.
퀵썸네일 사용방법
퀵썸네일은 총 4가지 항목(해상도, 배경, 텍스트입력, 배경 외곽선)을 설정할 수 있다. 기존까지의 디자인 툴은 별도의 순서를 두지 않고 자유롭게 디자인을 할 수 있도록 도화지를 던져주는 방식이라면 퀵썸네일은 단계별로 어떤 항목을 입력해야 하는지 가이드를 제시한다는 점이 다르다.
디자인 경험이 풍부한 경우라면 자유도가 높은 전자가 편하겠지만 디자인이 익숙하지 않은 경우 어떤 것부터 시작해야 할지 막막할 수 있다고 생각하여 순서로 가이드를 주었다. (숫자는 가이드일 뿐 자유롭게 수정할 수 있다)
1-1. 해상도
해상도는 16:9(유튜브 롱폼) / 9:16(유튜브 숏폼) / 4:3(블로그) / 1:1(블로그, 인스타) 이렇게 4가지 버전을 지원한다. 이때 1920*1080을 쓸 것인지 960*540을 쓸 것인지 사이즈 입력기능을 포함할 수도 있었지만 타겟 유저를 고려했을 때 꼭 필요한 기능은 아니라고 판단하여 mvp에서는 제외시켰다. 사이즈는 따로 찾아볼 필요없도록 대중적으로 많이 쓰는 px을 기준으로 세팅해 두었다.
+ 해상도를 변경하더라도 같은 비율을 유지하도록 변환 계산을 적용해둬서 쉽게 수정할 수 있다.
1-2. 배경
배경은 단일 색상 / 그라데이션 / 이미지 업로드 이렇게 3가지 방식으로 설정할 수 있다.
- 단일색상: 원하는 색상 한 가지를 고를 수 있다.
- 그라데이션: 10가지의 그라디언트 색 조합을 선택할 수 있게 했다. 그라데이션 색 조합에 힘들이지 않도록 활용도 높은 그라데이션 팔레트를 제시했다.
- 이미지 업로드: 원하는 사진을 업로드해서 배경으로 활용할 수 있다. 모바일에서 썸네일을 만든다면 방금 찍은 사진을 바로 활용할 수도 있다. 다만, 사진에 따라 색이 천차만별이기 때문에 텍스트 가독성을 위해 밝기 조절 기능을 추가하였다.
배경 설정 옵션 3가지: 단일색상 / 그라데이션 / 이미지 업로드
배경 - 밝기 조절 기능1-3. 텍스트 입력
위치
9개의 위치 중에 텍스트가 배치되길 원하는 지점을 클릭하면 자동으로 정렬이 맞춰진다. 제목과 부제목간의 간격은 따로 조절할 필요 없이(이것도 은근 고민되는 부분!) 제목 폰트 사이즈에 맞춰 자동으로 계산하도록 세팅해 두었다.
폰트
썸네일의 핵심은 뭐니 뭐니 해도 '누르고 싶은 제목(=카피 문구)'일 것이다. 이렇게 고심해서 뽑은 문장이 다른 콘텐츠들 사이에서도 눈에 잘 띄도록 분위기에 맞게 강조할 수 있는 폰트를 선별했다. 우리 타겟 유저를 고려했을 때 폰트가 너무 많으면 오히려 고르기 어렵다고 느낄 수 있어 상황에 맞게 쓸 수 있는 5개의 폰트만 선별했다.(저작권에 자유로운 폰트로!)
a. 스포카한산스: 가장 기본 글씨체로 깔끔한 고딕체. 제목에 사용하기에는 기본 글자 두께가 얇아서 제목에 사용할 경우 조금 더 두껍게 나오도록 조정해두었다. 담백해서 부제목에 사용하기에도 적합하다.
b. 여기어때 잘난체: 각지고 깔끔한 느낌의 글씨체. 두꺼운 폰트라 큰 사이즈로 제목에 사용하면 작은 화면에서도 가독성이 좋다. 제목에 쓰는 것 추천!
c. 학교양심 여행체: 여기어때랑 비슷한 느낌인데 너무 딱딱한 게 싫다! 하면 학교양심 여행체도 좋은 선택지이다. 학교양심 여행체 역시 두꺼워서 큰 사이즈로 제목에 사용하면 가독성 측면에서 유리하다.
d. 배달의 민족 주아체: 역시 제목에 활용할 수 있도록 선별한 글씨체로, 귀여운 느낌을 주고 싶을 때 쓰면 좋다. 개인적으로는 맛집 블로그나 브이로그 같이 일상 관련 콘텐츠에 사용하면 잘 어울릴 것 같다.
e. 더페이스샵 잉크립퀴드체: 손글씨 느낌의 글씨체로 역시 귀여운 느낌이나 감성적인 느낌을 주고 싶을 때 쓰면 좋다. 특히 이런 손글씨 종류의 폰트는 사이즈가 작으면 가독성이 떨어질 수 있어 부제목보다는 제목에 크게 사용하는 것을 추천한다.
외곽선
썸네일의 특성상 가독성이 중요하기 때문에 외곽선 기능을 추가하였다. 어떻게 보면 조금 투머치 기능인가 싶지만, 다년간의 유튜브 및 블로그 운영 경험을 미루어 보았을 때 외곽선이 들어간 글씨가 체감상 3배는 가독성이 좋다. 그래서 이건 욕심 좀 내봤다. 외곽선 꼭 쓰세요!!!
여담인데, 이 기능 구현을 위해서 선우님이 고생 좀 하셨다. 글씨를 두 개 겹쳐서 구현했다나! 여기 개발기도 재밌으니 읽어보시는 걸 추천!
https://sjquant.tistory.com/99
부제목 토글
부제목은 선택사항이다. 설명을 붙이고 싶다면 켜고 끌 수도 있다. 이것도 on/off 여부에 따라 배치는 다 계산해 뒀으니 원하는 대로 선택만 하면 된다.
1-4. 배경 꾸미기
썸네일 테두리를 선택적으로 적용할 수 있는 기능이다. 이런 꾸밈요소가 있으면 아무래도 한번 더 눈길이 가게 되니 취향에 맞게 적용해 보길 바란다.
퀵썸네일만의 차별점
1. 최소한의 설정으로 썸네일을 만들 수 있다.
우리의 타겟 유저는 디자인 경험이 적은 사람들이기 때문에 완성까지의 과정을 단순화하는데 초점을 맞췄다. 최소한의 기능이 오히려 우리만의 무기로 작용할 수 있길 기대해 본다.
2. 내 템플릿을 공유할 수 있다.
우측 상단에 보면 템플릿 공유 기능이 있다. 내가 설정해 둔 설정값을 그대로 친구에게 전달할 수 있어 텍스트만 새로 입력하면 되도록 했다. 이 기능은 친구에게 전달하는 목적으로 활용할 수도 있지만 고정적인 템플릿을 사용할 때에도 활용할 수 있기 때문에 썸네일 제작의 효율성을 높여줄 거라 생각한다.
앞으로의 업데이트 계획
앞으로는 이렇게 만들어진 1) 템플릿을 한곳에서 모아볼 수 있는 기능을 추가해보려 한다. 다른 유저들의 썸네일을 참고하여 내 썸네일을 만들 수도 있고 동일한 템플릿을 복사해서 사용할 수 도 있다. 디자인은 어느 정도 완성된 상태!
두 번째로는 2) 제목 안에서도 여러 색상을 쓸 수 있도록 열어주는 기능을 추가할 계획이다. 이외에도 쓰면서 불편한 점이 있다면 꾸준히 개선해 나가 볼 계획이다.
여담
어느 정도 mvp는 완성했는데 만들고 나니 조금 더 욕심이 나는 것 같다. 개발기를 담은 퀵썸네일 스토리를 한번 재밌게 공유해 보면 어떨까?라는 생각이 막 들기 시작한 참이다. 일단 브런치에 한번 풀어볼까 고민 중!
