게시: 2025년 4월 28일, 최종 업데이트: 2025년 5월 21일
AI의 급속한 발전은 특히 기기 내 기능의 등장과 함께 웹 애플리케이션의 새로운 지평을 열고 있습니다. 일본의 대표적인 인터넷 기업인 CyberAgent가 Chrome의 내장 AI와 Prompt API를 사용하여 플랫폼인 Ameba Blog의 블로그 환경을 개선하는 방법을 알아보세요.
Google에서는 개발자의 목표, 내장 AI를 사용하는 이점, 직면한 과제, 내장 AI를 사용하는 다른 개발자를 위한 유용한 정보를 공유합니다.
Prompt API란 무엇인가요?
| 설명 동영상 | 웹 | 확장 프로그램 | Chrome 상태 | 인텐트 |
|---|---|---|---|---|
| GitHub |  EPP에서 |
 Chrome 137 베타 |
View | 실험 의도 |
Prompt API를 사용하면 개발자가 대규모 언어 모델을 사용하여 앱에 AI 기능을 직접 추가할 수 있습니다. 맞춤 프롬프트를 정의하면 앱에서 데이터 추출, 콘텐츠 생성, 맞춤 응답과 같은 작업을 실행할 수 있습니다. Chrome에서 Prompt API는 Gemini Nano를 사용하여 클라이언트 측 추론을 실행합니다. 이러한 로컬 처리는 사용되는 모델과 관계없이 데이터 개인 정보 보호 및 응답 속도를 향상시킵니다. 어떤 모델을 사용하든 클라이언트 응답 속도입니다.
Ameba 블로그 작성자를 위한 AI 지원
CyberAgent는 저자가 겪는 일반적인 문제점, 즉 매력적인 콘텐츠, 특히 제목을 만드는 데 시간이 많이 걸리는 문제를 파악했습니다. 블로그 작성 인터페이스에 AI 기반 기능을 통합하면 콘텐츠 제작의 품질과 효율성을 크게 개선할 수 있다고 가정했습니다. 이들의 목표는 블로거에게 영감을 주고 흥미로운 콘텐츠를 만드는 데 도움이 되는 도구를 제공하는 것이었습니다.
CyberAgent는 Prompt API를 사용하여 Chrome 확장 프로그램을 개발했습니다. 이 확장 프로그램은 Ameba Blog 작성자가 제목과 제목, 후속 단락, 일반적인 문구 개선을 생성하는 데 도움이 되도록 설계된 AI 기반 기능 모음을 제공합니다.
CyberAgent는 기능의 유연성을 원했고, 이로 인해 Prompt API를 바로 사용하게 되었습니다. CyberAgent는 하나의 API에서 무한한 가능성을 활용하여 Ameba 작성자에게 가장 적합하고 유용한 방법을 정확하게 파악할 수 있었습니다.
CyberAgent는 일부 블로거를 대상으로 확장 프로그램을 테스트하여 제공되는 기능의 실용성에 관한 유용한 통계를 얻었습니다. 이 의견을 바탕으로 CyberAgent는 AI 지원에 더 적합한 애플리케이션을 파악하고 확장 프로그램의 설계를 수정했습니다. 긍정적인 결과와 의견을 바탕으로 CyberAgent는 향후 이 기능을 출시하여 클라이언트 측 AI의 기능을 블로그 커뮤니티에 직접 제공할 계획입니다.
이러한 기능을 자세히 살펴보겠습니다.
더 나은 제목과 제목 작성하기
이 확장 프로그램은 전체 블로그 콘텐츠를 기반으로 여러 제목 추천을 생성합니다. 블로그 작성자는 '다시 생성', '더 정중하게', '더 캐주얼하게', '유사한 제목 생성' 등의 옵션을 사용하여 제안을 더욱 세부적으로 조정할 수 있습니다.
CyberAgent는 사용자가 프롬프트를 작성할 필요가 없도록 UI를 설계했습니다. 이렇게 하면 프롬프트 엔지니어링에 익숙하지 않은 사용자도 AI의 이점을 누릴 수 있습니다.
이 확장 프로그램은 블로그의 개별 섹션에 매력적인 제목을 생성할 수도 있으며, 작성자는 제목과 관련된 텍스트를 선택하여 요청할 수 있습니다.
Prompt API로 제목을 생성하는 코드에는 초기 프롬프트와 사용자 프롬프트가 포함됩니다. 초기 프롬프트는 특정 유형의 출력을 가져오는 컨텍스트와 안내를 제공하는 반면 사용자 프롬프트는 모델이 사용자가 작성한 내용과 상호작용하도록 요청합니다. AI 지원 배포에서 코드에 대해 자세히 알아보세요.
후속 문단 생성
이 확장 프로그램은 선택한 텍스트를 기반으로 후속 문단을 생성하여 블로거가 글쓰기 슬럼프를 극복하는 데 도움이 됩니다. AI는 이전 단락의 맥락을 바탕으로 단락의 연속 초안을 작성하여 저자가 창작 흐름을 유지할 수 있도록 합니다.
텍스트 개선 및 수정
Gemini Nano는 선택한 텍스트를 분석하고 개선사항을 제안할 수 있습니다. 사용자는 어조와 언어 선택에 관한 추가 메모를 통해 광고 문구를 '더 귀엽게' 또는 '더 간단하게' 만들기 위해 개선된 내용을 다시 생성할 수 있습니다.
AI 지원 배포
CyberAgent는 확장 프로그램 코드를 세 단계(세션 생성, 트리거, 모델 프롬프트)로 나눴습니다.
먼저 브라우저에서 내장 AI를 사용할 수 있고 지원되는지 확인합니다. '예'인 경우 기본 매개변수를 사용하여 세션을 만듭니다.
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
각 기능에는 사용자가 트리거하는 도우미 함수가 있습니다. 트리거되면 사용자가 관련 버튼을 클릭할 때 세션이 적절하게 업데이트됩니다.
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
세션이 업데이트되면 함수에 따라 모델에 프롬프트를 표시합니다. 예를 들어 다음은 제목을 생성하고 더 정중한 어조로 제목을 다시 생성하는 코드입니다.
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
내장 AI의 이점
내장 AI는 클라이언트 측 AI의 한 유형으로, 추론이 사용자 기기에서 발생한다는 의미입니다. CyberAgent는 Gemini Nano와 함께 기본 제공 AI API를 사용했습니다. 애플리케이션 개발자와 사용자 모두에게 제공하는 매력적인 이점 때문입니다.
CyberAgent가 중점적으로 고려한 주요 이점은 다음과 같습니다.
- 보안 및 개인 정보 보호
- 비용
- 응답성 및 안정성
- 개발 용이성
보안 및 개인 정보 보호
외부 서버로 데이터를 전송하지 않고 사용자 기기에서 직접 AI 모델을 실행하는 기능이 중요합니다. 블로그 초안은 대중에게 공개되지 않으므로 CyberAgent는 이러한 초안을 서드 파티 서버로 전송하고 싶지 않습니다.
내장된 AI가 Gemini Nano를 사용자 기기에 다운로드하므로 서버에서 데이터를 주고받을 필요가 없습니다. 초안에 기밀 정보나 의도하지 않은 표현이 포함될 수 있으므로 글을 작성할 때 특히 유용합니다. 기본 제공되는 AI는 원본 콘텐츠와 생성된 콘텐츠를 서버로 전송하는 대신 로컬에 보관하므로 보안을 강화하고 콘텐츠 개인 정보를 보호할 수 있습니다.
비용 절감
내장 AI를 사용하는 주요 이점 중 하나는 브라우저에 Gemini Nano가 포함되어 있고 API를 무료로 사용할 수 있다는 점입니다. 추가 또는 비공개로 청구되는 내역은 없습니다.
내장된 AI는 서버 비용을 크게 줄이고 AI 추론과 관련된 비용을 완전히 없앨 수 있습니다. 이 솔루션은 대규모 사용자층으로 빠르게 확장할 수 있으며 사용자가 추가 비용 없이 연속 프롬프트를 제출하여 출력을 미세 조정할 수 있습니다.
응답성 및 안정성
내장된 AI는 네트워크 상태와 관계없이 일관되고 빠른 응답 시간을 제공합니다. 이를 통해 사용자는 콘텐츠를 반복해서 생성할 수 있으므로 새로운 아이디어를 시도하고 만족스러운 최종 결과물을 빠르게 만들 수 있습니다.
개발 용이성
Chrome의 내장 AI는 즉시 사용할 수 있는 API를 제공하여 개발 프로세스를 간소화합니다. 개발자는 애플리케이션에 AI 기반 기능을 간편하게 만들 수 있습니다.
Gemini Nano와 기본 제공 AI API는 Chrome에 설치되어 있으므로 추가 설정이나 모델 관리가 필요하지 않습니다. 이 API는 다른 브라우저 API와 마찬가지로 JavaScript를 사용하며 머신러닝 전문 지식이 필요하지 않습니다.
더 나은 결과를 위한 과제 해결
CyberAgent의 Prompt API 여정은 클라이언트 측 LLM을 사용하는 미묘한 차이점에 관한 중요한 교훈을 제공했습니다.
- 일관되지 않은 응답: 다른 LLM과 마찬가지로 Gemini Nano는 동일한 프롬프트에 대해 동일한 출력을 보장하지 않습니다. CyberAgent에서 예기치 않은 형식 (예: Markdown, 잘못된 JSON)의 응답을 발견했습니다. 안내를 따르더라도 결과가 크게 달라질 수 있습니다. AI가 내장된 애플리케이션이나 Chrome 확장 프로그램을 구현할 때는 출력이 항상 올바른 형식인지 확인하는 해결 방법을 추가하는 것이 좋습니다.
- 토큰 한도: 토큰 사용을 관리하는 것이 중요합니다. CyberAgent는
inputUsage,inputQuota,measureInputUsage()와 같은 속성과 메서드를 사용하여 세션을 관리하고 컨텍스트를 유지하며 토큰 소비를 줄였습니다. 이는 특히 제목을 수정할 때 중요했습니다. - 모델 크기 제약조건: 모델이 다운로드되어 사용자 기기에 있으므로 서버 기반 모델보다 훨씬 작습니다. 즉, 특히 요약의 경우 만족스러운 결과를 얻으려면 프롬프트 내에 충분한 맥락을 제공하는 것이 중요합니다. LLM 크기 이해에 대해 자세히 알아보세요.
CyberAgent는 클라이언트 측 모델이 아직 모든 브라우저와 기기에서 사용할 수 있는 것은 아니며 소형 모델에는 제한사항이 있지만 특정 작업에 대해서는 여전히 인상적인 성능을 제공할 수 있다고 강조합니다. 서버 측 비용 없이 빠르게 반복하고 실험할 수 있는 기능은 텐서플로를 유용한 도구로 만듭니다.
서버 측이든 클라이언트 측이든 모든 AI로 완벽한 응답을 얻기 어렵다는 점을 인식하고 균형을 찾는 것이 좋다고 조언합니다. 마지막으로 서버 측 AI와 클라이언트 측 AI의 강점을 결합한 하이브리드 접근 방식이 더 큰 잠재력을 발휘할 미래가 올 것으로 보고 있습니다.
향후 계획
CyberAgent의 빌트인 AI 탐색은 원활한 AI 통합을 통해 사용자 환경을 개선할 수 있는 흥미로운 가능성을 보여줍니다. Ameba Blog와 호환되도록 빌드된 확장 프로그램은 이러한 기술을 실제 문제 해결에 실용적으로 적용하는 방법을 보여주며, 더 넓은 웹 개발 커뮤니티에 귀중한 교훈을 제공합니다.
기술이 성숙하고 브라우저와 기기 지원이 확대됨에 따라 빌트인 AI 및 기타 형태의 클라이언트 측 AI가 더욱 혁신적으로 적용될 것으로 예상됩니다.
리소스
- Prompt API 자세히 알아보기
- Chrome에서 내장 API 사용하기
- 이 주제를 다루는 CyberAgent의 웹 AI 우수사례
- 클라이언트 측 AI에 관한 CyberAgent의 사례 연구인 AI의 미래는 지금입니다를 시청하세요.
감사의 말씀
의견을 제공하고 확장 프로그램을 개선하는 데 도움을 준 Ameba 블로거 ao, Nodoka, Erin, Chiaki, socchi님께 감사드립니다. 이 블로그 게시물을 작성하고 검토하는 데 도움을 주신 토마스 슈타이너, 알렉산드라 클레퍼, 세바스티안 벤츠님께 감사드립니다.