이미지
Placeholder Image Generator
디자인 목업·와이어프레임용 더미 이미지를 원하는 크기·색상으로 즉시 생성합니다.
크기
색상
텍스트 (선택)
비워두면 자동으로 "가로 × 세로"가 표시됩니다.
SVG 코드
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600"> <rect width="800" height="600" fill="#e5e7eb"/> <text x="50%" y="50%" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif" font-size="60" font-weight="600" fill="#6b7280" text-anchor="middle" dominant-baseline="central">800 × 600</text> </svg>
Data URI
data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20600%22%20width%3D%22800%22%20height%3D%22600%22%3E%0A%20%20%3Crect%20width%3D%22800%22%20height%3D%22600%22%20fill%3D%22%23e5e7eb%22%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20font-family%3D%22-apple-system%2CBlinkMacSystemFont%2C'Segoe%20UI'%2Csans-serif%22%20font-size%3D%2260%22%20font-weight%3D%22600%22%20fill%3D%22%236b7280%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E800%20%C3%97%20600%3C%2Ftext%3E%0A%3C%2Fsvg%3E
사용 방법
- 크기를 직접 입력하거나 프리셋(썸네일·OG·정사각 등)을 선택합니다.
- 배경·텍스트 색상을 선택합니다. 텍스트는 비워두면 크기 정보가 자동 표시됩니다.
- PNG·SVG 다운로드 또는 Data URI 복사로 즉시 사용할 수 있습니다.
- Data URI는 HTML
<img src="...">에 그대로 붙여넣으면 됩니다.
더미 이미지 생성기 자세히 알아보기
디자인 목업·와이어프레임·프로토타입에서 실제 이미지가 들어갈 자리를 채우는 회색 박스(플레이스홀더)를 만드는 도구입니다. 가로·세로 사이즈만 정하면 즉시 PNG와 SVG로 다운로드할 수 있고, Data URI로 복사해 HTML에 바로 붙여 넣을 수도 있습니다.
더 알아보기접기
썸네일, OG 이미지, 정사각 프로필 같은 자주 쓰는 사이즈는 프리셋으로 제공하며, 배경색과 텍스트 색을 자유롭게 바꿀 수 있어 디자인 톤에 맞게 사용 가능합니다. 외부 placeholder 서비스에 의존하지 않고 오프라인에서도 동작합니다.
이럴 때 사용하세요
- •Figma·웹 프로토타입에서 실제 이미지 확보 전 자리만 잡아둘 때
- •이메일 템플릿이나 문서 시안에 임시 이미지를 끼워 넣을 때
- •이미지 로딩 테스트나 레이아웃 디버깅용 더미 데이터가 필요할 때
- •강의·블로그에 코드 예제로 보여줄 자리를 표시할 때
더미 이미지 생성기 자주 묻는 질문
PNG와 SVG 중 어느 쪽이 좋나요?
확대·축소가 잦거나 선명함이 중요하면 SVG, 즉시 표시되는 일반 이미지가 필요하면 PNG가 편합니다. SVG는 텍스트가 항상 또렷하게 유지됩니다.
Data URI는 어디에 쓰나요?
HTML img 태그의 src에 그대로 붙여 넣으면 별도 파일 없이 이미지가 표시됩니다. CSS 배경 이미지(background-image: url(...))에도 사용할 수 있습니다.
텍스트를 비워 두면 어떻게 되나요?
이미지 가운데에 "가로 × 세로" 형식으로 크기 정보가 자동 표시됩니다. 어떤 사이즈인지 한눈에 보이므로 디자이너끼리 시안을 주고받을 때 편리합니다.
via.placeholder.com 같은 외부 서비스와 차이가 있나요?
외부 서비스는 인터넷 연결과 트래픽 제한에 의존하지만, 본 도구는 브라우저에서 즉시 생성되어 오프라인에서도 동작하고 차단될 위험이 없습니다.
이미지에 노이즈나 패턴을 넣을 수도 있나요?
현재는 단색 배경만 지원합니다. 좀 더 풍부한 더미가 필요하면 SVG를 다운로드 한 뒤 직접 편집해 패턴을 추가할 수 있습니다.