Cheongha Kim

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

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

Problem 부자재의 카테고리가 복잡하고 제조사 마다 다르게 분류

Solution 이미지의 특징을 기반으로 부자재를 분류

Vue.js WebSocket REST API AI Image Search

My Frontend Role

• 기존 서비스 리뉴얼 총괄 및 신규 기능 기획
• 상품 템플릿 엔진 개발 및 적용
• AI 이미지 검색 UI/UX 디자인
• SEO 최적화
• 유지보수

AI 데이터 수집 스크래퍼PRIVATE

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

Problem SPA를 사용하는 페이지는 데이터를 수집하기 어려움

Solution 실제로 페이지가 렌더링 된 이후에 데이터를 수집할 수 있도록 구현

DATA COLLECTION

SECURE PROTOCOL // ENCRYPTED DATA SEC-ID: #PRV-842

SCRAPING

Vue.js Node.js Puppeteer

$ ./decrypt --mission-id=1 CLICK TO DECRYPT

AI 상품 템플릿 엔진 R&D PRIVATE

TIPS 연구과제로 수행한 프로젝트입니다. 관리자가 상품 사진을 찍어 올리면 의류부자재 카테고리를 자동으로 분류하고, 상품 상세 설명을 자동 생성하는 템플릿 엔진입니다.

Problem 제조사마다 분류 체계가 달라 상품 등록 시 카테고리 선택과 설명 작성에 시간이 소요됨

Solution 이미지 분류로 카테고리를 자동 판별하고, 속성 조합 기반 템플릿 엔진으로 설명문을 자동 생성

AI CLASSIFICATION

R&D PROTOCOL // RESEARCH ASSET SEC-ID: #TIPS-018

CLASSIFYING

Vue.js AI Image Classification Template Engine

$ ./decrypt --mission-id=18 CLICK TO DECRYPT

ServiceDeskPRIVATE

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

Problem 보안 이벤트의 분산된 관리와 느린 대응 시간

Solution 통합 대시보드와 자동화된 알림 시스템으로 실시간 관제 구현

REALTIME EVENTS

SECURITY LAYER // AUTHENTICATED SEC-ID: #SD-402

STREAMING

Vue.js Rust WebAssembly Web Worker Service Worker WebSocket SSE/REST API

$ ./decrypt --mission-id=2 CLICK TO DECRYPT

국방부 기밀 프로젝트PRIVATE

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

Problem 기밀 사항

Solution 기밀 사항

CLASSIFIED OPS

HIGH LEVEL // CLASSIFIED SEC-ID: #MIL-007

AUTHORIZING

Vue.js TypeScript Pixi.js 상세 기밀

$ ./decrypt --mission-id=3 CLICK TO DECRYPT

PROM LITE2 PRIVATE

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

Problem 시간당 9억 건(초당 약 25만 건) 규모의 로그 수신 시 테이블 렌더링 지연으로 UI 멈춤 현상 발생

Solution 가상 스크롤(virtual scroll) 적용 및 렌더링 청크 분리로 FPS 안정화

Vue.js TypeScript Pixi.js Log Engine REST API WebSocket

$ ./decrypt --mission-id=4 CLICK TO DECRYPT

Argus PRIVATE

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

Problem 서버 장애 감지 지연과 분산된 모니터링 체계

Solution 실시간 NMS 모니터링으로 즉각적인 장애 감지 및 대응

NMS MONITORING

MONITORING // SECURE ASSET SEC-ID: #ARG-332

POLLING

Vanilla JS Three.js Pixi.js ICMP/SNMP NMS WebSockets REST API

$ ./decrypt --mission-id=5 CLICK TO DECRYPT

PROM-ATS PRIVATE

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

Problem 회사나 시기별로 다양한 시나리오 필요

Solution 파일/링크/응답 등 다양한 시나리오를 자유롭게 생성

PENETRATION TEST

FIREWALL // ENCRYPTION ACTIVE SEC-ID: #ATS-119

SIMULATING

Vanilla JS Penetration Testing Automation REST API

$ ./decrypt --mission-id=6 CLICK TO DECRYPT

SoarPlaybook 2.0PRIVATE

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

⚙ Response Actions

◆ Decision Logic

▶ Trigger / Detection

Event

→

Analyze

→

Respond

→

Report

Problem 수백 개의 중복 플레이북 관리의 비효율성

Solution 레이어 아키텍처로 최소한의 플레이북으로 최대 커버리지 달성

Vue.js Rust WebAssembly SOAR SSE/REST API

$ ./decrypt --mission-id=7 CLICK TO DECRYPT

DataCore THEME

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

Vue 3 TypeScript Vite

LIVE DEMO STORE

Web OS UI THEME

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

Vue 3 Vite

LIVE DEMO STORE

EventLens

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

Javascript

LIVE DEMO GITHUB

HTML Overlay Node

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

Javascript Canvas api

LIVE DEMO GITHUB

High Tree

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

JavaScript Virtual Scroll

LIVE DEMO GITHUB

Zenith Grid

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

Vue.js Web Worker Virtual Scroll

LIVE DEMO GITHUB

Rust WASM Playground

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

Rust WebAssembly wasm-pack

GITHUB

LogTrace

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

Vue.js Log Analysis Regex Engine

Website

TopoSpace

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

Three.js WebGL TypeScript

LIVE DEMO GITHUB

Rwasm

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

RS

Rust Source

Rwasm Engine

WASM

WebAssembly

BUILDING OPTIMIZED BINARY...

Rust WebAssembly wasm-pack

GITHUB

Pinia Workspace Plugin

여러 브라우저 창/탭을 하나의 앱처럼 조율하는 Vue 3 / Pinia 3 런타임 플러그인입니다.

Vue 3 Pinia 3 TypeScript

LIVE DEMO GITHUB

math-for-dev

그래픽스/물리엔진 개발자를 위한 수학·물리 핸드북입니다.

Mathematics Physics Graphics

Website GITHUB

rusty.js

Rust의 ownership/borrow 검사를 문법이나 자료구조 변경 없이 JavaScript로 그대로 가져온 라이브러리입니다. ref / mut / move / clone 네 가지 primitive로 값의 소유권과 참조 가능 여부를 정적으로 추적합니다.

JavaScript Static Analysis Ownership Model

LIVE DEMO GITHUB

oria-webgpu

그래픽과 컴퓨트를 위한 최소한의, 타입이 명확한 WebGPU 래퍼입니다. WGSL 리플렉션으로 바인딩을 자동 매칭하고 파이프라인을 캐싱해 반복적인 보일러플레이트를 제거합니다. "WebGPU용 TWGL"

TypeScript WebGPU WGSL

LIVE DEMO GITHUB

spatium-engine

도면으로 실내 맵을 만들고 수정해서 뽑아낼 수 있는 도구입니다.

TypeScript Vue.js Three.js

LIVE DEMO GITHUB

AeroLinkPRIVATE

여러 드론의 통신 프로토콜을 하나로 정규화하는 코어 엔진입니다. Zoom과 유사한 방식으로 동작하는 드론 플랫폼 구축을 목표로 개발 중이며, 기존 드론 관제 업체에서도 연동해 활용할 수 있습니다.

Problem 드론 제조사·모델마다 통신 프로토콜이 달라 다중 드론 통합 관제가 어려움

Solution 여러 드론의 통신을 하나의 표준 프로토콜로 정규화하는 코어 엔진을 Go로 설계

CORE ENGINE

COMMERCIAL PROTOCOL // PROPRIETARY CORE SEC-ID: #AERO-101

NORMALIZING

Go

$ ./decrypt --mission-id=22 CLICK TO DECRYPT