플레이스홀더 이미지 생성기

플레이스홀더 이미지는 최종 사진이나 아트워크가 준비되지 않은 동안 임시로 사용하는 그래픽입니다. 대개 채워야 할 슬롯의 정확한 픽셀 크기에 맞는 단색 직사각형으로, "600 × 400"처럼 크기가 표시되는 경우가 많습니다. 디자이너와 개발자는 실제 이미지가 도착하기 전에 레이아웃이 완성된 것처럼 보이도록 목업, 와이어프레임, 프로토타입에 삽입합니다. 더미 이미지, 사진 플레이스홀더, 목업 이미지라고도 불립니다.

<img> 태그에 이미지를 연결하면 됩니다. 별도 파일을 호스팅할 필요 없이 가장 독립적으로 사용하는 방법은 데이터 URI입니다. 예: <img src="data:image/svg+xml,…" width="600" height="400" alt="플레이스홀더">. 여기서 '<img>' 탭을 클릭하고 복사하면 데이터 URI와 이미 입력된 너비·높이가 포함된 전체 태그가 클립보드에 복사되어 바로 붙여넣을 수 있습니다. 다운로드한 파일을 저장한 뒤 <img src="/img/placeholder-600x400.png">처럼 일반적인 방식으로 참조할 수도 있습니다.

네, 그리고 개인 정보 보호 측면에서 더 뛰어납니다. placehold.co, via.placeholder.com, dummyimage.com은 모두 자체 서버에서 이미지를 제공하므로 네트워크 요청이 추가되고, 속도 제한에 걸릴 수 있으며, 해당 서비스가 어떤 페이지에서 이미지를 핫링크하는지 추적합니다. UtiloKit은 플레이스홀더 이미지를 브라우저 내에서 완전히 생성하므로 기기 밖으로 요청이 전혀 나가지 않습니다. 다운로드 가능한 파일이나 오프라인에서도 작동하는 독립적인 데이터 URI를 제공하며, 외부 서비스가 다운되어도 절대 깨지지 않습니다.

플레이스홀더 이미지는 웹사이트·앱 목업, 와이어프레임, 이메일 템플릿, 디자인 핸드오프, 그리고 실제 에셋이 아직 제작 중인 프런트엔드 개발에 사용됩니다. 정확한 레이아웃 공간을 확보해 레이아웃 이동(CLS)을 방지하고, 반응형 중단점 테스트를 돕고, CMS 템플릿과 컴포넌트 라이브러리의 데모 콘텐츠를 채웁니다. 개발 중에 1280×720 박스 하나가 그리드의 모든 동영상 썸네일 역할을 하면, 실제 에셋이 없어도 전체 팀이 레이아웃을 검토할 수 있습니다.

실제 이미지가 로드될 때 레이아웃이 이동하지 않도록 채워야 할 슬롯의 정확한 픽셀 크기에 맞추세요. 일반적인 크기: 소셜·OG 공유 이미지용 1200×630, 인스타그램 정사각형용 1080×1080, 동영상 썸네일용 1280×720, 아바타용 256×256, 전체 너비 히어로 배너용 1920×1080, 리더보드 광고용 728×90. 여기서 크기 및 화면비 프리셋을 사용해 클릭 한 번으로 설정하거나, 최대 4000px까지 원하는 너비와 높이를 직접 입력하세요.

텍스트 필드에 레이블을 입력합니다. 예: "히어로", "아바타", "광고 슬롯 300×250". 비워두면 이미지가 자체 크기(예: "600 × 400")를 자동으로 표시합니다. 텍스트 색상과 글꼴 크기도 설정할 수 있어 목업의 각 슬롯이 무엇을 나타내는지 명확히 표시됩니다. 이는 클라이언트가 최종 에셋 없이도 각 이미지 영역이 무엇을 나타내는지 이해해야 하는 디자인 검토 시 특히 유용합니다.

