외부 서비스 대신 직접 만드는 이유
placehold.co 같은 서비스는 편리하지만 시안 파일이 외부 서버에 의존하게 되고, 오프라인이나 사내망에서 열면 이미지가 깨집니다. 이 도구는 브라우저의 canvas로 이미지를 그려 파일로 내려받으므로 네트워크 의존이 없고, 어디에도 업로드되지 않습니다. 텍스트를 비우면 "800×600"처럼 크기가 자동으로 들어가 레이아웃 검토 때 어떤 크기의 이미지 자리인지 한눈에 보입니다.
PNG와 JPEG 선택
단색 배경에 글자만 있는 이미지는 PNG가 훨씬 작고 선명합니다. 800×600 회색 플레이스홀더는 PNG로 수 KB, JPEG로는 그보다 큰 경우가 많습니다. JPEG는 실제 사진이 들어갈 자리의 용량을 흉내 내야 하거나, 파이프라인이 jpg 확장자만 받을 때 고릅니다. 품질을 낮추면 글자 가장자리에 잡음이 생기지만 임시 이미지라면 문제없습니다.
data URL 활용
작은 이미지는 <img src="data:image/png;base64,…">처럼 HTML에 직접 넣거나 CSS background-image에 쓸 수 있어 파일을 따로 관리하지 않아도 됩니다. 다만 Base64는 원본보다 약 33% 크고 캐시되지 않으므로, 60KB를 넘으면 표시하지 않고 파일 다운로드를 권합니다. 이메일 템플릿이나 단일 HTML 파일 시안에 특히 유용합니다.
레이아웃 시프트 방지
플레이스홀더를 쓰는 김에 <img>에 width·height 속성을 함께 넣어 두면, 나중에 실제 이미지로 바뀌어도 브라우저가 로딩 전에 자리를 확보해 레이아웃이 밀리지 않습니다(CLS 개선). 생성 결과에 있는 HTML 태그는 그 형태로 만들어져 있습니다. 실제 이미지의 비율이 다르면 aspect-ratio와 object-fit: cover를 함께 쓰는 편이 안전합니다.
자주 묻는 질문
최대 크기는 얼마인가요?
한 변 4096px, 총 1,600만 픽셀까지입니다. 그보다 큰 캔버스는 브라우저에 따라 빈 이미지가 나오거나 메모리 오류가 납니다.
투명 배경으로 만들 수 있나요?
현재는 불투명 배경만 지원합니다. 투명이 필요하면 PNG로 만든 뒤 이미지 편집기에서 배경을 제거하거나, CSS로 배경색을 지정하는 방식을 권합니다.
글꼴을 바꿀 수 있나요?
시스템 기본 산세리프 글꼴을 씁니다. 운영체제마다 실제 글꼴이 달라 결과가 조금씩 다를 수 있지만, 임시 이미지 용도에는 지장이 없습니다.