브라우저 확장 프로그램에서 로컬 AI 실행 가능해진다... Transformers.js 활용 기술 공개
Gemma 4 E2B 기반의 Chrome 확장 프로그램 아키텍처 및 Manifest V3 구현 방식 분석
- •Transformers.js와 Gemma 4 E2B를 활용한 로컬 AI 브라우저 확장 프로그램 기술이 공개되었다.
- •Manifest V3 환경에 최적화된 서비스 워커, 사이드 패널, 콘텐츠 스크립트 중심의 아키텍처를 제시한다.
- •개발자들은 공개된 소스 코드를 통해 브라우저 내에서 모델 로딩 및 데이터 추출 기능을 구현할 수 있다.
웹 브라우저 환경 내에서 로컬 인공지라능(AI) 기능을 구현하려는 개발자들을 위한 기술적 가이드가 공개되었다. Transformers.js를 활용하여 Chrome 확장 프로그램(Chrome Extension) 내에서 모델을 구동하는 아키텍처와 Manifest V3(MV3) 환경에서의 구현 방법이 구체적으로 제시되었다.
로컬 AI 실행을 위한 새로운 접근법
이 프로젝트는 개발자들이 Manifest V3의 제약 조건 하에서도 Transformers.js를 사용하여 Chrome 확장 프로그램 내에 로컬 AI 기능을 구축할 수 있도록 돕는 것을 목적으로 한다.
이 기술의 핵심은 클라우드 서버에 의존하지 않고 사용자의 브라우저 자원을 활용하여 AI 모델을 구동하는 데 있다. 이를 통해 데이터 프라이버시를 강화하고 네트워크 지연 시간을 줄이는 효과를 기대할 수 있다.
Manifest V3 기반의 확장 프로그램 아키텍처
성공적인 로컬 AI 구현을 위해서는 Chrome의 Manifest V3 런타임 환경에 최적화된 아키텍처 설계가 필수적이다. 공개된 프로젝트는 다음과 같은 세 가지 핵심 구성 요소를 기반으로 동작한다.
- 백그라운드 서비스 워커(Background Service Worker):
background.js로 정의되며, 모델을 호스팅하고 실행하는 엔진 역할을 수행한다. 이는src/background/background.ts를 통해 빌드된다. - 사이드 패널 채팅 UI(Side Panel Chat UI): 사용자와의 상호작용을 담당하는 인터페이스로, 대화형 경험을 제공한다.
- 콘텐츠 스크립트(Content Script): 페이지 수준의 동작을 수행하며, 웹 페이지 내의 정보를 추출(Extraction)하거나 하이라이팅(Highlighting)하는 기능을 담당한다.
content.js는http(s)://*/*모든 URL에서document_idle시점에 실행되도록 설정되어 있다.
이 구조는 모델 로딩, 메시징, 그리고 Manifest V3 런타임에서 발생할 수 있는 실질적인 제약 사항들을 관리하기 위해 설계되었다.
기술 구현의 핵심 요소 비교
개발자가 주목해야 할 주요 구성 요소의 역할은 다음과 같다.
| 구성 요소 | 역할 및 기능 | 구현 파일 (Source) |
|---|---|---|
| Background Service Worker | 모델 호스팅 및 엔진 구동 | src/background/background.ts |
| Content Script | 페이지 데이터 추출 및 하이라이팅 | src/content/content.ts |
| Side Panel UI | 사용자 채팅 인터페이스 제공 | UI Layer |
이 아키텍처는 모델이 백그라운드에서 실행되는 동시에, 콘텐츠 스크립트가 웹 페이지의 데이터를 수집하여 사용자에게 유의미한 AI 서비스를 제공할 수 있도록 유기적으로 연결되어 있다.
향후 구현 과제
해당 프로젝트의 소스 코드는 GitHub(github.com/nico-martin/gemma4-browser-extension)를 통해 공개되어 있으며, 개발자들은 이를 참조하여 자신만의 AI 기반 브라우저 도구를 구축할 수 있다. 향후 연구 및 구현에서는 React UI 레이어의 최적화와 Vite 빌드 구성의 효율화가 주요 과제로 남는다.
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억 파운드를 써내며 단일 이적 시장에서 최대 지출 기록을 달성했다. 이는 펩 과르디오라 감독의
