홍수혁

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

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

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

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

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

경력

메가존클라우드주식회사

2023.04 - 재직중 · 3년 2개월 · 정규직

BillOne

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

GCP, Datadog 등 멀티 클라우드 빌링/정산 업무 관리 사내 백오피스 시스템.

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

1. AI 에이전트 기반 개발 워크플로우 구축

배경: 작업 파악·구현·문서화·검증으로 이어지는 반복 과정에서 생산성 향상 여지 존재. AI 에이전트를 단발성 코드 생성이 아닌 개발 워크플로우 전반에 통합할 필요
구현: Figma·Atlassian(Jira) 등 외부 도구를 MCP로 연결해 Jira 기반 작업 파악 → 구현 → 상태 업데이트 → PR 생성 흐름을 자동화. git worktree로 에이전트를 병렬 실행해 여러 작업을 동시 진행하고, Claude Skills에 규칙을 정의해 Playwright E2E 테스트를 생성·보완
성과: 작업 파악부터 검증까지의 반복 과정을 단축하고 AI 에이전트를 일상 개발 워크플로우의 일부로 정착. 팀 내 E2E 테스트 자동화 선례 제시

2. CSV → Parquet 브라우저 변환 기반 대용량 업로드 최적화

배경: 매입 정산 CSV 파일의 최대 용량 초과로 인해 파일 업로드 기능에 제한 발생
구현: DuckDB-Wasm으로 브라우저에서 CSV를 Parquet으로 변환·압축. 브라우저 OOM이 발생하지 않도록 DuckDB 파일 스트리밍 제어
성과: 1GB CSV를 약 90MB Parquet으로 약 11× 압축해 파일 업로드 한도를 단일 요청으로 해결. 서버 증설·스토리지 비용 추가 없이 클라이언트에서 해결하며, 매입 대사 금액의 1원 단위 정합성 보장

3. App Registry 패턴 기반 멀티 엔티티 확장 아키텍처 설계

배경: GCP 외 AWS, Datadog 등 10개 이상의 CSP 엔티티 확장이 예정된 상황에서 엔티티별 조건 분기가 코드 전반에 확산될 경우 유지보수 비용 증가 우려
구현: 기능별 가시성(전체 공개 / 특정 엔티티 전용 / 특정 엔티티 제외)을 선언적으로 등록하는 Registry를 설계하고, 엔티티별 컴포넌트를 Lazy Import 기반으로 런타임에 동적 해석하도록 구현. 라우트 파일은 기능 ID만 전달하여 조건 분기 완전 제거
성과: 엔티티 추가 시 설정 파일 수정만으로 전체 네비게이션, 라우팅, 기능 접근 제어가 자동 반영되는 구조 확보. 엔티티별 Code Splitting으로 번들 사이즈 최적화

SaaSOps

2024.11 - 2026.01 · 프론트엔드 개발

SaaS 사용 기업 대상 지출, 라이선스, 계약, 사용자를 통합 관리하는 어드민 플랫폼.

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

1. 대용량 조회 화면 입력 지연 개선

배경: 검색 입력값이 URL 쿼리와 컴포넌트 상태에 이중 동기화되어 키 입력마다 페이지 전체가 리렌더링되는 구조. 입력 후 화면 갱신까지 약 2초 지연
구현: React Profiler로 commit 단위 리렌더링 원인 특정 후, 입력값을 렌더링 경로에서 분리(uncontrolled input + ref). 조회 시점(Enter/검색)에만 URL 동기화·쿼리 실행하고, 검색 쿼리 로직을 공용 함수·컴포넌트로 추출
성과: 입력 후 화면 갱신 약 2초 → 100ms 이하 (당시 React Profiler 측정 기준). 공용화한 패턴을 여러 조회 화면에 확산

2. Webpack → Vite 마이그레이션

배경: Webpack 기반 코드베이스에서 로컬 개발 서버 콜드 스타트 4분 이상, 수정-확인 피드백 루프 사실상 단절
구현: 전체 모듈 사전 번들링이 콜드 스타트 지연의 원인임을 확인하고, 브라우저 네이티브 ESM 기반 Vite로 전환해 사전 번들링 비용 제거
성과: 콜드 스타트 4분+ → 수 초, HMR 즉시 반영으로 피드백 루프 정상화. 전환 경험을 프론트엔드 챕터에 공유

3. SaaS 비용 관리 시스템 개발 및 MVVM 패턴 도입

배경: 카드 승인 내역, 인보이스 등 입력 경로가 늘며 동일한 검증·상태 관리 로직이 반복 구현되고 UI·비즈니스 로직 혼재로 재사용성 저하
구현: Form 상태와 제출·검증 로직을 커스텀 훅 기반 ViewModel로 위임해 UI 로직과 비즈니스 로직 분리
성과: 중복 코드 약 30% 감소, 이후 비용 입력 기능 전반에 동일 구조 적용으로 신규 Source 확장 용이성 확보

