본문 바로가기
나의 웹 도구

나의 도구 #69 | 3초 완성 맞춤 썸네일 제작기 (600px·1080px / 6가지 프레임)

by SuperJoon 2026. 9. 24.

포토샵이나 캔바 없이 브라우저에서 3초 만에 끝내는 무료 썸네일 제작기입니다. 네이버·티스토리 블로그, 유튜브 쇼츠, 인스타그램 등 어디서나 잘리지 않는 표준 1:1 비율로 제작됩니다.

⚡ 간편 사용법, 30초에 익히세요.

  1. 글자 입력: 제목과 부제목을 적고 폰트·크기·색상을 조절합니다.
  2. 배경 선택:
    •  기본: 설정 없이 단색 또는 스타일리시한 그라데이션 클릭
    •  사진 (선택): Pixabay 개인 키(API Key) 입력 시 수백만 장의 고화질 무료 사진 검색 지원
  3. 다운로드: 정방형·원형 등 6가지 모양 중 1개 고른 뒤 [PNG저장] 클릭! (일반용 600px / 고화질용 1080px 선택 가능)

✨ 핵심 기능 요약

  • 다국어 완벽 지원: 한국어 / 영어 언어 전환 지원
  • 6가지 프레임: 기본 사각형부터 원형, 타원 등 다채로운 모양 제공
  • 600px일반/1080px 고화질 지원: 모바일 및 고해상도 화면에서도 글자 깨짐 없음
  • 무설치 / 무로그인: 회원가입이나 프로그램 설치 없이 100% 무료 사용
🎨 [SuperJoon Lab] HTML5 캔버스 이미지 합성 및 픽셀 렌더링 파이프라인 아키텍처 상세 분석 원리 보기 ▼

1. 시스템 개발 배경 및 그래픽 처리 아키텍처

본 브라우저 기반 그래픽 웹 애플리케이션은 서버 부하 및 이미지 유출 우려를 원천 차단하기 위해, 모든 래스터화(Rasterization)와 텍스트 렌더링을 사용자 단말기의 그래픽 가속(GPU) 및 HTML5 Canvas API 환경에서 순수 처리하도록 SuperJoon Lab에서 구축한 경량화 디자인 엔진입니다.

2. 핵심 렌더링 파이프라인 및 레이어 합성 알고리즘

  • 다층 레이어 복합 렌더링(Composite Layers): 배경 레이어(단색/선형 그라데이션/외부 비동기 이미지), 클리핑 마스크 레이어(6가지 기하학적 도형 패스), 타이포그래피 레이어(폰트 크기, 행간, 그림자 오프셋)를 순차 합성합니다.
  • 고해상도 픽셀 스케일링(DPI Normalization): 레티나 디스플레이 및 고해상도 환경에서 텍스트가 번지는 현상을 방지하기 위해 캔버스 내부 논리 해상도를 2배(1080x1080)로 오버샘플링한 후 고품질 PNG 바이너리 Blob으로 인코딩합니다.
  • CORS 우회 및 이미지 프록시 처리: 외부 이미지(Pixabay) 연동 시 발생하는 브라우저의 캔버스 오염(Tainted Canvas) 보안 제약을 안전하게 준수하도록 Cross-Origin Anonymous 파이프라인을 구축했습니다.

3. 무서버(Serverless) 프라이버시 보안 구조

사용자가 제작한 완성 썸네일 이미지 및 입력된 API 키는 웹 서버로 업로드되지 않으며, 오직 브라우저 내 메모리 URL(URL.createObjectURL)을 통해 단말기로 즉시 다이렉트 다운로드됩니다. 개인정보 및 디자인 자산의 보안을 완벽히 보장합니다.

🔑 (선택) 사진 배경 검색용 API Key 1분 만에 받는 법

  1. API 문서 페이지 이동: 로그인한 상태에서 Pixabay API 안내 페이지로 이동합니다.
  2. 내 전용 키 복사: 화면을 조금만 내리면 초록색 박스 안에 key: "12345678-xxxx..." 형태로 내 전용 번호가 보입니다. 이 문자열을 복사합니다.
  3. 제작기에 입력: 위 제작기 화면의 'Pixabay API Key' 칸에 붙여넣으시면 즉시 수백만 장의 무료 사진을 검색해 배경으로 쓰실 수 있습니다.