Security Engineer & Frontend Developer

Cheongha Kim

실시간 보안 이벤트 시각화부터 Rust WASM 성능 최적화까지,
보안관제 도메인에 특화된 프론트엔드를 만듭니다.

프로젝트 보기 연락하기

About

2020년부터 싸이버원(CyberOne)에서 보안관제 도메인 프론트엔드를 전담해온 엔지니어입니다. Vue.js, Three.js, Rust WebAssembly 기반으로 실시간 모니터링 대시보드, SOAR 자동화 플레이북, 침투 테스트 플랫폼 등 보안 핵심 서비스의 프론트엔드를 설계하고 구현해 왔습니다.

국방 관련 보안 프로젝트에서 프론트엔드 리드를 맡아 아키텍처 설계와 팀 코드 컨벤션 수립을 주도했으며, 정시 납품 및 품질 달성으로 표창을 수여받았습니다.

5+ Years Exp.
17+ Projects
Award Defense Commendation

Projects

[ MISSION LOGS ]

의류부자재 플랫폼(B2C/B2B)

AI 이미지 검색 기반 의류부자재 B2C/B2B 거래 플랫폼입니다.

Problem 부자재의 카테고리가 복잡하고 제조사 마다 다르게 분류
Solution 이미지의 특징을 기반으로 부자재를 분류
bujamarket
Vue.js WebSocket REST API AI Image Search
My Frontend Role
  • 프로젝트 기획 및 설계
  • 상품 템플릿 엔진 개발 및 적용
  • AI 이미지 검색 UI/UX 디자인
  • SEO 최적화
  • 리뉴얼 및 유지보수

AI 데이터 수집 스크래퍼PRIVATE

AI 학습 데이터 확보를 위해 다수의 이커머스 사이트에서 이미지를 자동 수집·정제하고, 라벨링 인터페이스까지 통합 구현한 스크래핑 파이프라인입니다.

Problem SPA를 사용하는 페이지는 데이터를 수집하기 어려움
Solution 실제로 페이지가 렌더링 된 이후에 데이터를 수집할 수 있도록 구현
SECURE PROTOCOL // ENCRYPTED DATA SEC-ID: #PRV-842
SCANNING
Vue.js Node.js Puppeteer
My Role (Frontend / Backend)
  • SPA 렌더링 분석 및 스크래핑 대상 UI 설계
  • 이미지 편집 및 라벨링 인터페이스 개발
  • Node.js 기반 백엔드 수집 파이프라인 구현
  • Puppeteer 크롤러 및 데이터 저장 로직 구축

ServiceDeskPRIVATE

보안 이벤트 관리·알림·대응을 통합한 실시간 보안관제 서비스입니다.

Problem 보안 이벤트의 분산된 관리와 느린 대응 시간
Solution 통합 대시보드와 자동화된 알림 시스템으로 실시간 관제 구현
SECURITY LAYER // AUTHENTICATED SEC-ID: #SD-402
SCANNING
Vue.js Rust WebAssembly Web Worker Service Worker WebSocket SSE/REST API
My Frontend Role
  • 보안 이벤트 인증 및 권한 분기 UX 흐름 설계
  • 대용량 이벤트 가상 스크롤·청크 렌더링 최적화
  • Rust WASM으로 이벤트 필터링 로직 offload — 메인 스레드 블로킹 제거
  • Web Worker로 로그 파싱·검색 엔진·텍스트 에디터 diff·트리 탐색 등 블로킹 연산 메인 스레드 분리
  • Service Worker로 정적 리소스 캐싱 — 반복 네트워크 요청 제거 및 재방문 로딩 성능 개선
  • JavaScript → TypeScript 마이그레이션 주도 — API 단위 타입 설계, `Pick`·교차 타입(`&`) 기반 타입 아키텍처 수립
  • Lighthouse 점수 90점 이상 달성

국방부 기밀 프로젝트PRIVATE

약 20인 규모 TF팀의 국방 관련 보안 시스템 프로젝트에서 프론트엔드 리드로 참여했습니다. 세부 내용은 기밀 사항입니다.

Problem 기밀 사항
Solution 기밀 사항
HIGH LEVEL // CLASSIFIED SEC-ID: #MIL-007
SCANNING
Vue.js TypeScript Pixi.js 상세 기밀
My Frontend Role
  • 약 20인 규모 TF팀의 프론트엔드 리드 — 아키텍처 설계 및 기술 스택 결정
  • ESLint / Prettier 기반 팀 코드 컨벤션 수립 및 적용
  • 신규 팀원 온보딩 가이드 작성 및 멘토링
  • 정시 납품 및 품질 달성으로 표창 수여
  • Pixi.js 신규 도입 — 기밀 보안 데이터 시각화 모듈 학습 적용

PROM LIGHT2 PRIVATE

보안 장비 로그를 수집하고 탐지 룰을 관리하는 서비스입니다.

Problem 시간당 9억 건(초당 약 25만 건) 규모의 로그 수신 시 테이블 렌더링 지연으로 UI 멈춤 현상 발생
Solution 가상 스크롤(virtual scroll) 적용 및 렌더링 청크 분리로 FPS 안정화
PROM LIGHT2
Vue.js TypeScript Pixi.js Log Engine REST API WebSocket
My Frontend Role
  • Pixi.js 기반 실시간 보안 로그 시각화 및 탐지 룰 관리 UI 구현
  • 가상 스크롤·청크 렌더링 도입 — 시간당 9억 건 수신 환경에서 UI 멈춤 제거
  • JavaScript → TypeScript 마이그레이션 주도

Argus PRIVATE

서버/서비스 실시간 모니터링을 위한 NMS 서비스 입니다.

