Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
본 글은 브라우저를 단순한 표시 장치가 아닌 강력한 컴퓨팅 플랫폼으로 활용하는 방법을 다룹니다. WebAssembly와 WebGPU 기술을 사용하여 웹 환경 내에서 고급 계산을 수행할 수 있음을 강조하며, 이를 통해 성능 향상과 새로운 AI 기능 구현 가능성을 제시합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기AI 모델이 브라우저 내에서 직접 실행되는 것이 드디어 프로덕션 환경에 사용할 만큼 충분히 좋아졌을까요? 한번 알아봅시다!
프라하 FrontKon에서 발표한 지 일주일이 되었습니다. 전에 말씀드렸듯이, 정말 환상적이었습니다! 제가 실제로 컨퍼런스에서 연설한다는 것을 증명하기 위해 몇 장의 사진을 아래에 추가합니다. 😀
 |  |  |
 |  |  |
제 발표 제목은 **"브라우저는 컴퓨팅 플랫폼입니다 (그리고 당신은 그것을 폼에 사용하고 있습니다)"**이었고, WebAssembly와 WebGPU를 사용하여 브라우저 내에서 고급 계산을 수행하는 방법을 보여주었습니다. 청중 전체 중에서 WebGPU에 대해 들어본 사람이 아마 세 명이나 네 명 정도밖에 없다는 것을 알게 되어 조금 걱정했습니다! 그리고 그것은 아쉬운 일인데, WebGPU는 CPU 기반 구현과 비교하여 특정 유형의 병렬 컴퓨팅을 수십 배 가속화할 수 있기 때문입니다.
하지만 괜찮습니다. 적어도 FrontKon 사람들은 이제 WebGPU가 무엇인지 알고 있습니다. 😁 만약 귀하의 컨퍼런스에서 이 주제에 대한 발표를 원하신다면, 주저하지 말고 연락주세요! 특히 귀하의 컨퍼런스가 특별히 매력적인 관광지에 열리는 경우라면 더욱 그렇습니다. 😀
컨퍼런스 후에는 전통적으로 발표와 관련된 블로그 게시물을 준비합니다. 하지만 WebAssembly와 WebGPU에 대해서는 이미 여러 번 글을 썼기 때문에, 오늘은 다른 각도에서 주제를 접근하고 싶습니다. 즉, 이 기술들을 광범위하게 활용하는 브라우저 내에서 직접 실행되는 AI 모델의 현재 상태를 살펴보겠습니다. 🙂
브라우저 기반 AI 모델은 매혹적인 개념입니다. 추론 API 호출이 없습니다. AI 백엔드로 가는 네트워크 왕복(round trip)도 없습니다. 또한, 사용자가 너무 많은 토큰을 소비할까 봐 걱정할 필요가 없습니다. 왜냐하면 당신은 그에 대해 비용을 지불하지 않기 때문입니다! 하지만 물론, 로컬 추론에는 여전히 시간이 걸리며, 애초에 모델을 다운로드하는 것부터 시간이 걸릴 수 있습니다.
또 다른 장점은, 이러한 모델들이 브라우저에 다운로드되어 캐시되면, 애플리케이션 자체가 오프라인 작동을 지원하는 경우 오프라인에서도 작동할 수 있다는 것입니다.
그리고 이것은 상당한 개인 정보 보호상의 이점을 가져옵니다. 추론(inference)이 사용자의 장치에서 직접 일어나기 때문에, 데이터가 외부 AI 서비스로 전송될 필요가 없습니다.
하지만 아마 짐작하셨겠지만, 이러한 모델들은 비교적 작습니다. 일반적인 브라우저 탭에서 거대한 프런티어 규모의 모델을 실행할 수는 없습니다.
그래서 질문은 이것입니다: 이러한 소형 모델들이 실제로 얼마나 유용할까요?
여러분 중 일부는 제가 약 1년 전에 브라우저 기반 AI 모델로 실험했던 것을 기억하실 수도 있습니다. 그때는 저희가 주로 재미있는 호기심거리 정도로 웃고 넘어갔을 뿐, 그 이상은 아니었습니다.
하지만 저는 LinkedIn에서 Transformers.js를 다루는 Hugging Face의 사람들을 계속 지켜봤고, 때때로 그들의 데모가 제 피드에 나타났습니다. 처음 보기에는 몇몇이 정말 인상적으로 보였습니다. 아시겠지만, 마치 브라우저 안에 우주선이 돌아가는 것 같았습니다. 😉
그래서 FrontKon 이전에, 저는 그들이 제공하는 것을 다시 살펴보기로 결정했습니다. 그리고 제가 실험에 사용했던 Transformers.js를 버전 4.3.1로 업그레이드하고 몇 가지 새로운 모델을 시도해 본 결과, 그 결과는 정말 인상적이었습니다!
물론, Transformers.js가 브라우저에서 AI 모델을 실행하는 유일한 옵션은 아닙니다. 다른 라이브러리와 런타임이 있지만, 저는 Transformers.js를 정말 좋아하고, 이것이 오늘날 이 기술이 달성할 수 있는 바를 대표적인 예시라고 생각합니다.
동시에, 저는 Hugging Face에 소속되어 있지 않으며, 아무도 저에게 브라우저 안에 우주선을 팔도록 돈을 지불하지 않습니다. 그래서 제가 오늘날 브라우저 기반 AI 모델들이 실제로 무엇을 할 수 있는지, 무엇이 잘 작동하는지, 그리고 무엇은 여전히 작동하지 않는지를 말씀드리겠습니다.
더 좋은 것은, 여러분 스스로 코드를 탐색하고 모든 것을 시도해 볼 수 있다는 것입니다!
GitHub: [https://github.com/sylwia-lask/practical-browser-ai]
실시간 데모: https://sylwia-lask.github.io/practical-browser-ai**
프로젝트가 마음에 드신다면 GitHub에서 별점을 부탁드립니다. 제가 모으고 있어요! 😀
이 데모들을 위해 저는 실용적인 애플리케이션에 초점을 맞추고 싶었습니다. 더 구체적으로는, 오늘날 바로 실제 프로덕션 애플리케이션에서 브라우저 기반 AI를 어떻게 활용할 수 있는지 알아보고 싶었습니다.
그렇다면 이 기술은 주목할 가치가 있을까요? 제 생각에는 절대적입니다!
하지만!
저는 이러한 모델들이 완벽하게 작동하는 것에 전적으로 의존하는 미션 크리티컬(mission-critical) 시스템은 아마 구축하지 않을 것입니다. 😉 대신, 특히 전자상거래, 접근성, 고객 지원과 같은 영역에서 기존 애플리케이션 기능에 대한 흥미롭고 선택적인 향상 기능으로 취급할 것입니다.
참고로 이 애플리케이션 자체는 특별히 이국적이지 않습니다. TypeScript로 작성된 일반적인 React 애플리케이션이며, 메인 UI 스레드를 막지 않고 모델 추론(model inference)을 실행하기 위해 Web Workers를 사용합니다.
모델은 필요할 때 로드되므로, 애플리케이션을 열기 위해 다섯 개 모두를 다운로드할 필요가 없습니다. 추론은 Transformers.js를 통해 로컬에서 실행되며, 지원되는 경우 WebGPU와 폴백(fallback)이 가능한 경우 WebAssembly 기반 CPU 실행을 사용합니다.
AI 백엔드는 전혀 필요하지 않습니다!
제가 무엇을 만들었는지 봅시다. 그리고 마지막에는 이 모델들의 한계에 대한 제 생각을 공유하겠습니다.
한 가지 더 말씀드리자면: 이것들은 아직 브라우저 기반 AI 에이전트가 아닙니다. 특정 작업을 위해 로컬 AI 모델을 사용하는 단순한 애플리케이션일 뿐입니다. 하지만 몇 주만 더 기다려 주시면, 제 블로그에서도 브라우저에서 실행되는 에이전트를 보게 될 겁니다!
제가 브라우저 기반 AI에 특히 높이 평가하는 점 중 하나는 텍스트 생성에 국한되지 않는다는 것입니다. 저는 멀티모달 AI(multimodal AI)를 다루는 것을 좋아합니다!
이 데모에서는 약 4,400만 개의 파라미터를 가진 RMBG-1.4라는 작은 모델을 사용하여 객체를 배경과 분리하는 매우 인상적인 작업을 수행합니다. 🙂 이 모델 자체는 제가 사용하는 설정에서 다운로드할 때 약 170 MB에 불과합니다.
White shoe on some messy background
보시다시피, 결과를 투명한 PNG로 저장할 수 있으며 놀라울 정도로 잘 작동합니다!
Screenshot of the picture of transparent shoe
저는 이것을 경매 웹사이트나 전자상거래 플랫폼의 추가 기능으로 쉽게 상상할 수 있습니다.
예를 들어, 누군가 상품을 판매하려고 하는데 제가 예시로 든 것과 같은 사진만 가지고 있다고 가정해 보세요. 외부 이미지 편집 서비스를 사용하도록 요구하는 대신, 애플리케이션 내에서 배경 제거 버튼을 간단히 제공할 수 있습니다.
게다가 사진이 기기를 벗어날 필요조차 없습니다. 정말 멋지지 않나요?
한 가지 실용적인 참고 사항: RMBG-1.4는 상업적 배포 전에 확인해야 하는 라이선스 조건이 있습니다. 따라서 기술적 개념은 전자상거래에 매우 유망하지만, 배포하기 전에 항상 모델의 라이선스를 검증해야 합니다.
저는 AI가 적절하게 사용된다면 접근성을 위한 또 다른 유용한 계층이 될 수 있다고 항상 느껴왔습니다.
이 데모는 약 2억 3,000만 개의 파라미터를 가진 비전 모델인 Florence-2-base-ft를 사용하여 이미지 설명을 생성합니다.
[App for alt text generation - it describes a dog. This feature will be very useful for me now!](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F895vmy3uucylb60a8n0g.png
예를 들어 DEV에 이미지를 업로드한다고 가정해 봅시다. 별도의 대체 텍스트(alt text) 설명을 처음부터 작성할 필요 없이, 이와 같은 모델을 사용하면 자동으로 제안을 생성할 수 있습니다. 특히 사진 속 내용을 설명하는 것이 정말 귀찮을 때 유용하죠!
물론, 생성된 설명은 여전히 사람이 검토하고 편집해야 합니다. 좋은 대체 텍스트는 단순히 이미지 속 객체를 식별하는 것 이상의 의미를 가집니다. 해당 이미지가 사용되는 맥락(context)과 목적에 따라서도 달라지기 때문입니다.
이 모델은 사용자가 사진을 왜 사용하는지 반드시 이해하지 못하며, 때로는 세부 사항을 놓치거나 잘못 만들어내기도 합니다. 그럼에도 불구하고 접근성 보조 도구로서 저는 이것이 매우 유망한 접근 방식이라고 생각합니다.
추가적인 맥락(context)을 제공하는 옵션도 있지만, 너무 많은 것을 기대해서는 안 됩니다. 제가 구현한 방식에서는 추가 텍스트가 모델이 보는 것 또는 이해하는 것에 진정으로 영향을 주기보다는 단순히 생성된 설명에 붙여지는(appended) 정도였습니다. 이 접근 방식에 왜 만족하지 못했는지에 대해서는 기사 후반부에 설명드리겠습니다.
참고로, 모델 다운로드 크기는 장치에서 지원하는 정밀도에 따라 대략 350–450 MB입니다.
아, 이건 제가 꿈꾸던 기능이에요! 문제가 무엇인지 완전히 자연스럽고 어수선한 언어로 설명하면, 모델이 그것을 지원팀에 보낼 수 있는 구조화된 티켓으로 변환해 줍니다. 😀
Ticket created based of this messy description
제가 사용하게 된 모델은 약 5억 개의 파라미터를 가진 소형 언어 모델인 Qwen2.5-0.5B-Instruct입니다. 제 설정에서는 양자화된 가중치(quantized weights)를 다운로드하는 데 약 786 MB가 추가로 필요하며, 토크나이저 파일도 포함됩니다.
그리고 제가 솔직히 고백해야 할 것이 있습니다. 이 기능을 구현하기 시작했을 때, 저는 이것이 가장 쉬울 거라고 생각했어요! 정말로요. 언어 모델에게 불만 사항을 구조화된 티켓으로 변환하는 것이 얼마나 어려울 수 있겠어요?
