생성적 UI 가드레일: 디자인 시스템을 중단하지 않고 의도에 맞게 디자인

고정 레이아웃부터 의도에 맞는 디자인까지

고정된 레이아웃에서는 디자이너가 모든 화면을 미리 결정합니다. 생성 UI를 사용하면 AI 모델이 특정 요청에 대해 표시할 인터페이스를 결정합니다. Google은 생성적 UI를 콘텐츠뿐만 아니라 전체 경험을 생성하는 모델로 설명하며, 이제 Gemini 앱과 Google 검색의 AI 모드에서 이를 기반으로 한 실험을 제공합니다. 개발자 도구에서 Vercel AI SDK는 더 간단한 버전을 설명합니다. 즉, 모델이 도구를 호출하고 해당 도구 호출의 결과가 React 구성 요소로 렌더링됩니다.

UX의 변화

디자이너는 모든 화면을 그리는 것을 멈추고 규칙을 디자인하기 시작합니다. 어떤 구성 요소가 존재하는지, 각 구성 요소가 언제 적절한지, 절대 변경해서는 안 되는 것이 무엇인지. 탐색, 입력, 실행 취소, 설정 등 생성된 콘텐츠 주변의 프레임은 사람들이 제자리를 잃지 않도록 고정된 상태로 유지되어야 합니다. 생성된 영역은 명확하게 표시되어야 하며 사람들은 단순하고 예측 가능한 보기로 전환할 수 있어야 합니다.

가드레일 1: 승인된 구성요소 카탈로그

가장 안전한 패턴은 구성요소를 직접 만들어내는 것이 아니라 모델이 구성요소를 선택하고 채우도록 하는 것입니다. Google에서 만든 개방형 프로토콜인 A2UI는 다음과 같이 작동합니다. 에이전트는 선언적 구성 요소 설명을 보내고 클라이언트는 에이전트에서 임의의 코드를 실행하지 않고 자체 기본 위젯을 사용하여 이를 렌더링합니다. 카탈로그는 팀에서 작성하고 테스트한 테이블, 카드, 차트, 양식, 목록 등 작을 수 있습니다.

Guardrail 2: 원시 값 대신 토큰

color.text.primary 또는 space.4와 같은 모델 의미 체계 토큰을 제공하고 원시 16진수 값이나 임의 글꼴 크기를 사용하는 출력을 거부합니다. 이를 통해 시스템 내부의 대비, 타이포그래피 및 간격이 유지되며 어두운 모드 또는 고대비와 같은 테마가 자동으로 계속 작동합니다.

Guardrail 3: 렌더링하기 전에 확인

생성된 출력을 표시하기 전에 자동 검사를 실행합니다. 필수 필드 존재 여부, 색상 대비, 제목 순서, 입력 라벨, 초점 순서, 터치 대상 크기 및 모션 감소 지원. 검사에 실패하면 손상된 UI를 표시하는 대신 간단하고 알려진 양호한 레이아웃으로 대체합니다.

• 스키마 유효성 검사: 알려진 구성 요소 및 속성만
• 접근성: 대비, 레이블, 역할, 초점 순서
• 콘텐츠 제한: 최대 항목, 텍스트 길이, 이미지 크기
• 대체: 유효성 검사에 실패할 경우 일반 목록 또는 텍스트 답변