템플릿

부품을 모아 두는 일은 일찍 자리를 잡았습니다. 버튼과 입력창을 한 번 만들어 컴포넌트 라이브러리에 넣어 두면 어느 화면에서든 같은 모양이 나옵니다.

그런데 부품이 같아도 화면은 계속 달라졌습니다. 목록 화면 세 개의 왼쪽 메뉴 폭이 240픽셀, 260픽셀, 280픽셀로 갈리고, 본문 영역과 메뉴 사이 여백이 화면마다 다릅니다. 부품 단위에서는 아무 문제가 없으니 리뷰에서도 잡히지 않습니다. 새 화면을 만들 때마다 같은 배치 결정을 처음부터 다시 하고, 두 사람이 각자 정하면 두 가지 답이 남습니다.

템플릿은 그 배치를 재사용 단위로 올린 것입니다. 부품을 어디에 얼마만큼의 폭으로 놓을지까지 한 번 정해 두고, 새 화면은 그 틀을 골라 내용만 채웁니다.

내용을 비운 상태로 영역과 배치만 정합니다. 정하는 것은 넷입니다.

1. 영역을 나누고 각 영역에 무엇이 들어갈지만 표시합니다. 실제 문구 대신 회색 상자를 두는 식이라 와이어프레임과 비슷해 보이지만, 여기 놓이는 것은 임의의 상자가 아니라 시스템에 있는 부품 묶음입니다.
2. 의미 있는 영역을 이루는 부품 묶음인 오가니즘을 배치합니다. 상단 바, 왼쪽 메뉴, 목록 영역, 오른쪽 상세 영역처럼 이미 만들어 둔 덩어리를 자리에 놓습니다.
3. 폭과 여백과 순서를 숫자로 못 박습니다. 왼쪽 메뉴 260픽셀, 본문 최대 폭 960픽셀, 영역 사이 여백 24픽셀처럼 적어 둡니다.
4. 화면 폭이 줄었을 때의 규칙과 영역이 비었을 때의 모습을 함께 정합니다. 좁은 화면에서 왼쪽 메뉴를 접을지 아래로 내릴지, 목록에 항목이 없을 때 그 영역을 어떻게 채울지가 이 층의 결정입니다.

여기에 실제 내용이 들어가면 페이지가 됩니다. 아토믹 디자인에서 마지막 층을 따로 둔 이유가 이것입니다. 틀은 여러 화면이 공유하고, 페이지는 그 틀에 특정 내용이 들어간 한 장입니다.

"이건 새 템플릿이 아니라 기존 목록 템플릿에 들어가는 화면이에요."

배치가 이미 있는 틀과 같으니 새로 만들지 말자는 뜻입니다.

"템플릿 단계에서 왼쪽 메뉴 폭을 정해 주세요."

화면마다 다시 정하지 않도록 한 층 위에서 결정하자는 요청입니다.

"제목이 길어지면 어디가 밀리는지 템플릿에서 확인하죠."

내용을 넣기 전에 틀에서 한계를 보자는 제안입니다.

페이지덱에는 템플릿이 다섯 개 있습니다. 민서가 이 다섯을 정리하기 전에는 설정 화면 네 개의 본문 폭이 모두 달랐습니다. 태오는 이 틀을 코드에서도 같은 단위로 만들어 두어, 새 화면이 폭을 직접 적지 않고 틀을 불러 쓰게 했습니다.