크롬 프롬프트 API 완벽 가이드 — 브라우저에서 Gemini Nano에 자연어 요청 보내기

웹 개발의 패러다임이 다시 한 번 바뀌고 있다. 서버 없이 브라우저 자체에서 AI 추론이 가능해졌기 때문이다. 구글 크롬에 내장된 크롬 프롬프트 API(Chrome Prompt API)가 바로 그 핵심이다.

크롬 프롬프트 API란?

크롬 프롬프트 API는 Chrome 브라우저에 기본 내장된 Gemini Nano 모델에 직접 자연어 요청을 보낼 수 있는 브라우저 네이티브 API다. 기존 AI 기반 웹 앱이 반드시 서버를 통해 OpenAI나 Google의 API를 호출했던 것과 달리, 이 API는 온디바이스(기기 자체)에서 모든 처리가 완료된다.

브라우저 내장 AI — 서버 없이 온디바이스 추론

하드웨어 요구사항

모든 기기에서 동작하는 것은 아니다. 다음 조건을 만족해야 한다:

• 운영체제: Windows 10/11, macOS 13 이상(Ventura), Linux, ChromeOS (Chromebook Plus)
• 저장공간: Chrome 프로필 볼륨에 여유 공간 22GB 이상
• GPU: VRAM 4GB 이상 (오디오 입력 사용 시 필수)
• CPU: RAM 16GB 이상, 코어 4개 이상
• 네트워크: 무제한 또는 데이터 전송량 제한 없는 연결 (초기 모델 다운로드용)

참고로 모델을 다운로드한 후에는 네트워크 연결 없이도 사용 가능하다. 즉, 일회성 다운로드 이후에는 완전한 오프라인 AI 추론이 가능하다.

실제 활용 사례

크롬 프롬프트 API는 다양하고 혁신적인 활용이 가능하다:

• AI 기반 검색: 웹페이지 콘텐츠를 기반으로 사용자의 질문에 직접 답변
• 맞춤형 뉴스 피드: 카테고리별 기사 분류 및 커스텀 필터링
• 스마트 콘텐츠 필터: 특정 주제 기반 뉴스 기사를 자동으로 흐리게 처리
• 캘린더 일정 자동 생성: 웹페이지에서 이벤트 정보를 추출해 캘린더 앱과 연동
• 연락처 정보 추출: 웹사이트에서 자동으로 연락처를 추출해 저장

기본 사용법

실제로 코드를 작성해 보자. 먼저 API 사용 가능 여부를 확인한다:

// 모델 사용 가능 여부 확인

const availability = await LanguageModel.availability();

// "readily", "downloading", "after-download" 중 하나
if (availability === 'readily') {
console.log('즉시 사용 가능!');
} else if (availability === 'downloading') {
console.log('모델 다운로드 중...');
}

문제없다면 세션을 생성한다:

// 세션 생성 (다운로드 모니터링 포함)

const session = await LanguageModel.create({
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(다운로드 진행: ${e.loaded * 100}%);
});
},
});

// 프롬프트 보내기
const response = await session.prompt('안녕하세요, Gemini!');
console.log(response);

멀티모달 입력 지원

크롬 프롬프트 API의 강력한 기능 중 하나는 멀티모달 지원이다. 텍스트뿐만 아니라 이미지, 오디오도 입력으로 처리할 수 있다:

const session = await LanguageModel.create({

expectedInputs: [
{ type: "text", languages: ["ko"] },
{ type: "image" },
],
expectedOutputs: [{ type: "text", languages: ["ko"] }],
});

// 이미지 + 텍스트로 프롬프트
const imageBlob = await (await fetch('photo.jpg')).blob();
const result = await session.prompt([
{
role: 'user',
content: [
{ type: 'text', value: '이 이미지에 대해 설명해줘:' },
{ type: 'image', value: imageBlob },
],
},
]);
console.log(result);

구조화된 출력 (JSON 스키마)

모델이 특정 JSON 형식으로 응답하도록 강제할 수 있다:

const session = await LanguageModel.create();

const schema = { "type": "boolean" };

const post = "오늘 점심으로 피자를 먹었다. 맛있었다!";
const result = await session.prompt(
이 게시물이 음식에 관한 것인가?\n\n${post},
{ responseConstraint: schema }
);
// result는 항상 true 또는 false

로컬 개발 환경 설정

localhost에서 테스트하려면 다음 플래그를 활성화해야 한다:

• chrome://flags/#optimization-guide-on-device-model
• chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

Chrome을 다시 시작하면 로컬 환경에서도 API를 사용할 수 있다.

개발자 도구 활용

Gemini Nano 모델의 현재 크기나 상태를 확인하려면 다음 주소를 방문하면 된다:

chrome://on-device-internals

여기서 모델 다운로드 상태, 메모리 사용량, API 응답 시간 등 디버깅에 필요한 정보를 확인할 수 있다.

현재 한계와 향후 전망

아직 초기 단계인 만큼 몇 가지 제한이 있다:

• Chromebook Plus가 아닌 일반 Chromebook/Android/iOS Chrome에서는 미지원
• 오디오 입력 사용 시 GPU 필수
• 초기 모델 다운로드에 네트워크 연결 필요

그러나 크롬팀은 지속적으로 기능을 확장하고 있다. Chrome 139~144 오리진 트라이얼에서는 멀티모달 지원이 추가되었고, Chrome 148부터는 더 다양한 샘플링 매개변수 튜닝이 가능하다.

---

📚 출처

• Prompt API | AI on Chrome: https://developer.chrome.com/docs/ai/prompt-api?hl=ko
• 크롬 프롬프트 API - GeekNews: https://news.hada.io/topic?id=28990