시안에 들어가는 문장은 대개 길이가 고릅니다. 제목은 전부 한 줄이고, 요약은 전부 두 줄이며, 버튼 라벨은 전부 두 글자입니다. 이 상태에서는 어떤 레이아웃도 잘 작동하는 것처럼 보입니다. 문제는 그 고른 길이가 실제 사이트에 존재하지 않는다는 것입니다.
고른 길이가 감추는 것
실제 콘텐츠를 넣으면 세 가지가 한꺼번에 드러납니다.
첫째는 높이의 불규칙입니다. 카드 제목이 한 줄에서 세 줄 사이를 오가면 카드 아래쪽의 버튼 위치가 줄마다 달라집니다. 이 문제는 자리표시자 시안에서는 절대 나타나지 않습니다.
둘째는 넘침입니다. “저장” 을 기준으로 만든 버튼에 “변경사항 저장하기” 가 들어가면 버튼이 커지거나, 글자가 잘리거나, 옆 요소를 밀어냅니다. 셋 중 무엇이 일어날지는 시안이 정하지 않았으므로 구현이 정합니다.
셋째는 부족입니다. 넘침만큼 자주 일어나는 반대 경우입니다. 세 줄을 전제로 만든 카드에 한 줄짜리 요약이 들어가면 아래가 휑하게 비고, 그 여백은 의도로 보이지 않습니다.
무엇을 구해 오는가
실제 콘텐츠 전부가 필요한 것은 아닙니다. 양 끝과 가운데 세 종류면 충분합니다.
아직 콘텐츠가 없는 신규 사이트라면, 가장 비슷한 기존 자료를 씁니다. 회사 소개서의 문장, 기존 카탈로그의 제품명, 담당자가 실제로 쓴 이메일 문장. 지어낸 문장보다 언제나 낫습니다 — 지어낸 문장은 우리가 원하는 길이로 지어지기 때문입니다.
한글과 영어가 같은 칸에서 다르게 움직입니다
다국어 사이트를 만든다면 이 문제가 한 겹 더 있습니다. 같은 뜻의 문장이 언어마다 길이가 다르고, 줄바꿈 규칙도 다릅니다. 한글은 어절 단위로 끊기고, 영어는 단어 사이에서 끊기며, 띄어쓰기가 없는 언어는 끊을 자리를 따로 알려 주지 않으면 한 덩어리로 취급됩니다.
그래서 다국어를 염두에 둔 시안은 같은 화면을 두 언어로 한 번씩 만들어 보는 것이 안전합니다. 버튼 · 탭 · 내비게이션처럼 폭이 고정된 요소에서 특히 그렇습니다.
실제 콘텐츠가 레이아웃에 미치는 영향은 개발 워크플로우 아카이브에서 더 다루고, 이미 배포된 화면에서 이런 문제를 찾아내는 절차는 작업 과정에 정리돼 있습니다.
다음 회차
콘텐츠가 실제로 들어가면 다음 질문이 따라옵니다 — 이 콘텐츠를 누가 고칠 수 있나. 다음 회차는 편집 가능한 영역을 미리 정하는 이야기입니다.