Project: 온 세상이 주식이야 - Chrome Extension 개발 Intro & MVP

현재 계획 중에 있는 Chrome Extension 개발은 아래와 같이 진행될 예정이다.

1. MVP Chrome Extension 개발
   • Chrome Extension Tutorials
   • Chrome Extension - Page Data 수집
2. Chrome Extension to AI & Spring Backend Server
   
   • 수집된 데이터 AI Server로 전송 및 결과 수신
   • 반환된 결과에 대한 사용자 선택 Spring Backend Server 전송 및 메인 서비스 페이지로의 이동
3. (Challenge) Chrome Extension 실시간 종목 호가 조회
   • 반환된 결과에 따른 실시간 종목을 '더 보기'와 같은 버튼을 통해 조회

인증과 백엔드 서버와의 통신을 기준으로 구현 계획을 구성하였다. 그리고 이번 포스팅에서는 Chrome Extension을 선택한 이유와 노란색 배경으로 칠해져 잇는 부분에 대하여 정리하였다.

 

Chrome Extension 구현 동기

첫 번째 이유는 기존의 LLM Application 개발에 있어 어려웠던 점이 있었다. 바로 정보의 한계다. 기존의 방식은 미리 준비한 정보를 활용하거나 구현된 OpenAPI를 통해서인데 많은 경우에 있어서 정보 접근과 활용에 한계가 존재했었다. 반면에 Chrome Extension은 사용자의 화면에 대한 정보에 한해서 많은 정보들을 확보할 수 있고 해당 정보를 상호작용과 같은 형식으로 사용할 수도 있다. 

 

두 번째 이유는 개인적으로 Chrome Extension의 구조를 잘 활용한다면 다양한 서비스를 시도해 볼 수 있다는 점과 기존의 기획한 서비스 기준으로도 확장성이 높다고 생각된다. 특히, LLM 기반 Agent를 활용하기에 적합하다는 점에서 Chrome Extension을 선택하게 됐다. 

 

그래서 먼저 Chrome Extension의 작동 방식을 파악하고 Javascript를 처음으로 사용해 보기 때문에 익숙해지기 위해 기본적으로 재공 되는 Tutorial과 기본 튜토리얼의 Typescript 버젼을 구현해 봤다.

 

문제상황 1: 굳이 Typescript를 사용해야 할까?

물론 이와 같은 의문을 갖는다면 많은 프런트엔드 개발자에게 많은 비난을 받을 수 있다는 사실을 이미 인지하고 있다. 하지만 아쉽게도 Typescript로 구현하기에는 Chrome Extension 기능의 크기가 그렇게 크지 않고 되려 익숙지 않은 구조로 인해 당장의 구현에 도움보다는 방해가 됐다. 또한 Google에서 이미 구현한 다양한 샘플을 잘 활용한다면 충분히 구현할 수 있다고 판단돼서 Javascript만 사용했다. 

 

Tutorial을 바로 마무리한 이후로 현재 화면에 대한 데이터를 수집하는 Chrome Extension을 만들었다. 간단하게 아래의 링크의 샘플을 기반으로 만들었고 수집된 데이터를 notification이라는 객체를 주입하는 형태로 구현하였다.

Run scripts on every page

모든 페이지에서 스크립트 실행  |  Chrome Extensions  |  Chrome for Developers

 

그래서 아래와 같은 결과를 만들어 낼 수 있었다.

왼쪽: 데이터 수집 완료 팝업, 중앙: 팝업 펼치기, 오른쪽: Extension click

 

문제상황 2: 너무 많은 정보

처음으로 구성했을 때 먼저 페이지에 대한 title, url, html(body) 정보들을 수집했으나 html의 경우 script까지 다 가져오는 상황이 발생했다. 물론 지우면 해결되나 근본적으로 html tag들 또한 불필요한 정보였다. 불필요한 정보를 없애기 위해 한 웹사이트를 기준으로 Parsing 양식을 만들기에는 웹사이트별 양식이 너무 다양했기 때문에 하나의 웹사이트를 기준으로 Parsing 로직을 구현하는 것도 한계가 존재했다. 

 

그래서 LLM에게 현재 사용자가 사용하고 있는 페이지에 대한 정보를 전달하기 위해서는 무엇보다 해당 페이지의 Text를 전달해야 한다고 판단됐고 Chrome Extension에서 Text 정보만 가져와 넘겨주기로 했다. 이와 같은 결정은 아래의 링크를 참고했다.

 

Mastering LLM Techniques: Data Preprocessing

Mastering LLM Techniques: Data Preprocessing | NVIDIA Technical Blog

 

Text 추출 방식에 대해 HTML 페이지가 어떻게 렌더링 되는지 찾던 도중 아래의 포스트를 찾게 됐다.

 

토스페이먼츠: 문서객체모델

문서 객체 모델(DOM) | 토스페이먼츠 개발자센터

 

간단하게 DOM은 HTML 문서 구조를 객체로 표현한 것으로 트리와 같은 계층구조로 돼있다는 사실을 알게 됐다.(추가적으로 HTML웹 페이지가 HTML파서로 DOM을 만들고 script가 나오게 될 경우 처음부터 다시 만들기 때문에 script를 하단에 넣고 토스페이먼츠는 그렇기 때문에 DOM 생성 이후에 UI를 렌더링 한다는 사실도 알게 됐다.)

 

그래서 계층구조를 활용하면 웹페이지의 텍스트만 가져올 수 있다는 사실을 알게 됐다. 그래서 기존의 코드를 변형하여 필요한 Text 정보만 추출하는 데 성공했다.(물론 프런트 개발자 입장에서는 단순히 해결할 수 있겠지만 백엔드와 AI만 해왔던 개발자 입장에서는 정말 유익한 정보였다.)

 

Before	After
const pageData = {             title: document.title,             url: window.location.href,             html: document.body.outerHTML         };	const pageData = {             title: document.title,             url: window.location.href,             html: document.body.innerText         };

 

textContent의 경우 script 안의 텍스트까지 넘어와 Youtube의 경우 양이 너무 많아 innerText만 사용했다. 

 

이렇게 MVP단계의 Chrome Extension 구현을 마무리하였고 AI 기능과 FastAPI 전환 후 두번째 단계로 이어질 예정이다.

 

구현된 코드는 아래의 저장소에서 확인 할 수 있다.

SAE-Chrome-DEV

GitHub - jwywoo/SAE-Chrome-Dev