블로거의 역량 강화: CyberAgent가 기본 제공 AI를 배포하여 콘텐츠 제작을 개선한 방법

Yuriko Hirota
Yuriko Hirota
X
Kazunari Hara
Kazunari Hara
홈페이지

게시: 2025년 4월 28일, 최종 업데이트: 2025년 5월 21일

AI의 급격한 발전은 특히 온디바이스 기능의 등장과 함께 웹 애플리케이션의 새로운 지평을 열고 있습니다. 일본의 선도적인 인터넷 회사인 CyberAgent가 Chrome의 내장 AI와 프롬프트 API를 사용하여 플랫폼인 Ameba Blog의 블로그 환경을 개선하는 방법을 알아보세요.

이들의 목표, 내장 AI 사용의 이점, 직면한 문제, 내장 AI를 사용하는 다른 개발자를 위한 유용한 정보를 공유합니다.

Prompt API란 무엇인가요?

설명 웹 확장 프로그램 Chrome 상태 인텐트
GitHub 오리진 트라이얼 오리진 트라이얼에서 Chrome 138 View 실험 의도

프롬프트 API를 사용하면 개발자가 대규모 언어 모델을 사용하여 앱에 직접 AI 기능을 추가할 수 있습니다. 맞춤 프롬프트를 정의하면 앱에서 데이터 추출, 콘텐츠 생성, 맞춤 응답과 같은 작업을 실행할 수 있습니다. Chrome에서 Prompt API는 Gemini Nano를 사용하여 클라이언트 측 추론을 실행합니다. 이러한 로컬 처리는 사용되는 모델과 관계없이 데이터 개인 정보 보호 및 응답 속도를 향상합니다. 사용된 모델과 관계없이 클라이언트 응답 속도입니다.

Ameba 블로그 작성자를 위한 AI 지원

CyberAgent는 저자가 겪는 일반적인 문제점, 즉 특히 제목과 같이 흥미로운 콘텐츠를 만드는 데 시간이 오래 걸리는 경우가 많다는 점을 인식했습니다. 블로그 제작 인터페이스에 AI 기반 기능을 통합하면 콘텐츠 제작의 품질과 효율성을 크게 개선할 수 있다는 가설을 세웠습니다. 이들의 목표는 블로거가 흥미로운 콘텐츠를 만들 수 있도록 영감을 주고 지원하는 도구를 제공하는 것이었습니다.

CyberAgent는 프롬프트 API를 사용하여 Chrome 확장 프로그램을 개발했습니다. 이 확장 프로그램은 Ameba Blog 작성자가 제목과 헤딩, 후속 단락, 일반적인 카피 개선사항을 생성하는 데 도움이 되도록 설계된 AI 기반 기능 모음을 제공합니다.

CyberAgent는 기능의 유연성을 원했고, 이는 바로 프롬프트 API로 이어졌습니다. 하나의 API로 무한한 가능성을 제공하는 덕분에 CyberAgent는 Ameba 작가에게 가장 적합하고 유용한 것이 무엇인지 정확하게 파악할 수 있었습니다.

CyberAgent는 일부 블로거를 대상으로 확장 프로그램을 테스트하여 제공되는 기능의 실용성에 관한 유용한 정보를 얻었습니다. 이러한 의견을 통해 CyberAgent는 AI 지원에 더 적합한 애플리케이션을 식별하고 확장 프로그램의 디자인을 개선할 수 있었습니다. CyberAgent는 긍정적인 결과와 피드백을 바탕으로 향후 이 기능을 출시하여 클라이언트 측 AI의 기능을 블로그 커뮤니티에 직접 제공할 계획입니다.

이러한 기능을 자세히 살펴보겠습니다.

더 나은 제목과 헤드라인 작성

확장 프로그램은 전체 블로그 콘텐츠를 기반으로 여러 제목 추천을 생성합니다. 블로그 작성자는 '다시 생성', '더 공손하게', '더 캐주얼하게', '비슷한 제목 생성' 등의 옵션을 사용하여 이러한 제안을 추가로 수정할 수 있습니다.

