디자인을 넘기고 나면 질문이 시작됩니다. “카드가 세 개일 때는 어떻게 놓나요”, “제목이 두 줄이 되면요”, “목록이 비어 있으면 무엇을 보여 주나요”. 시안을 스무 장 넘겼는데도 스물한 번째 화면은 여전히 그려져 있지 않기 때문에 생기는 질문입니다.
이 문제를 시안의 수로 풀려고 하면 끝이 나지 않습니다. 화면의 경우의 수는 콘텐츠가 늘어날수록 계속 불어나고, 디자이너가 그것을 전부 그리는 날은 오지 않습니다. 핸드오프의 목표는 화면을 다 그리는 것이 아니라 그리지 않은 화면까지 개발자가 스스로 만들 수 있게 하는 것입니다.
시안은 결과이고, 규칙은 결과를 만든 것
시안 한 장에는 수십 개의 결정이 들어 있습니다. 이 여백이 24인 이유, 이 글자가 18인 이유, 이 회색이 저 회색과 다른 이유. 시안만 넘기면 그 결정들은 측정해서 되찾아야 하는 값이 됩니다. 개발자는 자를 대고 24를 읽어 내고, 다음 화면에서 26을 읽고, 두 값 중 무엇이 의도인지 알 수 없어 결국 물어봅니다.
반대로 “여백은 4의 배수 척도에서 고른다” 는 한 줄을 함께 넘기면, 개발자는 24와 26 중 어느 쪽이 실수인지 스스로 판단합니다. 규칙은 시안을 대체하지 않고, 시안이 답하지 못하는 질문에 답합니다.
핸드오프 꾸러미 — 네 가지
실제로 넘겨야 하는 것은 네 덩어리입니다. 순서가 곧 중요도입니다.
토큰 척도는 이 사이트가 쓸 수 있는 값의 전체 목록입니다. 색 열 개, 간격 열두 단계, 글자 크기 여덟 단계 — 이 목록에 없는 값은 쓰지 않는다는 약속이 함께 갑니다. 목록이 있으면 새 화면을 만들 때 값을 발명할 필요가 없습니다.
컴포넌트 목록은 반복되는 조각의 이름표입니다. 카드 · 배지 · 알림 박스 · 버튼처럼 여러 화면에 나오는 것들에 이름을 붙이고, 그 이름을 개발자도 그대로 씁니다. 다음 회차에서 이 이름 맞추기만 따로 다룹니다.
상태와 예외는 가장 자주 빠지고 가장 비싸게 되돌아옵니다. 기본 상태만 그려 넘기면 빈 목록 화면과 오류 화면은 개발자가 상상해서 만들게 되고, 그 상상은 대체로 디자이너의 의도와 다릅니다.
무엇이 빠지면 무엇이 어긋나는가
정리하면 이렇습니다. 시안은 가장 눈에 잘 보이지만 가장 적은 정보를 담은 산출물입니다. 그 뒤의 결정을 함께 넘기지 않으면, 결정은 구현 과정에서 다시 내려지고 그 결정권은 디자이너에게 없습니다.
워드프레스는 이 규칙들을 담기에 좋은 그릇입니다. 테마의 스타일 계층에 토큰을 심어 두면 이후 화면이 그 목록 안에서만 만들어지고, 편집자가 글을 써도 디자인이 흔들리지 않습니다. 관련 글은 개발 워크플로우 아카이브에 모여 있고, 실제 작업이 어떤 순서로 진행되는지는 작업 과정에 절차 그대로 공개돼 있습니다.
다음 회차
꾸러미의 두 번째 항목부터 시작합니다. 다음 회차는 컴포넌트 이름 맞추기입니다 — 디자인과 코드가 서로 다른 이름을 쓰면, 모든 대화에 번역 한 단계가 영구히 붙습니다.