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: Gemini가 첨부된 이미지에서 Jetpack Compose 코드를 생성합니다. 코드를 가져오고 미리보기 패널에서 Compose 미리보기를 볼 수 있게 되면 미리보기를 직접 클릭하고 Gemini에 변환을 요청하여 UI를 반복할 수 있습니다. 원하는 이미지의 경우 미리보기를 마우스 오른쪽 버튼으로 클릭하고 AI 작업 > UI를 타겟 이미지와 일치 를 선택하여 UI를 반복할 수도 있습니다.
그림 5: Gemini를 사용하여 Compose 미리보기에서 직접 UI 요소를 변환합니다. 
그림 6: 'UI를 타겟 이미지와 일치' 사용 예
UI 품질 문제 찾기 및 해결
AI 에이전트는 UI가 고품질이고 접근성이 우수하도록 하는 데도 도움이 됩니다. Compose 미리보기를 마우스 오른쪽 버튼으로 클릭하고 AI 작업 > 모든 UI 검사 문제 해결 을 선택합니다. 에이전트는 접근성 문제와 같은 일반적인 문제에 대해 UI를 감사하고 문제를 해결하기 위한 코드 수정사항을 제안합니다.
