임시 샘플 이미지란?
임시 샘플 이미지는 웹 개발이나 디자인 작업 중에 사용되는 가상 이미지로, 실제 이미지 대신 사용되어 디자인을 완성하거나 레이아웃을 확인하는 데 도움을 줍니다. 이러한 이미지는 주로 디자인 작업 중에 빈 공간을 채우거나 이미지가 로드되지 않았을 때 사용자에게 이미지의 위치를 알려주는 데 활용됩니다.
다양한 임시 샘플 이미지를 제공하는 웹 사이트들이 있으며, 이를 통해 원하는 이미지를 쉽게 얻을 수 있습니다.
다음으로 몇 가지 임시 샘플 이미지를 제공하는 웹 사이트들을 소개하고 사용 예시를 안내해드립니다.
placeholder URL 리스트
1. placehold.co
- 소개
가장 기본이 되는 임시 샘플 이미지 URL입니다.
사이트로 이동해보면, Documentation을 확인하여 이미지에 더 세부적인 설정을 할 수 있습니다.
- 특징
기본적으로 회색 배경에 가로x세로 사이즈가 빈 이미지를 볼 수 있습니다.
사용자 설정 가능한 항목으로는 아래와 같습니다.
- 사이즈
- 포맷(SVG, PNG, JPG, JPEG, WebP)
- 색상
- 텍스트
- 폰트
- 레티나
- 영상
이 설정들은 url query params에 전달해서 설정할 수 있습니다.
색상과 텍스트 속성을 섞는것 처럼 여러가지 설정을 섞어서 사용할 수도 있습니다.
- 사이트 URL: https://placehold.co/
Placehold | A simple, fast and free image placeholder service
placehold.co
- 호출 URL: https://placehold.co/600x400
- 코드 예시
<img src="https://placehold.co/600x400" />
- 이미지 렌더링 예시
2. Lorem Picsum
- 소개
Lorem Picsum은 무작위 이미지 placeholder를 생성해주는 서비스입니다. 원하는 크기와 효과를 선택할 수 있습니다.
- 특징
기본적으로 이미지 사이즈만 정해서 랜덤 이미지를 볼 수 있습니다.
사용자 설정 가능한 항목으로는 아래와 같습니다.
- 특정 id값 이미지
- 정적인 랜덤 이미지(항상 같은 이미지 나타남)
- 흑백(grayscale) 이미지
- 흐릿한(blur) 이미지
- 확장 포맷 변경
이 설정들은 url query params에 전달해서 설정할 수 있습니다.
흑백과 흐릿한 속성을 섞는것 처럼 여러가지 설정을 섞어서 사용할 수도 있습니다.
또한 리스트 이미지, 특정 이미지 상세 설명에 대한 JSON을 제공합니다.
- 사이트 URL: https://picsum.photos/
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
- 호출 URL: https://picsum.photos/600/400
- 코드 예시
<img src="https://picsum.photos/600/400" />
- 이미지 렌더링 예시
3. loremflickr.com
- 소개
LoremFlickr는 웹이든 프린트든 모든 케이스의 플레이스홀더 이미지를 모든 크기와 주제로 제공합니다.
- 특징
기본적으로 이미지 사이즈만 정해서 랜덤 이미지를 볼 수 있습니다.
사용자 설정 가능한 항목으로는 아래와 같습니다.
- 특정 키워드의 이미지(설정 안할 경우 고양이)
- 흑백
- 여러 키워드의 이미지(설정한 키워드에서 랜덤)
- 정적인 랜덤 이미지(항상 같은 이미지 나타남)
- 같은 페이지에서 랜덤 이미지
이 설정들은 url query params에 전달해서 설정할 수 있습니다.
흑백과 키워드 속성을 섞는것 처럼 여러가지 설정을 섞어서 사용할 수도 있습니다.
또한 이미지 상세 설명에 대한 JSON을 제공합니다.
- 사이트 URL: https://loremflickr.com/
LoremFlickr.com
Go pro! When you need more functionality, like requesting your own photos, or photos taken at a particular location, go pro! Sign up and receive 10.000 credits for free. After that, top up for as little as 1 euro. Go pro Examples https://loremflickr.com/32
loremflickr.com
- 호출 URL: https://loremflickr.com/600/400
- 코드 예시
<img src="https://loremflickr.com/600/400" />
- 이미지 렌더링 예시
