새로운 Gemini API 설명서와 커뮤니티 포럼을 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Gemini로 AI Flutter 코드 생성기 빌드

Flutter 사용자 인터페이스를 생성하기 위한 코딩 어시스턴트 도구나 빠르게 반복하려는 코드 구성요소를 빌드합니다. 사용자 인터페이스를 만드는 것은 재미있고 보람이 있지만 어려운 일이기도 합니다. 이는 코드를 올바르게 만드는 것뿐만 아니라 디자인과 분위기를 적절하게 하고 팀이 디자인 방향에 동의하도록 하는 것이기도 합니다.

이 튜토리얼에서는 Google의 Flutter 개발자 관계팀이 빌드한 AI 기반 코드 지원 도구인 Flutter 테마 에이전트를 확장하는 방법을 보여줍니다. 이 오픈소스 프로젝트는 색 구성표, 텍스트 스타일, 버튼 스타일을 포함하여 Flutter 테마 또는 ThemeData 객체의 특정 구성요소를 생성하는 Microsoft Visual Studio Code (VS Code)의 확장 프로그램입니다. 프로젝트를 수정하여 이러한 기존 함수가 더 잘 작동하도록 하거나 새로운 명령어를 빌드하여 개발 워크플로를 더 효과적으로 지원할 수 있습니다.

AI Flutter 코드 생성기 - Google AI로 빌드에서 프로젝트 관련 동영상 개요와 프로젝트 확장 방법(빌드를 만든 개발자의 유용한 정보 포함)을 확인하세요. 그렇지 않은 경우 아래 안내에 따라 프로젝트 확장을 시작할 수 있습니다.

VS Code에서 실행되는 Flutter 테마 에이전트 스크린샷

그림 1. VS Code 확장 프로그램 개발 호스트 창에서 실행 중인 Flutter 테마 에이전트

프로젝트 설정

다음 안내는 개발 및 테스트를 위해 Flutter 테마 에이전트 프로젝트를 설정하는 방법을 안내합니다. 일반적인 단계는 사전 필수 소프트웨어를 설치하고, 몇 가지 환경 변수를 설정하고, 코드 저장소에서 프로젝트를 클론하고, 구성 설치를 실행하는 것입니다.

기본 요건 설치

Flutter 테마 에이전트 프로젝트는 Microsoft Visual Studio Code (VS Code)의 확장 프로그램으로 실행되며 Node.js 및 npm를 사용하여 패키지를 관리하고 애플리케이션을 실행합니다. 다음 설치 안내는 Linux 호스트 머신용입니다.

필요한 소프트웨어를 설치하려면 다음 단계를 따르세요.

플랫폼에 맞는 Visual Studio Code를 설치합니다.
플랫폼의 설치 안내에 따라 node 및 npm를 설치합니다.
아직 VS Code용 Flutter를 설치하지 않았다면 설치 안내를 따르세요.

프로젝트 클론 및 구성

프로젝트 코드를 다운로드하고 npm 설치 명령어를 사용하여 필요한 종속 항목을 다운로드하고 프로젝트를 구성합니다. 프로젝트 소스 코드를 검색하려면 git 소스 제어 소프트웨어가 필요합니다.
프로젝트 코드를 다운로드하고 구성하려면 다음 안내를 따르세요.

다음 명령어를 사용하여 git 저장소를 클론합니다.
```
git clone https://github.com/google/generative-ai-docs`
```
원하는 경우, 문서 에이전트 프로젝트용 파일만 보유하도록 스파스 결제를 사용하도록 로컬 git 저장소를 구성합니다.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```
Flutter Theme Agent 프로젝트 루트 디렉터리로 이동합니다.
```
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
```
설치 명령어를 실행하여 종속 항목을 다운로드하고 프로젝트를 구성합니다.
```
npm install
```

확장 프로그램 구성 및 테스트

이제 기기의 VS Code에서 Flutter 테마 에이전트를 개발 확장 프로그램으로 실행하여 설치를 테스트할 수 있습니다. 테스트 시 새 확장 프로그램이 제공되는 별도의 VS Code Extension Development Host 창이 열립니다. 새 창에서 확장 프로그램이 Google Gemini API에 액세스하는 데 사용하는 API 키를 구성합니다.

설정을 구성하고 테스트하려면 다음 단계를 따르세요.

