더미 이미지가 필요할 땐, 로렘 픽숨 (Lorem Picsum)

웹 개발을 하면서 가끔 더미 텍스트가 필요할 때, 로렘 입숨(Lorem Ipsum)을 사용해 보셨을 겁니다.

로렘 입숨(Lorem Ipsum)은 문서나 웹 퍼블리싱, 프론트개발을 할 때 더미 글이 필요할 경우 자주 사용합니다.

 

로렘 입숨

 

글은 그렇다 쳐도, 만약 더미 이미지가 필요할 경우는 어떻게 할까요?

주로 저작권 없는 사진을 다운 받을 수 있는 사이트에서 다운 받아서 사용하곤 합니다.

보통 'unsplash'나 'pixabay'를 사용하곤 합니다.

 

그런데 이렇게 다운 받아서 사용하는 것은 귀찮지 않나요?

그리고 다운받은 후 사진 크기를 조정하는 작업이 필요하면 정말 귀찮아집니다.

 

로렘 픽숨 (Lorem Picsum)

https://picsum.photos/

Lorem Picsum

 

이 사이트에서는 '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가 237인 이미지는 커여운 검은 댕댕이네요.

 

원하는 이미지의 id를 어떻게 찾죠?

원하는 이미지의 id는 아래의 링크에서 찾을 수 있습니다.

그런데 이미지를 둘러보는 게 조금 불편할 수 있습니다.

https://picsum.photos/images

Lorem Picsum

https://picsum.photos/images

 

정적 랜덤 이미지 (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

seed : picsum

seed : woon

seed : helloworld

 

이미지 필터링

그레이 스케일 (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/..."
}