자리 표시자 이미지 생성기

색상, 캡션, 그라데이션, 패턴, 테두리 및 30개 이상의 사전 설정을 사용하여 모든 크기의 사용자 지정 자리 표시자 및 더미 이미지를 만듭니다. PNG, JPG, WebP 또는 SVG 내보내기, ZIP 일괄 다운로드 또는 데이터 URI, <img>, CSS 또는 Markdown 스니펫 복사 등을 무료로, 워터마크 없이, 브라우저에서 100% 수행하세요.

브라우저에서 완전히 사용자 정의 더미 이미지를 생성하는 무료 고급 자리 표시자 이미지 생성기입니다. 크기, 색상, 캡션 및 배경 스타일을 설정하고 30개 이상의 소셜/광고/장치 사전 설정을 사용한 다음 PNG, JPG, WebP 또는 SVG를 내보내거나 데이터 URI, <img> 태그, CSS 또는 Markdown 스니펫을 복사하세요. 업로드 없음, 속도 제한 없음, 워터마크 없음.

Share
범주
이미지 도구
포함
10 기능
입장
무료 · 가입하지 않음
은둔
브라우저에서 실행됩니다.
자리 표시자 이미지 생성기

Calibrating Placeholder Studio......

Please wait a moment

개요

자리 표시자 이미지 생성기 - 사용자 정의 더미 이미지를 즉시 생성

자리 표시자 이미지 생성기는 모형, 와이어프레임, 프로토타입 및 프런트엔드 개발을 위한 사용자 정의 자리 표시자와 더미 이미지를 생성하기 위한 무료 고급 온라인 도구입니다. 너비와 높이를 입력하고, 색상을 선택하고, 레이블을 추가하고, 배경 스타일을 선택한 다음 선명한 PNG, JPG, WebP 또는 무한 확장 가능한 SVG를 내보내거나 클릭 한 번으로 이미지를 데이터 URI, <img> 태그, CSS 배경 또는 마크다운으로 복사할 수 있습니다. 모든 것이 브라우저에서 로컬로 생성되므로 속도 제한이 없고 핫링크 URL이 끊어지지 않으며 아무것도 업로드되지 않습니다.

포함됨

특징

01
임의의 사용자 정의 너비 × 높이(선택적으로 고정된 가로 세로 비율 포함)
02
30개 이상의 사전 설정: 아바타, 소셜 게시물, OG 카드, IAB 광고 단위 및 장치
03
배경: 단색, 그라데이션, 줄무늬, 격자, 점, 체커보드 및 노이즈
04
사용자 정의 캡션 텍스트 또는 자동 픽셀 크기 레이블
05
WCAG 대비 검사기를 사용한 글꼴 모음, 무게, 크기 및 색상
06
테두리 너비/색상 및 둥근 모서리
07
PNG, JPG, WebP 또는 확장 가능한 SVG를 1×, 2× 또는 3×로 내보내기
08
데이터 URI, <img> 태그, CSS 배경 또는 마크다운으로 복사
09
배치 모드: 한 번에 다양한 크기를 렌더링하고 ZIP을 다운로드합니다.
10
100% 클라이언트측 — 업로드 없음, 속도 제한 없음, 워터마크 없음
사용방법

자리 표시자 이미지 생성기 사용 방법

  1. 01

    크기 설정

    사용자 정의 너비와 높이를 입력하거나 Instagram 게시물, 오픈 그래프 카드 또는 리더보드 광고와 같은 사전 설정을 선택하세요. 비율에 맞게 크기를 조정하려면 종횡비를 잠그세요.

  2. 02

    스타일을 지정하세요

    배경 색상, 그라데이션 또는 패턴을 선택하고 테두리와 모서리 반경을 설정한 다음 캡션 텍스트, 글꼴, 크기 및 색상을 사용자 정의하세요. 대비 검사기는 라벨을 읽을 수 있는 상태로 유지합니다.

  3. 03

    실시간 미리보기

    설정을 조정하면 자리 표시자가 즉시 업데이트되어 선택한 내보내기 규모에서 얻을 수 있는 정확한 출력을 표시합니다.

  4. 04

    내보내기 또는 복사

    1×–3× 크기로 PNG, JPG, WebP 또는 SVG를 다운로드하거나, 일련의 크기를 ZIP으로 일괄 다운로드하거나, 데이터 URI, <img> 태그, CSS 배경 또는 마크다운 스니펫을 복사하여 프로젝트에 바로 붙여넣을 수 있습니다.

사용 사례

일반적인 사용 사례

  • -디자인하는 동안 모형, 와이어프레임 및 프로토타입을 더미 이미지로 채웁니다.
  • -프런트엔드 개발 중에 HTML/CSS 레이아웃의 이미지 슬롯을 예약하세요.
  • -실제 작품이 준비되기 전에 테스트할 크기의 광고 소재와 소셜 카드를 생성하세요.
  • -정확한 크기의 자리 표시자로 반응형 갤러리나 그리드를 채웁니다.
  • -잠겨 있거나 에어 갭이 있는 네트워크에서 데모를 위한 오프라인 base64 데이터-URI 자리 표시자를 만듭니다.
  • -속도를 제한하거나, 다운되거나, 모형을 유출하는 신뢰할 수 없는 자리 표시자 URL 서비스를 교체하세요.
가이드

상세안내

회색 상자보다 훨씬 더

