작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos

웹사이트 작업을 하다보면 임시 이미지를 삽입해야하는 경우가 많이 생긴다.
간혹 디자이너가 만들어주기도 하지만 그렇지 않은 경우도 많다.
그럴땐 구글 검색 해서 적당한 이미지 URL을 따와서 사용했었는데,
더 좋고 깔끔한 방법이 있다.

바로 placeholder.com
URL에서 나타내듯 placeholder image 서비스이다.
사용법도 매우 간단하다.

<!-- 300px * 300px size image -->
<img src="https://via.placeholder.com/300.jpg" alt="300 * 300 size image">
 

위와 같이 작성하면 300px * 300px 사이즈의 이미지가 아래와 같이 바로 로드된다.
임시 이미지에 해당 이미지의 사이즈까지 친절하게 쓰여져 있어 더욱 편하다.

 

300px*300px 임시이미지

정사각형이 아닌 경우는 200x400과 같이 가로x세로를 써주기만 하면 된다.

<!-- 200px * 400px size image -->
<img src="https://via.placeholder.com/200x400.jpg" alt="200 * 400 size image">
 

 

200px * 400px 임시 이미지

이미지 확장자는 gif뿐만 아니라 jpg, jpeg, png도 사용 가능하다.

생성(?)된 이미지를 다운로드 받아 로컬에서도 사용가능하다.

 

임시로 제작된 이미지 다운로드

---

placeholder.com 글을 작성하고 바로 다음날, 좀 더 유용한(?) 서비스를 우연히 발견했다. 

picsum.photos

이건 실제 이미지를 제공한다. 사용방법은 https://picsum.photos/가로사이즈/세로사이즈/?image=숫자 이다. 

<!-- 300px * 300px size image -->
<img src="https://picsum.photos/300/300/?image=100" alt="sample image">
 

위 코드의 결과는 아래 이미지이다.

picsum.photos에서 생성된 이미지

URL 끝에 파라메터로 들어가는 ?image=숫자는 아무 숫자나 적어주면 번호별로 각각 다른 이미지를 사용할 수 있다.