홍수혁 레주메

현재 메가존클라우드에서 프론트엔드 개발을 담당하면서 성능과 유지보수성을 고려한 아키텍처 개선에 집중하고 있습니다. Vite 번들러 도입, 모노레포 기반 구조 개편 등 작업을 통해 번들링 사이즈 49.8% 감소(12,884 kB → 5,480 kB), 사용자 상호작용 당 평균 렌더링 시간 95% 단축(47.9ms → 2.15ms), 개발 실행 속도를 최대 100배 향상시키는 등 성과를 주도하여 만들어낸 경험이 있습니다.

또한 코드 리뷰 문화 정착을 주도해, 문제 해결 사례를 공유하여 코드 품질을 높이고 팀이 함께 성장할 수 있는 기반을 마련하였으며, AI 도구에 리뷰 규칙을 제공해 리뷰 프로세스 효율성을 높이기도 하였습니다.

단기적 문제 해결에 그치지 않고, 적절한 자료구조와 디자인 패턴을 적용해 유사한 문제가 반복되지 않도록 고민합니다. 단순히 코드를 잘 작성하는 것을 넘어, 조직이 직면한 문제를 구조적으로 해결해 비즈니스 성과로 연결하는 개발자가 되고자 합니다.

기술 스택

Language: TypeScript, JavaScript
Framework / Library: React, Next.js, Vite, Tailwind CSS
State / Form: Zustand, React Hook Form, Zod, TanStack Query
UI: Shadcn, MUI
Test: Playwright
Package Manager: Yarn Berry PnP (Monorepo), pnpm
Infra / CI·CD: AWS (S3, CloudFront, CodeBuild, CodePipeline, ECS), Terraform
Tools: Git, Jira, Confluence, Figma

경력

메가존클라우드

재직 기간: 2023.04 - 재직중 (3년)
직무: 프론트엔드 개발

BillOne

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

BillOne은 메가존클라우드의 멀티 클라우드 빌링/정산 플랫폼입니다. GCP, Datadog 등 CSP 리셀러 비용 정산 업무를 관리하는 사내 백오피스 시스템입니다.

사용 기술: React, TypeScript, Vite, TanStack Router, TanStack Query, Shadcn, Tailwind, Zustand, React Hook Form, Zod

주요 기여

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

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

2. Playwright + AI Skills 기반 E2E 테스트 환경 구축 주도

배경: 팀 내 프론트엔드 E2E 테스트 환경 부재, 주요 조회 페이지 및 분기 케이스의 회귀 검증을 수동 QA에만 의존
구현: Playwright CLI 기반 테스트 환경을 자체 구축하고, Claude Skills 에 테스트 작성 규칙을 정의하여 AI 도구가 페이지 스펙을 읽고 테스트 케이스를 생성·보완하는 워크플로우 확립
성과: 주요 조회 플로우 및 분기 케이스에 대한 반복 검증 자동화. AI 도구와 개발자가 협업해 테스트를 작성하는 패턴을 팀 내 선례로 제시

3. Google Sheets 연동 i18n 자동화 파이프라인 및 타입 안전성 확보

배경: 다국어 리소스를 개발자가 JSON 파일에 수동 입력하는 방식은 비개발 직군(PM, 기획자)의 번역 기여가 불가능한 병목 구조
구현: Google Spreadsheet를 다국어 리소스의 Single Source of Truth로 설정하고, Google 서비스 계정 OAuth2 인증 기반의 pull 스크립트를 구현. 시트별 namespace로 구분되며, camelCase 키 검증, 중복 키 탐지, 언어별 미번역 항목 리포트를 출력. 코드 레벨에서는 resources as const + namespace 추론으로 t() 함수의 키를 타입 레벨에서 제한하여 any 캐스팅을 완전 제거
성과: 비개발 직군이 스프레드시트에서 직접 번역을 관리하고, 개발자는 pnpm i18n:pull 한 줄로 동기화하는 워크플로우 확립. 타입 안전한 키 참조로 런타임 i18n 키 오류 방지

SaaSOps

2024.11 - 2026.01 | 프론트엔드 개발

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

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

주요 성과 요약

번들링 사이즈 49.8% 감소(12,884 kB → 5,480 kB), 렌더링 시간 95% 단축(47.9ms → 2.15ms), 개발 실행 속도 최대 100배 향상
MVVM 패턴 도입으로 중복 코드 30% 감소
TypeScript + OpenAPI Generator 도입으로 API 타입 자동 생성 파이프라인 구축

주요 기여

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

배경: SaaS 계약 및 지출 관리 목록 페이지에서 고객별 맞춤형 데이터 제공 한계 및 Excel 대체 요구
구현: 키워드, 다중 선택, 날짜 범위 등 다양한 유형의 필터 UI를 추상화하고, OOP 원칙 기반의 공통 UI 컴포넌트 설계. 파라미터 key 값 기반 상태 변경으로 불필요한 렌더링 방지
성과: 도메인 및 API 스펙에 관계없이 확장 가능한 필터 컴포넌트 설계. 사용자 정의 필드 기반 동적 필터링 기능에 손쉽게 대응하여 UI 및 API 연동 개발 비용 최소화

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

