---
url: https://docs.ogmabox.com/ko/development/architecture.md
description: >-
  Ogma의 Rust 백엔드, Vue 프런트엔드, Electron 셸, 로컬 저장소, 플러그인 런타임, MCP 서버 및 데스크톱 패키징
  아키텍처를 알아봅니다.
---

# 아키텍처 {#architecture}

Ogma는 Rust 백엔드, Vue 프런트엔드, Electron 셸, 로컬 프로젝트 저장소, 플러그인 런타임 및 선택적 MCP 통합으로 구성된 로컬 데스크톱 애플리케이션입니다.

## 주요 구성 요소 {#high-level-components}

| 구성 요소 | 위치 | 역할 |
| --- | --- | --- |
| Rust 프록시/API 백엔드 | `crates/proxy` | MITM 프록시, REST API, 저장소, 스캐너, 재전송, 자동화, 플러그인, MCP, OAST, 브라우저 제어 엔드포인트. |
| Vue 프런트엔드 | `frontend/src` | 작업 공간 UI, 스토어, 라우트, 편집기, 스캐너, 플러그인 iframe, AI 작업 공간, 유틸리티. |
| Electron 데스크톱 셸 | `desktop` | 패키징된 데스크톱 앱, 브라우저 창 통합, 설정 브리지, 앱 수명 주기. |
| 문서 | `docs` | VitePress 문서 사이트. |
| 데이터 디렉터리 | `ogma-data` 또는 플랫폼 앱 데이터 | SQLite 데이터베이스, CA 관련 자료, 플러그인, 내보낸 데이터, 백업, 파일. |

## 백엔드 {#backend}

백엔드는 REST API와 프록시 리스너를 제공합니다. 주요 백엔드 모듈은 다음과 같습니다.

* `proxy_server.rs`: HTTP 가로채기 및 전달.
* `intercept.rs` 및 `intercept_rules.rs`: 가로채기 대기열 및 매칭.
* `store.rs` 및 `store_actor.rs`: 프로젝트 데이터베이스 접근 및 비동기 스토어 핸들.
* `api.rs`: API 라우팅 및 핸들러.
* `replay.rs`, `automate.rs`, `workflows.rs`: 반복 가능한 요청 실행.
* `passive_scanner.rs` 및 `active_scanner.rs`: 스캐너 엔진.
* `plugins.rs` 및 `plugin_runtime.rs`: 플러그인 메타데이터, 샌드박스 런타임, 권한 및 이벤트.
* `mcp.rs`: MCP 리소스 및 도구.
* `ca.rs`, `tls_cert.rs`, `client_cert.rs`: 인증서 및 TLS 지원.
* `ws_history.rs`, `ws_replay.rs`, `sse.rs`: 스트리밍 트래픽 지원.
* `oast.rs`: 대역 외 콜백 서비스.

## 프런트엔드 {#frontend}

프런트엔드는 대부분의 워크스페이스 뷰에 라우트 수준의 지연 로딩을 사용하는 Vue 애플리케이션입니다.

주요 영역:

* `router/index.ts`: 워크스페이스 및 설정 라우트.
* `components/NavSidebar.vue`: 제품의 기본 탐색 메뉴.
* `stores/*`: 기록, 재전송, 자동화, 발견 사항, 워크플로, 플러그인, 점검 범위, 셸, AI 및 기타 상태를 위한 Pinia 스토어.
* `api/client.ts` 및 `api/types.ts`: 타입이 지정된 API 클라이언트 인터페이스.
* `views/*`: 워크스페이스 기능 페이지.
* `components/WorkspacePanel.vue`: AI 및 리버스 셸 작업 공간 패널.
* `views/PluginsView.vue` 및 `views/PluginPageView.vue`: 플러그인 설치, 관리 및 프런트엔드 iframe 호스팅.

## 데스크톱 셸 {#desktop-shell}

Electron 셸은 패키징된 데스크톱 환경과 네이티브 브리지 기능을 제공합니다.

* 앱 창 실행 및 제어.
* 데스크톱 설정을 프런트엔드 로컬 저장소에 영구 저장.
* Ogma 브라우저 창 및 내장 브라우저 뷰 열기.
* 데스크톱 배포를 위한 에셋 및 바이너리 패키징.

## 저장소 모델 {#storage-model}

Ogma는 점검 데이터를 로컬에 보관합니다. 백엔드 마이그레이션은 다음 데이터를 위한 프로젝트별 테이블을 정의합니다.

* HTTP 기록 및 본문.
* WebSocket 및 SSE 트래픽.
* 재전송 세션 및 시도.
* 자동화 세션, 실행 기록 및 결과.
* 발견 사항 및 증거 링크.
* 워크플로 및 워크플로 실행 기록.
* 점검 범위 프리셋.
* 플러그인 및 플러그인 권한.
* 파일, 내보낸 데이터, 백업 및 설정.

## 플러그인 런타임 {#plugin-runtime}

플러그인은 백엔드 구성 요소, 프런트엔드 구성 요소 또는 둘 다 포함할 수 있습니다.

백엔드 플러그인은 JavaScript 샌드박스에서 실행되며 `sdk` 객체를 받습니다. 프런트엔드 플러그인은 샌드박스 iframe에서 실행되고 Ogma가 제어하는 브리지를 통해 통신합니다.

주요 경계:

* 프런트엔드 플러그인은 부모 DOM에 접근할 수 없습니다.
* 브리지 명령은 서버 측에서 검증됩니다.
* 보호된 백엔드 작업에는 선언되고 부여된 권한이 필요합니다.
* 안정적인 런타임 동작을 위해 설치된 패키지는 Ogma가 관리하는 플러그인 디렉터리로 복사됩니다.

[플러그인 시스템](../plugins/README.md)을 확인하세요.

## MCP 통합 {#mcp-integration}

MCP 서버는 Ogma 프로젝트 컨텍스트를 외부 어시스턴트에 제공합니다. 기본적으로 읽기 전용으로 시작합니다. 쓰기, 내보내기, 요청 전송, 워크플로 실행 및 가로채기 제어 기능에는 명시적인 권한이 필요합니다.

[MCP 설정](../mcp-setup.md)을 확인하세요.

## 설계 원칙 {#design-principles}

* 기본적으로 로컬 우선.
* 증거와 연결된 발견 사항.
* 자동화 전에 점검 범위 설정.
* AI, 플러그인, 요청 전송 및 내보내기에 대한 명시적인 권한 확인.
* 반복적인 점검 작업을 위한 빠른 탐색.
* 기존 프록시 작업 방식과의 호환성을 유지하면서 Ogma의 확장성 확보.