더미 이미지(플레이스홀더)란?
더미 이미지는 웹·앱 화면을 디자인하거나 퍼블리싱할 때, 아직 실제 사진이 준비되지 않은 자리를 임시로 채우는 자리표시(placeholder) 이미지입니다. 보통 회색 배경 위에 가로×세로 크기를 적어 두어 레이아웃 비율과 영역을 한눈에 확인할 수 있게 합니다. 실제 사진을 넣기 전이라도 화면이 어떻게 배치되는지 미리 볼 수 있어, 웹·앱 디자인과 퍼블리싱 과정에서 널리 쓰입니다.
사용 방법
- 원하는 가로·세로 크기를 입력하거나 위쪽 프리셋을 선택합니다.
- 배경색·글자색과 표시 문구를 지정합니다. 문구를 비우면 자동으로
가로×세로가 표시됩니다. - 포맷(PNG/JPG)을 고르고 다운로드 버튼을 누르면 이미지가 저장됩니다.
코드에 넣을 때
다운로드한 파일을 프로젝트에 넣고 <img src="dummy-600x400.png" alt=""> 처럼 사용하면 됩니다. CSS 배경으로 쓸 때는 background-image: url('dummy-600x400.png'); 형태로 넣습니다. '사용 메모 복사' 버튼을 누르면 크기가 지정된 <img> 태그가 클립보드에 복사되어 바로 붙여 넣을 수 있습니다. 실제 이미지가 준비되면 경로만 교체하면 됩니다.
이런 때 사용하세요
- 화면 설계·퍼블리싱 — 사진이 들어갈 자리의 크기와 비율을 미리 잡아 레이아웃을 검토합니다.
- 썸네일·배너 테스트 — 실제 소재 없이 카드·목록의 이미지 칸이 어떻게 보이는지 확인합니다.
- OG 이미지 자리 — 1200×630 같은 공유용 규격을 임시로 채워 두고 나중에 교체합니다.
- 발표·문서 — 슬라이드나 기획서에서 이미지가 들어갈 영역을 크기와 함께 표시합니다.
배경색과 글자색을 브랜드 색으로 맞추면 단순한 자리표시를 넘어 시안에 어울리는 임시 이미지로도 쓸 수 있습니다. 표시 문구에 '메인 배너', '상품 이미지'처럼 용도를 적어 두면 어느 자리인지 한눈에 알아보기 좋습니다.
왜 브라우저에서 만드나요
예전에는 외부 플레이스홀더 서비스의 주소를 <img src>에 걸어 두는 방식이 흔했지만, 그 서비스가 느려지거나 문을 닫으면 화면이 깨지고 매번 외부 요청이 오가는 단점이 있습니다. 이 도구는 이미지를 브라우저의 canvas로 직접 그려 파일로 내려받으므로, 외부 의존 없이 프로젝트 안에 넣어 쓸 수 있고 인터넷 연결이 없어도 동작합니다. 어떤 서버로도 데이터가 전송되지 않습니다.
주의점과 팁
가로·세로는 각각 최대 4000px까지 권장합니다. 문구가 칸보다 길면 자동으로 글자 크기를 줄여 넘치지 않게 그립니다. 배경색과 글자색의 명도 차이를 충분히 두면 어떤 크기에서도 문구가 또렷하게 보입니다. 웹에 올릴 단색 자리표시 이미지는 보통 PNG로도 용량이 매우 작습니다.
자주 묻는 질문
더미 이미지(플레이스홀더)는 어디에 쓰나요?
웹·앱 화면을 디자인할 때 아직 실제 사진이 없을 때 자리만 채우는 임시 이미지로 씁니다. 지정한 가로×세로 크기와 문구가 그려져 레이아웃을 확인하기 좋습니다.
크기·색상·문구를 바꿀 수 있나요?
네. 가로·세로 픽셀, 배경색, 글자색, 표시 문구를 자유롭게 지정할 수 있습니다. 문구를 비우면 자동으로 '가로×세로' 크기가 표시됩니다.
만들 수 있는 최대 크기는 얼마인가요?
가로·세로 각각 최대 4000px까지 권장합니다. 600×400, OG 1200×630, 정사각 1080, FHD 1920×1080 같은 자주 쓰는 크기는 프리셋 버튼으로 바로 넣을 수 있습니다.
이미지가 서버로 업로드되나요?
아니요. 이미지는 HTML5 canvas로 브라우저에서 직접 그려지며 어떤 서버로도 전송되지 않습니다. 인터넷 연결 없이도 동작합니다.
PNG와 JPG 중 무엇을 골라야 하나요?
투명 배경이나 선명한 글자가 필요하면 PNG, 파일 용량을 줄이고 싶으면 JPG가 적합합니다. 단색 배경의 자리표시 이미지는 보통 PNG로 충분히 작습니다.