Skip to content
KORésumé
Work
Experience
Capabilities
Workflow
Experiments
About
Contact
01 · AI investigation, streamed in real time
02 · Turning migration into a repeatable system
03 · Shipping independently deployable product modules
04 · Real-time energy operations across regions
05 · A security policy language that guides the author
Résumé
GitHub profile
LinkedIn profile
한국어로 보기 (Korean)

Navigate with ↑↓, select with Enter, close with Esc

SYS · PORTFOLIO / LIVE

Changyong Mun — Frontend Engineer

I turn complex signals into reliable interfaces.

Building AI-powered, real-time frontend systems across security, energy, frontend platforms, and developer tooling.

Explore selected work View résuméLinkedIn — opens in a new tabGitHub — opens in a new tab
BASE
Seoul, South Korea
LANG
English / Korean
CORE
React · TypeScript · Real-Time Systems

A signal map connecting Changyong's work areas. AI Investigation, Real-Time Data, Frontend Platform, Security, Energy, and Developer Productivity all route through one practice: turning complex signals into reliable interfaces. Each node links to the matching section.

  1. AI Investigation
  2. Real-Time Data
  3. Security
  4. Frontend Platform
  5. Energy
  6. Developer Productivity

SIGNAL CHECK

SECTION 01 · WORK

Selected work

Four systems, one discipline: an event stream on one side, a person who needs to act on the other.

CH-01 · AGENT STREAM / SSE

01AI investigation, streamed in real time

AhnLab · EDR security platform

An Endpoint Detection and Response platform runs AI analysis over endpoint behavior logs. I built the frontend that turns a long-running agent's event stream into a readable, actionable investigation — progressively, over Server-Sent Events.

Technical detail

The server processes endpoint behavior-log files and feeds them into an AI workflow. The product team controls reporting templates and defines structured JSON or Markdown output contracts; the AI team defines instruction and agent behavior. The frontend sits at the end of that chain — where an unfinished, streaming analysis has to look coherent to a security analyst at every moment.

The interface consumes an event protocol based on AG-UI over Server-Sent Events, renders partial AI analysis progressively, and keeps long-running agent state consistent with what is on screen: AI Triage, AI Investigation, recommendation tags mapped to predefined frontend actions, and follow-up AI responses triggered from those actions.

Frontend responsibilities

  • Consuming an AG-UI-based event protocol over Server-Sent Events
  • Rendering partial AI analysis progressively while the agent runs
  • Managing long-running agent state — partial, complete, and actionable report states
  • AI Triage and AI Investigation experiences
  • Mapping recommendation tags to predefined frontend actions and triggering follow-up AI responses
  • Keeping streamed events and UI state consistent
  • Presenting complex investigation progress clearly

Signal path

  1. Endpoint behavior logs
  2. Report & instruction contracts
  3. Agent workflow
  4. Agent event stream
  5. SSE transport
  6. Progressive analysis UI
  7. AI Triage / Investigation
  8. Recommended actions
SYNTHETIC DEMO● IDLE

Event log

  1. ▸ Press Play to stream the synthetic investigation

Investigation report

0/4
  • ▢ Summary
  • ▢ Process activity
  • ▢ Network activity
  • ▢ Recommendation
A synthetic demonstration representing the interaction pattern, not production code.

Selected details and visuals have been generalized to protect confidential information.

CH-02 · MIGRATION / AGENT WORKFLOW

02Turning migration into a repeatable system

AhnLab · Enterprise security product

A core enterprise security product is moving from Vue/Nuxt to React. Instead of migrating screen by screen by hand, I helped turn the migration itself into an engineering system — shared foundations, reusable agent Skills, parallel execution, and automated verification. Completed migration throughput increased by more than 75%.

Technical detail

My central roles: search-intensive list experiences, shared search and list foundations, reusable data-view components, design-token adoption, React screen implementation, and the authentication migration — OTP, access-token and refresh-token lifecycle, across multiple enterprise environments — all while holding visual and behavioral parity with the legacy product.

The agent-assisted side is a system, not a chat window: Claude Code as the primary coding agent with Copilot CLI, Orca-based parallel work, subagent workflows, and reusable team Skills. Figma Desktop MCP and Playwright browser automation compare Figma to implementation and legacy-server snapshots to local ones. When legacy authentication expires mid-run, the workflow detects it, re-logs-in with securely stored local environment credentials, and re-establishes state — so verification never silently degrades. Knowledge from each migration is encoded and reused in the next one, and shared with teammates.