배경: 카드 승인 내역 및 인보이스 등 다양한 Source를 통한 비용 등록 기능 개발 중 공통 UI/비즈니스 로직 혼재로 인한 컴포넌트 재사용성 저하
구현: 관심사 분리를 위한 MVVM 패턴 도입, Form 상태를 ViewModel에 위임하여 UI 로직과 비즈니스 로직 분리
성과: 중복 코드 30% 감소를 통한 유지보수성 및 확장성 크게 개선. 이후 비용 입력 기능 전반에 동일 구조 적용

3. TypeScript 및 OpenAPI Generator 도입 주도

배경: 기존 JavaScript 코드베이스의 타입 안정성 부족 및 유지보수성 저하, 빈번한 API 데이터 모델 변경에 대한 자동화된 대응 필요
성과: OpenAPI Generator 를 통해 명세서 기반 interface 및 type 자동 생성, 백엔드 개발자와의 커뮤니케이션 비용 절감 및 개발 속도 향상

4. Vite 번들러 도입으로 개발 환경 실행 속도 향상

배경: Webpack 기반 환경의 의존성 과다, 방대한 코드로 인한 느린 빌드 속도 및 개발 생산성 저하
성과: Vite 번들러 도입으로 로컬 개발 환경 실행 속도 최대 100배 개선. 브라우저 ES Module 활용을 통한 빌드 속도 및 HMR 반응성 개선. 프론트엔드 챕터 내 기술 공유 문화 활성화 기여

Cloudplex Delivery

2023.04 - 2024.11 | 프론트엔드 개발

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

사용 기술: React, TypeScript, React Query, Yarn Berry (PnP), Terraform

주요 기여

1. Cloudplex Monorepo 환경 구성 주도

배경: CPD-Admin, Cloudplex Launcher 등 동일 코드 저장소 내 디자인 시스템 및 비즈니스 로직이 포함된 UI 공통 모듈화 필요
성과: 공통 UI 컴포넌트 및 유틸리티를 개발하여 여러 프로젝트에서 일관성 있게 사용 가능하도록 구성. Yarn Berry PnP를 통해 유령 의존성 해결 및 패키지 관리 최적화

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

배경: 스포츠 중계 등 장시간 스트리밍 이벤트를 위한 실시간 CDN 상태 모니터링 및 라우팅 정책 실시간 수정 기능 필요. 25분 분량의 분 단위 데이터 시각화 요구
구현: CDN 제공사의 실시간 데이터 지연으로 인해 Polling 방식으로 데이터 지속 수집 및 업데이트 구현. Publish-Subscribe 패턴 도입으로 1분마다 새로운 데이터 요소에 Subscriber 바인딩, API 데이터 갱신 시 연결된 구독자 컴포넌트에만 변경 이벤트 전파하여 필요한 부분만 재렌더링
성과: 대량 데이터 표현 시 브라우저 부하 최소화. 장시간 실시간 모니터링 환경에서도 안정적인 성능과 사용자 경험 제공

3. Terraform 기반 CI/CD 파이프라인 구축

배경: AWS 환경 통합 과정에서 기존 리소스(CodeBuild, S3 등) 동일 사양 재구성 필요. 자동화된 인프라 구축 방식 필요
성과: Terraform을 이용해 AWS 배포 리소스를 코드로 관리. CPD-Admin 및 CP-Launcher 등 동일 배포 라인을 명령어로 손쉽게 재현. 배포 일관성 확보 및 인프라 설정 과정의 실수 최소화

사이드 프로젝트

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

구내식당 메뉴 확인의 불편을 해결하기 위해 업무 외 시간에 개발·배포한 웹 서비스.

하루 100명 이상 사용하는 사내 서비스로 자리 잡았으며, 데이터 수집 자동화, Slack App 연동, MCP 서버 제공 등 지속적인 고도화.

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

Next.js 16 + React 19 기반 풀스택 개인 사이트

AI Chat : Gemini + Vercel AI SDK, SSE 기반 실시간 스트리밍 응답
CLI Terminal : 웹 기반 인터랙티브 터미널, vim 에디터 · 가상 파일시스템
Guestbook : Supabase + Server Actions, Turnstile 봇 방어
Blog / Project : Notion API CMS, ISR 기반 자동 콘텐츠 갱신
Architecture : Bulletproof React 패턴, 확장성 · 유지보수성 중심 설계

사용 기술: Next.js, React, Vercel AI SDK, SSE, Notion API, Spotify API, TanStack React Query, Supabase

학력

명지대학교 | 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