Firebase Studio 내 Firebase에서 Gemini 사용해 보기

Firebase Studio 내 Firebase의 Gemini는 코드 편집기 내에서 인라인으로, 채팅을 사용하여 코딩 워크플로를 간소화하는 AI 지원을 제공합니다. Firebase의 Gemini는 코드 추천을 제공하고, 코드를 생성하고, 코드 개념을 설명하고, 프로젝트 파일을 업데이트하고, 터미널 명령어를 실행하고, 명령어 출력을 해석할 수 있습니다.

설정 없이도 Firebase에서 Gemini를 바로 사용할 수 있습니다.

인라인 코드 완성 및 코드베이스 색인은 기본적으로 사용 설정되어 있습니다. 설정을 조정하는 방법을 알아보세요.

Firebase의 Gemini는 Code 보기에서 사용할 수 있습니다. Firebase Studio에서 시작하는 앱, Firebase Studio로 가져오는 앱, App Prototyping agent로 빌드된 앱에서 사용할 수 있습니다.

Firebase에서 Gemini와 채팅하기

Firebase Studio는 AI 지원 채팅으로 개발 워크플로를 지원합니다.

채팅 시작하기

  1. Firebase Studio에서 작업공간을 엽니다.

  2. 작업공간 하단에서 sparkGemini를 클릭합니다.

  3. Gemini님과 채팅을 시작합니다.

  4. (선택사항) 첨부 아이콘 첨부를 클릭하여 Gemini에 멀티모달 프롬프트를 전송하고 다음 옵션 중 하나를 선택합니다.

    • 그리기: 그리기 도구를 사용하여 원하는 디자인을 디자인한 다음 프롬프트를 입력하고 보내기를 클릭합니다.
    • 이미지: 이미지를 업로드하고 프롬프트를 추가한 다음 보내기를 클릭합니다.
    • 파일: 컨텍스트로 사용할 파일을 워크스페이스에서 선택하고 프롬프트를 추가한 다음 보내기를 클릭합니다.

  5. (선택사항) 자체 Gemini API 키를 추가하고 다른 Gemini 모델을 선택합니다. 키 자체 조달: 채팅에서 다른 Gemini 모델 사용에서 자세히 알아보세요.

  6. (선택사항) 설정을 조정하고 AI 규칙 파일을 추가하여 Firebase의 Gemini가 사용자를 지원하는 방식을 맞춤설정합니다. 자세히 알아보기

채팅 패널에서 Gemini 질문을 하고 코드 추천을 받을 수 있습니다. Gemini는 프로젝트 구성 파일과 코드를 업데이트하고 워크스페이스 내에서 직접 터미널 명령어를 실행할 수도 있습니다. Gemini에서 다음 작업을 수행할 수 있는지 물을 수 있습니다.

  • 파일 수정: Gemini는 기능을 추가하거나, 버그를 수정하거나, 코드를 리팩터링할 수 있습니다. Gemini에서 파일 변경사항을 제안하면 다음 두 가지 옵션이 표시됩니다.
    • 파일 업데이트: Gemini의 제안된 변경사항으로 파일을 직접 업데이트합니다.
    • 변경사항 검토: 제안된 변경사항을 적용하기 전에 다른 창에서 열어 검토합니다.

  • 터미널 명령어 실행: Gemini는 종속 항목 설치 또는 개발 서버 시작과 같은 명령어를 실행할 수 있습니다. 이러한 명령어를 자체적으로 제안할 수도 있고 Gemini에 실행하도록 요청할 수도 있습니다. Gemini가 명령어를 제안하면 터미널 명령어 실행 버튼이 표시됩니다. 이 아이콘을 클릭하면 Firebase Studio 내 터미널에서 명령어를 실행할 수 있습니다. Gemini는 명령어를 실행하고 채팅 창에서 결과를 해석하여 다음 단계를 결정하는 데 도움을 줍니다.

채팅으로 복잡한 작업 완료하기

Firebase의 Gemini를 사용하면 다음과 같은 복잡한 개발 작업을 완료할 수 있습니다.

  • 코드 문서화: Gemini에게 '문서 작성'을 요청하면 코드에 적합한 형식으로 문서를 자동으로 생성할 수 있습니다.
  • 테스트 사례 작성: Gemini는 단위 테스트를 자동으로 업데이트하고 생성할 수 있습니다. Gemini에 '테스트 작성'을 요청하면 Gemini가 기존 단위 테스트 파일을 찾아 누락된 테스트를 파일에 추가할 수 있습니다. 기존 단위 테스트 파일을 찾지 못하면 검토, 반복, 수락할 수 있는 단위 테스트가 생성됩니다. Gemini에 실행하도록 요청할 수도 있습니다.
  • 종속 항목 관리: Gemini에 코드에서 누락된 종속 항목을 감지하고 채팅 인터페이스에서 직접 해결하도록 요청할 수 있습니다.
  • 코드 리팩터링: Gemini에게 함수 추출, 여러 파일에서 변수 이름 변경 등 대신 코드를 리팩터링하도록 요청할 수 있습니다. Gemini는 추천된 변경사항 목록을 생성하고 변경사항을 검토하고 적용한 후 Gemini에 단위 테스트를 업데이트하고 실행하여 리팩터링을 확인하고 테스트가 계속 통과하는지 확인하도록 요청할 수 있습니다.
  • Docker 워크플로 생성 및 실행: 작업공간에서 Docker를 사용 설정한 경우 Gemini에 Dockerfile을 만들도록 요청하여 애플리케이션을 빠르게 컨테이너화할 수 있습니다 (예: '앱용 Dockerfile 만들기'). Gemini가 Dockerfile을 생성하면 컨테이너를 빌드하고 실행할 수 있습니다.
  • 단위 테스트 및 통합 테스트 실행: Gemini에 특정 테스트 모음 (예: '단위 테스트 실행' 또는 '통합 테스트 실행')을 실행하도록 요청하여 테스트 실행을 시작할 수 있습니다. Gemini는 프로젝트에 적절한 명령어 (예: npm test 또는 특정 테스트 실행기 명령어)를 실행하고 채팅 인터페이스 내에 테스트 결과를 표시합니다.