Central roles

  • Search-intensive list experiences and shared search/list foundations
  • Reusable data-view components and design-token adoption
  • React screen implementation with visual and behavioral parity
  • OTP authentication and access/refresh-token lifecycle across multiple enterprise environments
  • Migration workflow standardization — Skills, parallel agents, automated verification

The migration pipeline

  1. Specification & Figma
  2. Reusable Skill
  3. Parallel agent execution
  4. React implementation
  5. Local browser validation
  6. Legacy-product comparison
  7. Authentication recovery
  8. Visual & behavioral verification
  9. Human review

Before

  • Repeated context explanation
  • Manual comparison
  • Sequential implementation
  • Repeated login recovery
  • Inconsistent migration knowledge

After

  • Shared specifications
  • Reusable Skills
  • Parallel work
  • Automated comparison
  • Authentication recovery
  • Human-controlled review
  • Knowledge reused across migrations

Completed migration throughput increased by more than 75% compared with the previous workflow.

Selected details and visuals have been generalized to protect confidential information.

CH-03 · RUNTIME / DELIVERY

03Shipping independently deployable product modules

AhnLab · EDR modules on a shared SaaS platform

The EDR team provides core applications — security diagrams, process-tree experiences, policy modules — to a shared SaaS platform through Module Federation. I worked across the full lifecycle: runtime composition in the browser, the build and artifact chain, and Kubernetes delivery.

Technical detail

Runtime integration follows a strict contract: the SaaS host resolves a route-and-prefix contract, loads mf-manifest.json, fetches remoteEntry.js, loads the exposed module, pulls its runtime assets, and composes it into the host. Each link in that chain is a distinct failure mode, so validation covered manifest resolution, remote-entry resolution, exposed-module loading, runtime asset loading, Module Federation browser-tool inspection, host integration, and HMR behavior.

Delivery is equally explicit: frontend build → Docker or Podman image → container registry (Harbor) → Jenkins → Helm chart → Kubernetes deployment. Understanding the whole path is what makes an independently deployable frontend actually independent.

Representative modules

  • Security diagrams
  • Process-tree experiences
  • Policy-related modules
  1. SaaS host
  2. Route & prefix contract
  3. mf-manifest.json
  4. remoteEntry.js
  5. Exposed module
  6. Runtime assets
  7. Host integration

Validated end to end

  • Manifest resolution
  • Remote-entry resolution
  • Exposed-module loading
  • Runtime asset loading
  • MF browser-tool inspection
  • Host integration
  • HMR behavior

Selected details and visuals have been generalized to protect confidential information.

CH-04 · ENERGY / TELEMETRY

04Real-time energy operations across regions

Hanwha Solutions Qcells Division KR · Frontend Developer · Jan 2023 – Oct 2024 · Seoul

Web monitoring and control for solar-energy home systems: real-time telemetry over SSE, energy-flow visualization, permission-aware control, and a JavaScript-to-TypeScript migration — deployed across the United States, Europe, and Australia. This is where I first learned to treat an event stream as the product.

Technical detail

The work spanned HEMS monitoring and control, a JavaScript-to-TypeScript codebase migration that leaned on mapped types, string-literal types, and template-literal types, Nuxt-based SSR for a Virtual Power Plant project, unit conversion, permission-aware UI, Lerna monorepo management, and Bitbucket/Jenkins CI/CD across three regions.

It also produced an invention: an automated backup-energy behavior for severe weather, filed as a patent. And it set up everything after it — solar-energy event streams became security event streams became AI agent event streams. Same discipline, higher stakes.

Stream lineage

  • Solar-energy event streams → Security event streams → AI agent event streams

Energy signal path

  1. Solar generation
  2. Household consumption
  3. Battery
  4. Grid
  5. Real-time event stream
  6. Permission-aware monitoring & control

Diagram description: Energy flows from solar generation to household consumption and the battery; surplus moves to the grid. Every element emits into a real-time SSE stream feeding permission-aware monitoring and control.

SSE stream → Monitoring & control

Selected details and visuals have been generalized to protect confidential information.

CH-05 · POLICY DSL / GUIDED AUTHORING

05A security policy language that guides the author

Why this mattered

Users did not have to memorize every valid field, operator, and continuation rule. The editor narrowed the next choice according to the current context and returned backend validation to the exact place where correction was needed.

Customer feedback was especially positive around autocomplete, which made complex policy authoring more approachable.

Security policies were written in a SQL-like domain-specific language aligned with the underlying evaluation engine. The main frontend challenge was not displaying code. It was helping users author valid policies without memorizing the complete grammar.

