이미지 첨부파일로 UI 생성

Android 스튜디오의 Gemini는 Jetpack Compose를 사용하고 Android 권장사항을 따라 Android 앱 UI 비전을 현실로 만들 수 있도록 지원하는 고유한 기능을 갖추고 있습니다. 이 페이지에서는 Gemini로 앱 UI를 만드는 일반적인 단계를 설명합니다. 이미지 첨부 및 이 기능을 사용하는 방법에 관한 기타 아이디어에 대한 자세한 내용은 질문에 이미지 첨부하기를 참고하세요.

Gemini로 UI를 생성하려면 다음 일반 단계를 따르세요.

  1. 원하는 앱 UI의 모형을 만듭니다. 와이어프레임이나 기본 디자인이 가장 적합합니다. 디자인 도구에서 PNG를 내보내거나 손으로 그린 이미지를 사용할 수도 있습니다.

    앱 사용자 인터페이스의 손으로 그린 와이어프레임
    그림 1: 앱 사용자 인터페이스의 손으로 그린 와이어프레임
  2. 이미지 파일 첨부 버튼 이미지 파일 첨부 아이콘을 클릭하여 이미지를 질문에 첨부합니다.

  3. 채팅 필드에서 Gemini에게 UI 코드를 생성해 달라고 요청합니다(예: '제공된 이미지의 Jetpack Compose 코드를 생성해 줘'). 질문과 이미지를 제출하면 Gemini가 제안된 UI를 만드는 코드를 추천합니다. Gemini는 일반적으로 Compose 미리보기의 코드도 제공하므로 프로젝트로 가져온 후 UI를 빠르게 시각화할 수 있습니다. 그렇지 않은 경우 Compose 미리보기를 생성하도록 요청하세요.

    이미지를 기반으로 생성된 Jetpack Compose 코드를 보여주는 Gemini 채팅 인터페이스
    그림 2: 첨부된 이미지에서 Jetpack Compose 코드를 생성하는 Gemini
  4. 코드를 가져오고 미리보기 패널에서 Compose 미리보기를 볼 수 있게 되면 미리보기를 직접 클릭하고 Gemini에 변환을 요청하여 UI를 반복할 수 있습니다.

    선택된 UI 요소와 Gemini 채팅이 포함된 Compose 미리보기를 보여주는 Android 스튜디오
    그림 3: Compose 미리보기에서 직접 Gemini를 사용하여 UI 요소를 변환합니다.