Electron 사용기

요즘 여기저기서 AI agent라는 말을 정말 많이 듣게 되었는데, 궁금증이 생겨 ai agent가 무엇인지 알아보게 되었다.

Ai agent란 단순히 사람이 질문하면 답해주는 수준의 AI가 아니라 생각, 판단, 행동을 하는 AI로, 사용자의 입력을 이해하고, 스스로 판단하여 필요한 도구를 실행하는 것을 말한다.

그러고 보니 AI agent랑 자주 엮어 들리는게 Calendar와 같이 일정 관리를 해주는 AI 였는데 사용자가 추가하고자 하는 일정을 해석해 캘린더에 추가하고, 알림을 띄워주는 것 이 일련의 흐름이 AI agent가 가진 생각-판단-행동 을 보여주는 좋은 예시구나 라는걸 깨닫게 되었다.

이왕 궁금한거 한 번 만들어보자 하는 생각이 들었는데, 기존에 자주 사용하던 Next.js와 같은 프레임 워크를 사용해 ‘웹’ 말고 데스크톱 앱으로 만들어보면 어떨까 싶었다.

마침 이전에 Electron으로 데스크톱 앱을 만들어 본 프론트 개발자가 Javascript 기반이라 적응하기 어렵지 않았다고 하는 이야기를 들었었다.

그리고 데스크톱 앱으로 만들면 브라우저를 따로 켜지 않아도 되고, 일정 시간이 되면 우측 하단에 바로 알림을 띄울 수 있다는 점도 고려 사항 중 하나였다.

일렉트론의 기본 구조

my-electron-app/
├─ main.js        # 메인 프로세스 (Node.js)
├─ preload.js     # 브릿지
├─ index.html     # 렌더러 UI
├─ renderer.js    # 프론트 로직
├─ package.json

오랜만에 프레임워크가 아닌 순수 자바스크립트와 HTML이라 반갑기도 하고 낯선 이 기분…

main.js

앱의 메인 프로세스를 담당한다.

const { app, BrowserWindow } = require("electron")
const path = require("path")

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  })

  win.loadFile("index.html")
}

app.whenReady().then(createWindow)

벌써 낯선 내용이 나오기 시작하는데, 하나씩 살펴보자!

• https://www.electronjs.org/