I designed a Monaco-based editing experience with context-aware autocomplete, field-type-specific operators, nested-expression guidance, multiline request handling, and server validation mapped back to the exact editor range.

  • 01

    Context-aware autocomplete

    Suggestions depend on grammar position: fields at the start, operators after a field, values after an operator — never one flat keyword list.

  • 02

    Field-type-specific operators

    A numeric field never offers CONTAINS; a boolean field offers true/false. The type system of the policy engine shapes the menu.

  • 03

    Nested-expression guidance

    Matching parentheses, active scope, and an expression tree keep deep AND/OR grouping legible.

  • 04

    Errors at the exact range

    Server validation returns a code, message, and source position — the frontend converts it into a Monaco marker on the invalid token itself.

POLICY LABSYNTHETIC DSL
policy.rule — example
(
  process.name = "browser"
  AND (
    network.destination.port IN [443, 8443]
    OR process.risk_score >= 80
  )
)
THEN classify AS "review"
Synthetic interaction model. Syntax, fields, and validation responses have been generalized to protect confidential information.

What the interaction demonstrates

  1. 01

    Build a condition — completions follow the grammar: field, compatible operator, typed value, continuation.

  2. 02

    Explore nested logic — the active parenthesis scope and an expression tree explain deep grouping.

  3. 03

    Inspect the request — multiline input is normalized into the request representation without changing its meaning.

  4. 04

    Find the invalid token — a simulated server error is mapped onto the exact invalid operator, with a one-click fix.

Under the hood

Select a step to see what the frontend does at that point.

  1. 01Editor content

    The original policy text and cursor position are the source of the current authoring context.

  2. 02Token & context analysis

    The frontend determines whether the user is selecting a field, operator, value, logical continuation, or action.

  3. 03Context-aware suggestions

    Completions are filtered according to field type, grammar position, and active grouping scope.

  4. 04Request normalization

    Multiline input is converted into the request representation expected by the evaluation service without changing its logical meaning.

  5. 05Evaluation service

    The backend evaluates syntax and policy semantics.

  6. 06Structured validation response

    The server returns an error code, message, and source position.

  7. 07Monaco marker range

    The frontend converts the source position into an editor range.

  8. 08Precise inline feedback

    The exact invalid token is marked so users can correct the policy without searching through the entire expression.

Synthetic interaction model. Syntax, fields, and validation responses have been generalized to protect confidential information.

SECTION 02 · EXPERIENCE

Experience

Two chapters of building products, grounded by research and strategy work before them.

  1. July 2025 – Present

    AhnLab, Inc.

    Frontend Developer · Seongnam, Gyeonggi, South Korea

    Frontend engineer building EDR and SaaS security products, focusing on AI-powered investigation experiences, large-scale React migration, real-time data, and frontend platform architecture.

    Key experience
    • AI-powered real-time investigation interfaces: agent event streams over SSE, AI Triage and AI Investigation, and recommendation-driven follow-up actions
    • Core Vue/Nuxt-to-React migration: shared search and data-list foundations, design-token adoption, and visual/behavioral parity
    • Enterprise authentication migration: OTP plus access-token and refresh-token lifecycle across multiple environments
    • AI-assisted engineering: Claude Code and Copilot CLI workflows, Orca parallel execution, subagents, and reusable team Skills — completed migration throughput increased by more than 75%
    • Figma and Playwright visual-parity workflows with legacy/local application comparison and authentication-session recovery
    • Independently deployable modules with Module Federation, delivered via Docker/Podman, Harbor, Jenkins, Helm, and Kubernetes
    • Monaco-based security-policy DSL editing experience and Storybook design-system foundations
    • Vitest and Playwright test coverage; internal Claude Code playbooks in Confluence and an Obsidian-based internal LLM troubleshooting wiki
    • English communication for global collaboration

  2. January 2023 – October 2024

    Hanwha Solutions Qcells Division KR

    Frontend Developer · Seoul, South Korea

    Built real-time monitoring, control, and platform foundations for solar-energy products.

    Key experience
    • Web monitoring and control systems for solar-energy HEMS
    • JavaScript-to-TypeScript codebase migration using mapped, string-literal, and template-literal types
    • Real-time energy telemetry over SSE with energy-flow visualization and unit conversion
    • Nuxt-based SSR for a Virtual Power Plant project
    • Permission-aware monitoring and control UI
    • Lerna monorepo management with Bitbucket and Jenkins CI/CD
    • Deployment across the United States, Europe, and Australia
    • Invention and patent filing for automated backup-energy behavior during severe weather

  3. July 2021 – October 2021

    Seoul National University

    Machine Learning Intern · Seoul, South Korea

    Applied machine-learning and data-processing techniques to direct RNA sequencing research using Python, pandas, nanopore data, and sequencing-file pipelines.

    • · Nanopore sequencing-data processing and indexing
    • · Probability-distribution analysis with pandas DataFrames
    • · FASTQ, BAM, and SAM file processing
    • · Machine-learning research support

  4. January 2020 – June 2020

    GTL U.S. LLC

    Strategy Consultant Intern · Chicago, Illinois, United States

    Conducted U.S. and Korean market research, SWOT analysis, customer targeting, and strategic recommendations in an English-speaking environment.

    • · U.S. and Korean market research
    • · SWOT analysis and customer targeting
    • · Strategic recommendations for cross-market entry