텍스트가 있는 단색 박스라면 SVG가 대개 최선입니다. 용량이 수백 바이트에 불과하고, 어떤 크기에서도 선명하며, 데이터 URI로 깔끔하게 삽입할 수 있어 웹에 이상적입니다. 래스터 파일이 필요하면 PNG(투명도 지원), 사진 형식이 필요하면 JPG, 가장 작은 래스터 파일 크기가 필요하면 WebP를 사용하세요. 이 도구는 네 가지 형식을 모두 내보낼 수 있으며, 웹 개발 워크플로에서 가장 실용적인 SVG가 기본값입니다.

Lorem Picsum(picsum.photos)은 실제 사진을 무작위로 제공하므로 실감 나는 이미지가 필요할 때 유용하지만, 로드할 때마다 제3자 서버에서 다른 사진을 가져옵니다. 이 도구는 지정한 크기, 색상, 레이블로 결정론적인 단색 박스를 만들어 줍니다. 예측 가능하고 용량이 작으며 브라우저 오프라인에서 생성되어 어떠한 데이터도 업로드되지 않고, 로드할 때마다 결과가 동일합니다. 현실적인 사진 목업에는 Picsum을, 깔끔하고 제어된 레이아웃 플레이스홀더에는 이 도구를 사용하세요.

placehold.co 같은 호스팅 서비스는 서버가 요청마다 이미지를 렌더링하기 때문에 placehold.co/600x400 같은 URL을 제공합니다. 이 도구는 서버 없이 브라우저에서 완전히 실행되므로, 핫링크 URL 대신 어디서든 URL이 들어가는 곳(<img> src, CSS url())에 붙여넣을 수 있는 독립적인 데이터 URI와 SVG·PNG·JPG·WebP 다운로드 파일을 제공합니다. 네트워크 요청도 없고 속도 제한도 없으며 오프라인에서도 계속 작동합니다.

배경을 #e2e8f0 같은 연한 회색으로, 텍스트를 #475569 같은 중간 회색으로 설정하면 친숙한 중립적인 플레이스홀더 외관이 완성됩니다. 회색 팔레트 프리셋을 선택하면 두 색상이 한 번에 적용됩니다. 크기를 선택하고 다운로드하면 됩니다. 회색은 "의도적으로 비어 있음"을 의미하므로 검토 중에 플레이스홀더가 주변 디자인과 시각적으로 경쟁하지 않습니다. 이는 Figma, Sketch, 그리고 대부분의 디자인 시스템에서 플레이스홀더 슬롯에 사용하는 표준 관례입니다.

네, 완전히 지원됩니다. 이 도구는 iPhone의 Safari와 안드로이드의 Chrome을 포함한 모든 최신 브라우저에서 실행됩니다. 치수를 설정하고, 색상을 선택하고, 텍스트를 추가한 다음 스마트폰에서 바로 다운로드하거나 데이터 URI를 복사하세요. 기기에서 반응형 레이아웃을 검토하면서 스크린샷이나 디자인 핸드오프를 위해 이미지 슬롯을 빠르게 채워야 할 때 특히 편리합니다. 앱 설치 없이 모바일 브라우저에서 페이지를 열면 바로 사용할 수 있습니다.

화면비 프리셋(1:1, 4:3, 3:2, 16:9, 2:1, 9:16)을 선택하면 너비에 맞게 높이가 자동으로 업데이트됩니다. 16:9에서 너비를 1280으로 입력하면 1280×720이 됩니다. "화면비 잠금"을 활성화하면 한 쪽 치수를 조정할 때 그 비율을 유지합니다. 이는 중단점 전반에서 고정 비율을 유지해야 하는 반응형 이미지 슬롯이나, 모든 이미지 썸네일이 동일한 비율이어야 하는 카드 그리드 설계에 유용합니다.

네 — 모든 이미지가 무료이며, 가입, 워터마크, 계정, 사용 제한이 없습니다. 무료 사용자의 일일 다운로드 횟수를 제한하거나 이메일 등록을 요구하는 일부 온라인 이미지 도구와 달리, 이 도구에는 아무런 제한이 없습니다. placehold.co, dummyimage.com, via.placeholder.com의 개인 정보 보호 친화적 대안으로, 해당 서비스의 서버를 핫링크하는 대신 이미지를 로컬에서 생성해 파일이나 데이터 URI를 완전히 소유하며 제3자의 가용성에 의존하지 않습니다.