개발 도구 (Development Tools)/HTML & CSS

이미지를 랜덤으로 삽입하기 (Unsplash)

BiCute 2022. 5. 4. 10:00
반응형

 

웹 개발을 하다 보면 이미지 소스가 필요한 경우가 상당히 많습니다.

매번 사이즈를 확인하고 작업 중인 폴더로 이미지를 옮기는 과정도 귀찮아지기 시작하는데...

 

Unsplash에서 제공해주는 API를 이용하면 이러한 고민이 쉽게 해결됩니다.

 

 

#1 Unsplash Developers

  사이트 주소는 다음과 같습니다.

  https://unsplash.com/developers

 

  개발자로 등록(Register as a developer)한 후 다양하게 사용하는 방법도 있지만, 웹 개발용 샘플 이미지만 사용할 거라면 등록은 물론이고 특별히 거쳐야 할 과정도 없어 매우 편리합니다.

  예전에는 샘플 이미지와 함께 복붙만 하세요 처럼 샘플 이미지와 함께 디테일한 설명이 있었던 거 같은데, 다 사라진 거 같아서 정리할 겸 글을 작성해 봅니다.

 

 

#2 사용 방법

랜덤으로 이미지 검색

  기본적인 사용방법은 그냥 원하는 위치에 [https://source.unsplash.com/random]이라고만 적어주면 됩니다.

<!--	html에서 img 태그로 사용할 경우 -->
<img src="https://source.unsplash.com/random">

<!--	CSS에서 background 속성으로 사용할 경우 -->
background: url("https://source.unsplash.com/random");

 

 

특정 유저의 사진을 검색

URL : https://source.unsplash.com/user/{USERNAME}
예 : <img src="https://source.unsplash.com/user/erondu/1600x900">

 

특정 컬렉션을 지정하여 사진을 검색

URL : https://source.unsplash.com/collection/{COLLECTION ID}
예 : <img src='https://source.unsplash.com/collection/190727/1600x900'>

 

 

오늘의 사진 / 금주의 사진

URL : https://source.unsplash.com/daily
URL : https://source.unsplash.com/weekly

 

 

특정 검색어를 지정하여 사진을 검색

URL : https://source.unsplash.com/featured/?{KEYWORD},{KEYWORD}
예 : https://source.unsplash.com/1600x900/?nature,water

 

  이 외에도 개발자 사이트를 둘러보면 다양한 옵션을 확인할 수 있습니다.

 

매개변수 설명

※ Get a Random Photo 페이지에 나오는 매개변수(Parameters)를 이용하면 추가적인 옵션 설정도 가능합니다.

모든 매개변수는 선택 사항이며 무작위로 선택되는 사진 풀을 좁히기 위해 결합할 수 있습니다.

더보기

collections : 선택을 필터링할 공개 컬렉션 ID입니다. 여러 개일 경우 쉼표로 구분

topics : 선택을 필터링할 공개 주제 ID입니다. 여러 개일 경우 쉼표로 구분

username : 단일 사용자로 선택을 제한합니다.

query : 검색어와 일치하는 사진으로 선택을 제한합니다.

orientation : 사진 방향으로 필터링합니다. (유효한 값: landscape, portrait, squarish)

content_filter : 콘텐츠 안전성 으로 결과를 제한합니다. 기본값: low. 유효한 값은 low 및 high입니다.

count : 반환할 사진의 수입니다. (기본값: 1, 최대: 30)

 

참고 : 동일한 요청에서 쿼리 매개변수와 함께 컬렉션 또는 주제 필터링을 사용할 수 없습니다.
참고 : count 매개변수 를 제공하는 경우에만 count. 해당 값 이 1 인 경우에도 응답은 사진 배열입니다.

 

 

  옵션이고 뭐고 뭔 소린지 모르겠다. 싶을 경우 다음과 같은 방식으로 사용해 보시는 것을 추천드립니다.

  (가장 뒤에 있는 800x500은 이미지 사이즈입니다. 특정 사이즈를 원하지 않을 경우 안 적어줘도 되며, 뒤쪽의 숫자만 바꿔주면 여러 장의 사진이 동시에 사용되더라도 이미지가 겹치지 않습니다.)

<!--	3장의 다른 이미지를 사용하고 싶을 때	-->
<img src="https://source.unsplash.com/collection/1/800x500">
<img src="https://source.unsplash.com/collection/2/800x500">
<img src="https://source.unsplash.com/collection/3/800x500">

 

 

 

반응형