이미지 Placeholder 생성기
크기·색상·텍스트 정해서 더미 이미지를 바로 만들어요. 다운로드도 되고 Data URL로 복사도 됩니다.
시안에 채울 더미 이미지 만들기
웹 시안이나 UI 목업에 실제 사진 대신 '여기 이미지 들어감'을 표시하려고 via.placeholder.com 같은 서비스에서 URL 가져다 쓰시죠. 근데 그 서비스가 다운되거나 오프라인 작업 중이면 이미지가 안 뜨잖아요. 여기는 Canvas API로 브라우저 안에서 직접 만들어서 네트워크 의존 없이 쓸 수 있어요. 크기·배경색·텍스트 색상·표시할 글자까지 전부 커스텀 가능합니다.
쓰는 법
- 크기 정하기 - 가로·세로 숫자를 직접 입력하거나 프리셋(150×150, 300×200, 640×480, 1280×720, 1920×1080) 중에 고르세요.
- 색상 커스텀 - 컬러피커로 배경색과 텍스트 색을 고릅니다.
- 텍스트 추가 - 이미지에 표시할 문구를 입력하거나 비워두면 'WxH' 식으로 크기가 들어가요.
- 포맷 선택 - PNG(무손실), JPG(압축), WebP(최신) 중에 고르세요.
- 만들기 & 저장 - '이미지 생성' 누르고 다운로드하거나 Data URL로 복사합니다.
디자인 시안에 쓸 더미 이미지 뚝딱
- via.placeholder.com·placehold.co처럼 외부 서버에 API 호출 없이 브라우저 안에서 바로 만들어져요.
- 서버 의존성이 없어서 오프라인에서도 작동합니다. 비행기 안 작업에도 돌아가요.
- 크기·색상·텍스트·포맷 전부 커스텀 가능해서 시안 톤에 맞출 수 있어요.
- Data URL로 복사하면 HTML이나 CSS에 바로 박아 넣어서 파일 호스팅이 따로 필요 없어요.
- PNG는 선명한 그래픽, JPG는 사진 느낌, WebP는 용량 절감용으로 골라 저장할 수 있습니다.
- 이미지가 서버에 저장되거나 업로드되지 않아요. 전부 브라우저 안 처리입니다.
다른 Placeholder 서비스랑 비교
| 항목 | FreeToolbox | placeholder.com | placehold.co |
|---|---|---|---|
| 오프라인 실행 | 예 | 없음(API) | 없음(API) |
| 색상 커스텀 | 컬러피커 | 헥스 입력 | 헥스 입력 |
| 텍스트 커스텀 | 예 | 예 | 예 |
| 포맷 | PNG·JPG·WebP | PNG·JPG·GIF | PNG·JPG·SVG |
| Data URL 복사 | 원클릭 | 없음 | 없음 |
| 최대 크기 | 4096×4096 | 4000×4000 | 5000×5000 |
| 광고 | 거의 없음 | 없음 | 보통 |
자주 묻는 질문
Placeholder 이미지는 왜 써요?
웹 디자인 시안·와이어프레임·레이아웃 테스트 때 실제 이미지가 아직 없을 때 자리만 표시하려고 써요. 의도한 크기를 보여주면서 간격·정렬을 잡아볼 수 있어서 디자이너·개발자가 협업할 때 필수예요.
만든 이미지 상업적으로 써도 돼요?
네, 브라우저에서 직접 그려낸 이미지라 저작권 걸린 콘텐츠가 하나도 없어요. 상업·개인 어디든 자유롭게 쓰세요.
Data URL이 뭐고 왜 쓰는 거예요?
이미지 데이터를 base64 문자열로 변환해서 'data:image/png;base64,...' 형태로 표현한 거예요. 파일 따로 호스팅할 필요 없이 HTML의 img src나 CSS background-image에 바로 붙여넣을 수 있어서 프로토타이핑·이메일 HTML·HTTP 요청 줄이기에 유용합니다.
PNG·JPG·WebP 뭐 써야 돼요?
단색 배경에 텍스트 넣을 거면 PNG(무손실·선명), 사진처럼 보이게 만들 거면 JPG(용량 작음·약간 손실), 최신 브라우저 전용에 최적 용량 원하시면 WebP. 단 구형 브라우저 대응 필요하면 WebP는 피하세요.
크기 제한 있어요?
최대 4096×4096 픽셀이에요. 그보다 큰 이미지는 생성에 시간이 걸리고 Data URL이 너무 길어져요. 대부분 목업 용도라면 1920×1080 이하로 충분합니다.