CLI

홍수혁

+82 10-2586-6476 · hongsoohyuk@icloud.com

조직의 불편과 비효율을 그냥 지나치지 못합니다. 익숙하게 반복되는 업무와 사용 경험 속에서도 "왜 이렇게 해야 하지?", "더 나은 방법은 없을까?"를 고민하며 직접 해결책을 만들고 개선하는 과정에서 가장 큰 동기를 얻습니다.

메가존클라우드에서는 프론트엔드 개발을 담당하며 운영 중인 서비스의 성능 저하와 구조적 복잡성을 개선해왔습니다. 대용량 조회 화면의 입력 지연 문제를 해결해 응답 시간을 단축하고, 수 분이 소요되던 개발 환경을 수 초 수준으로 개선하는 등 사용자 경험과 개발 생산성을 높이는 작업을 수행했습니다. 또한 클라우드 정산 시스템을 개발하며, 대상 클라우드가 늘어나도 코드 복잡도가 증가하지 않도록 구조를 설계하였습니다. 당장의 증상을 고치기보다 같은 문제가 반복되지 않는 구조를 만드는 데 집중합니다.

개인 프로젝트인 메가밥스는 사내 구성원들의 불편함에서 시작되었습니다. 임직원들이 매일 종이 식단표를 확인하기 위해 식당 앞을 방문하는 모습을 보며 서비스를 직접 기획하고 개발했습니다. 기존 식당 앱의 통신 방식을 분석해 식단 수집을 자동화하고, Slack App과 MCP 서버를 연동해 편리하게 식단 정보를 확인할 수 있도록 구현했습니다. 현재는 사내 임직원 100여 명이 매일 사용하는 서비스로 운영하고 있으며, 실제 사용 패턴과 피드백을 바탕으로 지속적으로 개선하고 있습니다.

주어진 요구사항을 구현하는 데 머무르기보다 문제를 발견하고 정의하며, 필요하다면 기술 영역의 경계를 넘어 더 나은 해결책을 만들어내는 엔지니어로 성장하고자 합니다.

기술 스택

  • Frontend: TypeScript · React · Next.js · TailwindCSS · MUI
  • Data: TanStack Query · TanStack Router · Zustand · Supabase
  • Tooling: Vite · Yarn Berry PnP · ESLint · OpenAPI Codegen · Playwright
  • Infra: AWS · Terraform · GitHub Actions

경력

메가존클라우드

2023.04 - 재직중 · 프론트엔드 개발 · 정규직

BillOne

2026.02 - 현재 · 프론트엔드 개발

메가존클라우드와 메가존소프트의 클라우드 매입·매출 정산 관리 시스템입니다. 6개 CSP(GCP·Datadog·Azure·Alibaba·Akamai·Tencent) × 18개 기능을 단일 앱에서 다룹니다.

사용 기술: React, TypeScript, Vite, TanStack Router, TanStack Query, TailwindCSS, Zustand

App Registry Pattern 기반 CSP 확장 구조 설계

배경

BillOne은 6개 CSP의 정산을 한 앱에서 제공하며, CSP마다 공통된 업무 흐름과 서로 다른 비즈니스 로직을 가집니다.

초기에는 라우트와 페이지 컴포넌트의 CSP별 차이를 처리해, CSP가 추가될 때마다 여러 영역을 수정해야 했고 코드 복잡도가 CSP 수에 비례해 증가했습니다.

구현

  • 분기 제거 — CSP별 가시성과 컴포넌트 매핑을 하나의 Registry에 선언하고, 라우트와 네비게이션이 동일한 Registry에서 파생하도록 구성했습니다.
  • 접근 격리 — CSP별 페이지를 import()로 지연 로딩해, 라우터 가드가 차단하는 CSP 코드는 초기 번들에 포함되지 않도록 구성했습니다.
  • 병렬 개발 — Bulletproof React 위에 CSP 도메인 코드를 feature 레이어로 분리하고, ESLint no-restricted-imports 규칙으로 feature 간 참조와 계층 역참조를 차단해 의존 방향을 강제했습니다.

성과

  • 초기 로드 JS 34.2% 감소(1,003KB → 660KB gzip)
  • CSP 조건 분기 189곳 → 42곳으로 감소, 네비게이션 코드 358줄 → 57줄
  • Akamai·Alibaba·Azure·Tencent 4개 CSP를 추가하는 과정에서 라우트 파일 수정 0건

AI Agent 기반 개발 환경 구축

배경

Figma·Jira 등 개발에 필요한 정보와 작업이 여러 도구에 분산되어 있어, 요구사항 파악부터 구현·검증까지 개발자가 직접 컨텍스트를 수집하고 반복 작업을 수행해야 했습니다. 이러한 반복 작업을 줄이고 개발 과정 전반을 AI 에이전트가 수행할 수 있는 환경을 구축하고자 했습니다.