VS Code 애플리케이션을 시작합니다.
VS Code에서 File > New Window를 선택하여 새 창을 만듭니다.
File > Open Folder를 선택하고 flutter_theme_agent/ 폴더를 선택하여 Flutter 테마 에이전트 프로젝트를 엽니다.
VS Code에서 flutter_theme_agent/package.json 파일을 엽니다.
실행 > 디버깅 시작을 선택하여 디버그 모드로 확장 프로그램을 실행합니다. 이 단계에서는 별도의 VS Code Extension Development Host 창이 열립니다.
Code > Settings > Settings를 선택하여 VS Code 설정을 엽니다.
생성형 AI 개발자 사이트에서 Google Gemini API 키를 가져오고 키 문자열을 복사합니다.
API 키를 구성 설정으로 지정합니다. Search Settings(검색 설정) 필드에 flutter theme를 입력하고 User(사용자) 탭을 선택한 후 Google > Gemini: Api Key(Google > Gemini: API 키) 설정에서 Edit in settings.json(settings.json에서 수정) 링크를 클릭하고 Gemini API 키를 추가합니다.
```
"google.ai.apiKey": "your-api-key-here"
```
변경사항을 settings.json 파일에 저장하고 설정 탭을 닫습니다.

확장 프로그램 명령어를 테스트하려면 다음 안내를 따르세요.

VS Code Extension Development Host 창에서 생성하려는 사용자 인터페이스 구성요소를 설명하는 코드 주석을 작성합니다.
구성요소 특성이 있는 설명 텍스트를 선택합니다.
View(보기) > Command Palette(명령 팔레트)를 선택하여 명령어 팔레트를 엽니다.
명령어 팔레트에 Flutter Theme를 입력하고 이 프리픽스가 있는 명령어 중 하나를 선택합니다.

기존 명령어 수정

Flutter 테마 에이전트에 제공된 명령어를 수정하는 것이 확장 프로그램의 동작과 기능을 변경하는 가장 간단한 방법입니다.

의견과 리뷰 명령어는 모두 해당 코드의 코드 및 주석 예시와 AI 언어 모델에 대한 일반적인 안내와 함께 스샷 프롬프팅 방식을 사용합니다. 이 프롬프트 컨텍스트 정보는 Gemini 언어 모델이 응답을 생성하는 데 도움이 됩니다. 주석 또는 리뷰 명령어에서 프롬프트 명령어나 예시 또는 둘 다를 변경하면 기존 각 명령어의 동작 방식을 변경할 수 있습니다.

이 안내 세트에서는 명령어의 프롬프트 텍스트를 변경하여 buttonstyle.ts 명령어를 수정하는 방법을 설명합니다.

buttonstyle.ts 명령어 수정을 준비하려면 다음과 같이 하세요.:\

VS Code 애플리케이션을 시작합니다.
VS Code에서 File > New Window를 선택하여 새 창을 만듭니다.
File > Open Folder를 선택하고 flutter_theme_agent/ 폴더를 선택하여 Flutter 테마 에이전트 프로젝트를 엽니다.
flutter_theme_agent/src/buttonstyle.ts 파일을 엽니다.

buttonstyle.ts 명령어의 동작을 수정하려면 다음을 따르세요.:\

buttonstyle.ts 파일에서 다른 안내를 포함하도록 BUTTONSTYLE_CONTEXT 상수를 수정합니다.

const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

필요한 경우 buttonstyle.ts 파일의 BUTTONSTYLE_CONTEXT 상수에서 버튼 스타일 안내 및 출력의 다른 예를 추가하거나 기존 예 중 하나를 바꿉니다.

...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

변경사항을 buttonstyle.ts 파일에 저장합니다.

수정된 명령어를 테스트하려면 다음 안내를 따르세요.

