간단하게 프로토타입을 만들어볼 수 있는 화면을 구현했다. 일단 기능이 돌아가는 게 중요하니 화면 디자인은 나중에 손보기로 했다.
기능 구현은 Gemini API를 통해 모델을 호출하고, 모델이 읽을 데이터셋을 구성하는 두 가지 과정이 필요하다. 우선 gemini.js와 .env 파일을 세팅해 Gemini API를 불러오는 환경을 구성했다.
다음은 모델이 읽어야 할 KRDS 데이터를 세팅하는 일인데, 브라우저 환경에서 어플리케이션을 구성하면 보안 정책 때문에 프로젝트 폴더 외부에 있는 데이터셋을 읽는 일이 안됐다. CLI에서 겪었듯, 준비한 KRDS 데이터를 먼저 보지 않고 웹 검색부터 해버리는 일이 발생하는 것이다.
Gemini에게 이를 어떻게 해결할지 물으니 세 가지 선택지를 주었다.
- 심볼릭 링크(Symbolic Link) 사용
컴퓨터에게 "이 폴더는 사실 프로젝트 안에 있는 거야"라고 속이는 가짜 연결 통로를 만드는 방법입니다. 파일을 복사하지 않아도 프로젝트 폴더 안에 있는 것처럼 작동합니다.
- 방법 (Windows 기준): 터미널을 관리자 권한으로 열고 아래 명령어를 입력하세요.
- 장점: 파일을 옮길 필요가 없고, 외부 폴더에서 파일이 수정되면 React 앱에도 즉시 반영됩니다.
- 주의: Antigravity 같은 클라우드 환경에 배포할 때는 작동하지 않으므로, 로컬 개발용으로만 사용하세요.
# mklink /D "프로젝트내_가짜폴더_경로" "실제_외부데이터_경로"
mklink /D "C:\krds-agent-app\src\data\external-krds" "C:\Users\Documents\KRDS_Data"
- 로컬 서버(Local Server) 구축
데이터가 있는 폴더를 '작은 웹사이트'처럼 열어주는 방식입니다.
- 방법: Node.js의
serve패키지를 사용해 외부 폴더를 특정 주소(http://localhost:5000)로 배포합니다. - 장점: React 앱에서
fetch('http://localhost:5000/guide.html')같은 방식으로 파일 내용을 가져올 수 있습니다.
npx serve "C:\Users\Documents\KRDS_Data" --port 5000
- 파일 선택기(File Input) 활용
앱을 켰을 때, "오늘 공부할 자료를 선택해 주세요"라고 에이전트에게 직접 건네주는 방식입니다.
- 방법:
<input type="file" webkitdirectory />태그를 사용하여 사용자가 직접 폴더를 선택하게 합니다. - 장점: 보안 규정을 어기지 않으며, 어떤 폴더든 그때그때 바꿔가며 '그라운딩' 할 수 있습니다.
이 3가지 선택지 중에서도 고를 수 있겠으나, 이번 에이전트 프로젝트의 경우 내부망에서도 사용할 수 있는 프로그램을 만드는 것이 목표이기 때문에 다른 방법은 없느냐고 추가적으로 물었다. 그러니 일렉트론을 사용해보라는 답변을 얻을 수 있었다.
일렉트론은 브라우저(Chromium)를 프로그램 안에 내장하여 웹 기술로 데스크톱 애플리케이션을 만들 수 있게 해주는 프레임워크다. 웹 개발자가 평소처럼 HTML/CSS/JavaScript로 개발하면, 사용자는 바탕화면 아이콘을 더블클릭해 실행하는 독립적인 프로그램을 사용할 수 있다.
일렉트론은 두 가지 프로세스로 구성된다. 렌더러 프로세스는 사용자에게 보이는 화면(UI)을 담당하며 브라우저 보안 제약을 받는다. 메인 프로세스는 프로그램의 핵심부로서 파일 시스템 접근, 네이티브 API 호출 등 운영체제의 모든 기능을 사용할 수 있다.
브라우저(React만 쓸 때)는 보안상 프로젝트 파일 외부에 있는 사용자 폴더를 열 수 없지만, 일렉트론의 메인 프로세스는 직접 폴더를 열어 내용을 읽을 수 있어 프로젝트 안에 데이터를 일일이 옮기지 않아도 되는 이점이 있다는 답변이었다.
그래서 일렉트론을 깔아보았다.
일렉트론을 깔면 로컬 앱처럼 구동시킬 수 있다. Vite만 깔면 브라우저(크롬 등)로만 실행이 되는데, 일렉트론을 쓰니 자체 브라우저 창이 생겨 화면을 띄울 수 있었다.
프로젝트 외부에 있는 폴더를 불러와 데이터 학습을 시키는 단계까지는 완료가 되었다.
아직 빠진 기능이 좀 있다. 컴포넌트 미리보기라던지, UI적으로도 정돈이 안되어있다. 다음 작업에는 그런 개선 작업을 진행할 예정이다.