crop_original 더미 이미지 생성기 star

디자이너와 개발자가 더미 이미지를 사용하는 이유

웹사이트에 실제로 사용할 사진이나 일러스트, 제품 이미지가 준비되기 훨씬 전부터도 누군가는 이미지가 들어간 페이지가 어떻게 보이는지 확인해야 합니다. 빈 회색 상자나 이미지 로드 실패 아이콘만으로 구성된 레이아웃은 실제와 다르게 보입니다 — 여백, 종횡비, 이미지 주변으로 텍스트가 흐르는 방식은 실제로 무언가가 그 공간을 차지했을 때 비로소 제대로 확인할 수 있기 때문입니다. 더미 이미지는 최종적으로 쓰일 소재를 임시로 대신함으로써 이 문제를 해결합니다. 올바른 너비와 높이를 가지고, 그리드 안의 정확한 위치에 자리 잡아, 최종 콘텐츠가 아직 존재하지 않아도 디자이너나 개발자가 레이아웃이 잘 작동하는지 판단할 수 있게 해줍니다. 더미 이미지의 내용 — 색상이나 라벨 — 자체는 의도적으로 중요하지 않으며, 중요한 것은 그 크기와 종횡비가 실제 이미지와 일치한다는 점입니다.

이런 이유로 인기 있는 더미 이미지 서비스들은 전통적으로 크기를 URL에 직접 인코딩하는 방식으로 동작합니다. 예를 들어 800×600 이미지를 요청하면 "800 × 600"이라는 글자가 적힌 회색 사각형이 반환되는 식입니다. 이렇게 표시된 크기 자체도 유용합니다. 시안을 훑어보는 사람이 HTML을 살펴보지 않고도 이미지 영역이 의도한 크기인지 즉시 확인할 수 있기 때문입니다. 이 도구도 같은 관례를 따릅니다 — 텍스트 입력란을 비워두면 사각형에 자동으로 자신의 너비와 높이가 라벨로 표시되며, 캡션이나 임시 브랜드명 등 그 상자 안에 들어갈 다른 내용을 미리 보고 싶다면 직접 텍스트를 입력할 수도 있습니다.

SVG가 PNG보다 더 나은 더미 이미지 형식일 수 있는 이유

PNG 더미 이미지는 픽셀의 격자입니다 — 텍스트가 있는 단색 800×600 사각형이라도, 대부분의 픽셀이 동일한 단일 색상임에도 불구하고 48만 개에 달하는 모든 픽셀의 색상 정보를 저장해야 합니다. 반면 SVG 더미 이미지는 애초에 픽셀로 이루어져 있지 않습니다 — "이 너비와 높이의 사각형을 이 색으로 채워 그린 뒤, 그 안 중앙에 이 텍스트를 그려라"라는 도형을 설명하는 짧은 텍스트 블록일 뿐입니다. 이 도구가 만드는 것과 같은 단순한 단색 배경과 텍스트로 이루어진 더미 이미지의 경우, 이 설명은 보통 수백 바이트에 불과해 동등한 PNG보다 훨씬 작습니다. SVG에는 반응형 레이아웃 전반에서 쓰이는 더미 이미지에서 더욱 중요한 두 번째 장점이 있습니다. 고정된 픽셀 격자가 아니라 수학적인 도형 명령으로 정의되기 때문에 품질 저하나 픽셀 깨짐 없이 어떤 크기로도 확대·축소할 수 있는 반면, 원본 해상도를 넘어 늘어난 PNG는 눈에 띄게 흐려집니다.

두 형식 모두 여기서는 같은 방식으로 생성됩니다 — 사각형을 그려 선택한 배경색으로 채우고, 라벨 텍스트를 가로와 세로 모두 중앙에 배치하되, 작은 더미 이미지가 지나치게 큰 텍스트에 눌리지 않도록 크기를 상자 치수에 비례해 조정합니다. PNG 버전은 HTML5 캔버스 요소에 렌더링된 뒤 canvas.toDataURL()로 내보내지며, SVG 버전은 <rect> 요소와 <text> 요소를 포함하는 XML 문자열로 직접 만들어져 파일로 다운로드됩니다. 페이지가 로드될 때마다 원격 URL에서 이미지를 가져오는 — 즉 매번 실제 네트워크 요청을 발생시키는 — 다른 더미 이미지 서비스와 달리, 이곳에서는 모든 과정이 로컬에서 실행됩니다. 어떤 요청도 브라우저 밖으로 나가지 않으므로 외부 서비스가 다운되어도 실패할 것이 없고, 다른 누군가의 서버가 강제하는 크기 제한도 존재하지 않습니다.