Claude Design을 활용한 디자인 시스템 만들기 (7) — 디자인 검수 자동화

6편에서 고민한 검수 자동화를 어떻게 구현할 수 있을까.

AI가 비교하게 만들기

6편에서 적은 그대로다.
AI는 디자인을 만들고 코드를 쓰는데, 정작 사람은 화면 비교만 하고 있는 웃기는 상황이다.

그러면 비교도 AI에게 맡기면 된다.
방법은 간단하다. Claude Code에 chrome-devtools-mcp를 붙이면 AI가 브라우저를 직접 띄워서 화면을 볼 수 있다.

직접 보고, 비교하고, 짚어내기

자기가 적용한 코드의 URL로 AI가 직접 들어갔다.
초·중·고 결과 페이지를 학교급별로 스냅샷을 하나씩 띄워서 확인.

처음엔 fullPage로 한 장씩 찍었는데, 화면이 너무 작아서 디테일이 안 보였다.
AI가 그걸 알아채고 알아서 확대해서 조각조각 캡쳐하더니, 부분 단위로 시안과 비교하기 시작했다.
누가 시킨 것도 아닌데 자기 비교 작업의 정확도를 스스로 올리는 식이었다.

비교 결과는 대부분 정상.
폰트, 색, 레이아웃 다 시안대로 들어갔다.

중간 중간 깨진 디자인은 발견해서 직접 고쳐줬다. 예를 들어 특정 요소의 가로 폭이 9654px로 측정되는 오류.

뷰포트에선 정상인데 어딘가 가로 overflow를 만드는 요소가 있다는 뜻이다.
사람이 직접 봤으면 인쇄해보거나 모바일에서 화면이 잘리는 걸 보고 나서야 "어 이상하다" 했을 일을, 측정값으로 즉시 잡아낸 거다.

수정사항도 AI가

이 사이클이 자기 안에서 계속 굴러간다.
적용 → 직접 봄 → 시안과 비교 → 다른 부분 짚음 → 수정 → 다시 확인.

사람이 사이에서 할 게 거의 없다.
화면을 사람이 열어볼 필요도, 어디가 다른지 짚어줄 필요도, 어떻게 고치라고 알려줄 필요도 없다.

남는 건 결정뿐이다.
이걸 그대로 둘지, 고치면 어떻게 고칠지.
나머지는 AI가 알아서 한 바퀴를 돈다.

시리즈를 마무리 하며

우선, 이걸로 디자인 시스템 시리즈는 일단 매듭짓는다.
다른 프로젝트들 적용하면서 또 발견하는 게 있으면 그때 적어보겠다.