구현

  • Figma와 Jira를 MCP로 연결해 이슈·디자인 정보를 직접 조회할 수 있도록 구성했습니다.
  • git worktree 기반 병렬 작업 환경을 구축하고, 에이전트가 구현·커밋·PR 생성까지 수행하도록 자동화했습니다.
  • 프로젝트 아키텍처와 개발 규칙을 Claude Skills로 정의하고, 반복적인 구현·문서화·검증 작업을 에이전트가 일관된 방식으로 수행하도록 구성했습니다.

성과

  • 요구사항 확인부터 구현·PR 생성까지 분산된 개발 작업을 AI 에이전트 기반 워크플로우로 통합
  • Playwright E2E 테스트와 연결해 구현 이후 테스트 생성·실행·검증까지 AI 에이전트의 작업 범위 확장

SPACE SaaSOps

2024.11 - 2026.01 · 프론트엔드 개발

기업의 SaaS 계정, 보안, 비용을 통합 관리하고 사용 현황을 가시화하는 SaaS Management Platform입니다.

사용 기술: React, TypeScript, Vite, TanStack Query, Yarn Berry, MUI, ApexCharts

CRA/webpack 4 → Vite 마이그레이션

배경

CRA/webpack 4 기반 단일 앱에서 dev 서버 시작 시간이 2분 40초 이상, 코드 변경 후 브라우저 반영까지 3.5초가 소요되어 피드백 루프가 크게 저하되어 있었습니다.

또한 라우트 단위 코드 스플리팅이 없어 첫 화면에서 전체를 다운로드하고 있었습니다.

구현

  • dev 환경 — CRA를 Vite로 이관해 의존성 사전 번들링과 브라우저 네이티브 ESM을 활용하도록 개발 환경을 전환했습니다.
  • 초기 로딩 — 52개 라우트에 lazy loading을 적용해 페이지 진입 시 필요한 코드만 로드하도록 초기 로딩을 재구성했습니다.

성과

  • 개발 경험
    • 개발 서버 시작 시간 46.5배 단축 (167.48s → 3.60s)
    • HMR 반영 39.2배 단축 (3,528ms → 약 90ms)
  • 초기 로딩
    • 초기 진입 JS 37.6% 감소 (2,437KB → 1,520KB gzip)
  • 런타임 실측
    • LCP 23.3% 개선 (2,012ms → 1,544ms)

페이지 검색 성능 개선

배경

931줄 규모의 검색 페이지에서 입력할 때마다 페이지 전체가 리렌더링되면서 검색어 입력이 눈에 띄게 지연되는 문제가 있었습니다. 실제 렌더링 비용과 병목 구간을 측정해 원인을 확인하고 개선하고자 했습니다.

구현

  • React Profiler와 커밋 훅 기반 계측을 활용해 검색 입력 시 렌더링 트리와 커밋 시간을 측정했습니다.
  • 검색어 입력 상태가 페이지 전체 렌더링을 유발하고 있음을 확인하고, PO·디자이너에게 입력마다 결과가 갱신되는 기존 UX 대신 검색 버튼 클릭 또는 Enter 입력 시 결과를 갱신하는 UX로 변경을 제안하고 협의했습니다.
  • useRef를 사용해 입력값을 렌더링 트리에서 분리하고, 검색 버튼을 클릭하거나 Enter를 입력한 시점에만 URL 파라미터와 서버 상태를 갱신하도록 검색 흐름을 구성했습니다.

성과

  • 검색어 입력 지연 96.9% 개선 (302ms → 9.4ms)
  • 렌더 시간 총합 99.5% 감소 (475ms → 2.6ms)
  • 글자 입력마다 발생하던 약 2,600개 Fiber 리렌더링 제거
  • 검색 입력 구간에서 Main Thread Long Task 537ms → 0ms

Feature-Sliced Design 도입

배경

급하게 기능이 확장되면서 컴포넌트와 비즈니스 로직이 특정 파일과 디렉터리에 집중되고, 계층 간 의존 방향도 일관되지 않은 상태였습니다.

기능을 수정할 때 변경 범위를 예측하기 어려웠고, 신규 기능이 기존 코드와 강하게 결합되는 문제가 반복되었습니다.

AI 코딩 도구 사용이 증가하면서 코드 생성 속도가 빨라진 만큼 구조적 일관성을 유지하기 어려워졌고, 사람과 AI가 함께 따를 수 있는 검증 가능한 구조 규칙이 필요했습니다.