VS Code 확장 프로그램 프로젝트 창에서 Run > Restart Debugging을 선택하여 디버거를 다시 시작합니다.
VS Code Extension Development Host 창의 편집기 창에서 원하는 버튼 스타일을 설명하는 코드 주석을 선택합니다. 예를 들면 다음과 같습니다.
```
// blue, lickable buttons that light up when you hover over them`
```
View(보기) > Command Palette(명령 팔레트)를 선택하여 명령어 팔레트를 엽니다.
명령어 팔레트에서 Flutter를 입력하고 Flutter Theme Agent: Create a Flutter ButtonStyle 명령어를 선택합니다.

새 명령어 만들기

Gemini API로 완전히 새로운 작업을 실행하는 새로운 명령어를 만들어 Flutter 테마 에이전트를 확장할 수 있습니다. buttonstyle.ts 및 colorscheme.ts와 같은 각 명령어 파일은 대부분 독립적이며 활성 편집기에서 텍스트를 수집하고, 프롬프트를 작성하고, Gemini API에 연결하고, 프롬프트를 보내고, 응답을 처리하는 코드가 포함되어 있습니다.

새 명령어가 표시된 Flutter 테마 에이전트 스크린샷

그림 2. VS Code 확장 프로그램 개발 호스트 창의 새로운 Flutter 테마 에이전트 명령어

이 안내에서는 기존 명령어 코드 colorscheme.ts를 템플릿으로 사용하여 새 명령어를 빌드하는 방법을 설명합니다. 이 업데이트는 ColorScheme 객체의 인클로징 구문을 포함하지 않도록 명령어를 변경하므로 생성 후 이 구문을 삭제할 필요가 없으며 출력을 더 빠르게 시각화합니다.

ColorScheme 객체의 색상 목록만 생성하는 명령어를 만들려면 다음 안내를 따르세요.

src/ 디렉터리에 colorscheme2.ts라는 flutter_theme_agent/src/colorscheme.ts 파일의 사본을 만듭니다.
VS Code에서 src/colorscheme2.ts 파일을 엽니다.

colorscheme2.ts 파일에서 generateColorScheme 함수의 이름을 generateColorScheme2로 바꿉니다.

export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

colorscheme2.ts 파일에서 프롬프트 안내를 변경합니다. 51번 줄의 예시 코드에서 ColorScheme( 텍스트를 삭제하여 COLORSCHEME_CONTEXT 코드 생성 지침을 수정하고 빈 줄로 만듭니다.
```
...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...
```

색상 목록 끝에서 닫는 괄호 문자 ')'을 삭제하고 빈 줄로 만듭니다.

...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

두 번째 예에서도 이러한 변경을 반복합니다. 87행의 COLORSCHEME_CONTEXT 문자열에서 ColorScheme( 텍스트를 삭제하고 빈 줄로 만듭니다.
115번 줄의 색상 목록 끝에서 닫는 괄호 문자 ')'를 삭제하고 빈 줄로 만듭니다.

COLORSCHEME_CONTEXT 문자열에 인클로징 구문을 포함하지 않는 명령을 추가합니다.

...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

변경사항을 colorscheme2.ts 파일에 저장합니다.

새 명령어 통합

새 명령어의 코드를 완료한 후에는 이를 나머지 확장 프로그램과 통합해야 합니다. extension.ts 및 package.json 파일을 업데이트하여 확장 프로그램의 새 명령어 부분을 만들고 VS Code가 새 명령어를 호출할 수 있도록 합니다.

새 명령어를 확장 프로그램 코드와 통합하려면 다음 안내를 따르세요.

VS Code에서 flutter_theme_agent/src/extension.ts 파일을 엽니다.
새 가져오기 문을 추가하여 새 명령어 코드를 확장 프로그램에 가져옵니다.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

다음 코드를 activate() 함수에 추가하여 새 명령어를 등록합니다.

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

변경사항을 extension.ts 파일에 저장합니다.

이름 명령어를 확장 프로그램 패키지와 통합하려면 다음 안내를 따르세요.

VS Code에서 flutter_theme_agent/package.json 파일을 엽니다.

패키지 파일의 commands 섹션에 새 명령어를 추가합니다.

"contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

변경사항을 package.json 파일에 저장합니다.

새 명령어 테스트

명령어 코딩을 완료하고 확장 프로그램과 통합하면 테스트할 수 있습니다. 새 명령어는 VS Code Extension Development Host 창에서만 사용할 수 있으며 확장 프로그램의 코드를 수정한 VS Code 창에서는 사용할 수 없습니다.

수정된 명령어를 테스트하려면 다음 안내를 따르세요.

VS Code 확장 프로그램 프로젝트 창에서 Run > Restart debugging을 선택하여 디버거를 다시 시작합니다. 그러면 별도의 Extension Development Host 창이 다시 시작됩니다.
VS Code Extension Development Host 창에서 Flutter 개발 프로젝트를 엽니다.
같은 창에서 코드 편집기 창을 열고 원하는 사용자 인터페이스 구성요소를 설명하는 주석을 입력한 다음 주석 텍스트를 선택합니다.
View(보기) > Command Palette(명령 팔레트)를 선택하여 명령어 팔레트를 엽니다.
명령어 팔레트에서 Flutter Theme를 입력하고 Flutter Theme Agent: My New Code Generator 명령어를 선택합니다.

추가 리소스

Flutter 테마 에이전트 프로젝트에 관한 자세한 내용은 코드 저장소를 참고하세요. 애플리케이션을 빌드하는 데 도움이 필요하거나 개발자 공동작업자를 찾고 있다면 Google Developers Community Discord 서버를 확인하세요.

프로덕션 애플리케이션

대규모 잠재고객을 위해 Flutter 테마 에이전트를 배포할 계획이라면 Google Gemini API 사용 시 비율 제한 및 기타 사용 제한이 적용될 수 있습니다. Gemini 모델로 프로덕션 애플리케이션을 빌드하려는 경우 Google Cloud Vertex AI 서비스를 확인하여 앱의 확장성과 안정성을 높이세요.