더미 이미지란? 웹사이트를 개발하다 보면 완성시의 디자인과 차이가 나는 경우가 생긴다. 보통 웹사이트가 개발되고 콘텐츠가 채워졌을 때의 느낌과 비어있는 느낌의 갭 차이가 있기 때문에 그렇다.
우리가 인터넷에서 옷을 보고 샀는데 막상 입어보니까 옷이 안어울리는 경우와 비슷하다
모델들이 입는 옷을 일반인이 입어서 그래...
웹사이트의 콘텐츠란 것은 보통 텍스트와 이미지로 이루어진다. 동영상도 있지만 재생하기 전까지는 이미지로 보일 뿐이다. 따라서 두 가지 리소스를 레이아웃에 적당히 비치하면 전체 프레임워크가 자신들 프로젝트에 적합한지 아닌지 판단하는데 상당한 도움을 준다. 완전하지는 않겠지만 아무것도 없는 것에 비하면 훨씬 낫다.
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>
가장 심플한게 가장 강력한 도구가 될 수가 있다. 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>
있는 그대로 더미를 표현하니까 전문 디자이너의 느낌이 난다. 역시 추상적인 것이 완벽한 것인가.
상당히 많은 양의 이미지를 지정한 사이즈에 따라 랜덤으로 출력한다.
플리커와 500px에서 주제에 따라 스크레이핑한 이미지를 처리하여 보여주는 방식이다. 하루에도 수십만장의 이미지를 제공하는 것을 보면 상당히 많이 사용되는 듯 하다.
<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>
placeholder 와 비슷하지만 이쪽은 글자를 생성할 수 있다. 그 밖에 배경색등 다양한 조작이 가능하게 잘 만들어놨다.
신기한 이미지 제너레이터가 많이 있다. 바베큐 이미지 제너레이터같은 것도 있다 ㅋㅋㅋ 사용법은 위의 것들과 거의 비슷하니까 시간날 때 한번 Try 해보자.
상업적으로 사용하는 실제 이미지를 찾는 다면 무료 스톡 사이트도 있다. 최근에는 고퀄리티에 상업적으로 사용할 수 있는 이미지 자료가 상당히 많다. (심지어 동영상도 있다) 아무 이미지나 사용하여 괜히 저작권 문제에 휘말리지 말고, 스톡사이트를 적극적으로 활용하자. CC 마크의 내용을 항상 확인하도록 주의한다. (크리에이티브 커먼즈 저작권 표기)
https://tactmarketing.tistory.com/3