CLOSE SEARCH

웹 디자인에 활용할 수 있는 Placeholder 이미지 서비스

웹 프로젝트를 진행하면서 레이아웃을 구성할 때, 디자인이 완성되지 않았다면 임시 이미지로 그 자리를 채우게 됩니다. 이러한 이미지는 포토샵이나 다른 이미지 편집툴을 이용해서 하나하나 만들어서 사용할 필요가 없습니다. 이번 글에서 소개하는 두개의 사이트는 임시 이미지를 손쉽게 생성해주는 서비스를 제공합니다.

http://placehold.it

http://www.dummyimage.com

사용법은 아주 간단합니다. 다음 코드와 같이 웹사이트 url 뒤에 원하는 이미지의 크기를 작성한 다음 img 태그의 src 속성에 지정해주면 원하는 크기의 이미지가 링크됩니다. 가로 또는 세로 크기를 나타내는 값이 반드시 하나 이상 입력되어야 합니다.

정사각형의 이미지가 필요한 경우에는 가로 크기만 입력하면 됩니다. 직접 가로와 세로 크기를 지정할 경우에는 2번 라인처럼 “가로x세로” 형태로 원하는 크기를 전달하면 됩니다. 3~4번 라인과 같이 가로 또는 세로 크기만 지정하고 원하는 비율을 지정할 수도 있습니다. 이 방식은 현재 dummyimage에서만 지원하고 있습니다.

<1번 라인 실행 결과>

<3번 라인 실행 결과>

dummyimage는 여기에서 한걸음 더 나아가 웹에서 자주 사용되는 멀티미디어 요소들의 크기를 키워드로 설정할 수 있는 기능도 제공합니다. 지원되는 키워드의 전체 목록은 http://dummyimage.com/#standards 에서 볼 수 있습니다.

 

Background Color & Text Color

기본적으로 생성되는 이미지의 배경색상은 회색이고, 텍스트의 색상은 진한회색(placehold) 또는 검은색(dummyimage)입니다. 이미지의 크기를 나타내는 경로 뒤에 원하는 색상을 16진수 코드로 지정합니다.

색상 값은 반드시 크기를 지정하는 값 뒤에 와야 하며, 첫번째 색상 값은 배경색을 설정하고 두번째 색상 값은 텍스트의 색상을 설정합니다. 두 서비스 모두 사용방법이 동일합니다.

<2번 라인 실행 결과>

 

Image Format

두 서비스에서 생성되는 기본 이미지는 gif 포멧입니다. 레이아웃 작업시에 잠시 사용하는 임시 이미지이기 때문에 이미지 포멧을 신경쓸 필요는 없지만, 필요하다면 jpg나 png와 같은 포멧을 지정할 수도 있습니다. 크기나 색상 옵션 뒤에 .jpg 와 같은 형식을 지정해주면 되며, 포멧 지정 문자열의 위치가 옵션 뒤라면 어떤 옵션이라도 상관없습니다. 두 서비스 모두 사용방법이 동일합니다.

 

Custom Text

생성된 이미지에는 이미지의 크기가 표시됩니다. 여기에 커스텀 텍스트를 지정하여 각 이미지의 역할을 좀 더 직관적으로 나타낼 수 있습니다. 이전과 마찬가지로 두 서비스 모두 사용방법이 동일합니다.

커스텀 텍스트를 지정할 때는 마지막 옵션 뒤에 “&text=(원하는 텍스트)” 형태로 추가합니다. 이 설정은 반드시 url의 마지막 부분에 와야하며 &문자를 빠트리지 않도록 주의해야 합니다. 커스텀 텍스트에는 영문자, 숫자, 특수문자를 표시할 수 있고, 공백이 필요한 경우에는 공백 대신 + 문자를 적어주어야 합니다.

< 1번 라인 실행 결과 >

< 2번 라인 실행 결과 >

Filed under: Web