웹 디자이너를 위한 더미 이미지 사이트 모음 2020

웹 디자이너를 위한 더미 이미지 사이트 모음

더미 이미지란? 웹사이트를 개발하다 보면 완성시의 디자인과 차이가 나는 경우가 생긴다. 보통 웹사이트가 개발되고 콘텐츠가 채워졌을 때의 느낌과 비어있는 느낌의 갭 차이가 있기 때문에 그렇다.

우리가 인터넷에서 옷을 보고 샀는데 막상 입어보니까 옷이 안어울리는 경우와 비슷하다

~~모델들이 입는 옷을 일반인이 입어서 그래...~~

웹사이트의 콘텐츠란 것은 보통 텍스트와 이미지로 이루어진다. 동영상도 있지만 재생하기 전까지는 이미지로 보일 뿐이다. 따라서 두 가지 리소스를 레이아웃에 적당히 비치하면 전체 프레임워크가 자신들 프로젝트에 적합한지 아닌지 판단하는데 상당한 도움을 준다. 완전하지는 않겠지만 아무것도 없는 것에 비하면 훨씬 낫다.

1. Lorempixel

http://lorempixel.com/

lorempixel - placeholder images for every case

lorempixel.com

lorem ipsum 을 따라서 lorempixel 이라고 작명한 센스가 돋보인다.

심플하게 <img src=""/>에 주소만 붙이면 된다. 무엇보다 아래 선택을 보면 사이즈와 주제를 설정할 수가 있다. 웬만한 카테고리는 들어가 있으므로 개발하는게 수월할 것이다. 예를 들어 식당 프렌차이즈라면 food 이미지를 활용할 수 있다. 랜덤하게 출력이 된다. 이미지 저작권은 CC By 이나 만약 레이아웃 작업 이상의 상업목적에 사용 하려면 개별 확인을 해야한다.

<예제>

<body> 
    <h1>image test</h1>
    <img src="http://lorempixel.com/600/400"/>
    <img src="http://lorempixel.com/g/400/300/cats/"/>
    <br/>
    
    <img src="http://lorempixel.com/300/400/sports/"/>
    <img src="http://lorempixel.com/300/350/city/"/>
    <img src="http://lorempixel.com/400/400/food/"/>
    <br/>
    <img src="http://lorempixel.com/300/200/sports/3/"/>
    <img src="http://lorempixel.com/300/200/sports/Text Test/"/>
    <img src="http://lorempixel.com/400/200/nature/1/This is nature"/>
</body>

2. Placeholdit

https://placeholder.com/

Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers

What Is Placeholder.com? Placeholder.com generates custom placeholder images on the fly, like these examples:- How To Use Our Placeholders Just specify the image size after our URL (https://via.placeholder.com/) and you'll get a placeholder image.

placeholder.com

가장 심플한게 가장 강력한 도구가 될 수가 있다. Lorem pixel 처럼 이미지는 없지만 있는 그대로 표시해 둘 수 있어서 좋다. 예제를 보면 이해가 빠르다.

<body> 
    <h1>image test</h1>
    <img src="https://via.placeholder.com/200"/>
    <img src="https://via.placeholder.com/300/09f.png/fff"/>
    <img src="https://via.placeholder.com/250/69f/fff.png"/>
    <br/>    
    <img src="https://via.placeholder.com/400x100"/>
    <img src="https://via.placeholder.com/300x200/00ff00.png"/>
    <img src="https://via.placeholder.com/250x100/ffff00.png"/>
    <br/>
    <img src="https://via.placeholder.com/640x230/ff00ff.png/fff"/>
</body>

있는 그대로 더미를 표현하니까 전문 디자이너의 느낌이 난다. 역시 추상적인 것이 완벽한 것인가.

3. PlaceIMG

상당히 많은 양의 이미지를 지정한 사이즈에 따라 랜덤으로 출력한다.

플리커와 500px에서 주제에 따라 스크레이핑한 이미지를 처리하여 보여주는 방식이다. 하루에도 수십만장의 이미지를 제공하는 것을 보면 상당히 많이 사용되는 듯 하다.

http://placeimg.com/

PlaceIMG | Easy FPO and Dummy Images for Any Project

placeimg.com

<body> 
    <h1>image test</h1>
    <img src="http://placeimg.com/480/360/animals"/>
    <img src="http://placeimg.com/480/300/nature"/>
    <br/>    
    <img src="http://placeimg.com/480/300/people"/>
    <img src="http://placeimg.com/480/250/tech"/>
    <br/>
    <img src="https://via.placeholder.com/640x230/ff00ff.png/fff"/>
</body>

4. Dummy Image.com

https://dummyimage.com/

Dynamic Dummy Image Generator - DummyImage.com

Dynamic Dummy Image Generator by Russell Heimlich (@kingkool68) Documentation Size width x height Colors background color / text color Colors are represented as hex codes (#ffffff is white) Colors always follow the dimensions, https://dummyimage.com/250/ff

dummyimage.com

placeholder 와 비슷하지만 이쪽은 글자를 생성할 수 있다. 그 밖에 배경색등 다양한 조작이 가능하게 잘 만들어놨다.

5. 그밖에 해외사이트 추천

신기한 이미지 제너레이터가 많이 있다. 바베큐 이미지 제너레이터같은 것도 있다 ㅋㅋㅋ 사용법은 위의 것들과 거의 비슷하니까 시간날 때 한번 Try 해보자.

21 of the Best Placeholder Image Generators

Looking for visual placeholders? Well, we've got you covered. Checkout our extensive list of all the best placeholder image services the 'net has to offer.

loremipsum.io