로컬에서 직접 실행하는 자동화 플랫폼, Loopi(Local-First Typed Automation Platform) 소개

이 글에서는 Loopi라는 오픈소스 자동화 플랫폼이 무엇인지, 왜 기존 자동화 도구들과 다른지, 그리고 어떤 특징과 장점을 가지고 있는지를 정리합니다.
Loopi는 로컬-퍼스트(Local-First) 철학을 기반으로, 실제 브라우저 자동화와 API 자동화를 하나의 시각적 워크플로우로 결합한 도구입니다. 개발자와 기술 블로그 독자 관점에서 Loopi의 개념, 구조, 주요 기능을 차근차근 살펴보겠습니다.

반응형

---

Loopi란 무엇인가?

Loopi는

오픈소스, 로컬-퍼스트, 타입 기반(Typed) 자동화 플랫폼
입니다.

Electron 기반 데스크톱 애플리케이션으로 동작하며, Windows, macOS, Linux 환경에서 동일하게 사용할 수 있습니다. 단순한 API 자동화 도구가 아니라, 실제 Chromium 브라우저를 직접 제어하면서도 시각적 노코드 빌더를 제공하는 것이 핵심입니다.

Loopi의 기본 개념은 다음과 같습니다.

• 로컬 PC에서 자동화 실행 (클라우드 종속 없음)
• 실제 브라우저 창을 열고 UI를 직접 제어
• API 호출과 브라우저 자동화를 하나의 워크플로우로 연결
• TypeScript 기반의 자동 타입 변수 시스템

---

Loopi의 핵심 철학: Local-First

Loopi는 모든 워크플로우가 사용자의 로컬 환경에서 실행됩니다.

Local-First의 의미

• 데이터가 외부 클라우드로 전송되지 않음
• 네트워크가 없어도 자동화 실행 가능
• 벤더 종속(Vendor Lock-in) 없음

이는 Zapier, Make 같은 클라우드 자동화 도구와 가장 큰 차이점입니다. 개인 정보 보호, 내부 시스템 자동화, 폐쇄망 환경에서도 Loopi는 그대로 사용할 수 있습니다.

---

Loopi의 주요 특징 한눈에 보기

1. 시각적 워크플로우 빌더 (Visual Builder)

• ReactFlow 기반 드래그 앤 드롭 방식
• 노드 간 데이터 흐름이 명확하게 보임
• 변수 타입이 자동으로 관리되어 실수 감소

개발자가 아니더라도 자동화 흐름을 직관적으로 이해할 수 있도록 설계되었습니다.

---

2. 실제 브라우저 자동화 (Real Browser Control)

Loopi는 Electron BrowserWindow + webContents를 사용해 실제 Chromium 브라우저를 제어합니다.

• 로그인, 클릭, 입력, 페이지 이동 등 UI 기반 작업 가능
• SPA, 동적 웹사이트에서도 비교적 안정적인 동작
• 단순 스크립트 실행이 아닌 실제 브라우저 환경

이는 API만으로 해결하기 어려운 업무 자동화에 큰 강점입니다.

---

3. API + 브라우저 하이브리드 자동화

Loopi는 다음 두 영역을 하나의 흐름으로 묶습니다.

• API 데이터 수집 및 가공
• 브라우저 UI를 통한 조작 및 검증

예를 들어,

1. API로 데이터 가져오기
2. 조건 판단
3. 브라우저에서 해당 데이터 입력 및 클릭
   과 같은 복합 자동화가 가능합니다.

---

4. 자동 타입 변수 시스템 (Typed Variables)

Loopi의 변수는 자동으로 타입이 지정됩니다.

지원 형태:

• {{username}} : 단순 변수
• {{user.name}} : 객체 접근
• {{users[0]}} : 배열 접근
• {{users[0].email}} : 혼합 접근

숫자, 불리언, 객체, 배열 타입을 자동으로 인식해 안전한 파이프라인을 구성할 수 있습니다.

---

5. 조건 분기 및 그래프 실행 구조

Loopi의 자동화는 그래프 기반 실행입니다.

• 루트 노드에서 시작
• 조건 노드를 통해 분기
• 명확한 흐름 제어 및 반복 관리

단순 순차 실행이 아닌, 실제 업무 로직에 가까운 자동화 구성이 가능합니다.

---

기존 자동화 도구들과의 차이점

n8n

• API 중심
• 실제 브라우저 UI 자동화에는 한계

Zapier / Make

• 클라우드 전용
• 로컬 실행 불가, 프라이버시 제약

Playwright / Puppeteer

• 코드 중심
• 시각적 빌더와 타입 흐름 관리 없음

Selenium IDE

• 셀렉터가 쉽게 깨짐
• 복잡한 사이트에서 신뢰도 낮음

RPA 솔루션

• 폐쇄적
• 비용 부담과 벤더 락인

Loopi의 차별점은

로컬 데스크톱 앱 + 시각적 워크플로우 + 실제 브라우저 제어 + API 노드 + 타입 변수
이 모든 조합을 동시에 제공한다는 점입니다.

---

 

Loopi의 기술 스택

• Electron: 크로스 플랫폼 데스크톱 앱
• React: UI 구성
• TypeScript: 타입 안정성
• ReactFlow: 노드 기반 워크플로우 에디터
• Tailwind CSS + shadcn/ui: 현대적인 UI
• Electron Forge: 빌드 및 패키징

---

내부 구조와 아키텍처 개요

Main Process

• WindowManager: 창 관리
• AutomationExecutor: 자동화 실행 엔진
• SelectorPicker: 실시간 요소 선택
• DesktopScheduler: 스케줄 실행
• IPC Handlers: 보안 IPC 통신

Renderer Process

• Dashboard: 자동화 관리
• AutomationBuilder: 시각적 에디터
• Custom Hooks: 실행 및 노드 관리 로직

타입 시스템

Discriminated Union 기반으로 각 자동화 스텝을 명확하게 구분합니다.

type AutomationStep =
  | StepNavigate
  | StepClick
  | StepType
  | StepExtract
  | StepSetVariable
  | StepModifyVariable;

이 구조 덕분에 실행 시점에서 타입 안정성이 유지됩니다.

---

Loopi는 단순한 자동화 도구가 아닙니다.
로컬 실행, 실제 브라우저 제어, 시각적 워크플로우, 타입 안정성이라는 요소를 하나로 묶은 새로운 형태의 자동화 플랫폼입니다.

기대되는 점

• UI 기반 업무 자동화의 신뢰도 향상
• 개인정보 보호와 오프라인 환경 대응
• 개발자와 비개발자 모두가 이해 가능한 자동화 설계
• 오픈소스 기반 확장 가능성

자동화가 필요하지만 기존 도구가 답답하게 느껴졌다면, Loopi는 충분히 주목해볼 만한 선택지입니다.

300x250

https://github.com/Dyan-Dev/loopi

GitHub - Dyan-Dev/loopi: A visual tool to build, schedule, and execute automations—securely managing credentials