AI 도입 전, 디자인 시스템의 규칙부터 명확하게
1. AI는 시스템의 빈틈도 빠르게 복제합니다
생성이 빨라져도 리뷰와 수정이 늘면 전체 작업 시간은 줄지 않습니다.
- 문서화되지 않은 예외와 중복 컴포넌트도 AI에게는 따라 할 패턴이 됩니다.
- 임시로 만든 스타일을 표준으로 받아들이거나, 이름만 다른 컴포넌트를 별개로 취급할 수 있습니다.
- AI가 규칙과 예외를 구분하려면 사용 의도와 제한 조건이 문서에 드러나야 합니다.
- 사람이 경험으로 메우던 빈틈을 그대로 두면, 생성 결과에도 같은 모호함이 이어집니다.
2. 도입 준비도를 다섯 가지 기준으로 점검합니다
컴포넌트 목록과 토큰 정의를 바탕으로, 생성 전에 정리할 문제를 찾습니다.
- 완전성: 필요한 상태·크기·변형·예외 상황이 정의되어 있는가?
- 신뢰성: 접근성과 반응형 동작이 예측 가능하고 일관적인가?
- 일관성: 같은 역할을 하는 중복 컴포넌트나 충돌하는 이름이 없는가?
- 확장성: 숨은 예외 지식 없이 새로운 변형·테마·브랜드를 추가할 수 있는가?
- 기계 가독성: 팀 내부 사정을 모르는 AI도 문서만으로 사용 규칙을 따라갈 수 있는가?
3. 생성 전에 맥락을 주고, 생성 후에는 검증합니다
컴포넌트별로 짧은 컨텍스트 팩—AI가 참고할 사용 규칙 묶음을 준비합니다.
- 담을 내용: 목적·변형·크기·토큰·상태·금지 조합
- 예: 삭제 같은 위험한 동작에는 일반 주요 버튼 스타일을 사용하지 않도록 명시합니다.
- Figma Make: 실제 컴포넌트와 사용 예시를 제공하고, Figma 파일의 구조를 정리합니다.
- 레이어·컴포넌트는 역할이 드러나게, 변수는 `color/surface/primary`처럼 용도가 드러나게 이름 붙입니다.
- 오토 레이아웃을 적용하고, 수정할 범위와 유지할 영역을 구분합니다.
- Claude: 작업을 시작할 때 규칙을 제공하고, 정의되지 않은 부분은 추측하지 말고 표시하도록 요청합니다.
- 같은 체크리스트로 자체 검토하게 한 뒤 사람이 최종 확인합니다.
- 출시 전 확인: 토큰 사용, 간격 규칙, 필수 상태, 텍스트 대비, 중복 여부, 명명 규칙, 문서 갱신을 검토합니다.
4. 시스템의 준비도에 맞춰 작게 시작합니다
원문은 다섯 기준을 각각 1~5점으로 평가하고, 평균에 따라 실험 범위를 정하는 방식을 제안합니다.
- 1~2점: 컴포넌트 생성보다 시스템 점검과 문서화를 먼저 진행합니다.
- 3점: 컨텍스트 팩을 활용해 중요도가 낮은 새 컴포넌트 생성을 시험합니다.
- 4~5점: 사람의 검토를 전제로, 영향이 작은 흐름에서 생성형 UI를 시범 적용합니다.
- 실험에는 기간·담당자·성공 기준·AI의 작업 범위·되돌릴 방법을 함께 정합니다.
- 점수는 출발점을 정하는 참고 기준이며, 실제 품질 검증은 별도로 필요합니다.
