플레이스홀더 이미지 생성기 (샘플 이미지 만들기)
너비, 높이, 배경색, 글자색을 지정하기만 하면 브라우저 안에서 샘플 이미지를 만들어 PNG로 다운로드할 수 있습니다. 이미지는 서버로 전송되지 않습니다.
자주 쓰는 샘플 이미지 크기
| 크기 | 주요 용도 |
|---|---|
| 300×200 | 작은 배너나 광고 영역용 플레이스홀더 |
| 800×600 | 블로그 글 삽입 이미지 또는 와이어프레임용 임시 이미지 |
| 1200×630 | Facebook·X(트위터) 공유 카드용 OGP 이미지 |
| 1080×1080 | Instagram 등 SNS의 정사각형 게시물 |
| 1920×1080 | 풀HD 히어로 이미지 또는 슬라이드쇼 배경 |
| 640×360 | 16:9 동영상 썸네일 또는 카드형 UI 썸네일 |
플레이스홀더 이미지란
플레이스홀더 이미지는 아직 본 사진이나 삽화가 마련되지 않은 단계에서 그 자리를 메워 두기 위한 임시 이미지입니다. 지정하신 치수의 민무늬 직사각형에 그 크기의 숫자 따위를 얹었을 뿐인 단순한 것으로, 레이아웃의 검증이나 목업 작성에 씁니다. 속이 뜻을 지니지 않기에, 이미지의 내용이 아니라 배치와 여백에만 눈을 둘 수 있습니다.
이 도구는 너비·높이·배경색·글자색을 지정하시면 그 자리에서 미리보기를 그리고 PNG로 저장하실 수 있습니다. 겹치는 글자는 임의이며, 비워 두시면 ‘너비×높이’의 수치가 자동으로 들어가므로 여러 크기를 늘어놓았을 때 어느 것이 어느 것인지 한눈에 아실 수 있습니다. 색은 컬러 피커로도 16진수 코드의 직접 입력으로도 지정하실 수 있어, 디자인 시안의 배색에 그대로 맞추실 수 있습니다. 생성은 모두 브라우저 안에서 이루어지며, 이미지가 서버로 보내지는 일은 없습니다.
플레이스홀더 이미지 만드는 법
- 치수를 정합니다 너비와 높이를 px로 입력합니다. 300×200·800×600·1200×630(OGP)·1080×1080의 프리셋을 누르시면 한 번에 들어갑니다.
- 색을 고릅니다 배경색과 글자색을 지정합니다. 컬러 피커 외에 16진수 컬러 코드를 직접 넣으실 수도 있습니다.
- 필요하시면 글자를 넣습니다 겹치는 글자는 임의입니다. 비워 두시면 ‘너비×높이’가 자동으로 표시되므로 그대로도 쓸모가 있습니다.
- 미리보기로 확인합니다 설정을 바꾸실 때마다 다시 그려집니다. 글자가 배경에 묻히지 않았는지를 여기서 보아 주세요.
- PNG를 내려받습니다 ‘PNG 내려받기’로 손안에 저장됩니다. 파일은 기기 안에서만 만들어지며 어디로도 전송되지 않습니다.
더 잘 활용하기 위한 팁
- "1200×630 (OGP)" 프리셋을 사용하면 Facebook·X(트위터) 공유 카드에서 잘리지 않고 표시되는 표준 크기 이미지를 바로 준비할 수 있습니다.
- 오버레이 텍스트를 비워두면 "너비×높이" 숫자가 자동으로 표시되어, 여러 와이어프레임을 비교할 때 크기를 한눈에 구분할 수 있습니다.
- 배경색과 글자색은 색상 선택기로 고를 수도 있고 16진수 색상 코드를 직접 입력할 수도 있어, 디자인 시안의 배색에 정확히 맞출 수 있습니다.
- 생성된 이미지는 로컬 기기에만 다운로드되며, 이 사이트의 서버로 전송되거나 저장되는 일은 전혀 없습니다.
플레이스홀더 이미지의 활용 상황
와이어프레임이나 목업 짜기
사진이 정해지기 전이라도 들어갈 예정인 치수대로 상자를 놓으면 레이아웃 검증을 먼저 진행하실 수 있습니다. 크기가 이미지에 적혀 있으므로 견줄 때 헷갈리는 일도 없습니다.
OGP 이미지의 틀을 먼저 잡기
1200×630은 공유 카드에서 잘리지 않고 표시되는 표준적인 치수입니다. 본 이미지가 나올 때까지의 임시 자리로 쓰실 수 있습니다.
이미지 업로드 기능을 시험하기
임의의 치수·임의의 파일 크기 이미지를 바로 마련하실 수 있어, 게시 양식의 상한이나 표시가 무너지는지를 확인하시는 데 알맞습니다.
배색의 어림을 잡기
배경색과 글자색을 바꾸어 가며 늘어놓으시면, 글자를 읽을 수 있는 명도 차가 되었는지를 손쉽게 확인하실 수 있습니다.
플레이스홀더 이미지에 관한 용어집
- 플레이스홀더
- 본래 들어가야 할 것이 마련될 때까지 그 자리를 잡아 두는 임시 요소입니다. 이미지 외에 글의 임시 자리로는 Lorem Ipsum이 쓰입니다.
- 목업
- 완성 뒤의 겉모습을 확인하려고 만드는, 움직이지 않는 견본입니다. 실제 소재가 갖추어지기 전에도 배치와 여백을 판단하실 수 있습니다.
- OGP 이미지
- SNS에서 페이지가 공유되었을 때 카드로 표시되는 이미지입니다. 1200×630이 널리 쓰이는 치수이며, 여기에 맞추면 가장자리가 잘리기 어려워집니다.
- 16진수 컬러 코드
- #RRGGBB의 꼴로 색을 나타내는 표기법입니다. 빨강·초록·파랑의 세기를 저마다 00〜FF의 두 자리로 나타냅니다.
- 픽셀(px)
- 이미지를 이루는 가장 작은 단위입니다. 이 도구의 너비·높이는 이 단위로 지정합니다.
- PNG
- 열화가 없는 무손실 압축의 이미지 형식입니다. 단색 배경과 글자뿐인 이미지는 이 형식과 궁합이 좋아 파일도 작게 담깁니다.
자주 묻는 질문
여담 ― 플레이스홀더 이미지라는 문화
웹 제작 현장에서는 정식 사진이나 일러스트가 준비되기 전까지 "임시 이미지"로 플레이스홀더 이미지를 사용하는 문화가 오래전부터 자리 잡고 있습니다. 인쇄 업계에서 아직 완성되지 않은 문구 대신 사용하는 "로렘 입숨(lorem ipsum)" 더미 텍스트와 같은 발상을, 이미지 버전으로 적용한 것이라 할 수 있습니다.
2014년에 등장한 "Lorem Picsum"이라는 서비스는 실제 사진을 무작위로 제공하는 플레이스홀더 이미지 서비스로 널리 사용되었습니다. URL에 너비와 높이만 지정하면 사진이 반환되는 간편함 덕분에 수많은 디자인 시안과 튜토리얼에서 채택되었습니다. 다만 외부 서비스에 의존하다 보니 오프라인 환경이나 기밀성이 높은 프로젝트에서는 사용하기 어렵다는 제약도 있습니다.
이 도구는 그러한 외부 서비스에 의존하지 않고, 브라우저의