22장. 디자인과 개발에서 AI 산출물을 실제 화면으로 검증한다

AI는 와이어프레임, 문구, CSS, 컴포넌트, 테스트를 빠르게 만든다. 그러나 예쁜 정지 화면과 작동하는 서비스는 다르다. 실제 데이터 길이, 로딩·빈 상태·오류, 키보드, 모바일, 성능, 보안을 검증해야 한다.

디자인 계약:

사용자 과업: 출시 근거와 승인 상태를 30초 안에 파악
우선순위: 결정 → 위험 → 근거 → 행동
상태: loading, empty, partial, injection-quarantined, approval-pending
반응형: 390px, 768px, 1440px
접근성: 키보드, 명확한 초점, 색 외 상태 표시, 대체 텍스트

WCAG 2.2 같은 공식 접근성 기준을 확인하되 체크리스트만 통과했다고 모든 사용자가 쓸 수 있는 것은 아니다. 실제 키보드와 화면 낭독기, 확대, 대비를 시험한다.

코드 생성은 저장소 규칙, 수용 조건, 범위 밖, 테스트, 변경 권한을 제공한다. 구현 후 diff를 읽고 테스트를 실행한다. AI가 “테스트 통과”라고 쓴 문장이 아니라 실제 명령의 종료 코드가 증거다.

cd /Users/honi/WithAI/books/ai-competence-bible
npm test
npm run lab

생성 이미지는 문자, 로고, 제품 사실을 정확히 표현하지 못할 수 있다. 장식 이미지와 기술 증거를 구분한다. 실습 화면은 실제 코드를 같은 fixture로 실행해 캡처한다.

화면 상태를 fixture로 만든다

행복 경로 한 화면만 만들지 않는다. DecisionDesk에는 loading, blocked, awaiting_approval, ready, quarantined source가 있다. 각 상태의 fixture와 스크린샷을 만들면 원고, 디자인, 테스트가 같은 계약을 사용한다.

오류 메시지는 “문제가 발생했습니다”로 끝내지 않는다. 무엇이 실패했고, 데이터가 보존되었는지, 사용자가 안전하게 할 다음 행동이 무엇인지 말한다. 재시도 버튼은 멱등성이 보장될 때만 제공한다.

성능 검사에서는 AI 응답을 기다리는 동안 레이아웃이 흔들리지 않는지, 취소가 가능한지, timeout 뒤 중복 실행이 없는지 본다. 스트리밍 텍스트도 확정된 사실처럼 바로 발송하거나 저장하지 않는다. 완성·검증된 결과와 진행 중 초안을 시각적으로 구분한다.