CyberAgent는 사용자가 프롬프트를 작성하지 않아도 되도록 UI를 특별히 설계했습니다. 이렇게 하면 프롬프트 엔지니어링에 익숙하지 않은 사용자도 AI의 이점을 누릴 수 있습니다.

작성자는 제목을 더 격식 있게 또는 더 캐주얼하게 재생성하거나 동일한 어조로 재생성할 수 있습니다.

또한 확장 프로그램은 블로그의 개별 섹션에 대한 매력적인 헤더를 생성할 수 있으며, 작성자는 헤더에 해당하는 텍스트를 선택하여 이를 요청할 수 있습니다.

텍스트를 선택하면 작성자가 해당 섹션에 맞는 제목을 생성할 수 있습니다.

프롬프트 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를 사용하며 머신러닝 전문 지식이 필요하지 않습니다.

프롬프트 API를 사용한 CyberAgent의 여정은 클라이언트 측 LLM을 사용하는 것의 미묘한 차이에 관한 귀중한 교훈을 제공했습니다.

  • 일관되지 않은 대답: 다른 LLM과 마찬가지로 Gemini Nano는 동일한 프롬프트에 대해 동일한 출력을 보장하지 않습니다. CyberAgent에서 예기치 않은 형식 (예: 마크다운 및 잘못된 JSON)의 응답이 발생했습니다. 지침이 있어도 결과가 크게 달라질 수 있습니다. 내장 AI를 사용하여 애플리케이션이나 Chrome 확장 프로그램을 구현할 때는 출력이 항상 올바른 형식으로 표시되도록 해결 방법을 추가하는 것이 좋습니다.
  • 토큰 한도: 토큰 사용량을 관리하는 것이 중요합니다. CyberAgent는 inputUsage, inputQuota, measureInputUsage()와 같은 속성과 메서드를 사용하여 세션을 관리하고, 컨텍스트를 유지하고, 토큰 소비를 줄였습니다. 이는 특히 제목을 수정할 때 중요했습니다.
  • 모델 크기 제약: 모델은 다운로드되어 사용자 기기에 저장되므로 서버 기반 모델보다 훨씬 작습니다. 따라서 특히 요약의 경우 만족스러운 결과를 얻으려면 프롬프트 내에 충분한 컨텍스트를 제공하는 것이 중요합니다. LLM 크기 이해에 대해 자세히 알아보세요.

CyberAgent는 클라이언트 측 모델이 아직 모든 브라우저와 기기에서 보편적으로 제공되지는 않으며 소규모 모델에는 제한이 있지만 특정 작업에서는 여전히 인상적인 성능을 제공할 수 있다고 강조합니다. 서버 측 비용 없이 빠르게 반복하고 실험할 수 있으므로 유용한 도구입니다.

서버 측 AI든 클라이언트 측 AI든 완벽한 대답을 얻기는 어렵다는 점을 고려하여 균형을 맞추는 것이 좋습니다. 마지막으로 서버 측 AI와 클라이언트 측 AI의 강점을 결합한 하이브리드 접근 방식이 훨씬 더 큰 잠재력을 발휘할 수 있는 미래를 기대합니다.

향후 계획

CyberAgent의 내장 AI 탐색은 원활한 AI 통합을 통해 사용자 환경을 개선할 수 있는 흥미로운 가능성을 보여줍니다. Ameba Blog와 함께 작동하도록 빌드된 확장 프로그램은 이러한 기술을 실제 문제 해결에 어떻게 적용할 수 있는지 보여주며, 광범위한 웹 개발 커뮤니티에 유용한 교훈을 제공합니다.

기술이 성숙해지고 브라우저와 기기 지원이 확대됨에 따라 내장 AI 및 기타 형태의 클라이언트 측 AI의 혁신적인 애플리케이션이 더욱 많이 등장할 것으로 예상됩니다.

리소스

감사의 말씀

의견을 제공하고 확장 프로그램을 개선하는 데 도움을 준 Ameba의 블로거 ao, Nodoka, Erin, Chiaki, socchi에게 감사드립니다. 이 블로그 게시물을 작성하고 검토하는 데 도움을 주신 토마스 슈타이너, 알렉산드라 클레퍼, 세바스티안 벤츠님께 감사드립니다.