플레이스홀더 이미지 생성기 - 더미 이미지 만들기 온라인
텍스트, 색상, 크기를 지정한 플레이스홀더 이미지 생성. PNG, SVG, WebP로 내보내기 — 웹 디자인 목업 및 프로토타이핑용.
자주 묻는 질문
플레이스홀더 이미지 생성기란 무엇인가요?
플레이스홀더 이미지 생성기는 웹 개발, UI 디자인, 프로토타이핑에 사용할 수 있는 임시 이미지를 사용자 정의 크기, 색상, 텍스트로 생성하는 온라인 도구입니다. 개발 초기 단계에서 실제 사진이나 그래픽 대신 실제 콘텐츠가 들어갈 위치를 나타내는 시각적 대체물로 사용됩니다. 일반적으로 치수(예: "300 × 200")를 표시하여 개발자가 레이아웃에서 이미지 크기를 쉽게 식별할 수 있습니다.
이 도구를 어떻게 사용하나요?
1. 너비와 높이 입력란을 사용하거나 프리셋(소셜 미디어, 웹, 화면 크기, 광고 크기)에서 원하는 이미지 크기를 설정합니다. 2. 색상 선택기를 사용하거나 HEX 값을 입력하여 배경색과 텍스트 색상을 선택합니다. 3. 선택적으로 사용자 정의 텍스트를 입력합니다(비워두면 크기가 자동 표시). 4. 글꼴 크기를 조정합니다("자동"으로 유지하면 자동 크기 조정). 5. 캔버스에서 실시간으로 미리보기합니다. 6. 내보내기 형식(PNG, JPEG, SVG, WebP)을 선택하고 파일을 다운로드하거나 Data URI/HTML 태그/CSS 배경으로 복사합니다.
내 데이터는 안전한가요? 서버로 전송되나요?
데이터는 100% 안전하며 브라우저를 벗어나지 않습니다. placehold.co나 placeholder.com과 같은 URL 기반 서비스와 달리, 이 도구는 HTML5 Canvas API를 사용하여 이미지를 완전히 클라이언트 측에서 렌더링합니다. 이미지 데이터, 크기, 텍스트, 색상 등 어떤 정보도 서버로 전송되지 않습니다. 페이지가 로드된 후에는 완전히 오프라인으로 작동합니다.
PNG, JPEG, SVG, WebP 형식의 차이점은 무엇인가요?
PNG는 무손실 압축으로 선명한 텍스트와 깨끗한 가장자리를 제공하여 플레이스홀더 이미지에 가장 적합합니다. 투명도를 지원합니다. JPEG는 더 작은 파일 크기를 생성하지만 손실 압축을 사용하여 텍스트 주위에 아티팩트가 발생할 수 있습니다. SVG는 크기에 관계없이 가장 작은 파일 크기(~0.5 KB)로 무한 확장 가능한 벡터 이미지를 생성합니다. WebP는 PNG와 JPEG보다 더 나은 압축을 제공하면서 좋은 품질을 유지합니다.
Data URI란 무엇이고 왜 사용하나요?
Data URI는 외부 파일을 링크하는 대신 이미지 데이터를 base64로 인코딩된 문자열로 HTML이나 CSS에 직접 삽입하는 방법입니다. 예: <img src="data:image/png;base64,iVBOR...">. 별도의 이미지 파일이 필요 없고, 서버 없이 작동하며, CodePen, JSFiddle 또는 인라인 HTML에 직접 붙여넣을 수 있어 프로토타이핑에 유용합니다. 단점은 HTML 파일 크기가 증가하고 브라우저에서 별도로 캐시되지 않는다는 것입니다.
placehold.co나 placeholder.com 대신 이 도구를 사용해야 하는 이유는?
placehold.co와 같은 URL 기반 서비스는 편리하지만 인터넷 연결이 필요하고 외부 서버에 의존합니다. 이 도구는 브라우저에서 로컬로 이미지를 생성하므로: (1) 오프라인에서 작동하고, (2) 타사 서비스에 의존하지 않으며, (3) 네트워크 지연 없이 즉시 생성되고, (4) 사용 제한이 없으며, (5) 디자인 치수가 외부 서버로 전송되지 않습니다. 외부 서비스 사용이 제한될 수 있는 기업 환경에 이상적입니다.
고해상도(레티나) 플레이스홀더 이미지를 생성할 수 있나요?
네. 내보내기 설정에서 "레티나 (2x)" 토글을 활성화하세요. 이렇게 하면 지정된 크기의 2배로 내부적으로 렌더링됩니다(예: 300×200 플레이스홀더가 600×400 픽셀이 됩니다). 시각적 콘텐츠는 원래 크기로 유지됩니다. 이를 통해 Apple 레티나 스크린과 같은 고DPI 디스플레이에서 선명한 렌더링을 보장합니다.
코드 예제
// Placeholder Image Generator
function generatePlaceholder({ width = 300, height = 200, bgColor = '#CCCCCC', textColor = '#969696', text = '' } = {}) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
// Draw centered text
const displayText = text || `${width} × ${height}`;
const fontSize = Math.max(12, Math.min(width * 0.8 / (displayText.length * 0.6), height * 0.4, 200));
ctx.fillStyle = textColor;
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(displayText, width / 2, height / 2);
return canvas;
}
// Download as PNG
const canvas = generatePlaceholder({ width: 800, height: 600, text: 'Hero Image' });
canvas.toBlob(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'placeholder-800x600.png';
a.click();
}, 'image/png');
// Get as data URI
console.log(canvas.toDataURL('image/png'));