Problem 서버 장애 감지 지연과 분산된 모니터링 체계
Solution 실시간 NMS 모니터링으로 즉각적인 장애 감지 및 대응
MONITORING // SECURE ASSET SEC-ID: #ARG-332
SCANNING
Vanilla JS Three.js Pixi.js SNMP NMS WebSockets REST API
My Frontend Role
  • Pixi.js/Three.js 네트워크 토폴로지 2D/3D 시각화
  • 서버 상태 실시간 모니터링 UI
  • 대용량 테이블 관리 라이브러리 개발

PROM-ATS PRIVATE

사회공학적 공격 경로를 점검하고 보안 취약점을 검증하는 침투 테스트 서비스입니다.

Problem 회사나 시기별로 다양한 시나리오 필요
Solution 파일/링크/응답 등 다양한 시나리오를 자유롭게 생성
FIREWALL // ENCRYPTION ACTIVE SEC-ID: #ATS-119
SCANNING
Vanilla JS Penetration Testing Automation REST API
My Frontend Role
  • Vanilla JS 기반 드래그 앤 드롭 공격 시나리오 노드 에디터 구현
  • 파일·링크·응답 등 다양한 공격 시나리오 생성 UI 설계
  • 공격 결과 리포팅 대시보드 시각화 및 UX 개선

SoarPlaybook PRIVATE

보안관제 자동화를 위한 서비스입니다. 레이어 아키텍처로 플레이북 수를 최소화하여 최대 커버리지를 달성하도록 설계했습니다.

⚙ Response Actions
◆ Decision Logic
▶ Trigger / Detection
Event
→
Analyze
→
Respond
→
Report
Problem 수백 개의 중복 플레이북 관리의 비효율성
Solution 레이어 아키텍처로 최소한의 플레이북으로 최대 커버리지 달성
Vue.js Rust WebAssembly SOAR SSE/REST API
My Frontend Role
  • 레이어 기반 플레이북 에디터 UI/UX 개발
  • 노드 라이브러리(litegraph.js 등) 커스텀
  • 데스크톱 스타일 시각화
  • 로그 데이터 직렬화/역직렬화

[ LABORATORY ]

DataCore THEME

SIEM·보안관제·관리자 서비스에 바로 적용 가능한 Vue3 대시보드 테마입니다. 실무 보안관제 경험을 바탕으로 설계한 다크 HUD 스타일의 UI 키트입니다.

DataCore Theme Preview
Vue 3 TypeScript Vite
LIVE DEMO

Web OS UI THEME

웹 기반 운영체제 UI 테마입니다. 데스크탑 환경을 그대로 웹에서 구현한 인터랙티브 UI 키트입니다.

Web OS UI Preview
Vue 3 Vite
LIVE DEMO

EventLens

엔터프라이즈 환경에 특화된 보안 이벤트 뷰어입니다.

EventLens Preview
Javascript
LIVE DEMO GITHUB

HTML Overlay Node

HTML 요소를 오버레이 할 수 있는 사용자 정의 노드 모듈입니다.

HTML Overlay Node Preview
Javascript Canvas api
LIVE DEMO GITHUB

High Tree

기존 트리 라이브러리의 대용량 노드 렌더링 한계를 해결하기 위해 가상화 렌더링 기반으로 직접 설계한 Vue 트리 컴포넌트입니다.

High Tree Preview
JavaScript Virtual Scroll
LIVE DEMO GITHUB

High Grid

엔터프라이즈급 데이터 그리드 라이브러리로, 대용량 데이터 렌더링, 가상 스크롤, 페이징, 무한 스크롤, 그룹핑, 트리 데이터, 실시간 데이터 반영, 플러그인, 셀 렌더러 같은 고급 기능을 지원합니다.

High Grid Preview
Vue.js Web Worker Virtual Scroll
LIVE DEMO GITHUB

Rust WASM Playground

Rust로 구현한 연산 로직을 wasm-pack으로 컴파일해 브라우저에서 직접 실행하는 인터랙티브 WebAssembly 체험 에디터입니다.

wasm_playground Preview
Rust WebAssembly wasm-pack
GITHUB

LogTrace

Apache / Nginx 액세스 로그를 업로드하면 SQL Injection, XSS, 경로 탐색 등 보안 위협 패턴을 자동으로 분석·분류해주는 웹 서비스입니다.

LogTrace Preview
Vue.js Log Analysis Regex Engine
Website

TopoSpace

Three.js 기반 인터랙티브 3D 네트워크 토폴로지 시각화 라이브러리입니다.

TopoSpace Preview
Three.js WebGL TypeScript
LIVE DEMO GITHUB

Rwasm

러스트를 웹에서 쉽게 가져와 사용할 수 있도록 만든 래퍼입니다.

RS
Rust Source
Rwasm Engine
WASM
WebAssembly
BUILDING OPTIMIZED BINARY...
Rust WebAssembly wasm-pack
GITHUB

Tech Stack Architecture

Frontend & Security Visualization
JavaScript / TypeScript
Vue.js
Three.js / WebGL
PixiJS Rendering
Custom Shaders / GLSL
Dashboard UI / HUD Design
Realtime Processing & Performance
WebSocket Data Stream
Web Worker
Service Worker
Rust WebAssembly
Virtual Scroll / Chunk Rendering
Pixi.js / Canvas 2D Rendering
Security Detection & Automation
Detection Rule Authoring
SOAR Playbook
Log Pattern Rule Engine
Threat Intelligence Integration
Automated Incident Response
Node.js Runtime
Monitoring & Infrastructure Security
NMS Architecture
SNMP Traffic Monitoring
Server Health Monitoring
Linux System Engineering
Endpoint Security
Penetration Test Automation