로렘 입숨 대신, 두들 입숨! : Doodle Ipsum

2021-09-29

1139

–

(1) 로렘 입숨이란?

화면 설계할 때, 텍스트를 넣어야 하는 경우가 꽤 많아요. 플레이스 홀더도 있고, 콘텐츠 리스트 내 타이틀과 서브타이틀도 그렇고 상세 페이지 내 소개 내용도 마찬가지. 어떤 내용이든 채워 넣어야 영역을 명확하게 확인할 수 있지만, 그 내용을 생각하기가 은근히 귀찮을 때가 많아요. 이런 상황에서 ‘로렘 입숨’은 우리가 스스로 내용을 채우지 않아도 되는, 기존의 불편을 보기 좋게 해결해줍니다.

“로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다. (출처 : 위키백과)”

로렘 입숨, 즉 더미 텍스트를 쉽게 생성할 수 있도록 도와주는 툴은 기존에도 많이 존재했어요. 영문은 물론 조건에 따라 한글로 된 내용을 만들어주는 서비스도 있었습니다. 그래서 오늘은 텍스트 중심의 로렘 입숨 생성 서비스 대신, 빈 화면 등에 임의로 채워 넣어야 하는 ‘일러스트’ 제공 서비스를 정리하고자 합니다.

(2) 텍스트 대신 일러스트레이션!

먼저, ‘Doodle Ipsum’ 서비스 기본 모습이에요. 일러스트 스타일을 선택할 수 있고, 비율과 배경 컬러를 지정할 수 있어요. 이렇게 세 가지 조건을 선택한 다음 이미지 URL이나 코드를 복사해 프로젝트에 활용할 수 있습니다. 사용 방법이 어렵지 않으면서, 스타일에 따른 일러스트를 로렘 입숨 형태로 활용할 수 있어 좋습니다.

우리가 직접 선택할 수 있는 조건을 조금 더 자세히 살펴볼게요. 가장 먼저 선택할 수 있는 건 우리가 활용하고자 하는 일러스트레이션의 ‘스타일’입니다.

Random (제공되는 스타일 중 자동으로 일러스트레이션 생성)
Flat
Hand drawn
Outline
Abstract
Avatar
Avatar2

랜덤을 제외하고 총 6개의 스타일이 제공되고 있어요. 각 스타일을 선택하면 오른쪽으로 선택한 일러스트를 확인할 수 있으며 스타일 버튼을 클릭하면 다른 일러스트를 이어서 볼 수 있습니다.

이어서 비율과 크기를 설정할 수 있어요.

1:1
16:9
9:16
4:3
3:4
자동
직접 입력 (높이와 길이)

5가지 기본 비율이 제공되며, 각 비율을 선택하면 앞서 확인한 일러스트 비율이 바로 변경됩니다. 원하는 비율이 없다면, 원하는 높이와 길이를 직접 입력해 확인하는 것도 가능해요.

마지막으로 선택한 일러스트의 배경 컬러를 지정할 수 있어요. 투명, 랜덤, 직접 입력 등 세 가지 중 하나를 선택할 수 있습니다. 마찬가지로 컬러를 선택하면 오른쪽으로 결과를 바로 확인할 수 있도록 구성되어 있습니다.

스타일, 비율(또는 크기), 배경 등의 조건을 선택하면 이제 원하는 곳에 가져갈 차례입니다. ‘Doodle Ipsum’은 2가지 방법을 제공하는데, 하나는 이미지 URL 또 하나는 코드입니다. 원하는 내용을 복사해 프로젝트 등에 쉽게 가져가 활용할 수 있어요.

6개 스타일에 따라 다양한 일러스트가 제공되고 있어, 빈 화면 등 텍스트가 뿐만 아니라 이미지를 함께 활용해야 하는 페이지를 제작하고 있다면 상황 별 적용이 가능해요. 이런 점이 ‘Doodle Ipsum’의 가장 큰 장점이라고 할 수 있습니다.

선택한 하나의 일러스트가 아니라 동일한 스타일의 여러 일러스트를 랜덤하게 제공하는 것도 가능합니다. 복잡한 과정을 거치지 않고 몇 가지 조건을 확인후 적용 가능한 수준이라 더 좋습니다.

파라미터에 조건을 추가하는 것도 할 수 있어요. 예를 들어 “https://doodleipsum.com/600?shape=circle&bg=ceebff” URL에 모양-원이란 내용을 붙이면 일러스트를 원형으로 활용할 수 있으며, https://doodleipsum.com/600?blur=50” 블러란 내용을 붙이면 블러 처리된 일러스트를 그대로 활용할 수 있어요. 별다른 편집 과정 없이 추가 조건을 붙이는 것으로 쉽게 추가 편집 기능을 활용할 수 있습니다.

(3) 정리