SECTION 03 · CAPABILITIES

Capabilities

Organized by how I solve problems — not a logo wall, and no percentage bars.

01

Architecture

I design frontends as systems with explicit contracts — shared foundations first, screens second. Microfrontends and monorepos are boundaries, not buzzwords: each module owns its lifecycle from source to deployment.

Working set

  • React
  • Vue
  • Next.js
  • Nuxt
  • TypeScript
  • Frontend architecture
  • Microfrontends
  • Module Federation
  • Monorepos
  • Shared component systems
  • Design tokens
  • Storybook

02

Real-time & data

Streams are my home ground: solar telemetry, security events, AI agent events. The recurring problem is the same — keep a long-running, partially-arrived truth consistent on screen, from SSE transport to authentication state.

Working set

  • Server-Sent Events
  • Event-driven UI
  • AI agent event streams
  • Search-intensive applications
  • Data visualization
  • Authentication state
  • Long-running asynchronous workflows

03

Quality & delivery

Verification is designed, not hoped for: visual-parity comparison against legacy products and Figma, end-to-end tests in real browsers, and a delivery chain I can reason about — container image to registry to Helm to Kubernetes.

Working set

  • Playwright
  • Vitest
  • Visual-parity validation
  • End-to-end testing
  • CI/CD
  • Docker
  • Podman
  • Jenkins
  • Harbor
  • Helm
  • Kubernetes

04

AI-assisted engineering

I engineer the workflow, not just the code: repeated work becomes specifications, specifications become reusable Skills, Skills run as parallel agents validated in real browsers — with humans owning architecture and review, and knowledge written down for the next person.

Working set

  • Claude Code
  • Copilot CLI
  • Parallel agents
  • Subagents
  • Reusable Skills
  • Specification-driven workflows
  • Browser-based validation
  • Team documentation
  • LLM-oriented knowledge reuse

SECTION 04 · WORKFLOW

Engineering the workflow, not only the interface

Practical AI engineering is not a list of tools. It is noticing repetition, encoding it, and letting verified automation carry it — while humans keep architecture and review.

The loop

  1. Observe repetition
  2. Extract a pattern
  3. Encode a Skill
  4. Execute in parallel
  5. Validate with browser & tests
  6. Human review
  7. Share knowledge
  8. Improve the next iteration
  • 01

    Repeated work becomes reusable Skills and agent workflows — parallel agents instead of a single chat window.

  • 02

    Browser automation validates results against the legacy product and Figma; humans stay responsible for architecture and review.

  • 03

    Useful Claude Code patterns are documented in Confluence; troubleshooting knowledge lives in an Obsidian-based internal LLM wiki.

  • 04

    Prior context is reused to cut repeated investigation and token usage — each migration improves the next one.

SECTION 05 · EXPERIMENTS

Shipped / Personal build

A completed independent project, clearly separated from professional case studies and available to try in the browser.

ShippedPersonal project

OpenAI Build Week — Codex Web Education

A bilingual debugging arena with five hands-on missions spanning accessible dialogs, Flexbox, motion, deterministic SSE, and state management. Learners change safe repair settings, watch the UI and source update immediately, and run real browser checks; only verified passes damage the bug boss. Built with Codex and GPT-5.6, with an optional local Ollama coach.

  • Completed and submitted for OpenAI Build Week
  • Independent personal project, unrelated to AhnLab
Live demo — opens in a new tabDevpost — opens in a new tabGitHub — opens in a new tabDemo video — opens in a new tab

SECTION 06 · ABOUT

About

I'm a frontend engineer focused on complex, data-intensive products where real-time behavior, reliability, and architecture matter.

My experience spans endpoint security, solar energy, machine-learning research, and U.S.–Korea strategy work. I enjoy translating complex backend, security, data, and AI workflows into understandable and reliable user experiences.

My primary interests are frontend architecture, AI-native interfaces, real-time systems, developer productivity, platform engineering, and global products.

I have more than ten years of experience in English-speaking environments and am comfortable collaborating across engineering, product, design, customers, and international teams.

SECTION 07 · CONTACT

Contact

The fastest channels right now. A public email address will be added here.