에이전트가 앱의 아키텍처를 더 잘 이해하고 UI 개발 프로세스를 가속화할 수 있도록 질문에 이미지를 첨부합니다.
프롬프트에 이미지를 첨부하려면 컨텍스트 추가 > 미디어 
를 클릭하고 이미지를 업로드합니다.
에이전트가 이미지를 활용하는 몇 가지 방법은 다음과 같습니다.
원하는 UI의 모의가 있는 경우 에이전트가 이를 만드는 코드를 제공할 수 있습니다. 예를 들어 에이전트에 Now in Android 앱의 스크린샷을 제공하면 에이전트가 이를 만드는 Compose 코드를 제공할 수 있습니다. 이 예시에서는 앱 피드의 스크린샷(왼쪽)과 해당 UI에 대해 에이전트가 생성한 Jetpack Compose 코드(오른쪽)를 보여줍니다. 자세한 내용은 이미지 첨부파일로 UI 생성을 참조하세요.
에이전트가 Now in Android 앱의 UI 스크린샷에서 Jetpack Compose 코드를 생성합니다. 앱이 어떻게 구성되어 있는지 알고 싶다면 에이전트가 UI의 구성요소 측면에서 UI의 작동 방식을 설명할 수 있습니다. 예를 들어 에이전트에게 다른 Now in Android 스크린샷의 컴포저블과 데이터 흐름을 설명해 달라고 요청할 수 있습니다. 왼쪽 이미지는 뉴스 항목이 있는 세부정보 화면을 보여주고 오른쪽 이미지는 해당 화면의 Compose 구조 및 데이터 흐름에 관한 에이전트의 설명을 보여줍니다.
에이전트가 특정 앱 화면의 UI 구성과 데이터 흐름을 설명합니다. 앱 아키텍처 다이어그램이 있는 경우 에이전트는 다이어그램을 기반으로 앱을 만드는 코드를 제안하여 풀 스택 개발 어시스턴트 역할을 할 수 있습니다. 또한 에이전트는 다이어그램을 문서화하고 앱의 구성을 설명하는 데 도움을 줄 수 있으며, 이는 팀원이 검토할 설계 문서를 작성할 때 도움이 됩니다. 예를 들어 다음 이미지는 UI, ViewModel, 저장소, 데이터 소스와 같은 다양한 앱 구성요소 간의 데이터 흐름을 보여주는 간소화된 아키텍처 다이어그램입니다.
에이전트는 앱 아키텍처 다이어그램에서 코드와 문서를 생성할 수 있습니다. UI 버그가 발견되면 스크린샷을 찍고 에이전트에게 해결 방법을 브레인스토밍해 달라고 요청합니다. 오류가 있는 영역을 원으로 표시하여 잘못된 부분을 지적할 수 있습니다. 다음 예는 잘못 정렬된 UI 요소를 강조표시하는 빨간색 원이 있는 모바일 앱의 스크린샷을 보여줍니다.
에이전트는 스크린샷을 통해 UI 버그에 대한 해결책을 브레인스토밍하는 데 도움을 줄 수 있습니다.