상세 컨텐츠

본문 제목

사용하기 쉽고 세련된 자리 표시자 로렘 픽숨(Lorem Picsum)

Design Information/Design Resources

by 김현욱 a.k.a. 마루 2019. 5. 25. 15:05

본문

로렘 픽숨(Lorem Picsum)은 이미지를 활용하는 자리 표시자로 웹디자인 시안 기획 시 또는 웹, 모바일 UI 디자인 등에서 활용할 수 있는 유용한 기능이다.

최종 확정되지 않은 이미지 영역을 설명하기 위해 이미지 표시자를 설정하고 빈 공간을 보여주는 대신 임의의 이미지를 규격에 맞게 불러와 보여 주기 위해 사용자 정의할 수 있는 방법이다. 


사용하기 쉽고 세련된 자리 표시자 로렘픽숨(Lorem Picsum)

사용 방법은 다음과 같다.


URL 뒤에 원하는 이미지 크기(가로 및 세로)를 추가하면 임의의 이미지가 표시된다.

예시) https://picsum.photos/200/300


정사각형 이미지를 얻으려면 크기를 추가한다.

예시) https://picsum.photos/200


특정 이미지(Specific Image)


[/id/{image}] | URL의 시작 부분에 추가하여 특정 이미지를 가져온다.

https://picsum.photos/id/237/200/300

아래 링크에서 가용할 수 있는 모든 이미지의 목록을 찾을 수 있다.

로렘픽숨 이미지 갤러리 - https://picsum.photos/images

로렘픽숨(Lorem Picsum) 이미지 갤러리로렘픽숨(Lorem Picsum) 이미지 갤러리


그레이 스케일(Grayscale)


[?grayscale] | URL의 끝에 추가하여 회색 음영 이미지를 가져온다.

예시) https://picsum.photos/200/300?grayscale


흐림(Blur)


[?blur] | URL의 끝에 추가하여 흐리게 표시된 이미지를 가져온다.

예시) https://picsum.photos/200/300/?blur


또한, 흐림 효과의 양을 조절할 수 있다(1~10)

예시) https://picsum.photos/200/300/?blur=2


고급 사용(Advanced Usage)


위의 옵션 중 하나를 조합할 수 있습니다.

예를 들어, 그레이 스케일 및 흐린 특정 이미지를 얻으려면

예시) https://picsum.photos/id/870/200/300?grayscale&blur=2

브라우저에서 동일한 크기의 여러 이미지를 요청하려면 random 이미지가 캐시 되지 않도록 쿼리 매개 변수를 추가하면된다.

예시) <img src="https://picsum.photos/200/300?random=1">

        <img src="https://picsum.photos/200/300?random=2">


파일 끝이 필요한 경우 .jpg URL의 끝에 추가할 수 있다 .

예시) https://picsum.photos/200/300.jpg


이미지 나열(List Images)

/v2/list끝점 을 사용하여 이미지 목록을 가져온다.

예시) https://picsum.photos/v2/list

API는 기본적으로 페이지 당 30개의 항목을 반환한다.


다른 페이지를 요청하려면 [?page] 매개 변수를 사용한다.

페이지 당 항목 수를 변경하려면 [?limit] 매개 변수를 사용하면 된다.

예시) https://picsum.photos/v2/list?page=2&limit=100

Link헤더는 이전 / 다음 페이지에 대한 페이지 매김 정보가 포함되어 있다

관련글 더보기

댓글 영역