Transformers.js 기반 Gemma 4 브라우저 확장 프로그램 공개
Manifest V3 환경에서 로컬 AI 기능을 구현하는 새로운 아키텍처 제시
- •Transformers.js와 Gemma 4 E2B 모델을 활용한 브라우저 확장 프로그램 데모가 공개되었습니다.
- •Manifest V3 환경에 최적화된 백그라운드 서비스 워커와 사이드 패널 기반의 아키텍처를 제시합니다.
- •개발자들은 공개된 소스 코드를 통해 로컬 AI 기능을 크롬 확장 프로그램에 통합하는 방법을 학습할 수 있습니다.
웹 브라우저 내에서 로컬 인공지능(AI) 기능을 구현할 수 있는 새로운 기술적 접근 방식이 공개되었다. Transformers.js를 활용하여 Gemma 4 E2B 모델을 구동하는 브라우저 확장 프로그램(Browser Extension) 데모가 발표되었으며, 이는 크롬(Chrome)의 Manifest V3(MV3) 제약 조건 하에서 로컬 AI를 실행하려는 개발자들에게 구체적인 아키텍처를 제공한다.
로컬 AI 실행을 위한 기술적 구현
이번에 공개된 프로젝트는 Transformers.js를 엔진으로 사용하며, Gemma 4 E2B 모델을 기반으로 웹 탐색을 지원하는 브라우저 어시스턴트(Browser Assistant) 구조를 갖추고 있다. 개발자들은 이 가이드를 통해 Manifest V3 런타임(Runtime), 모델 로딩(Model Loading), 메시징(Messaging) 과정에서 발생하는 실질적인 기술적 관찰 결과를 확인할 수 있다.
구현된 확장 프로그램의 핵심 아키텍처는 세 가지 주요 구성 요소로 나뉜다. 첫째, 모델을 호스팅하는 백그라운드 서비스 워커(Background Service Worker)가 존재한다. 둘째, 사용자 인터페이스(UI)를 담당하는 사이드 패널(Side Panel) 채팅 창이 구축되어 있다. 셋째, 웹 페이지 수준에서 텍스트 추출 및 하이라이팅(Highlighting) 작업을 수행하는 컨텐츠 스크립트(Content Script)가 포함된다.
Manifest V3 환경의 아키텍처 구조
Manifest V3(MV3) 환경에서는 확장 프로그램의 실행 권한과 런타임 컨텍스트(Runtime Context) 관리가 매우 중요하다. 이번 프로젝트는 public/manifest.json을 시작점으로 하여 다음과 같은 진입점(Entry Points)을 정의하고 있다.
| 구성 요소 | 파일 경로 | 역할 및 기능 |
|---|---|---|
| 백그라운드 서비스 워커 | src/background/background.ts (as background.js) | Transformers.js 엔진 호스팅 및 모델 관리 |
| 컨텐츠 스크립트 | src/content/content.ts (as content.js) | 웹 페이지 데이터 추출 및 페이지 내 액션 수행 |
| 사이드 패널 UI | 사이드 패널 인터페이스 | 사용자 채팅 및 상호작용 UI 제공 |
컨텐츠 스크립트는 http(s)://*/* 패턴에 대해 document_idle 시점에 실행되도록 설정되어, 페이지 로딩이 완료된 후 안정적인 데이터 처리가 가능하도록 설계되었다.
개발자를 위한 구현 가이드
본 프로젝트는 개발자들이 크롬 확장 프로그램 내에서 로컬 AI 기능을 통합할 때 직면하는 구조적 문제를 해결하는 데 초점을 맞춘다. 특히 React UI 레이어나 Vite 빌드 설정과 같은 프론트엔드 구성보다는, 각 크롬 런타임에서 어떤 코드가 실행되고 이들이 어떻게 오케스트레이션(Orchestration)되는지에 대한 고수준의 아키텍처 결정 사항을 중점적으로 다룬다.
공개된 소스 코드는 오픈 소스로 제공되어 개발자들이 Transformers.js를 활용한 로컬 AI 에이전트 구축의 참조 모델로 사용할 수 있다. 이는 브라우저 환경에서 클라우드 API 의존도를 낮추고 사용자 개인정보를 보호하며 로컬 자원을 활용하는 AI 애플리렉션 개발의 기반이 된다.
해당 프로젝트의 소스 코드는 GitHub를 통해 공개되어 있으며, 실제 작동하는 확장 프로그램은 크롬 웹 스토어(Chrome Web Store)에서 확인할 수 있다.
AI·테크 더보기
최신 뉴스
젤렌스키, 러시아 공중에 드론 경고
젤렌스키, 러시아 공역이 드론으로 인해 안전하지 않다고 경고 우크라이나, 러시아 에너지 및 물류 시설에 장거리 드론 공격 확대 푸틴, 우크라이나 경고를 '국가 테러'로 규정하고 공격 강화 예고 우크라이나 대통령 젤렌스키는 2026년 9월 2일 오후 연설에서 러시아 공역이 점점 더 위험해지고 있다고 경고했다. 그는 모든 항공사, 보험사, 러시아 주요 공항을 이용하는 기관에 대해 "러시아 공역은 완전히 안전하지 않다"고 명시했다. 이는 우크라이나가 러시아 내 에너지 시설과 물류 기지에 장거리 드론 공격을 확대하면서 발생한 결과다. 젤렌스키는 러시아 공역에 드론이 기존보다 훨씬 더 빈번하게 출현할 것이라며, 항공기 운항 시 이를 반드시 고려해야 한다고 강조했다. 특히 모스크바, 상트페테르부르크 등 주요 도시로 향
독일, 루스라의 공격적 행위에 대응해 대규모 제재 발표
독일은 레히지그 공항에서 폭발 위협 드론이 발견된 사건을 러시아 정부의 지시에 따른 것으로 판단하고, 러시아 문화센터 계약 해지 및 외교 기관 압박 조치를 발표했다. 러시아 대통령 푸틴은 독일의 조치를 '심각한 실수'로 평가하며, 증거 부족을 이유로 비판했고, 러시아는 동일한 방식의 보복을 예고했다. 독일 정부는 러시아의 하이브리드 공격에 대한 경고를 명확히 하고, 정보기관 역량 강화를 통해 지속적인 대응을 준비 중이다.
조지 클루니, 베니스 영화제에서 수상
조지 클루니는 베니스 영화제에서 평생 공로상을 수상했다. 다니엘 보일 감독의 '잉크'는 1969년 러퍼트 머독스가 '더 선'을 인수한 과정을 다룬다. 영화제는 여성 감독의 부재 문제를 공식적으로 인정하며 성평등 개선을 촉구했다. 베니스 영화제는 9월 2일 수요일, 조지 클루니가 평생 공로상을 수상하는 가운데 개막했다. 클루니는 아내 암알 클루니와 함께 수상식에 참석했으며, 이날 행사에서 그는 할리우드의 인공지능 �revoluion과 파라마운트-워너 브라더스 합병 논의, 미국 내 언론과 권력의 상태에 대해 언급했다. 그는 또한 영화 산업이 생존 방안을 찾아야 한다고 강조했다. 이날 개막작으로는 다니엘 보일 감독이 제작한 '잉크(Ink)'가 상영됐다. 이 영화는 1969년 러퍼트 머독스가 영국의 보도지 '더 선
이집트 시나이반도 버스 추락 사고로 22명 사망
이집트 시나이반도의 다바브와 누웨이바를 연결하는 도로에서 버스 추락 사고 발생, 최소 22명 사망. 사고 버스에는 총 43명이 탑승했으며, 이 중 22명이 요르단 국적자로 확인됐다. 10명의 요르단인과 12명의 이집트인이 사망했으며, 28명이 부상했다. 이집트의 시나이반도에서 버스가 추락해 최소 22명이 사망하고 28명이 부상을 입었다. 사고는 이집트 동부 시나이반도의 레드시아 해안에 위치한 다바브와 누웨이바를 연결하는 도로에서 수요일 오전 발생했다. 사고 현장에는 20대 이상의 구급차가 급파되어 부상자들을 인근 병원으로 이송했다. 이집트 보건부는 사고 발생 직후 20대 이상의 구급차를 현장에 파견해 응급 조치를 취했다고 밝혔다. 사고 버스는 총 43명을 태우고 있었으며, 이 중 22명이 요르단 국적자로 확
플로렌스 퓨, '이스트 오브 에덴'에서 악역의 정점 포착
넷플릭스는 10월 1일에 조 카잔이 각본을 쓴 7부작 한정 시리즈 'East of Eden'을 공개한다. 플로렌스 퓨가 캐시 암스 역을 맡아 악역의 심리적 복잡성을 연기한다. 이번 작품은 1955년 엘리아 카잔 감독 영화판 이후 두 번째 대규모 리메이크다. 넷플릭스는 9월 2일, 조 카잔이 각본을 쓰고 공동 제작자로 참여한 7부작 한정 시리즈 'East of Eden'의 전체 트레일러를 공개했다. 이 작품은 존 스타인벡이 1952년에 발표한 대작 소설을 기반으로 하며, 플로렌스 퓨가 주인공 캐시 암스를 연기한다. 캐시 암스는 트랙스 형제인 아담(크리스토퍼 애벗)과 찰스(마이크 페이스트)의 삶을 뒤흔드는 인물로, 처음으로 그 집에 피로 뒤덮인 채로 들어와 형제 간의 유대를 무너뜨린다. 아담은 그녀가 방을 거의
다니 세바요스, 베티스로 복귀
다니 세바요스는 2026년 9월 2일, 레알 마드리드에서 베티스로 이적하며 9년 만에 복귀했다. 베티스는 세바요스 외에도 트로이 파로트, 프란 곤잘레스, 파스쿠알 벌라르, 디에고 콘데 등 총 5명의 신입 선수를 영입했다. 이적은 베티스의 2026-2027 시즌 리그 챔피언스리그 복귀를 위한 전술적 준비의 일환으로 진행됐다. 다니 세바요스는 2026년 9월 2일, 레알 마드리드에서 베티스로 이적하며 9년 만에 클럽로 복귀했다. 이적은 베티스의 2026-2027 시즌을 앞두고 공식 발표됐으며, 세바요스는 2029년까지 계약을 체결했다. 이는 베티스가 펠레그리니 감독의 7번째 시즌을 맞아 리그 챔피언스리그 복귀를 준비하는 가운데, 핵심적인 마무리 이적으로 평가된다. 세바요스의 이적은 이적 시장의 마지막 순간, 즉
USS 에이브러햄 링컨, 태국 파타야 도착
USS 에이브러햄 링컨이 286일간의 항해 끝에 태국 파타야의 렘 차방 항구에 도착했다. 5,000명의 아메리칸 해군 병력이 5일간의 리버티 포트 콜을 통해 지역 경제에 기여할 전망이다. 파타야는 해군 병력의 방문을 계기로 관광 산업과 서비스 산업의 활성화를 기대하고 있다. USS 에이브러햄 링컨이 태국 파타야의 렘 차방 항구에 드디어 정박했다. 이는 286일간의 항해와 250일간의 항해 중 포트 정박 없이 이어진 기록적인 여정을 마친 후의 결과다. 해군은 이번 정박을 '리버티 포트 콜(liberty port call)'로 명명하며, 5,000명의 승무원이 파타야에서 휴식과 재충전의 기회를 갖게 될 것이라고 밝혔다. 파타야는 동부 태국 해안에 위치한 주요 관광 도시로, 렘 차방 항구에서 방콕 시내까지 약 1
프리미어리그, 여름 이적 시장서 349억 파운드 기록 돌파
프리미어리그 클럽들이 여름 이적 시장에서 총 349억 파운드를 지출하며 역사 최대 기록을 달성했다. 맨체스터 시티는 458억 파운드를 지출해 단일 이적 시장에서 최대 지출 기록을 세웠다. 세 명의 세계 최고가 이적료를 기록한 선수들이 모두 프리미어리그 클럽에 합류했다. 프리미어리그 클럽들이 여름 이적 시장에서 총 349억 파운드(약 5조 3,000억 원)를 지출하며 역사상 가장 큰 이적 지출 기록을 세웠다. 이는 지난해 리버풀이 기록한 415억 파운드를 넘어선 수치로, 프리미어리그가 세계 축구 이적 시장에서 가장 큰 영향력을 행사하고 있음을 보여준다. 맨체스터 시티는 에이젠조 페르난데스의 영입을 마지막으로 총 458억 파운드를 써내며 단일 이적 시장에서 최대 지출 기록을 달성했다. 이는 펩 과르디오라 감독의