구현

  • Feature-Sliced Design의 shared → entities → features → widgets → pages 계층으로 코드를 재구성했습니다.
  • 기존 컴포넌트의 역할을 분석해 도메인 로직과 UI를 계층별로 분리하고, 기능 단위로 코드를 재배치했습니다.
  • ESLint no-restricted-imports를 활용해 하위 계층의 상위 계층 참조를 차단하고, 의존 방향을 정적 검증했습니다.

성과

  • 리팩토링 대상 파일의 평균 코드 길이 56% 감소(381줄 → 168줄)
  • 2,000줄 초과 파일을 19개 → 6개로 감소
  • 계층 간 의존 방향을 정적 분석으로 검증해 구조적 규칙을 코드 수준에서 강제

Cloudplex Delivery

2023.04 - 2024.11 · 프론트엔드 개발

여러 CDN 벤더의 리소스를 통합 관리하고, Geolocation·Weighted 기반 DNS 라우팅과 Failover 설정, CDN 실시간 트래픽 모니터링 기능을 제공하는 Multi-CDN Orchestration 플랫폼입니다.

사용 기술: React, TypeScript, TanStack Query, Yarn Berry PnP, MUI, Recharts, Terraform

Cloudplex Monorepo 환경 구성

배경

  • CPD, CPD-Admin, Cloudplex Launcher 3개 독립 프로젝트에서 Theme, UI Component, 도메인 스키마가 중복 관리되고 있어 변경 사항을 각 프로젝트에 반복 반영해야 했습니다.

구현

  • Yarn Berry Workspace 기반 Monorepo로 3개 독립 앱을 이관하고, 여러 앱이 공유하는 UI와 유틸리티를 공통 패키지로 분리했습니다.
  • Yarn Berry Plug’n’Play 를 도입해 의존성을 엄격하게 관리하고, 이관 중 발견한 유령 의존성을 제거했습니다.

성과

  • 공통 UI·유틸리티를 단일 패키지로 관리해 여러 앱의 중복 구현과 변경 작업을 제거
  • Plug'n'Play를 통해 선언되지 않은 의존성을 빌드 단계에서 검출할 수 있는 환경 구축

Terraform 기반 배포 인프라 코드화

  • DevOps 팀과의 협업 중 인프라 변경 사항을 공유하고 재현할 수 있도록 배포 인프라의 IaC 관리가 필요했습니다.
  • 수동으로 관리되던 AWS Cloudfront, S3 등 리소스를 Terraform 코드로 재구성했습니다.
  • 동일 배포 환경을 명령어로 재현할 수 있도록 구성해 배포 일관성을 높이고 설정 오류를 줄였습니다.

개인 프로젝트

메가밥스 — 메가존클라우드 구내식당 메뉴 서비스

사내 구성원의 불편에서 출발해 직접 기획·개발·운영한 구내식당 메뉴 서비스입니다. 사내 임직원 100명 이상이 매일 사용하는 서비스로 운영하고 있습니다.

사용 기술: Next.js, React, React Query, Zustand

  • 구내식당 업체 앱의 통신 방식을 분석해 매주 메뉴 데이터를 자동 수집하는 fetcher를 구현했습니다.
  • Google News RSS 기반으로 메가존 계열사 키워드 뉴스를 수집하고, GitHub Actions Cron으로 자동 갱신되도록 구성했습니다.
  • Slack App 슬래시 커맨드로 오늘부터 글피까지의 식단을 제공하고, Cron 캐시 워밍으로 응답 지연을 줄였습니다.
  • stdio와 Streamable HTTP 이중 트랜스포트를 지원하는 MCP 서버를 만들어 식단 데이터를 LLM 에이전트에 제공했습니다.

hongsoohyuk.com — 개인 포트폴리오 웹사이트

블로그, 방명록, 활동 기록을 한곳에서 보여주는 개인 사이트입니다. 웹 터미널과 실시간 챗봇 등 인터랙티브 기능을 직접 설계·구현했습니다.

사용 기술: Next.js, React, Vercel AI SDK, TanStack Query, Supabase, Playwright

  • Lexer → Parser → Executor 파이프라인으로 Shell 동작을 재현한 CLI Terminal을 구현했습니다.
  • Cloudflare Turnstile 봇 검증, IP·UA HMAC-SHA256 핑거프린팅, IP 기반 Rate Limit으로 Guestbook 어뷰징을 방어했습니다.
  • Next.js Metadata API 기반 canonical, hreflang, JSON-LD, 동적 OG 카드 생성으로 SEO 파이프라인을 구성했습니다.
  • Google Gemini와 Vercel AI SDK 기반 실시간 AI Chat을 구현했습니다.

학력

  • 명지대학교 · 2015.03 - 2023.02 · 응용소프트웨어 전공 · 졸업

수상·자격증

  • SQL 개발자(SQLD) · 2023.04

언어

  • 영어: 비즈니스 레벨
  • TOEFL: 99 · 2021.10.09
  • TOEIC: 905