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