Chat에서 슬래시 명령어 사용하기

슬래시 명령어(앞에 슬래시(/)가 있는 바로가기)를 사용하여 Firebase 채팅에서 Gemini가 제공하는 출력을 안내할 수 있습니다. Gemini 채팅 프롬프트의 시작 부분에 /를 입력하고 사용 가능한 슬래시 명령어 목록에서 원하는 작업을 선택합니다.

슬래시 명령어의 전체 목록을 보려면 채팅에 /를 입력하세요.

예를 들어 /generate 다음에 원하는 작업에 관한 간단한 설명을 입력하면 코드 스니펫을 생성하는 프롬프트 바로가기가 됩니다.

다음은 /generate css for a black background 실행의 반환 예입니다.

body {
  background-color: black;
}

/* This CSS code sets the background color of the <body> element to black. This will make the background of the entire web page black. */

채팅 기록 관리하기

Firebase 채팅에서 Gemini에서 여러 대화목록을 시작하여 여러 주제를 구분할 수 있습니다. 그런 다음 주제별로 이전 대화목록을 다시 참고할 수 있습니다.

새 채팅을 시작하려면 다음 단계를 따르세요.

  1. 채팅 헤더 바에서 새 채팅을 클릭합니다.

  2. 프롬프트를 입력합니다.

다른 채팅 대화목록으로 전환하려면 다음 단계를 따르세요.

  1. 채팅 헤더 바에서 최근 채팅을 클릭합니다.

  2. 액세스하려는 채팅 대화목록을 선택합니다.

  3. 해당 채팅 대화목록을 계속하거나 Gemini를 사용하여 이전 채팅을 참고합니다.

채팅 대화목록을 삭제하려면 다음 단계를 따르세요.

  1. 채팅 헤더 표시줄의 최근 채팅에서 삭제하려는 채팅 대화목록을 선택합니다.

  2. 채팅 헤더 표시줄에서 채팅 삭제를 클릭합니다. 채팅 기록에서 채팅 대화목록을 삭제할지 확인합니다.

채팅에서 코드 인용 보기

코드 추천을 확인하는 데 도움이 되도록 Firebase Studio는 원본 소스 및 관련 라이선스에 관한 정보를 공유합니다. 채팅 창의 라이선스 로그 아이콘을 클릭하면 채팅 창에서 코드 인용의 전체 로그를 확인할 수 있습니다.

채팅 헤더 표시줄의 라이선스 로그 아이콘

Google 코드 인용에 관한 자세한 내용은 생성형 코드 지원을 참고하세요.

Firebase에서 Gemini의 인라인 도움 받기

Firebase Studio는 Gemini의 AI 지원 코드 추천을 통해 생산성을 높여 줍니다.

코드 완성은 기본적으로 사용 설정되어 있습니다. 설정을 조정하는 방법을 알아보세요.

Firebase에서 Gemini의 코드 추천 받기

Gemini는 가능한 코드의 전체 블록을 인라인으로 생성합니다. Gemini 인라인 코드 지원을 사용하려면 다음 단계를 따르세요.

  1. Firebase Studio에서 작업공간을 엽니다.

  2. 도움을 원하는 파일 또는 코드 줄로 이동하여 Ctrl+I (macOS의 경우 Cmd+I)를 누릅니다.

  3. 원하는 항목에 관한 설명을 입력하면 Gemini가 추천을 생성합니다. 작업을 바로가기로 사용하여 추천을 안내할 수도 있습니다. 예를 들어 인라인 코드의 오류를 수정하는 데 도움이 필요하면 /fixError를 입력합니다.

  4. 다음 옵션 중 하나를 선택합니다.

    • 생성된 코드를 유지하려면 수락을 클릭합니다.
    • 제안사항을 다른 위치에 붙여넣거나 새 파일로 이동하려면 삭제 버튼의 드롭다운 메뉴에서 해당 옵션을 선택합니다.
    • 새 추천을 생성하려면 재생성을 클릭합니다.
    • 추천을 완전히 삭제하려면 삭제를 클릭합니다.

  5. (선택사항) 설정을 조정하고 AI 규칙 파일을 추가하여 Firebase의 Gemini가 사용자를 지원하는 방식을 맞춤설정합니다. 자세히 알아보기

Firebase 명령어에서 Gemini를 인라인으로 보기

  1. 특정 코드의 인라인 Gemini 명령어를 보려면 도움말을 확인하려는 코드를 선택하고 마우스 오른쪽 버튼을 클릭합니다.

  2. 메뉴에서 sparkGemini를 선택한 다음 실행할 작업을 선택합니다.

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. 코드 완성을 사용 중지하려면 입력 시 인라인 코드 완성 사용 옵션을 선택 해제합니다.