liminfoPlaceholder Image
개발용 플레이스홀더 이미지 생성
미리보기 (640 x 480)
Placeholder Image 소개
플레이스홀더 이미지 생성기는 HTML5 Canvas API를 사용하여 커스텀 플레이스홀더 이미지를 PNG 파일로 즉시 생성하는 무료 브라우저 도구입니다. 너비와 높이(최대 4096×4096 픽셀)를 지정하고, 배경색과 텍스트 색상을 선택하고, 선택적으로 커스텀 레이블을 추가하면 캔버스가 즉시 렌더링되어 바로 다운로드할 수 있습니다.
웹 개발자, UI/UX 디자이너, 프론트엔드 엔지니어, 콘텐츠 제작자들이 디자인 및 개발 워크플로 전반에서 플레이스홀더 이미지를 활용합니다. 와이어프레임의 빈 이미지 슬롯을 채우고, 실제 자산이 준비되기 전 개발 단계에서 레이아웃 위치를 점유하며, 목업, 문서, 프레젠테이션에서 대체 이미지로 사용합니다. 이 도구는 외부 요청 없이 브라우저 내에서 완전히 실행되어 placeholder.com 같은 외부 서비스를 대체합니다.
도구는 HTML5 Canvas API를 사용합니다. 선택한 배경색으로 캔버스를 채우고, 레이블 텍스트(커스텀 텍스트가 없으면 "640 x 480" 같은 크기 문자열이 기본값)를 짧은 측의 1/8 크기(최소 12px) 폰트로 중앙에 렌더링합니다. 캔버스는 toBlob()으로 PNG로 내보내지고 placeholder_{width}x{height}.png 파일명으로 다운로드됩니다.
주요 기능
- 1×1부터 4096×4096 픽셀까지의 커스텀 너비와 높이, 숫자 입력으로 정밀 제어
- 일반적인 사용 사례를 커버하는 7가지 크기 프리셋: 150×150, 300×200, 640×480, 800×600, 1024×768, 1200×630(Open Graph), 1920×1080(Full HD)
- 전체 색상 스펙트럼에서 선택할 수 있는 네이티브 컬러 피커를 통한 배경색 지정
- 최대 가독성을 위해 독립적으로 커스터마이즈 가능한 텍스트 색상 피커
- 커스텀 텍스트 레이블 입력 — 비워두면 이미지 크기를 자동 표시(예: "640 x 480")
- 어떤 해상도에서도 읽기 쉬운 레이블을 위해 캔버스 크기에 비례하여 자동 조정되는 폰트 크기
- 설정 변경 시 다운로드 전에 실시간으로 업데이트되는 라이브 캔버스 미리보기
- Canvas toBlob()을 통한 PNG 다운로드 — 서버 없음, 업로드 없음, 파일명에 크기 포함
자주 묻는 질문
플레이스홀더 이미지란 무엇이고 개발자들이 왜 사용하나요?
플레이스홀더 이미지는 웹 개발이나 디자인 중에 실제 이미지가 들어갈 공간을 임시로 채우는 이미지입니다. 레이아웃 이동을 방지하고, 와이어프레임에서 비율 시각화를 돕고, 목업과 문서에 활용됩니다. 일반적으로 중립적인 회색 배경에 이미지 크기를 레이블로 표시하는 것이 관례입니다.
이 도구가 생성하는 이미지 형식은 무엇인가요?
이 도구는 HTML5 Canvas API의 toBlob() 메서드를 통해 PNG(Portable Network Graphics) 파일을 생성합니다. PNG는 무손실 형식으로 완전한 투명도를 지원하며, 브라우저와 디자인 도구 모두와 호환됩니다. 파일명 형식은 placeholder_{width}x{height}.png입니다.
만들 수 있는 최대 이미지 크기는 얼마인가요?
도구는 각 치수당 1픽셀부터 4096픽셀까지 지원합니다. 현대 브라우저의 Canvas 메모리 한계는 일반적으로 16,384×16,384 픽셀까지 허용하지만, 4096×4096은 4K 해상도를 포함한 모든 실용적인 플레이스홀더 사용 사례를 커버합니다.
생성된 플레이스홀더 이미지를 상업 프로젝트에 사용할 수 있나요?
네. 이 도구로 생성된 이미지는 웹 표준 API를 사용하여 기기에서 완전히 생성됩니다. 워터마크, 라이선스, 사용 제한이 없습니다. 생성된 PNG는 상업적 또는 개인 프로젝트 어디에서나 자유롭게 사용할 수 있습니다.
placeholder.com이나 via.placeholder.com과 어떻게 다른가요?
placeholder.com 같은 서비스는 서버에서 이미지를 제공하며 HTML에 이미지 URL을 포함하는 외부 요청이 필요합니다. 이 도구는 Canvas API를 사용하여 브라우저 내에서 로컬로 이미지를 생성합니다 — 외부 의존성 없음, 네트워크 요청 없음, URL 기반 통합 없음. 독립적인 PNG 파일을 다운로드합니다.
크기 프리셋은 어떤 것들이 있나요?
프리셋은 가장 일반적인 플레이스홀더 크기를 커버합니다: 150×150(썸네일/아바타), 300×200(소형 카드 이미지), 640×480(VGA/표준), 800×600(SVGA), 1024×768(XGA), 1200×630(Open Graph/소셜 공유 이미지), 1920×1080(Full HD/히어로 이미지). 프리셋 선택 시 너비와 높이 필드가 즉시 채워집니다.
레이블의 폰트 크기는 어떻게 결정되나요?
폰트 크기는 Math.max(12, Math.min(너비, 높이) / 8)로 계산됩니다. 즉, 짧은 쪽 크기의 1/8이며 최소 12px입니다. 어떤 이미지 크기에서도 레이블이 항상 읽기 쉽고 비례적으로 표시됩니다. 640×480 이미지는 60px 폰트, 150×150 썸네일은 18px 폰트가 됩니다.
투명 배경 플레이스홀더를 만들 수 있나요?
현재 도구는 컬러 피커로 선택한 단색으로 배경을 채웁니다. 텍스트를 그리기 전에 항상 선택한 색상으로 캔버스 배경을 채우기 때문에 순수 투명 배경은 지원되지 않습니다. 투명 PNG가 필요하다면 다운로드 후 PNG 편집기를 사용하여 배경을 제거할 수 있습니다.