김용희

김용희

Frontend Engineer

4년차 프론트엔드 엔지니어. Mobile·PC·크로스플랫폼 환경에서 웹·웹뷰·앱 경계의 문제를 구조적으로 해결합니다. 단순 구현에 그치지 않고, 앞으로 발생할 수 있는 문제를 선제적으로 고민하며 구조를 설계합니다. 현재는 AI Platform Engineering 팀에서 LLM 기반 AI 에이전트 프론트엔드를 개발하며, SSE 스트리밍·위젯 시스템·인증·결제·마크다운 렌더링 및 GA/DMP 연동 개발을 진행하고 있습니다.

4Y+

경력

3

크로스플랫폼

6+

담당 도메인

12+

핵심 프로젝트

Tech Stacks

Languages

TypeScriptJavaScript (ES6+)HTMLCSS / SCSSBash

Frameworks & Libraries

React.jsNext.jsReact NativeReact QueryTurborepoNest.jsReduxZustandSSE / Streaming

Collaboration & Tools

Git / GitLabFigmaJiraJenkinsSwagger/ScalarSupabaseDbeaverClaude Code / MCPHarness Engineering

Analytics & Monitoring

Google AnalyticsBrazeDatadogHotjar
🚀

Key Projects · WorxPhere (구 잡코리아&알바몬)

AI Agent 프론트엔드 · LLM 기반 대화형 서비스

AI · LLM

LLM 기반 AI 에이전트 서비스 프론트엔드 개발.
모노레포(Turborepo) 기반 에이전트(채용 담당자용) 웹의 전체 아키텍처(SSE 스트리밍, 위젯 시스템, 5-Layer 구조)를
이해한 상태에서 위젯·마크다운·인증·결제·Analytics 개발 담당.
Next.js 15 App Router + React 19 + TypeScript 기반.

  • 위젯 개발·수정 — URI 기반 위젯 라우팅 시스템 위에서 위젯 UI 구현 및 onAction 핸들러를 통한 사용자 인터랙션 → 백엔드 전송
  • 마크다운 렌더링 — LLM 응답의 마크다운 텍스트를 커스텀 컴포넌트로 렌더링, 코드 하이라이팅·테이블·리스트 등 서식 지원
  • Google Tag Manager / GA 연동 — 대화 흐름별 사용자 행동 추적, 위젯 클릭·세션 시작·전환 등 핵심 이벤트 설계 및 데이터 파이프라인 연동
  • 인증·결제 플로우 — 지원자 정보 확인 전 채용 담당자의 본인 인증 및 PG 결제 연동을 통한 상품 주문 처리 프론트엔드 구현
6+SSE기반 AI Agent의 위젯 플로우 이해

토스 미니앱 · 알바몬 앱인토스 입점

SOLO DEV

프론트엔드 단독 개발 — 구조 설계부터 개발, 배포, 트러블 슈팅까지 전 과정 담당.
토스 미니앱에 알바몬 핵심 로직(공고 리스트, 공고 필터, 공고 뷰, 지원하기, 지원 내역, 스크랩 리스트)을 기존 운영 BFF를 활용하여 React Native로 개발·런칭.

  • FSD 아키텍처 적용으로 앱 확장성을 고려한 구조 설계
  • 토스 인가코드 발급 전용 페이지 제공 — 통합인증팀·백엔드팀이 프론트 개발자 없이도 개발계에서 독립 테스트 가능
  • 4일간 140건 RN QA 이슈 트러블 슈팅 완료 (일평균 35건)
153+건 트러블 슈팅

앱인토스 Phase 2 · 성능 최적화

PERFORMANCE

카테고리 개편과 함께 성능 및 안정성 전면 개선.
FlashList + 무한스크롤 적용으로 메모리 사용량 대폭 절감, 인텔리전트 캐싱 전략으로 네트워크 요청 감소.

  • API 응답 파싱 실패 시 graceful degradation 구현
  • HTTP Client 레벨 중앙 집중식 에러 처리 + 에러 코드 기반 타입 안전한 자동 라우팅 분기
  • 에러 발생 시 스택 초기화를 통한 네비게이션 상태 복원
  • PM 페이지 전환 요청 대응 — 앱인토스 전체 페이지에서 PM 에러 파싱으로 알바몬 PM과 일치성 보장
90%메모리 절약
70%네트워크 요청 감소

공고 필터 검색 고도화

ARCHITECT

공고 탐색 전체 UI 개선 및 AI 추천 탐색 적용.
기존 단일 필터 검색 구조를 다중 필터 CRUD 구조로 전면 재설계.
지도 기반 반경 검색(위경도)과 기존 행정코드 기반 검색 간 정합성 문제 해결.

  • 네이버 지도 API의 동(dong) 정보를 시·군·구 행정코드로 변환하는 매핑 로직 설계·구현
  • CDN 사전 적재로 추가 API 호출 없이 프론트에서 변환 처리
  • 위경도 + 행정코드 + 반경을 하나의 검색 컨텍스트로 통합하여 백엔드에 전달
34개채용관 검색 고도화

Code-Hub API 전환 · 이중화

ARCHITECT

