무료 웹도구 #69 | 3초 만에 끝내는 무료 썸네일 제작기, 막강한 성능
포토샵이나 캔바 없이 브라우저에서 3초 만에 끝내는 무료 썸네일 제작기입니다. 네이버·티스토리 블로그, 유튜브 쇼츠, 인스타그램 등 어디서나 잘리지 않는 표준 1:1 비율로 제작됩니다.
⚡ 간편 사용법 (30초 만에 익히기)
- 글자 입력: 제목과 부제목을 적고 폰트·크기·색상을 조절합니다.
-
배경 선택:
- 기본: 별도 설정 없이 단색 또는 스타일리시한 그라데이션 클릭
- 사진 (선택): Pixabay 개인 키(API Key) 입력 시 수백만 장의 고화질 무료 사진 검색 지원
- 다운로드: 정방형·원형 등 6가지 모양 중 1개를 고른 뒤 [PNG저장] 클릭! (일반용 600px / 고화질용 1080px 선택 가능)
🖌️ HTML5 Canvas 2D 그래픽 렌더링 파이프라인 및 비동기 API 처리 구조 (기술 분석)
1. 레티나 고해상도 디바이스 픽셀 비율(DPR) 업스케일링
본 툴은 모바일 및 4K 고밀도 디스플레이에서 글자 번짐(Blurring)을 원천 차단하기 위해 window.devicePixelRatio 기반 2단계 스케일링 알고리즘을 사용합니다. 물리 캔버스 버퍼를 가상 캔버스의 2배~3배로 오버샘플링한 후 CSS 렌더링 뷰포트로 다운샘플링하여 1080x1080 고해상도 PNG를 왜곡 없이 무손실 추출합니다.
2. Pixabay REST API 비동기 파이프라인 및 CORS 완화
사용자가 입력한 검색어 토큰을 URI 인코딩하여 Pixabay Image API 엔드포인트로 비동기(Fetch/XHR) 질의를 전달합니다. 응답 수신된 웹 이미지 리소스의 캔버스 삽입 시 발생하는 Canvas Tainted(보안 오염) 이슈를 방지하기 위해 Image.crossOrigin = 'anonymous' 핸들러를 장착하여 완벽한 클라이언트 측 파일 직렬화(Blob 변환)를 달성합니다.
3. 텍스트 바운딩 박스 자동 개행(Auto-wrapping) 알고리즘
다국어 입력 시 캔버스 너비를 초과하는 텍스트 문자열에 대해 ctx.measureText() 함수를 활용한 탐욕적(Greedy) 줄바꿈 연산을 수행하여 어떤 길이의 제목이라도 지정된 사각 영역 내에 미려하게 자동 배치합니다.
✨ 핵심 기능 요약
- 다국어 완벽 지원: 한국어 / 영어 언어 전환 지원
- 6가지 프레임: 기본 사각형부터 원형, 타원 등 다채로운 모양 제공
- 600px / 1080px 고화질 지원: 모바일 및 고해상도 화면에서도 글자 깨짐 없음
- 무설치 / 무로그인: 회원가입이나 프로그램 설치 없이 100% 무료 사용
🔑 (선택) 사진 배경 검색용 API Key 1분 만에 받는 법
- API 문서 페이지 이동: 로그인한 상태에서 Pixabay API 안내 페이지로 이동합니다.
- 내 전용 키 복사: 화면을 조금만 내리면 초록색 박스 안에
key: "12345678-xxxx..."형태로 내 전용 번호가 보입니다. 이 문자열을 복사합니다. - 제작기에 입력: 위 제작기 화면의 'Pixabay API Key' 칸에 붙여넣으시면 즉시 수백만 장의 무료 사진을 검색해 배경으로 쓰실 수 있습니다.