웹 디자인 시안을 클라이언트에게 보여줘야 하는데 실제 콘텐츠가 아직 없다. 빈 칸으로 두면 레이아웃 느낌이 안 살고, 아무 글이나 넣으면 내용에 시선이 가서 디자인 피드백이 제대로 안 온다. 이럴 때 쓰는 게 Lorem Ipsum이다.
Lorem Ipsum이 뭔지
Lorem Ipsum은 인쇄와 출판 업계에서 500년 넘게 사용해온 더미 텍스트다. 라틴어처럼 보이지만 실제 라틴어 문장은 아니고, 키케로의 글에서 일부를 변형해서 만든 것이다.
의미 없는 텍스트이기 때문에 독자가 내용을 읽으려 하지 않는다. 덕분에 글자 크기, 줄 간격, 단락 간격 같은 타이포그래피 요소에만 집중할 수 있다.
참고 "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."로 시작하는 이 텍스트는 기원전 45년경 키케로의 "De Finibus Bonorum et Malorum"에서 따왔다. 1960년대 레트라셋 전사 시트에 사용되면서 업계 표준이 됐다.
한글 더미 텍스트가 필요한 이유
라틴어 Lorem Ipsum은 영문 디자인에는 적합하지만, 한글 웹사이트 시안에서는 문제가 있다.
- 한글과 영문은 글자 폭이 다르다. 영문 기준으로 디자인하면 한글을 넣었을 때 줄바꿈 위치가 바뀐다.
- 한글은 띄어쓰기 패턴이 영어와 다르다. 단어 길이 분포가 달라서 텍스트 블록 모양이 달라진다.
- 클라이언트에게 라틴어 텍스트를 보여주면 "이게 뭔가요?"라는 질문이 돌아온다.
한글 프로젝트라면 처음부터 한글 더미 텍스트를 넣는 게 정확한 레이아웃 검증이 된다.
더미 텍스트 생성하는 법
Lorem Ipsum 생성기에서 라틴어와 한글 중 원하는 언어를 선택하고, 단락/문장/단어 단위로 생성 개수를 지정하면 된다. HTML <p> 태그를 자동으로 감싸주는 옵션도 있어서 퍼블리싱 작업에 바로 붙여넣을 수 있다.
프리셋으로 빠르게 생성
| 프리셋 | 용도 |
|---|---|
| 1문단 | 카드 컴포넌트, 썸네일 설명 |
| 3문단 | 블로그 포스트 미리보기 |
| 5~10문단 | 전체 페이지 레이아웃 |
| 50단어 | 짧은 소개 문구 영역 |
| 100단어 | 상품 설명, 리뷰 영역 |
생성 결과에 글자 수, 단어 수, 바이트 크기가 같이 표시되니까 특정 분량에 맞춰야 할 때도 참고가 된다.
시안 단계에서 "내용은 나중에 넣겠습니다"라고 빈 칸을 두면 레이아웃 검증이 불가능하다. 더미 텍스트 하나 넣는 데 5초면 충분하니까.