placeholder 이미지
크기별 더미 이미지.
설명
지정한 크기와 색상의 더미 이미지를 만들어 다운로드합니다. 웹·앱 디자인 시안의 이미지 자리표시용으로 활용하세요.
관련 도구
Placeholder 이미지 생성기는 웹·앱 개발 및 디자인 작업 중 실제 이미지가 준비되기 전에 레이아웃을 확인하기 위해 쓰는 더미 이미지를 만드는 도구입니다. 원하는 크기와 배경색, 텍스트 색을 지정하면 즉시 이미지 파일이나 URL을 생성해 줍니다. 프로토타이핑, 목업 제작, HTML 레이아웃 테스트 등 실제 이미지가 없어도 구조를 확인해야 하는 모든 상황에 유용합니다.
사용 방법
너비와 높이를 픽셀 단위로 입력합니다. 배경색과 텍스트 색상을 HEX 코드나 색상 선택기로 지정하고, 이미지 위에 표시할 레이블 텍스트(예: '600x400', '상품 이미지 예정')를 입력합니다. 생성 버튼을 누르면 이미지 미리보기와 함께 다운로드 링크 또는 외부 URL이 표시됩니다. HTML에서는 img 태그의 src에 생성된 URL을 바로 넣거나, 이미지 파일을 다운로드해 로컬에서 사용할 수 있습니다.
개발·디자인 워크플로에서의 활용
Figma, Adobe XD 등 디자인 툴에서 목업을 만들 때 실제 사진을 구하는 데 시간을 쓰지 않고 더미 이미지를 채워 넣으면 레이아웃 검토에만 집중할 수 있습니다. HTML/CSS 코딩 단계에서 이미지 컨테이너의 크기나 비율을 확인할 때도 유용합니다. 팀 내 디자인 리뷰나 클라이언트 시안 제출 시 '이 자리에 어떤 이미지가 들어갈 예정인지'를 텍스트로 표시한 더미 이미지를 넣으면 커뮤니케이션이 명확해집니다. 반응형 레이아웃에서 서로 다른 비율(16:9, 4:3, 1:1 등)의 이미지가 어떻게 표시되는지 빠르게 확인할 때도 사용합니다.
알아두면 좋은 점
외부 placeholder 서비스(placehold.co, dummyimage.com 등)는 URL 형태로 제공되어 인터넷 연결이 없는 환경에서는 이미지가 표시되지 않습니다. 이 도구에서 파일로 직접 다운로드하면 오프라인 환경에서도 안정적으로 사용할 수 있습니다. 색상을 프로젝트 브랜드 색상으로 맞추면 실제 디자인과 비슷한 분위기의 목업을 만들 수 있습니다. 가로×세로 치수를 이미지 위에 자동 표시하도록 설정하면 치수 확인 메모 없이도 협업이 편해집니다.
자주 묻는 질문
생성된 이미지를 실제 서비스에 그대로 사용해도 되나요?
SVG 형식으로도 생성할 수 있나요?
CSS의 aspect-ratio와 연계하려면 어떻게 하나요?
배경색에 그라디언트를 적용할 수 있나요?
매우 큰 크기(예: 5000x5000px)도 생성되나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
이 도구로 무엇을 만드나
가로·세로 픽셀값과 배경색, 그 위에 표시할 문구(기본값은 "가로x세로")를 지정하면 딱 그 크기의 더미 이미지를 즉석에서 그려줍니다. 아직 실제 사진이나 그래픽이 준비되지 않은 자리에 임시로 끼워 넣어 레이아웃을 먼저 확인할 때 쓰는 회색 상자 이미지가 바로 이것입니다. 만든 이미지는 PNG 파일로 내려받아 프로젝트 폴더에 넣거나, 화면에서 바로 눈으로 확인할 수 있습니다.
브라우저 안에서 어떻게 그려지나
입력한 크기만큼 HTML <canvas> 영역을 잡고, 먼저 배경색으로 사각형 전체를 칠한 뒤 그 중앙에 텍스트를 얹는 방식입니다. 글자 크기는 이미지의 짧은 변을 기준으로 자동 비례해 잡히므로 100x100이든 1200x630이든 문구가 상자를 넘치지 않습니다. 모든 계산과 그리기가 여러분 기기의 브라우저에서 끝나기 때문에 이미지가 외부 서버로 전송되지 않고, 인터넷 연결이 끊긴 상태에서도 동작합니다. 흔히 쓰이는 placehold.co 같은 외부 URL 방식과 달리 요청 때마다 네트워크를 타지 않는다는 점이 다릅니다.
자주 쓰는 규격
| 용도 | 권장 크기(px) |
|---|---|
| 정사각 썸네일·아바타 | 150x150, 300x300 |
| 블로그 본문 대표 이미지 | 800x450 (16:9) |
| 오픈그래프(카톡·페북 공유 카드) | 1200x630 |
| 가로 배너 | 728x90, 970x250 |
| 모바일 전면 | 1080x1920 (9:16) |
비율만 맞으면 되는 반응형 테스트라면 실제 표시 크기보다 작게 만들어도 늘어나 보이니, 될 수 있으면 화면에 실제로 들어갈 크기와 같은 픽셀값을 넣는 편이 정확합니다.
실전 팁
배경색을 카드나 섹션의 실제 브랜드색과 비슷하게 지정해 두면, 나중에 진짜 이미지로 교체했을 때 톤이 확 튀는지 미리 감을 잡을 수 있습니다. 반대로 어떤 칸이 아직 미완성인지 한눈에 표시하고 싶다면 형광 분홍이나 노랑처럼 눈에 띄는 색으로 채워 "여기 채워야 함" 표식처럼 쓰는 방법도 있습니다. 문구 칸에 크기 대신 "banner", "profile"처럼 자리 이름을 적어 두면 여러 더미를 동시에 만들 때 어느 자리 것인지 구분하기 좋습니다.
자주 묻는 질문
만든 이미지가 서버에 저장되나요?
아니요. 그리기와 다운로드가 모두 브라우저 안에서 처리되며, 파일은 여러분이 저장 버튼을 눌러야 기기에 내려받아집니다. 외부로 업로드되지 않습니다.
배경을 투명하게 만들 수 있나요?
이 도구는 배경색을 채워 넣는 방식이라 기본 결과물은 불투명한 단색 배경입니다. 투명 배경(알파 채널)이 필요하면 별도의 이미지 편집 도구를 쓰는 편이 맞습니다.
JPG로도 받을 수 있나요?
결과는 PNG 형식으로 제공됩니다. JPG가 꼭 필요하면 받은 PNG를 이미지 변환 도구로 한 번 더 바꾸면 됩니다.
만들 수 있는 최대 크기는 얼마인가요?
정해진 상한은 두지 않았지만, 수천 픽셀을 넘어서면 브라우저가 캔버스를 그리는 데 시간이 걸리거나 기기 메모리에 따라 실패할 수 있습니다. 실제 필요한 표시 크기 정도로 지정하는 것이 안전합니다.