디자인 QA: 시안과 구현물이 다를 때

디자인 도구와 브라우저는 다른 환경입니다. 폰트 렌더링이 다르고, 여백 계산 방식이 다르고, 이미지 처리도 다릅니다.

또 퍼블리싱 과정에서 재현하기 어려운 부분은 근사치로 처리되기도 합니다.

픽셀 단위로 전부 비교할 필요는 없습니다. 눈에 띄는 차이와 의도가 훼손된 부분을 찾으면 됩니다.

특히 위계가 무너지거나 가독성이 떨어진 부분이 중요합니다.

'여백이 좁다'는 모호합니다. 얼마나 좁은지, 어디와 비교해 그런지 알려줘야 합니다.

시안과 실제 화면을 나란히 캡처해 보여주면 가장 명확합니다.

픽셀 단위로 완전히 같게 만들려면 비용과 시간이 많이 듭니다. 그리고 브라우저 환경에 따라 어차피 달라집니다.

의도가 전달되는 수준이면 충분하다는 기준을 서로 합의해 두는 것이 좋습니다.

□  시안과 실제 화면을 나란히 비교했는가

□  글자 크기 위계가 유지되는가

□  브랜드 색이 정확히 적용됐는가

□  섹션 간 여백이 충분한가

□  이미지가 뭉개지지 않았는가

□  버튼의 상태 변화가 구현됐는가

□  차이를 캡처와 함께 구체적으로 전달했는가

□  어디까지 맞출지 기준을 합의했는가