Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Firebase AI 로직을 사용한 하이브리드 AI 프롬프트

Thomas Steiner

게시일: 2025년 5월 20일

사용자가 사용하는 플랫폼이나 하드웨어에 관계없이 사용자의 요구사항을 충족하기 위해 Firebase AI Logic을 사용하여 내장된 프롬프트 API로 대체할 수 있습니다.

하이브리드 AI 환경 빌드

내장 AI에는 여러 가지 이점이 있으며, 그중 가장 주목할 만한 이점은 다음과 같습니다.

민감한 데이터의 로컬 처리: 민감한 데이터를 사용하는 경우 엔드 투 엔드 암호화를 통해 사용자에게 AI 기능을 제공할 수 있습니다.
오프라인 AI 사용: 오프라인 상태이거나 연결이 끊긴 경우에도 사용자가 AI 기능에 액세스할 수 있습니다.

이러한 이점은 클라우드 애플리케이션에는 적용되지 않지만, 내장 AI에 액세스할 수 없는 사용자를 위해 원활한 환경을 보장할 수 있습니다.

Firebase 시작하기

Firebase 프로젝트를 만들고 웹 앱에 Firebase를 추가하는 방법을 알아봅니다.

Firebase 프로젝트는 Firebase 관련 구성 및 서비스가 포함된 Google Cloud 프로젝트입니다. Google Cloud 및 Firebase에 대해 자세히 알아보세요.

SDK 설치

이 워크플로에서는 npm을 사용하고 모듈 번들러나 JavaScript 프레임워크 도구가 필요합니다. Firebase AI Logic은 사용하지 않는 코드를 없애고 SDK 크기를 줄이기 위해 모듈 번들러와 연동하도록 최적화되었습니다.

Firebase JS SDK를 설치합니다.
```
npm install firebase
```
애플리케이션에서 Firebase를 초기화합니다.

Firebase AI Logic 설정 및 보안

Firebase Console에서 AI 서비스 > AI 로직으로 이동합니다.
시작하기를 클릭하여 설정 워크플로를 시작합니다.
'Gemini API 제공업체'를 선택하라는 메시지가 표시되면 무료로 빠르게 시작할 수 있는 Gemini Developer API를 선택하는 것이 좋습니다.

나중에 언제든지 Vertex AI Gemini API(및 결제 요구사항)를 설정할 수 있습니다.
콘솔의 워크플로를 계속 진행하여 Firebase AI Logic에 필요한 API와 연결된 서비스를 설정합니다.

2026년 7월 초부터 이 워크플로 단계에서는 앱에서 직접 액세스할 때 Gemini API를 보호하는 데 매우 중요한 서비스인 AI Logic에 Firebase 앱 체크를 적용합니다. 시작하기의 일환으로 (이 가이드의 뒷부분에 나오는 단계 참고) 앱 체크가 적용될 때 로컬 개발을 위해 앱 체크 디버그 제공자를 구성해야 합니다.

참고: 최종 사용자에게 앱의 AI 기능을 출시하려면 앱 체크가 적용될 때 최종 사용자가 기능을 사용할 수 있도록 프로덕션 앱 체크 증명 제공업체에 앱을 등록해야 합니다.
이 가이드의 다음 섹션으로 이동하여 로컬 개발을 위한 앱 체크 디버그 제공자를 구성한 다음 Gemini API에 첫 번째 요청을 보냅니다.

로컬 개발을 위해 앱 체크 디버그 제공자 구성

localhost에서 대화형으로 앱을 실행하는 동안 (예: 로컬 개발 중에) 디버그 제공자를 사용하는 방법은 다음과 같습니다.

디버그 빌드에서 앱 체크를 초기화하기 전에 self.FIREBASE_APPCHECK_DEBUG_TOKEN을 true로 설정하여 디버그 모드를 사용 설정합니다. 예를 들면 다음과 같습니다.
```
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(app, { /* App Check options */ });
```
로컬에서 웹 앱을 방문하여 브라우저의 개발자 도구를 엽니다. 디버그 콘솔에 디버그 토큰이 표시됩니다.
```
AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.
```
앱 체크에 디버그 토큰을 등록합니다.
1. Firebase Console에서 보안 > 앱 체크 > 앱 탭으로 이동합니다.
2. 앱을 찾아 더보기 메뉴()를 클릭한 다음 디버그 토큰 관리를 선택합니다.
3. 화면에 표시된 안내에 따라 디버그 토큰을 등록합니다.

