🖼️
무료 플레이스홀더 이미지 생성기
사용자 지정 크기, 텍스트, 색상의 컬러 플레이스홀더 이미지를 생성합니다. 소셜 미디어, 목업, 디자인 컴포지트의 표준 크기를 제공합니다.
사전 설정 크기
색상 테마
💡 HTML 목업용: «data URL로 복사» 옵션을 사용하여 <img src="...">에 붙여넣으면 인라인 플레이스홀더가 됩니다. Figma / Sketch 디자인에는 PNG를 다운로드하여 드래그하세요.
주요 용도
- 디자인 목업용 자리 표시자 이미지실제 이미지가 준비될 때까지 Figma, Sketch 또는 웹 디자인 목업에서 사용할 크기 조정된 색상 상자를 생성합니다.
- HTML 프로토타입용 인라인 자리 표시자빠른 프로토타입을 위해 "데이터 URL로 복사"를 사용하여 자리 표시자 이미지를 HTML에 직접 포함합니다.
- CMS 콘텐츠 슬롯용 자리 표시자CMS 템플릿을 시연할 때 민감한 미리보기를 위해 실제 콘텐츠 대신 자리 표시자 이미지를 사용합니다.
- 소셜 미디어 이미지 템플릿Instagram, Facebook, Twitter 및 LinkedIn 게시물 템플릿용으로 올바르게 크기 조정된 자리 표시자를 생성합니다.
- CSS 레이아웃 테스트 이미지반응형 CSS 레이아웃을 스트레스 테스트하기 위해 극단적인 종횡비의 이미지를 생성합니다.
사용 방법
모든 작업은 HTML Canvas API와 직접 작성한 SVG 마크업으로 브라우저에서 이루어집니다. 서버, 업로드, 서드파티 서비스가 없습니다. 크기, 색상, 라벨 텍스트를 설정하면 도구가 캔버스 요소에 실시간으로 이미지를 그리고, 요청 시 PNG, JPEG 또는 SVG로 직렬화합니다.
- 1크기와 색상 설정너비와 높이(각각 1–4000 px)를 입력하거나 일반적인 소셜 미디어 및 디자인 크기를 다루는 프리셋 11개 중 하나를 고르세요. 내장 테마에서 배경색과 글자색을 고르거나 16진 값을 직접 입력하세요. 기본 색상 선택기와 검증되는 텍스트 입력란이 서로 동기화됩니다.
- 2Canvas API가 미리보기를 즉시 렌더링React 이펙트가 변경될 때마다 drawPlaceholder()를 호출합니다. 이 함수는 CanvasRenderingContext2D로 사각형을 배경색으로 채우고, 선택적으로 15% 불투명도의 희미한 대각선 십자선을 그린 다음, 라벨 텍스트를 측정해 가운데 정렬하며, 캔버스 너비의 90% 안에 들어갈 때까지 글꼴을 자동으로 줄입니다.
- 3PNG, JPEG, SVG로 내보내기PNG와 JPEG 다운로드는 canvas.toDataURL()을 호출하고, base64 결과를 메모리에서 Blob으로 변환해 다운로드를 실행합니다. 모두 사용자 동작 안에서 동기적으로 처리되어 iOS Safari의 다운로드 규칙을 만족합니다. SVG 내보내기는 일치하는 rect, 선택적 대각선, text 요소를 가진 독립 SVG 문자열을 만들어 .svg 파일로 저장합니다.
- 4일괄 내보내기와 복사 바로가기'모든 프리셋 다운로드' 버튼은 JSZip을 동적으로 가져와 같은 그리기 함수로 프리셋 크기 11개를 각각 화면 밖 캔버스에 다시 렌더링하고, 모든 PNG를 하나의 ZIP으로 묶습니다. 복사 버튼은 PNG 데이터 URL, 인라인 SVG img 태그, CSS background-image 선언을 만들어 코드에 바로 붙여 넣을 수 있게 합니다.