AI가 시스템 밖으로 새지 않게

디자인시스템 등록을 끝내고도 결과물이 회사 룩앤필 밖으로 새는 케이스가 있어요. 그 부분을 잡는 패턴들을 정리해요.

일관성이 안 지켜지는 이유

디자인시스템 등록을 끝내고 프로젝트를 시작했는데도 Claude가 다른 색·폰트를 쓰는 경우가 종종 있어요. 흔한 원인 4가지:

1. 시스템이 부분적으로 비어 있음 — 등록된 색·컴포넌트만으로 안 풀리는 영역에서 Claude가 generic하게 채움
2. 프롬프트에 다른 시각 단서를 줌 — 첨부 이미지의 톤이 시스템과 충돌
3. 모델의 generic 편향 — 명시 안 하면 평균치 색·spacing 쪽으로 기우는 경향
4. 인터랙션 상태 누락 — hover, focus, disabled 등이 시스템에 없으면 Claude가 임의로 채움

각 원인별 대응법을 정리해요.

프롬프트에서 강제

가장 강한 방법. 프롬프트에 시스템 사용 명시를 한 줄 넣어요.

"지금 등록된 디자인시스템의 색·타이포·컴포넌트만 사용. 시스템에 없는 색·폰트는 도입하지 말 것."

이 한 줄이 시작 프롬프트에 있는 것과 없는 것의 결과 차이가 커요. 채팅으로 새로 다듬을 때마다 다시 쓸 필요는 없고, 시작 프롬프트에 한 번 넣어두는 정도면 세션 내내 작동해요.

다듬기 단계에서 잡기

생성 후에 시스템 외 요소를 발견하면 인라인 코멘트로 직접 짚어요.

• (다른 색의 버튼에 코멘트) "이 색은 시스템에 없어요. primary로 바꿔주세요."
• (다른 폰트로 들어온 헤드라인에 코멘트) "본문 폰트랑 맞춰서 sans-serif로"
• (임의 spacing이 들어간 카드에 코멘트) "spacing은 시스템 토큰만 사용 (8/16/24)"

채팅으로 같은 요청을 보낼 수도 있지만 "어디"의 정보를 인라인이 자동으로 주니까 이쪽이 빨라요.

슬라이더로 변형 범위 통제

슬라이더는 변수 하나만 정확히 움직이니까 시스템 안에서만 조정하기에 좋아요.

• spacing slider → 시스템 토큰 단계 안에서만 움직임
• color saturation slider → 시스템 색의 채도만 조정
• corner radius slider → 시스템에 등록된 radius 단계 사용

채팅으로 "더 부드럽게" 요청하면 Claude가 시스템 밖 값을 쓸 수도 있는데, 슬라이더는 시스템이 정의한 범위 안에서만 움직여요.

variation 비교로 검증

일관성 검증을 다듬기 사이클의 일부로 만들어요. 새 페이지를 만들 때:

1. 첫 결과 받음
2. 채팅으로 "다른 톤으로 한 버전 더 보여줘" 요청
3. 두 버전을 나란히 두고 시스템 외 요소가 있는지 확인

variation을 만들면 Claude가 같은 시스템에서 다양한 해석을 보여주는데, 시스템 외로 새는 케이스가 보이면 그게 어디서 새는지 비교로 잡혀요.

시스템 자체를 보강

위 패턴들로 매번 잡고 있다면, 시스템 자체에 빠진 게 있는 신호예요. 예시:

• hover/focus 상태가 시스템에 없어서 매번 다르게 나옴 → 시스템에 인터랙션 상태 추가
• 다크 모드 색이 매번 다름 → 다크 토큰 등록
• 폼 spacing이 매번 다름 → form-specific 토큰 추가

Settings → Design Systems에서 디자인시스템을 점진적으로 보강할 수 있어요. 처음부터 완벽한 시스템을 만들려고 하지 말고, 실전에서 빠진 게 드러날 때마다 추가하는 흐름이 효율적이에요.

디자인시스템 영역은 여기까지. 다음 Part는 만든 디자인을 Claude Code로 넘기는 영역이에요. 첫 챕터에서 핸드오프 번들 안에 뭐가 들었는지부터 봐요.