4. OpenSearch 기반 사용자 정의 필터 시스템 구축

배경: 고객사별 요구사항 증가로 조회 조건이 지속 추가되며 필터 개발 비용 증가, Excel 대체 요구
구현: 키워드, 다중 선택, 날짜 범위 등 필터 유형별 공통 인터페이스를 추상화한 UI 컴포넌트 설계. 파라미터 key 기반 상태 변경으로 필터 간 불필요한 리렌더링 차단
성과: 도메인·API 스펙에 무관하게 확장 가능한 필터 컴포넌트 확보. 신규 필터 요구에 공통 설정만으로 대응해 개발 비용 최소화

Cloudplex Delivery

2023.04 - 2024.11 · 프론트엔드 개발

Multi-CDN Orchestration 플랫폼. 10개+ CDN 벤더 리소스 통합 관리 및 DNS 기반 라우팅 정책으로 트래픽 제어.

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

1. Cloudplex Monorepo 환경 구성

배경: CPD-Admin, Cloudplex Launcher 등 동일 저장소 내 여러 앱이 공유하는 UI·유틸 공통 모듈화 필요
성과: 공통 UI·유틸리티를 별도 패키지로 분리해 여러 앱에서 재사용하고 변경을 단일 지점에서 관리, Yarn Berry PnP로 유령 의존성 차단

2. CDN 실시간 모니터링 페이지 개발

배경: 스트리밍 서비스의 CDN 상태를 실시간 모니터링하는 화면. provider별 1분 단위 집계 지표(hit rate, error rate 등)를 차트로, 최신 구간은 상단 테이블로 표시
구현: provider별 집계 지표를 주기적으로 폴링하고, Publish-Subscribe 패턴으로 갱신된 데이터에 연결된 구독자 컴포넌트에만 변경을 전파해 차트·테이블 중 해당 부분만 재렌더링
성과: 다수 provider의 지표가 주기적으로 갱신되는 화면에서 전체 리렌더링을 피해, 장시간 띄워두는 모니터링 환경에서도 렌더링 비용과 메모리 증가를 억제

3. Terraform 기반 배포 인프라 코드화

배경: AWS 환경 통합 과정에서 기존 배포 리소스(CodeBuild, S3 등)를 코드로 재구성할 자동화 방식 필요
성과: AWS 배포 리소스를 Terraform 코드로 관리해 동일 배포 환경을 명령어로 재현, 배포 일관성 확보 및 설정 실수 최소화

개인 프로젝트

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

사내에서 하루 100명 이상이 실사용하는 식단 서비스를 직접 기획·개발·운영. 데이터 수집부터 Slack·MCP 연동까지 자동화로 운영 부담 최소화.

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

구내식당 업체 앱 분석으로 매주 메뉴 업데이트 fetcher 구현
Google News RSS 기반 뉴스 수집 : 메가존 계열사 키워드 검색, RSS XML 파싱, GitHub Actions Cron 자동 갱신 처리
Slack App : 슬래시 커맨드로 오늘 - 글피 식단 응답, Cron 캐시 워밍으로 응답 지연 방지
MCP 서버 : stdio·Streamable HTTP 이중 트랜스포트로 식단 데이터를 LLM 에이전트에 제공

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

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

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

CLI Terminal : Lexer → Parser → Executor 파이프라인으로 Shell을 재현한 터미널
Guestbook : Cloudflare Turnstile 봇 검증, IP·UA HMAC-SHA256 핑거프린팅 스팸 추적, IP 기반 Rate Limit으로 어뷰징 차단
Blog / Project : Next.js Metadata API 기반 canonical·hreflang·JSON-LD·동적 OG 카드 자동 생성 SEO 파이프라인
AI Chat : Google Gemini + Vercel AI SDK 실시간 챗봇

NThing — 위치 기반 묶음 상품 나눔 소셜앱 (배포 준비 중)

플랫폼별 WebView 제어와 네이티브 브릿지로 웹 기술 기반 모바일 앱 구현.

사용 기술: (Mobile) React, Vite, Capacitor 8, TypeScript, Tailwind CSS, Zustand, TanStack Query, FCM · (Server) Kotlin·Spring Boot, PostgreSQL + PostGIS · (Infra) AWS, Docker, Terraform, GitHub Actions

WebView 하드닝 : 플랫폼별 웹뷰 동작 제어로 네이티브 UX 구현
네이티브 연동 : Capacitor로 Camera·Geolocation·Push 등 디바이스 기능 브릿지
소셜 로그인 : 카카오·네이버·구글·애플 OAuth + 딥링크 복귀

학력

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

수상/자격증/기타

SQL 개발자(SQLD) · 2023.04

언어

영어: 비즈니스 레벨
TOEFL: 99 (2021.10.09)
TOEIC: 905

Email: hongsoohyuk@icloud.com

GitHub: github.com/hongsoohyuk

Homepage: hongsoohyuk.com