기존의 "600 × 400" 회색 직사각형을 뛰어넘으세요. 단색, 부드러운 그라데이션, 대각선 줄무늬, 격자, 점, 바둑판 및 미묘한 노이즈 중에서 선택하고 테두리와 둥근 모서리를 추가하고 캡션 텍스트, 글꼴 모음, 두께, 크기 및 색상을 독립적으로 제어하세요. 자동 치수 라벨을 켜서 모든 이미지에 정확한 픽셀 크기를 찍거나 자신만의 텍스트를 쓰세요. 내장된 대비 검사기는 텍스트와 배경이 WCAG 가독성에 실패할 때 경고하므로 어떤 디자인에서도 자리 표시자를 쉽게 읽을 수 있습니다.

모든 화면, 광고 및 소셜 슬롯에 대한 사전 설정

아바타와 썸네일, Instagram, Facebook 및 X/Twitter 커버용 정사각형 및 세로 게시물, YouTube 썸네일, 오픈 그래프 카드, IAB 광고 단위(리더보드, 중간 직사각형, 스카이스크래퍼, 빌보드), 일반 장치 해상도 및 인쇄 친화적인 비율 등 30개 이상의 미리 만들어진 크기로 추측을 건너뛰세요. 크기를 조정하는 동안 종횡비를 고정하거나 배치 모드로 전환하여 전체 크기 세트를 한 번에 렌더링하고 ZIP으로 함께 다운로드할 수 있습니다. 반응형 갤러리나 광고 크리에이티브 키트를 몇 초 만에 채우는 데 적합합니다.

개발자와 디자이너를 위해 제작됨

생성된 자리 표시자를 코드베이스에 바로 놓습니다. 바로 붙여넣을 수 있는 <img> 태그, 배경 이미지 CSS 규칙, 마크다운 이미지 또는 외부 요청 없이 오프라인으로 작동하는 base64 데이터 URI를 복사하세요. 모든 확대/축소에서 매우 선명한 벡터를 위해 SVG를 내보내거나 레티나 디스플레이의 경우 1×, 2× 또는 3×로 PNG/JPG/WebP를 내보냅니다. 전체 도구가 클라이언트 측이기 때문에 잠긴 네트워크, 방화벽 뒤 및 오프라인에서 작동합니다. 즉, 다운되거나 속도 제한이 있거나 모형을 제3자 서버에 유출하는 자리 표시자 서비스를 안정적으로 대체할 수 있습니다.

FAQ

자주 묻는 질문

자리 표시자 이미지란 무엇이며 언제 사용해야 합니까?+

자리 표시자(또는 더미) 이미지는 최종 아트웍이 준비되기 전에 이미지 슬롯을 채우는 독립 그래픽입니다. 디자이너와 개발자는 모형, 와이어프레임, 프로토타입 및 HTML/CSS 레이아웃에서 이를 사용하여 정확한 치수로 공간을 예약하므로 실제 사진이 제작되는 동안 디자인이나 페이지가 완성된 것처럼 보입니다.

이 자리 표시자 이미지 생성기는 무료이고 워터마크가 없나요?+

예. 귀하가 생성하는 모든 이미지는 완전 무료이고, 전체 해상도, 워터마크가 없으며, 가입이나 사용 제한이 없습니다. 이미지는 서버가 아닌 브라우저에서 렌더링되므로 비용을 지불할 필요가 없으며 속도 제한도 없습니다.

어떤 이미지 형식과 해상도로 내보낼 수 있나요?+

레티나 디스플레이의 경우 PNG, JPG 및 WebP 래스터 이미지를 1×, 2× 또는 3×로 내보낼 수 있으며 어떤 확대/축소에서도 선명한 상태를 유지하는 SVG를 내보낼 수 있습니다. 결과를 base64 데이터 URI, <img> 태그, CSS 배경 이미지 규칙 또는 Markdown으로 복사할 수도 있습니다.

맞춤 크기와 색상을 설정할 수 있나요?+

전적으로. 너비와 높이(선택적으로 잠긴 가로 세로 비율 포함)를 입력한 다음 배경 색상, 그라데이션 또는 패턴, 테두리, 모서리 반경, 캡션 텍스트, 글꼴, 크기 및 색상을 선택합니다. 내장된 대비 검사기는 텍스트와 배경을 읽기 어려운 경우 경고합니다.

소셜 미디어와 광고에 대한 사전 설정이 있나요?+

예. 아바타와 썸네일, Instagram, Facebook, X/Twitter 게시물과 표지, YouTube 썸네일, 오픈 그래프 카드, IAB 광고 단위(리더보드, 중간 직사각형, 스카이스크래퍼, 빌보드) 및 일반 장치 해상도를 포함한 30개 이상의 사전 설정이 있습니다. 하나를 선택하면 크기가 자동으로 채워집니다.

한 번에 여러 크기를 생성할 수 있나요?+

예. 배치 모드로 전환하고 필요한 크기를 선택하면 도구에서 현재 스타일로 모두 렌더링한 다음 전체 세트를 ZIP으로 함께 다운로드할 수 있습니다. 이는 반응형 갤러리 및 광고 크리에이티브 키트에 이상적입니다.

HTML이나 CSS에 자리 표시자 이미지를 어떻게 추가하나요?+

이미지를 생성한 다음 복사 버튼을 사용하여 바로 붙여넣을 수 있는 <img> 태그나 CSS 배경 이미지 규칙을 가져옵니다. 완전히 독립적인 오프라인 자리 표시자의 경우 base64 데이터 URI를 복사하세요. 그러면 외부 요청 없이 코드에 이미지가 직접 포함됩니다.

내 데이터가 어디에나 업로드되나요?+

아니요. 전체 도구는 HTML 캔버스와 SVG를 사용하여 브라우저의 클라이언트 측에서 실행됩니다. 이미지, 텍스트 또는 설정은 서버로 전송되지 않습니다. 따라서 자리 표시자 URL 서비스와는 달리 잠겨 있거나 오프라인 네트워크에서도 빠르고 비공개이며 안정적입니다.

관련 도구

관련 도구