워크스페이스 내 Firebase에서 Gemini 구성

Firebase Studio는 다음과 같은 AI 지원 코드 기능으로 개발 워크플로를 용이하게 합니다.

  • 입력할 때 코드 완성 제안

  • 워크스페이스를 인식하고 코드와 완전히 통합된 채팅을 통한 AI 지원 코드를 생성, 번역, 설명할 수 있습니다. 또한 검토 및 승인을 거치면 Firebase의 Gemini가 작업공간과 직접 상호작용하여 파일을 업데이트하고, 터미널 명령어를 실행하고, 명령어 출력을 해석하고, 다음 단계를 결정할 수 있습니다. Gemini로 채팅 사용해 보기에서 자세히 알아보세요.

  • 선택한 코드에서 실행할 수 있는 인라인 작업 예를 들어 Gemini에 선택한 코드의 가독성을 개선해 달라고 요청할 수 있습니다.

  • 인라인 코드 지원

설정을 조정하고 AI 규칙 파일을 추가하여 Firebase의 Gemini가 사용자에게 도움이 되는 방식을 맞춤설정할 수 있습니다.

Workspace의 Firebase에서 Gemini 사용하기

Firebase에서 Gemini를 사용하여 채팅 패널 또는 인라인 코드 지원을 통해 코딩 생산성을 높입니다.

  1. 워크스페이스에서 채팅 또는 인라인 코드 지원을 사용합니다.

    • 채팅을 사용하려면 열려 있는 작업공간에서 작업공간 하단에 있는 spark Gemini를 클릭합니다.

    • 인라인 코드 지원을 사용하려면 코드를 입력하기 시작하고 Tab 키를 눌러 추천을 수락합니다.

  2. 다음 두 가지 옵션은 기본적으로 사용 설정되어 있습니다.

    • 인라인 코드 완성을 제공하는 입력 시 추천
    • 코드베이스 색인 생성: 더 나은 맞춤설정과 더 유용한 응답을 제공합니다.

    나중에 작업공간 설정에 대해 이러한 선택사항을 변경하려면 다음 단계를 따르세요.

    AI 색인 생성에서 특정 파일과 디렉터리를 제외할 수도 있습니다. .aiexclude 파일을 사용하여 Gemini에서 파일 제외를 참고하세요.

Firebase 바로가기의 Gemini

Gemini님과 채팅을 빠르게 열려면 Ctrl+Shift+Space (macOS의 경우 Cmd+Shift+Space)를 누릅니다.

명령어 팔레트에서 Gemini 명령어를 보려면 다음 단계를 따르세요.

  1. Ctrl+Shift+P (macOS의 경우 Cmd+Shift+P)를 눌러 명령어 팔레트를 엽니다.

  2. Gemini를 검색합니다.

    Gemini 명령어 목록이 표시됩니다.

코드 완성 설정 조정

Firebase Studio는 코드 작성을 돕기 위해 입력을 시작하는 즉시 열려 있는 파일의 코드를 예측하고 자동 완성하는 AI 코드 완성 기능을 제공합니다.

코드 완성은 기본적으로 사용 설정되어 있습니다.

코드 완성의 사용 설정 여부를 전환하려면 다음 방법 중 하나를 사용하여 코드 완성 설정을 조정하세요.

  • settings.json 파일을 사용하는 경우 "IDX.aI.enableInlineCompletion"true 또는 false로 설정합니다.

  • Firebase Studio 워크스페이스에서 설정을 업데이트하려면 다음 단계를 따르세요.

    1. 톱니바퀴 아이콘 관리 (작업공간 왼쪽 하단에 있음)를 클릭한 다음 설정을 선택하거나 Ctrl+, 키 (Mac의 경우 Cmd+,)를 누릅니다.

      Prototyper view, click Code switch icon Switch to Code to open Code view.에서 App Prototyping agent를 사용하는 경우

    2. Workspace 탭을 선택한 다음 Firebase Studio > AI > Enable Inline Completion(인라인 완성 사용 설정) 설정을 검색합니다.

    3. 코드 완성을 사용 중지하려면 입력 시 인라인 코드 완성 사용 옵션을 선택 해제합니다.

코드베이스 색인 생성 설정 조정

Gemini가 코드의 색인을 생성할지 여부를 제어할 수 있습니다. 코드 색인을 생성하면 채팅 또는 인라인 AI 지원을 사용할 때 더 유용한 결과를 얻을 수 있습니다.

코드베이스 색인은 기본적으로 사용 설정되어 있습니다.