새 디버그 토큰을 획득하는 방법을 비롯한 디버그 제공자에 관한 자세한 내용은 공식 앱 체크 문서를 참고하세요.

Gemini API에 요청 보내기

인스턴스를 초기화하고 만듭니다.
텍스트 또는 멀티모달 입력으로 모델에 프롬프트를 제공합니다. 이 가이드의 다음 하위 섹션에 있는 예시를 참고하세요.

참고: 다음 예에서는 모델에서 스트리밍되는 응답을 보여주므로 수신된 출력 청크 또는 전체 응답을 사용할 수 있습니다.

텍스트 프롬프트

모델에 대한 안내에 일반 텍스트를 사용할 수 있습니다. 예를 들어 모델에 농담을 해 달라고 요청할 수 있습니다.

요청이 라우팅되는 방식에는 몇 가지 옵션이 있습니다.

getGenerativeModel() 함수에서 mode을 'prefer_on_device'로 설정하여 기본적으로 내장 AI를 사용합니다(사용 가능한 경우). 내장 모델을 사용할 수 없는 경우 요청은 원활하게 클라우드 모델을 사용하도록 대체됩니다 (온라인 상태인 경우).
getGenerativeModel() 함수에서 mode를 'prefer_in_cloud'로 설정하여 온라인 상태일 때 기본적으로 클라우드 모델을 사용합니다. 오프라인 상태인 경우 요청은 사용 가능한 경우 내장 AI를 사용하도록 원활하게 대체됩니다.

// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);

// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });

const prompt = 'Tell me a joke';

const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}
console.log('Complete response', await result.response);

멀티모달 프롬프트

텍스트 외에 이미지나 오디오로도 프롬프트를 입력할 수 있습니다. 모델에 이미지의 내용을 설명하거나 오디오 파일을 스크립트로 작성해 달라고 요청할 수 있습니다.

이미지는 Firebase FileDataPart 객체로 base64 인코딩된 문자열로 전달해야 하며, 헬퍼 함수 fileToGenerativePart()를 사용하여 이를 수행할 수 있습니다.

// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });

    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  }

  const fileInputEl = document.querySelector('input[type=file]');

  fileInputEl.addEventListener('change', async () => {
    const prompt = 'Describe the contents of this image.';

    const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

    // To generate text output, call generateContent with the text and image
    const result = await model.generateContentStream([prompt, imagePart]);

    for await (const chunk of result.stream) {
      const chunkText = chunk.text();
      console.log(chunkText);
    }
    console.log(Complete response: ', await result.response);
  });

데모

다양한 기기와 브라우저에서 Firebase AI Logic 데모를 방문합니다. 모델 응답이 내장 AI 모델에서 제공되는지 아니면 클라우드에서 제공되는지 확인할 수 있습니다.

Chrome에서 지원되는 하드웨어에서 데모는 Prompt API와 Gemini Nano를 사용합니다. 기본 문서, JavaScript 파일, CSS 파일에 대한 요청이 3개만 있습니다.

내장 AI API를 사용하여 Chrome에서 실행되는 Firebase AI Logic

다른 브라우저나 AI 지원이 내장되지 않은 운영체제에서는 Firebase 엔드포인트 https://firebasevertexai.googleapis.com에 추가 요청이 전송됩니다.

Safari에서 실행되는 Firebase AI Logic이 Firebase 서버에 요청을 전송합니다.

참여하고 의견 공유하기

Firebase AI Logic은 웹 앱에 AI 기능을 통합하는 데 유용합니다. 프롬프트 API를 사용할 수 없을 때 클라우드로 대체 기능을 제공함으로써 SDK는 AI 기능의 접근성과 안정성을 높입니다.

클라우드 애플리케이션은 개인 정보 보호 및 기능에 대한 새로운 기대치를 생성하므로 사용자에게 데이터가 처리되는 위치를 알리는 것이 중요합니다.

Chrome 구현에 관한 의견이 있으면 버그 신고 또는 기능 요청을 제출하세요.
Firebase AI Logic에 관한 의견이 있으면 버그 신고를 제출하세요.