Simple Thumbnail
개요
Simple Thumbnail은 디자인 경험 없이도 3초 만에 블로그·유튜브용 썸네일을 만들 수 있는 웹 애플리케이션입니다. 배경(단색·그라데이션·이미지), 텍스트(폰트·크기·색상·레이아웃), 비율을 조합하고 실시간 미리보기로 확인한 뒤 원클릭으로 PNG로 다운로드할 수 있습니다.
테오의 스프린트 14(2023.02.22~02.27)에서 7인 팀(디자이너 1명 + FE 6명)으로 6일간 개발했습니다.
주요 기능
배경 커스터마이징
- 단색 팔레트 + ChromePicker 커스텀 색상 선택
- 7종 프리셋 그라데이션 + 랜덤 그라데이션 생성
- Picsum Photos API 연동 랜덤 이미지 배경
- 로컬 이미지 업로드 (HEIC→JPEG 변환으로 iOS 지원)
- 밝기 조절 오버레이
텍스트 편집
- 최대 3개 텍스트 레이어
- 폰트 선택 (SUIT, 어그로체, 산돌 삼립호빵체 Basic)
- 레이어별 크기·굵기·색상 개별 설정
- 가로 스크롤 버튼 그룹으로 텍스트 레이아웃(정렬·배치) 선택
미리보기·내보내기
- 비율 선택 (1:1, 4:3, 16:9)
- 모든 설정 변경이 실시간 미리보기에 즉시 반영
- html-to-image + downloadjs로 PNG 원클릭 다운로드
기술 스택
| 분류 | 기술 |
|---|---|
| Frontend | React 18, TypeScript, Vite 6 |
| 스타일링 | Tailwind CSS 3, CSS Modules |
| 상태 관리 | Recoil (atom, atomFamily) |
| 이미지 처리 | html-to-image, downloadjs, heic2any |
| UI | react-color (ChromePicker), react-icons, react-toastify |
| 배포 | Cloudflare Workers |
아키텍처
담당 역할
프론트엔드 개발을 담당했습니다.
- 상태 관리 설계: Recoil atom 구조 설계 (배경 색상·이미지, 텍스트 내용·스타일, 비율, 폰트, 레이아웃)
- 컨트롤러 연동 로직: 텍스트·배치·색상·이미지·사이즈 조절 시 미리보기에 실시간 반영되는 데이터 플로우 구현
- 이미지 다운로드: html-to-image로 미리보기 DOM을 PNG로 변환·다운로드하는 내보내기 기능
- 랜덤 이미지: Picsum Photos API 연동으로 랜덤 배경 이미지 기능 구현
회고
6일 스프린트에 7명이 붙은 프로젝트입니다. 배경·텍스트·비율처럼 서로 독립적으로 바뀌는 값을 Recoil의 atom/atomFamily로 잘게 쪼개 두고, 미리보기는 그 값들을 구독만 하도록 만들었습니다. 편집 UI가 늘어나도 미리보기 쪽 코드를 다시 건드리지 않으려는 의도였습니다.
이미지 저장은 캔버스로 다시 그리지 않고 html-to-image로 DOM을 그대로 변환했습니다. 화면에 보이는 것과 저장된 결과가 어긋날 일이 없어서, 기간이 짧을 때는 이 방식이 맞았습니다.