더미 이미지가 필요할 땐, 로렘 픽숨 (Lorem Picsum)
웹 개발을 하면서 가끔 더미 텍스트가 필요할 때, 로렘 입숨(Lorem Ipsum)을 사용해 보셨을 겁니다.
로렘 입숨(Lorem Ipsum)은 문서나 웹 퍼블리싱, 프론트개발을 할 때 더미 글이 필요할 경우 자주 사용합니다.
글은 그렇다 쳐도, 만약 더미 이미지가 필요할 경우는 어떻게 할까요?
주로 저작권 없는 사진을 다운 받을 수 있는 사이트에서 다운 받아서 사용하곤 합니다.
보통 'unsplash'나 'pixabay'를 사용하곤 합니다.
그런데 이렇게 다운 받아서 사용하는 것은 귀찮지 않나요?
그리고 다운받은 후 사진 크기를 조정하는 작업이 필요하면 정말 귀찮아집니다.
로렘 픽숨 (Lorem Picsum)
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
이 사이트에서는 'unsplash'와 같이 사진을 다운로드하지 않고, url를 통해서 사진을 얻을 수 있습니다.
만약 웹 퍼블리싱을 할 때 더미 이미지가 필요하다면, <img> 태그의 src에 로렘 픽숨의 url만 넣으면 됩니다.
사용 방법
사용 방법은 간단합니다.
이미지의 크기만 간단히 url에 몇가지 옵션만 주면 됩니다.
Base URL
https://picsum.photos이것은 기본 URL입니다.
위의 url로 들어가면 로렘 픽숨의 홈페이지가 나옵니다.
하지만 뒤에 어떤 옵션이 들어가면, 옵션에 맞춘 이미지를 보여줍니다.
크기를 지정한 랜덤 이미지
기본 URL에 원하는 이미지 크기를 추가하면 그 크기에 맞는 랜덤 이미지를 보여줍니다.
https://{Base URL}/{가로크기}/{세로크기}
가로 200px, 세로 300px의 랜덤 이미지
https://picsum.photos/200/300
가로 200px, 세로 200px의 랜덤 이미지
https://picsum.photos/200
특정 이미지
랜덤 이미지가 아니라 원하는 이미지를 고르고 싶다면, /id/{image} 를 추가하면 됩니다.
가로 200px, 세로 300px의 id : 237인 이미지
https://picsum.photos/id/237/200/300
id가 237인 이미지는 커여운 검은 댕댕이네요.
원하는 이미지의 id를 어떻게 찾죠?
원하는 이미지의 id는 아래의 링크에서 찾을 수 있습니다.
그런데 이미지를 둘러보는 게 조금 불편할 수 있습니다.
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
정적 랜덤 이미지 (Static Random Image)
위의 랜덤 이미지는 매번 url을 호출할 때마다 다른 이미지가 나옵니다.
랜덤 이미지를 한 번만 뽑고 그 랜덤 이미지가 바뀌지 않길 원한다면 이 방법을 사용하면 됩니다.
Base URL 뒤에 /seed/{아무 글자} 를 추가하면 '아무 글자'를 시드로 사용하여 특정 이미지를 랜덤으로 가져옵니다.
이 시드를 기준으로 이미지를 선택하기 때문에, 시드가 바뀌지 않으면 다른 이미지는 가져오지 않습니다.
https://picsum.photos/seed/picsum/300/200
https://picsum.photos/seed/woon/300/200
https://picsum.photos/seed/helloworld/300/200
이미지 필터링
그레이 스케일 (Grayscale)
사진을 흑백으로 얻고 싶으면 URL의 끝에 쿼리스트링 ?grayscale 을 넣으면 됩니다.
가로 200px, 세로 300px의 흑백 랜덤 이미지
https://picsum.photos/200/300?grayscale
흐림 효과 (블러 Blur)
블러는 흐림 효과입니다.
이미지에 흐림 효과를 조금 주고 싶다면, URL의 끝에 쿼리스트링 ?blur 를 넣어주면 되는데, 흐림의 정도를 표현할 수 있습니다.
기본 블러 값은 5입니다.
강도 5의 블러가 처리된 랜덤 이미지
https://picsum.photos/200/300/?blur
강도 2의 블러가 처리된 랜덤 이미지 (저는 블러 2가 가장 적당한 것 같습니다.)
https://picsum.photos/200/300/?blur=2
응용 사용법 (Advanced Usage)
위에서 얻은 다양한 효과를 모두 섞어서 사용할 수 있습니다.
크기(200px X 300px)이고 흑백, 블러 2 효과가 적용된 아이디 : 870인 이미지
https://picsum.photos/id/870/200/300?grayscale&blur=2
이미지 확장자
이미지 확장자는 .jpg와 .webp가 있습니다. (나머지는 지원 안 함)
.jpg 이미지 얻기
https://picsum.photos/200/300.jpg.webp 이미지 얻기
https://picsum.photos/200/300.webp
이미지 리스트 얻기
낱개의 이미지가 아닌 많은 이미지를 리스트로 얻고 싶다면, /v2/list 를 붙여서 이미지 리스트를 가져옵니다.
이미지 리스트는 json 형식이며, 랜덤 이미지가 아닌 id 순입니다. 기본 30개를 반환합니다.
https://picsum.photos/v2/list[
{
"id": "0",
"author": "Alejandro Escamilla",
"width": 5616,
"height": 3744,
"url": "https://unsplash.com/...",
"download_url": "https://picsum.photos/..."
}
]
만약 다음 페이지를 요청하려면 ?page 를 사용하고, 페이지당 항목 수를 변경하려면 ?limit 를 사용하면 됩니다.
https://picsum.photos/v2/list?page=2&limit=100
이미지 정보 얻기
특정 이미지에 대한 정보를 가져오고 싶으면, /id/{id}/info 를 사용하면 됩니다.
https://picsum.photos/id/0/info{
"id": "0",
"author": "Alejandro Escamilla",
"width": 5616,
"height": 3744,
"url": "https://unsplash.com/...",
"download_url": "https://picsum.photos/..."
}