시군구·업직종 데이터 소스를 Code-Hub API로 전환 (알바몬 최초 적용).
운영 CORS 이슈 등 잠재 위험에 대비해 Fallback API 아키텍처 설계.

  • Primary(Code-Hub) 실패 시 기존 API로 자동 전환
  • 서로 다른 API 스펙에 대한 통합 데이터 파싱 레이어 개발로 무중단 서비스 보장

검색 라우팅 구조 전면 개선

OPTIMIZE

레거시 뒤로가기 오류 근본 원인 분석 및 해결.
쿼리스트링 기반 상태 관리 로직 재설계.

  • 기존 쿼리스트링 존재 시 서버 조회 없이 적용되던 방식을 모든 경우 서버 조회로 변경하여 데이터 정합성 확보
  • 검색필터 저장/닫기 시 쿼리스트링 분리 관리, 뒤로가기 시 사용자 의도에 맞는 히스토리 복원

탐색 대규모 QA 이슈 해결 및 엣지 케이스 발굴

총 200여 개의 QA 이슈 분석·해결 및 34개 채용관별 히든 엣지 케이스 발굴·대응.
히스토리 추적을 통한 레거시 이슈 근본 원인 파악 및 개선.

200+QA 이슈 해결
34개채용관 엣지 케이스

알바몬 MSA 프로젝트

OPTIMIZE

Zustand 활용하여 검색 페이지 8개 → 1개로 통합.
상태 관리 구조 재설계로 코드 중복 제거, 유지보수성과 확장성 대폭 향상.

8→1페이지 통합

React Query 성능 최적화

PERFORMANCE

무한스크롤 환경에서 데이터 CRUD 시 렌더링 지연 문제 해결.
useInfiniteQuery 기반 구조 재설계.

4s→0.52s렌더링 지연 단축

알바몬 모든 지원 플로우 개선

IMPACT

모든 채용 공고 지원하기 플로우 개선 (원클릭 지원).
파편화된 상태 관리 일원화, 다중지원 개발.

+42%전년 대비 지원률

크로스 플랫폼 & 웹뷰

iOS, AOS 프레임 기반 크로스 플랫폼 웹뷰 개발.
앱 브릿지, 딥링크 이해 기반 안정적 앱-웹 연동.
Access/Refresh Token 기반 세션 유지 로직 개선으로 로그인 끊김 해결.

Other Contributions

RN Network Debugger · Chrome Extension

SOLO DEV

구글지도 여행기록 앱 개발 과정에서, React Native CLI 환경에서 네트워크 탭이 제공되지 않는 문제를 해결하기 위해 Chrome DevTools Protocol(CDP) 기반 네트워크 디버깅 도구 개발.
WebSocket Proxy(Node.js) + Android Interceptor(Kotlin/OkHttp) + iOS Interceptor(Swift/URLProtocol) 3계층 아키텍처로 구현.

  • WebSocket Proxy Server — Device↔DevTools 간 CDP 이벤트 라우팅, requestId 기반 Response Body 저장 및 TTL 자동 삭제
  • Android: OkHttp Interceptor로 요청/응답 가로채기 → CDP 이벤트(requestWillBeSent, responseReceived, loadingFinished) 전송
  • iOS: URLProtocol 서브클래스로 URLSession 요청/응답 가로채기 → Android와 동일한 CDP 이벤트 플로우
  • 커스텀 CDP 이벤트(TossRN.responseData)로 Response Body를 Proxy에 전달, DevTools에서 getResponseBody 요청 시 반환

Architecture

Chrome DevTools

개발자 UI (Network 탭)

WebSocket CDP :9230

WebSocket Proxy

Node.js · Response Body 저장소

WebSocket :9231

React Native Bridge

Android

OkHttp Interceptor

Kotlin

iOS

URLProtocol

Swift

Network Call

DSP 광고 삽입

알바몬 메인 및 통합검색 카카오 애드핏 광고 삽입.
iOS 새 창 자동 열림 현상 해결.
Lazy Loading 및 조건부 스크립트 실행으로 안정성·성능 최적화.

이벤트 정규화 & Analytics

이벤트 데이터 정규화로 관리 생산성 증가.
Google Analytics, Braze, AppsFlyer, Hotjar 연동 및 오류 개선.
배포 담당.

사내 커뮤니티 프로젝트

PO & DEV

퇴근 후 동료들과 잡코리아/알바몬 맛집 지도 · 점메추 사이트 런칭.
React 19.1, BiomeJS, Vite 6.4, GitHub Actions 활용.

기타 개발

AI TVC 통합 프로모션 런칭 · 기업회원 2단계 인증 · 자동로그인 · KMC 본인인증 연동

📋

Career & Education

💼

웍스피어(Worxphere)
(구) 잡코리아 & 알바몬

AI Platform Engineering (정규직)

2022.06 ~ 현재 재직중

🎓

가톨릭대학교

컴퓨터정보공학부 졸업

2021.02

🏅

SSAFY 6기

삼성 청년 SW 아카데미 · 웹 전공

2021.07 ~ 2022.06

🏆

Awards & Certifications

링커스타 수상

기획·디자인·QA·백엔드·네이티브·프론트 팀과의 협업 능력 인정

2023.07

📜

정보처리기사

국가공인 자격증

2024.09.10

AND — ing