코드 색인을 사용 설정 또는 사용 중지하려면 다음 방법 중 하나를 사용하여 코드베이스 색인 생성 설정을 조정하세요.

  • settings.json 파일을 사용하는 경우 "IDX.aI.enableCodebaseIndexing"true 또는 false로 설정합니다.

  • Firebase Studio 워크스페이스에서 설정을 업데이트하려면 다음 단계를 따르세요.

    1. 톱니바퀴 아이콘 관리 (작업공간 왼쪽 하단에 있음)를 클릭한 다음 설정을 선택하거나 Ctrl+, 키 (Mac의 경우 Cmd+,)를 누릅니다.

      Prototyper view, click Code switch icon Switch to Code to open Code view.에서 App Prototyping agent를 사용하는 경우

    2. Workspace 탭을 선택한 다음 Firebase Studio > AI > Enable Inline Completion(인라인 완성 사용 설정) 설정을 검색합니다.

    3. Firebase Studio > AI: Codebase Indexing(AI: 코드베이스 색인 생성) 사용 설정을 선택합니다.

    4. 코드 색인을 사용 중지하려면 AI: 코드베이스 색인 생성 사용 설정을 선택 해제합니다. 각 워크스페이스의 코드 색인 생성 설정을 업데이트해야 합니다.

AI 규칙 파일로 Firebase의 Gemini 안내 맞춤설정

AI 규칙 파일 (.idx/airules.md)을 만들어 컨텍스트 및 시스템 프롬프트 정보를 추가할 수 있습니다. Firebase의 Gemini는 규칙을 시스템 안내 및 컨텍스트로 사용하여 사용 사례에 맞게 대답을 맞춤설정합니다.

AI 규칙 파일을 사용하여 맞춤 프롬프트, 권장사항, 프로젝트에 관한 중요한 컨텍스트를 Gemini와 공유하여 다음과 같은 목표를 달성하세요.

  • Gemini의 캐릭터에 영향을 미치고 전문성을 특화합니다.
  • 코딩 스타일, 규칙, 기술 환경설정과 같은 프로젝트 전반의 표준을 적용합니다.
  • 프로젝트에 관한 필수 컨텍스트를 제공하여 코드나 채팅에서 명시적으로 공유해야 하는 정보의 양을 줄입니다.

구성한 규칙은 채팅에서 Gemini에 의해 사용됩니다.

AI 규칙 파일 만들기 및 테스트

AI 규칙 파일을 만들고 테스트하려면 다음 단계를 따르세요.

  1. Firebase Studio 워크스페이스의 .idx/airules.md (dev.nix 파일과 동일한 디렉터리)에 새 파일을 만듭니다. 다음 옵션 중 하나를 사용할 수 있습니다.

    • 탐색기 (Ctrl+Shift+E)에서 .idx를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 선택합니다. 파일 이름을 airules.md로 지정하고 Enter 키를 누릅니다.
    • 터미널에서 원하는 텍스트 편집기를 사용하여 .idx/airules.md를 엽니다.
  2. 파일에 콘텐츠를 추가합니다. Gemini가 사용해야 하는 캐릭터 (예: 'Next.js에 관해 모든 것을 알고 있는 전문 개발자이자 유용한 어시스턴트')에 관한 정보, 코딩 및 대화 표준, 프로젝트에 관한 컨텍스트를 추가할 수 있습니다. AI 규칙 파일의 예는 다음 를 참고하세요.

  3. 파일을 저장하고 Firebase에서 Gemini를 엽니다.

  4. AI 규칙을 사용하려면 다음 중 하나를 실행합니다.

    • 페이지를 새로고침하여 워크스페이스를 다시 빌드합니다. 다시 빌드하면 Firebase의 Gemini가 Chat 내에서 규칙 파일을 사용합니다. AI 규칙 파일의 변경사항은 채팅에 즉시 반영되어야 합니다.
    • 워크스페이스를 다시 빌드하고 싶지 않다면 Chat을 사용하여 load airules.md에게 Gemini에게 요청할 수 있습니다. 현재 세션 중에 파일을 변경하는 경우 Gemini에 다시 메시지를 표시하여 규칙 파일을 다시 로드해야 할 수 있습니다.
  5. 코드에 관해 질문합니다. Gemini는 규칙 파일에 포함된 정보를 컨텍스트로 사용하여 응답합니다.

다음은 Next.js로 개발된 캐주얼 게임에 사용할 수 있는 규칙 파일의 기본 예시입니다.

# Persona

You are an expert developer proficient in both front- and back-end development
with a deep understanding of Node.js, Next.js, React, and Tailwind CSS. You
create clear, concise, documented, and readable TypeScript code.

You are very experienced with Google Cloud and Firebase services and how
you might integrate them effectively.

# Coding-specific guidelines

- Prefer TypeScript and its conventions.
- Ensure code is accessible (for example, alt tags in HTML).
- You are an excellent troubleshooter. When analyzing errors, consider them
  thoroughly and in context of the code they affect.
- Do not add boilerplate or placeholder code. If valid code requires more
  information from the user, ask for it before proceeding.
- After adding dependencies, run `npm i` to install them.
- Enforce browser compatibility. Do not use frameworks/code that are not
  supported by the following browsers: Chrome, Safari, Firefox.
