디자인 QA는 1:1로

두 화면이 언뜻 보기엔 똑같아 보여도 정작 중요한 수치는 죄다 20%씩 벌어져 있을 수 있다. 글자 크기, 줄 높이, 여백의 리듬, 대비. 눈대중은 이 바닥에서 제일 못 믿을 계측기인데, 우리는 몇 달 동안 그것 하나만 붙들고 있었다.

기억이 아니라 원본을 재라

"이 레퍼런스 느낌으로 만들어 줘"가 주문이라면, 첫 단계는 더 이상 무드보드가 아니다. 두 페이지의 콘솔에서 각각 돌리는 탐침이다.

const probe = (sel) => {
  const cs = getComputedStyle(document.querySelector(sel));
  return [sel, cs.fontSize, cs.lineHeight, cs.letterSpacing,
          cs.fontWeight, cs.color].join('  ');
};
['h1', 'h2', 'p', 'nav a', 'button'].map(probe).join('\\n');

레퍼런스에서 돌리고, 우리 것에서 돌리고, 두 표를 diff한다. 양쪽이 숫자를 보고 있으면 디자인 대화가 통째로 달라진다. "이게 더 가벼워 보이는데"가 "저쪽 h1은 88/0.94에 weight 900, 우리 건 72/1.1에 800"으로 바뀌는데, 이건 논쟁거리가 아니라 티켓이다.

인상 말고 크롭을 비교하라

• 우리 것과 저쪽 것에서 같은 영역을 잘라 1:1 크기로 위아래로 붙여 놓고 짝지어 본다. 썸네일로 나란히 볼 땐 사라지던 차이가 이러면 대번에 드러난다.
• 모바일부터 하라. 데스크탑이 감춰 주는 범죄를 390픽셀 뷰포트는 곧바로 자백한다.
• 기계적인 절반은 자동화한다. 사람이 안목을 쏟기 전에, 스크립트가 페이지를 훑으며 텍스트 넘침, 예상 못 한 가로 스크롤, 컨테이너보다 키가 큰 요소를 잡아낸다.
• 스크롤 동작도 기록하라. 이징 곡선과 핀 고정 시간은 디자인 결정이고, 그냥 느낌으로 아는 게 아니라 퍼포먼스 타임라인에서 측정된다.

그래도 결정은 안목이 한다

이 중 무엇도 판단을 대신하지 않는다. 판단에 사실을 먹여 줄 뿐이다. 측정값은 레퍼런스에서 어디가 어긋났는지를 알려 준다. 그 어긋남이 버그인지 선택인지는 여전히 사람이 정할 몫이고, 그 결정을 의식적으로 내리는 것, 그것이 거의 맞은 사이트와 제대로 맞은 사이트를 가르는 전부다.