AI 에이전트는 Jetpack Compose를 사용하고 Android 권장사항을 따라 Android 앱 UI 비전을 현실로 만들 수 있도록 지원하는 데 특화되어 있습니다. 이 페이지에서는 AI로 앱 UI를 만들고 반복하는 방법을 설명합니다.
AI로 UI를 생성하려면 다음 일반 단계를 따르세요.
원하는 앱 UI의 모형을 만듭니다. 디자인 도구에서 PNG를 내보내거나 손으로 그린 이미지를 사용할 수도 있습니다.
그림 1: 앱 사용자 인터페이스의 와이어프레임 이미지 파일 첨부 버튼
을 클릭하여 이미지를 질문에 첨부합니다. 기존 미리보기가 없는 파일의 미리보기 패널에서 바로 스크린샷에서 코드 생성을 클릭할 수도 있습니다.
그림 2: 빈 미리보기 패널에서 스크린샷으로 코드를 생성합니다. 채팅 필드에서 AI 에이전트에게 UI 코드를 생성해 달라고 요청합니다(예: '제공된 이미지의 Jetpack Compose 코드를 생성해 줘'). 쿼리와 이미지를 제출하면 AI 에이전트가 제안된 UI를 만드는 코드를 제안합니다. AI 에이전트는 일반적으로 Compose 미리보기의 코드도 제공하므로 프로젝트로 가져온 후 UI를 빠르게 시각화할 수 있습니다. 제공하지 않는 경우 Compose 미리보기를 생성하도록 요청하세요.
그림 2: 첨부된 이미지에서 Jetpack Compose 코드를 생성하는 Gemini 코드를 가져와 미리보기 패널에서 Compose 미리보기를 볼 수 있게 되면 미리보기를 직접 클릭하고 Gemini에 변환을 요청하여 UI를 반복할 수 있습니다. 원하는 이미지가 있는 경우 미리보기를 마우스 오른쪽 버튼으로 클릭하고 AI 작업 > 타겟 이미지에 UI 일치를 선택하여 UI를 반복할 수도 있습니다.
그림 5: Gemini를 사용하여 Compose 미리보기에서 직접 UI 요소를 변환합니다. 
그림 6: '타겟 이미지에 UI 일치' 사용 예
UI 품질 문제 찾기 및 해결
AI 에이전트는 UI가 고품질이고 접근성이 우수하도록 지원할 수도 있습니다. Compose 미리보기를 마우스 오른쪽 버튼으로 클릭하고 AI 작업 > 모든 UI 확인 문제 수정을 선택합니다. 에이전트는 접근성 문제와 같은 일반적인 문제를 UI에서 감사하고 이를 해결하기 위한 코드 수정사항을 제안합니다.