- When creating user documentation (README files, user guides), adhere to the
  Google developer documentation style guide
  (https://developers.google.com/style).

# Overall guidelines

- Assume that the user is a junior developer.
- Always think through problems step-by-step.

# Project context

- This product is a web-based strategy game with a marine life theme.
- Intended audience: casual game players between the ages of 17 and 100.

.aiexclude 파일을 사용하여 Gemini에서 파일 제외

프로젝트에 .aiexclude 파일을 포함하여 코드베이스의 어떤 파일을 Gemini에서 숨겨야 하는지 제어할 수 있습니다. 이를 통해 Gemini와 공유하는 프로젝트 컨텍스트를 세부적으로 제어할 수 있습니다.

.gitignore 파일과 마찬가지로 .aiexclude 파일은 채팅 환경과 편집기에서 작동하는 AI 기능을 비롯하여 Gemini와 공유해서는 안 되는 파일을 추적합니다. .aiexclude 파일은 이를 포함하는 디렉터리나 그 아래의 파일에서 작동합니다.

코드베이스 색인 생성이 사용 설정된 경우 .aiexclude에 포함된 파일은 Gemini에 의해 색인이 생성되지 않습니다. 또한 .aiexclude는 다음과 같은 방식으로 적용 범위가 지정된 파일의 인라인 지원에 영향을 미칩니다.

  • 채팅 지원: Gemini.aiexclude의 적용 범위인 파일과 관련된 질문에 답변하거나 제안을 제공할 수 없습니다.
  • 코드 완성: 적용 범위가 지정된 파일을 수정할 때는 추천 코드 완성을 사용할 수 없습니다.
  • 인라인 지원: 새 코드를 생성할 수 있지만 적용 범위가 지정된 파일을 수정할 때는 기존 코드를 수정할 수 없습니다.

Android 스튜디오와 같은 다른 개발 환경에서도 .aiexclude 파일을 사용할 수 있습니다.

.aiexclude 파일 작성 방법

.aiexclude 파일은 .gitignore 파일과 동일한 구문을 따르지만 다음과 같은 차이점이 있습니다.

  • .aiexclude 파일은 디렉터리와 모든 하위 디렉터리의 모든 파일을 차단합니다. 이는 **/*가 포함된 파일과 동일합니다.
  • .aiexclude 파일은 부정 (패턴 앞에 ! 붙이기)을 지원하지 않습니다.

다음은 .aiexclude 파일 구성의 예입니다.

  • .aiexclude 파일이 포함된 디렉터리나 그 아래에서 모든 apikeys.txt 파일을 차단합니다.

    apikeys.txt
    
  • .aiexclude 파일이 포함된 디렉터리나 그 아래에서 .key 파일 확장자가 있는 모든 파일을 차단합니다.

    *.key
    
  • .aiexclude와 동일한 디렉터리의 apikeys.txt 파일만 차단하고 하위 디렉터리에서는 차단하지 않습니다.

    /apikeys.txt
    
  • my/sensitive/dir 디렉터리 및 모든 하위 디렉터리의 모든 파일을 차단합니다. 경로는 .aiexclude 파일이 포함된 디렉터리를 기준으로 합니다.

    my/sensitive/dir/
    

Bring your own key(키 자체 조달): Chat에서 다른 Gemini 모델 사용

Firebase 채팅의 Gemini에서 사용하는 Gemini 모델을 구성할 수 있습니다. 기본 제공 모델, 채팅 창에 구성된 모델 (Gemini 2.5 모델 포함), 액세스 권한이 있는 Gemini 모델 중에서 선택할 수 있습니다.

사용 가능한 모든 모델 목록은 Gemini 모델을 참고하세요.

키를 구성하고 다른 Gemini 모델을 선택하는 방법은 다음과 같습니다.

  1. 열려 있는 작업공간에서 작업공간 하단의 spark Gemini (또는 Gemini 탭)를 클릭합니다.

  2. Firebase의 Gemini 채팅 창에서 모델 이름 드롭다운을 클릭한 다음 Gemini API 링크를 클릭합니다. 사용자 설정이 표시됩니다.

  3. IDX > AI: Gemini Api Key 필드에 Gemini API 키를 입력합니다.

이제 채팅에서 사전 구성된 Gemini 모델을 선택할 수 있습니다.

드롭다운에 없는 Gemini 모델을 구성하려면 다음 단계를 따르세요.

  1. Gemini 모델 목록에서 채팅에 사용할 Gemini 모델을 찾습니다. 예를 들어 gemini-2.0-flash-lite를 입력하면 최신 안정화 Gemini 2.0 Flash‑Lite 모델을 사용할 수 있습니다.

  2. Firebase의 Gemini 채팅 창에서 모델 선택 도구를 클릭한 다음 맞춤 모델 ID를 선택합니다. 사용자 설정이 열립니다.

  3. 선택한 모델 이름을 IDX > AI: Gemini Model 필드에 복사합니다.

  4. 채팅 창을 닫은 다음 작업공간 하단의 spark Gemini를 클릭하여 다시 열고 모델 목록을 새로고침합니다.

다음 단계