Electron으로 사이버 보안 커맨드 센터를 구축했습니다 — AI 에이전트, 칸반 미션, 그리고 쿼드‑스플릿 패인 포함

I’m happy to translate the article for you, but I’ll need the full text of the post (the content you’d like translated). Could you please paste the article’s body here? Once I have the content, I’ll provide a Korean translation while preserving the source link, formatting, markdown, and any code blocks or URLs unchanged.

왜 만들었는가

버그 바운티 사냥꾼으로서 나는 15개가 넘는 브라우저 탭, 터미널 창, 메모 앱, 그리고 리포팅 도구 사이를 끊임없이 전환하고 있었습니다. 각 사냥마다 다음과 같은 작업을 수행했습니다:

나는 하나의 인터페이스로 모든 것을 연결하고 싶었습니다. CrowByte Terminal이 바로 그 인터페이스입니다.

핵심 UI 기능

Quad‑Split 패널

모든 페이지를 2개 또는 4개의 독립적인 패널로 분할할 수 있습니다. 각 패널은 다음을 가집니다:

• 자체 페이지 콘텐츠 (대시보드, CVE, 채팅, 터미널 등)
• 독립적인 스크롤 및 크기 조절 가능한 구분선
• 드래그‑스와프 기능으로 패널 간 전환
• 포커스/줌 모드 (배경 흐림이 적용된 중앙 오버레이)
• 패널 관리를 위한 오른쪽 클릭 컨텍스트 메뉴

쿼드 패널을 닫으면 모든 것이 사라지는 대신 듀얼‑스플릿 모드로 부드럽게 전환됩니다.

예시 레이아웃 (JSX)

// Quad split with independent row ratios per column

미션 (칸반 보드)

미션은 11개의 상태 컬럼을 가진 전체 버그 바운티 라이프사이클을 따릅니다:

Draft → Planning → Recon → Active → Exploitation → Reporting → 
Submitted → Completed → Paid → Paused → Failed

• 드래그‑앤‑드롭으로 카드 이동 (HTML5 기본 DnD, 외부 라이브러리 사용 안 함)
• 낙관적 UI와 오류 발생 시 롤백
• 카드에는 미션 유형, 대상 범위, 단계 수, AI‑평가 배지가 표시됩니다

상세 보기에는 다음이 포함됩니다:

• 클릭 가능한 상태 파이프라인
• 작업/도구와 함께 제공되는 단계별 구분
• 위험 분석
• AI‑기반 계획 수정 (최적화, 위험 감소, 가속, 은폐성 강화)

내장 AI 채팅

AI 채팅은 95개의 도구에 접근할 수 있으며 도메인별로 구성됩니다:

도구 체이닝 예시:
recon → save findings → triage → generate report → export PDF

위협 피드 및 뉴스

• 7개의 위협 피드에 연결 (URLhaus, ThreatFox, Feodo C2, SSH/Login 무차별 로그인 차단 목록, CINS, ET Compromised)
• 6개의 보안 뉴스 소스 추가

피드 패널은 심각도 배지, Supabase Realtime을 통한 실시간 업데이트, 유형 필터링, 소스 링크가 포함된 확장 가능한 상세 정보, 그리고 보관 작업을 제공합니다.

CVE 관리

• NVD + Shodan을 병렬로 조회
• CVSS 점수/벡터, 영향을 받는 제품, CWE 분류, 익스플로잇 상태 추적, 심각도 그룹화, 즐겨찾기와 함께 CVE를 개인 DB에 저장

원격 AI 에이전트

CrowByte는 9개의 AI 에이전트(Commander, Recon, Hunter, Intel, Analyst, Sentinel 등)가 실행되는 원격 VPS에 연결합니다. 에이전트는 SSH 또는 게이트웨이 API를 통해 배포되며, 결과는 대시보드로 다시 전달됩니다.

기술 스택

상태 관리 – Split/Quad 시스템

전체 split/quad 시스템은 단일 React 컨텍스트로 관리되며, 약 30개의 액션을 포함합니다.

type SplitMode = 'none' | 'dual' | 'quad';

interface SplitScreenState {
  mode: SplitMode;
  left: SplitPane | null;
  right: SplitPane | null;
  topLeft: SplitPane | null;
  topRight: SplitPane | null;
  bottomLeft: SplitPane | null;
  bottomRight: SplitPane | null;
  colRatio: number;
  leftRowRatio: number;
  rightRowRatio: number;
  zoomedPane: PanePosition | null;
}

싱글톤 채널 매니저

동일한 피드가 여러 분할 창에 렌더링될 때 중복 구독을 방지합니다:

const activeFeedChannels = new Map<void, any>();
// First subscriber creates channel
// Subsequent ones add callbacks
// Last unsubscriber removes the channel

Application Pages

도와주실 수 있는 방법

저는 혼자서 CrowByte를 개발해 왔으며, 이제는 사이드 프로젝트를 넘어선 큰 프로젝트로 성장했습니다. 저는 기여자와 협업자를 적극적으로 찾고 있으며, 이 프로젝트를 다음 단계로 끌어올리고 싶습니다.

도움이 필요한 분야

• 프론트엔드 (React/TypeScript) – 페이지 추가, UX 개선, 모바일 반응형 디자인
• 보안 도구 – 추가 스캐너 연동, 맞춤형 탐지 규칙
• 백엔드 (Supabase/Edge Functions) – 피드 수집 파이프라인, 스케줄 작업
• DevOps / CI‑CD – 패키징, 자동 업데이트, 테스트 인프라

관심이 있으시면 언제든지 연락 주세요!

CrowByte – Your SOC in a Box

Features

• CI/CD – 자동 빌드, 스테이징 환경, Docker
• Design – UI/UX 개선, 브랜딩, 마케팅 사이트
• Documentation – 사용자 가이드, API 문서, 기여 가이드

Get Involved

개발자, 디자이너, 보안 연구원이든, 혹은 공격 보안 도구를 만드는 것이 멋지다고 생각하는 사람이라면 — 여러분의 이야기를 듣고 싶습니다.

• 아래에 댓글 달기
• GitHub 으로 연락하기
• 직접 연결하기

함께 궁극적인 사이버 보안 커맨드 센터를 구축합시다.

Web version:

Built by @rainkode — 15개의 도구 사이를 전환하느라 지친 버그 바운티 헌터.