로렘 픽숨(Lorem Picsum) 사용하기

로렘 입숨(Lorem Ipsum)이 더미 텍스트를 생성해 준다면 로렘 픽숨(Lorem Picsum)은 더미 이미지를 생성해준다.

이미지 영역에 더미 이미지를 넣어 이해하기 쉬워지고, 빈 공간 대신 사용자가 요청하는 규격에 맞는 이미지를 제공해 준다.

Lorem Picsum

 

위 사이트에 들어가면 https://picsum.photos/ 와 같은 URL들이 보일 것이다.

이 URL을 활용하여 픽셀을 부여해 크기에 맞는 이미지를 얻어오거나, 흑백 이미지 등을 가져올 수 있다.

 

먼저, 원하는 가로 세로 규격이 있으면 https://picsum.photos/(가로)/(세로)처럼 크기를 지정해 주면 된다.

https://picsum.photos/200/300  # 가로/세로

정사각형의 이미지가 필요하면 한 변의 길이만 작성해 주면 된다.

https://picsum.photos/200  # 한 변의 길이

 

웹 페이지에 위 방식으로 더미 이미지를 가져오면 새로고침할 때마다 이미지가 바뀌게 된다.

그렇기 때문에 고정적인 이미지를 사용하기 위해서는 이미지 고유 ID 또는 seed 배치를 통해 고정 이미지를 가져올 수 있다.

이미지 고유 아이디는 여기에서 볼 수 있으며, id/{image} 형식으로 작성하면 된다.

https://picsum.photos/id/1/200/300  # 이미지 고유 아이디(1)

seed 배치는 seed/{seed} 형식으로 가능하며, 웹 개발 중이라면 다음과 같이 해당 글의 고유 id를 사용할 수 있다.

https://picsum.photos/seed/{{ post.id }}/800/200  # 시드 배치

 

흑백 이미지(grayscale)를 가져올 때는 크기 뒤에 ?grayscale을 작성해 주면 된다.

https://picsum.photos/200/300?grayscale  # 흑백(grayscale)

 

블러(blur) 처리된 이미지를 가져올 때는 ?blur를 작성해 주면 되며, 블러 처리 정도는 1에서 10까지의 수로 지정할 수 있다.

https://picsum.photos/200/300/?blur  # 블러 처리

https://picsum.photos/200/300/?blur=2  # 블러 처리 정도=2

 

이미지를 가져오는 더 다양한 방법은 로렘 픽숨 사이트에서 확인할 수 있다.

장고 공부중에 로렘 입숨과 로렘 픽숨을 알게 되어서 기억해 둘 겸, 나중에 활용할 수 있도록 정의와 사이트들을 정리해 보았다.