만약 당신이 90년대 후반이나 2000년대 초반에 컴퓨터를 사용했다면, 가상 데스크톱 펫(virtual desktop pets)이 주던 순수한 즐거움(그리고 혼돈)을 아마 기억할 것입니다. 작업 표시줄 위를 걷는 작은 양이든, 화면 상단에서 떨어지는 Shimeji든, 아니면 당신의 Word 문서를 심판하던 악명 높은 Clippy든—그것들은 우리 화면에 엄청난 개성을 더해주었습니다.

저는 그 느낌이 정말 그리웠고, 그래서 현대적인 웹을 위해 그것을 다시 가져오기로 결심했습니다.

하지만 단순히 반복되는 GIF를 만들고 싶지는 않았습니다. 저는 실제로 "분위기를 읽는" 가상 동반자를 만들고 싶었습니다.

Arcrawls를 소개합니다 — 오픈 소스(open-source) 기반의 문맥 인식(context-aware) 브라우저 마스코트입니다.

Arcrawls Image

https://arcrawls.com

기술 스택 (The Tech Stack)

DOM과 상호작용하는 브라우저 확장 프로그램(browser extension)을 만드는 것만으로도 충분히 까다롭지만, 여기에 AI를 추가하는 것은 정말 재미있는 엔지니어링 도전 과제가 되었습니다. 제가 사용한 것들은 다음과 같습니다:

• Vite, TypeScript, 그리고 Manifest V3

도전 과제: 100% 로컬 오프라인 AI

Arcrawls의 핵심 기능은 당신이 현재 읽고 있는 웹페이지의 텍스트와 감성(sentiment)을 분석한다는 점입니다. 만약 당신이 우울한 뉴스 기사를 읽고 있다면, 펫은 슬프게 행동합니다. 만약 개발자 콘솔(developer console)에 빨간색 에러가 잔뜩 뜨고 있다면, 펫은 안전모를 쓰고 혼란스러워하는 표정을 짓습니다.

이를 수행하는 가장 쉬운 방법은 페이지 텍스트를 OpenAI API 엔드포인트로 보내는 것이었을 것입니다. 하지만 저는 브라우저 확장 프로그램이 사용자의 개인적인 독서 습관을 클라우드로 전송해서는 안 된다고 굳게 믿습니다.

대신, 전체 AI 감성 분석 엔진은 브라우저 내부에서 100% 로컬 및 오프라인으로 직접 실행됩니다. 이는 확장 프로그램의 샌드박스(sandbox) 내에서 실행되는 경량 WebAssembly (WASM) 모델을 사용합니다. 데이터는 기기를 전혀 떠나지 않으며, 반복적인 API 비용도 전혀 발생하지 않습니다.

물리학(Physics)으로 생명력을 불어넣기

펫이 "살아있는" 것처럼 느껴지게 하기 위해, 단순히 화면 이곳저곳으로 순간 이동하지 않도록 구현했습니다. 저는 커스텀 스프링 물리 엔진 (spring physics engine)을 구현했습니다. 사용자가 스크롤하는 위치를 기반으로 목표 위치를 재계산하며, 스프링 감쇠 (spring dampening)를 사용하여 뷰포트 (viewport)의 가장자리와 자연스럽게 기어 다니고, 점프하며, 상호작용합니다.

오픈 소스입니다!

Arcrawls는 열정으로 만든 프로젝트이며, 100% 무료이자 오픈 소스 (open-source)입니다. Manifest V3를 위해 빌드하는 것(특히 서비스 워커 (Service Workers) 내부에서 WASM을 실행하려고 시도하는 것)은 수많은 기묘한 CSP 및 페칭 (fetching) 버그를 극복해야 했던 거대한 학습 곡선이었습니다.

여러분이 꼭 한번 사용해 보셨으면 좋겠습니다! 확장 프로그램 개발 (extension development), 로컬 AI (local AI)에 관심이 있거나, 혹은 단순히 디버깅하는 동안 작은 게 한 마리가 곁을 지켜주길 원하신다면 코드를 확인해 보세요.

웹사이트: https://arcrawls.com
GitHub 리포지토리 (Repo): fujiDevv/context-aware-browser-pet https://github.com/fujiDevv/context-aware-browser-pet

댓글로 여러분의 생각을 알려주세요! 혹시 브라우저 확장 프로그램 내부에서 로컬 ML 모델을 실행하는 실험을 해보신 분이 계신가요? 함께 의견을 나누고 싶습니다!