이 글은 누구를 위한 것인가
- Figma AI, Galileo, Uizard 등으로 생성된 UI를 실제 제품에 반영하는 디자이너
- AI가 만든 컴포넌트를 구현해야 하는 개발자
- 팀 내 AI 디자인 도구 도입 기준을 세우려는 디자인 리드
들어가며
2026년 현재 AI 디자인 도구의 품질은 눈부시게 향상됐다. Figma AI는 텍스트 한 줄로 섹션을 생성하고, Galileo AI는 요구사항을 분석해서 전체 화면 레이아웃을 만든다. 하지만 "생성한다"는 것과 "사용할 수 있다"는 것은 다르다.
AI가 만든 UI는 시각적으로 그럴듯해 보이지만, 접근성 기준을 무시하거나, 기존 디자인 시스템과 충돌하거나, 실제 구현 불가능한 레이아웃을 만들어내는 경우가 많다. 이 글에서는 AI 생성 UI를 제품에 반영하기 전 거쳐야 할 검수 기준을 정리한다.
이 글은 bluefoxdev.kr의 AI 디자인 도구 활용 가이드 를 참고하고, 품질 관리 관점에서 확장하여 작성했습니다.
1. AI 생성 UI의 흔한 문제점
1.1 접근성 문제
자주 발생하는 접근성 오류:
- 색상 대비가 WCAG AA 기준(4.5:1) 미달
- 버튼에 텍스트 없이 아이콘만 사용 (aria-label 누락)
- 터치 타겟이 44px 미만
- 포커스 인디케이터 없음
- 스크린 리더를 위한 의미론적 계층 부재
1.2 디자인 시스템 불일치
AI는 기존 디자인 시스템을 모른다. 독자적인 색상, 폰트, 간격을 사용하는 경우가 많다.
흔한 불일치 패턴:
- 정의되지 않은 색상 값 사용 (#3A7BD5 → 시스템 토큰 없음)
- 폰트 크기 불규칙 (13px, 17px → 시스템 스케일 밖)
- 간격 값 비표준 (7px, 13px → 4의 배수 원칙 위반)
- 아이콘 스타일 혼재 (선형 vs 면형)
1.3 구현 불가능한 레이아웃
AI는 CSS의 제약을 이해하지 못한다.
구현 어려운 패턴:
- 절대 위치값 기반 레이아웃 (반응형 불가)
- 중첩 그라디언트 남용
- 실제 콘텐츠 길이를 고려하지 않은 고정 크기
- 모바일 화면에서 데스크톱 레이아웃 그대로 사용
2. AI 생성 UI 검수 체크리스트
2.1 접근성 검수 (필수)
| 항목 | 도구 | 기준 |
|---|---|---|
| 색상 대비 | Stark Plugin, Figma 내장 | 일반 텍스트 4.5:1, 큰 텍스트 3:1 |
| 터치 타겟 크기 | Figma 측정 도구 | 최소 44×44pt |
| 포커스 표시 | 수동 확인 | 모든 인터랙티브 요소 포커스 링 있음 |
| 색상 외 정보 전달 | 수동 확인 | 색상에만 의존하지 않음 |
| 텍스트 확대 | 200% 확대 시 수동 확인 | 레이아웃 깨지지 않음 |
2.2 디자인 시스템 일치 검수
검수 절차:
1. 사용된 색상 값 추출 → 시스템 토큰과 대조
2. 폰트 크기/웨이트 → 타이포그래피 스케일 대조
3. 간격 값 → 스페이싱 시스템(4px 그리드) 대조
4. 컴포넌트 → 기존 컴포넌트 라이브러리 대조
5. 아이콘 → 아이콘 시스템 일치 여부
자동화 도구 활용:
# Figma REST API로 사용된 색상 추출
curl "https://api.figma.com/v1/files/FILE_KEY" \
-H "X-Figma-Token: $FIGMA_TOKEN" \
| jq '.document | .. | objects | select(.type == "RECTANGLE") | .fills'
2.3 구현 가능성 검수
개발자가 확인해야 할 항목:
□ 모든 요소의 크기가 실제 콘텐츠 기반인가?
□ 반응형 동작이 명확하게 정의됐는가?
□ 스크롤 가능한 영역이 명시됐는가?
□ 인터랙션 상태(hover, focus, active, disabled)가 정의됐는가?
□ 빈 상태(Empty State)가 디자인됐는가?
□ 긴 텍스트 처리가 고려됐는가? (말줄임, 줄바꿈)
3. 팀 워크플로우에 검수 단계 추가하기
3.1 AI 생성 → 검수 → 수정 → 승인 플로우
[AI 툴로 초안 생성]
↓
[디자이너 검수 - 30분]
- 접근성 자동 검사 (Stark)
- 시스템 일치 여부 육안 확인
↓
[개발자 피드백 - 15분]
- 구현 가능성 체크
- 반응형 고려사항 확인
↓
[수정 및 승인]
↓
[Figma Dev Mode에서 전달]
3.2 팀 규칙 정의
# AI 생성 UI 사용 정책
## 허용
- 와이어프레임/아이디어 스케치 단계
- 레이아웃 방향 탐색
- 초안 빠른 생성 (반드시 검수 후 수정)
## 금지
- 검수 없이 AI 생성 UI 바로 개발 전달
- 접근성 기준 미달 상태로 프로덕션 반영
- 디자인 시스템 외 색상/폰트 그대로 사용
## 검수 책임
- 접근성: 디자이너 책임
- 구현 가능성: 개발자 책임
- 최종 승인: 디자인 리드
4. 주요 AI 디자인 도구별 특성
| 도구 | 강점 | 주의점 |
|---|---|---|
| Figma AI | Figma 내 통합, 기존 파일 컨텍스트 인식 | 아직 일관성 낮음 |
| Galileo AI | 복잡한 화면 빠른 생성 | 접근성 거의 무시 |
| Uizard | 스케치→디지털 변환 | 구현 불가 레이아웃 자주 생성 |
| Claude/GPT로 SVG 생성 | 맞춤형 일러스트 | 복잡한 SVG 코드 최적화 필요 |
마무리: AI는 도구, 판단은 사람이
AI 디자인 도구는 생산성을 높이지만, 품질 책임은 여전히 디자이너와 개발자에게 있다. "AI가 만들었으니 빠르게 쓰자"는 접근이 오히려 나중에 더 큰 비용을 만든다.
검수 3원칙:
- AI 생성물을 완성본이 아닌 초안으로 취급
- 접근성은 선택이 아닌 필수 검수 항목
- 디자인 시스템 일치는 자동화로 확인
AI를 잘 쓰는 팀은 AI가 잘못하는 것을 빠르게 찾아내는 팀이다.