디자이너와 같이 일하며 달라진 것들

예전에는 디자인 파일을 받으면 그대로 코드로 옮기는 게 내 일이라고 생각했다. 그런데 시안과 구현이 미묘하게 다른 일이 계속 생겼다. 간격이 조금 다르고, 눌렀을 때 모습이 없고, 글이 길어지면 줄이 깨졌다. 그때마다 서로 “시안대로 한 건데요”, “이렇게 안 했는데요”를 반복했다. 몇 번 그러다 보니 문제는 사람이 아니라 주고받는 방식에 있다고 느꼈다.

상태를 빼먹고 주고받는다

시안은 보통 가장 이상적인 한 장면이다. 데이터가 적당히 들어 있고, 에러도 없고, 로딩도 없다. 그런데 실제 화면은 이런 상태들의 합이다.

비어 있을 때
로딩 중일 때
에러가 났을 때
글이 아주 길 때
눌렀을 때, 포커스가 갔을 때, 비활성일 때

이걸 구현 중에 하나씩 질문하면 디자이너도 나도 지친다. 그래서 컴포넌트를 받을 때 위 목록을 체크리스트처럼 같이 보고, 비어 있는 상태는 “이 부분은 제가 임시로 이렇게 할게요”라고 먼저 말한다. 임시안이 있으면 디자이너는 처음부터 그리는 대신 고치기만 하면 되니 응답이 훨씬 빨라진다.

구현 중간에 브라우저를 보여준다

다 만들고 나서 보여주면 이미 늦다. 지금은 절반쯤 되었을 때 스크린샷이나 개발 서버 링크를 보낸다. 완성도를 보여주는 게 아니라 질문을 하기 위해서다. “여기 이 간격이 4의 배수가 아닌데 의도하신 건가요?” 같은 질문은 화면을 같이 보면서 하면 30초 만에 끝난다.

처음엔 덜 만든 걸 보여주는 게 부끄러웠다. 그런데 디자이너 쪽에서도 완성된 걸 받고 수정 요청을 하는 것보다 중간에 방향을 잡는 편이 마음이 편하다고 했다.

값을 말이 아니라 이름으로 맞춘다

“조금 더 연하게”, “살짝 키워서” 같은 말은 사람마다 다르게 읽힌다. 그래서 색과 간격, 글자 크기는 이름이 있는 값만 쓰자고 약속했다. 디자인 파일의 스타일 이름과 코드의 변수 이름을 같게 만들면 대화가 짧아진다.

:root {
  --space-2: 8px;
  --space-3: 12px;
  --color-text-muted: #6b7280;
}

“muted 텍스트로 해 주세요”라고 하면 양쪽이 같은 값을 떠올린다. 새 값이 필요할 때는 임의로 만들지 않고 “토큰에 추가할까요, 이번만 예외로 할까요”를 묻는다. 대부분은 기존 값으로 해결됐다.

개발 제약은 일찍 말한다

반대로 개발 쪽 사정도 디자이너에게 알려 줘야 한다. 이 애니메이션은 성능 때문에 어렵다든가, 이 레이아웃은 데이터 길이에 따라 깨진다든가 하는 이야기다. 처음에는 눈치를 보다가 늦게 말했는데, 일찍 말할수록 디자이너가 대안을 찾을 시간이 많다. “안 돼요”로 끝내지 않고 “이렇게 하면 비슷하게 됩니다”까지 같이 가져가는 것을 원칙으로 한다.

아직 어려운 것

모든 게 매끄러운 건 아니다. 일정이 빠듯하면 이 과정을 생략하게 되고, 그러면 꼭 나중에 수정이 몰린다. 그래도 한 번 이 방식을 경험하면 생략했을 때의 비용이 눈에 보여서, 적어도 “이번엔 건너뛴다”고 말하고 건너뛰게 된다. 의식하고 건너뛰는 것과 모르고 건너뛰는 것은 꽤 다르다.

정리

시안을 받아서 옮기는 관계에서, 같은 화면을 보면서 묻고 답하는 관계로 바뀌었다. 속도도 속도지만 이쪽이 일하기에 덜 피곤하다. 앞으로 해 보고 싶은 건 디자인 단계에서 개발자가 먼저 한 번 보는 것이다. 만들기 전에 상태 목록만 같이 훑어도 나중의 수정이 많이 줄 것 같다.