WIREFRAME이력서 와이어프레임 — /about 화면 구조
titleblock
RESUME · FRONTEND ENGINEER
김용희
5년차 · 광고 결제·B2B · 웹뷰·AI 업무 적용
github · velog · 명판(EXP/STATUS/TEAM/BASE)
대표 경험
광고 결제
CPC 이용내역 · 충전·차감·환불·증빙
기업 고객 업무
복합 검색 · 조건 저장 · 제안·발송 상태
웹뷰·행동 데이터
광고 연동 · 세션 유지 · 이벤트 정규화
업무에 적용한 AI
대화형 인재 추천 · 서비스 오류 수정·검증
tabs (sticky)
요약경력 10프로젝트 3스택이력
summary · 2축
광고 결제·기업 고객 업무와 AI 적용
PRODUCT FE
광고 결제·검색·웹뷰·행동 데이터
APPLIED AI
대화형 인재 추천·서비스 오류 수정·검증
career ×10
담당 업무 · 설계 · 구현·운영 결과
CPC 광고 결제 · 충전·사용·환불FE
잡코리아 인재검색 구축 · 마이그레이션FE
대화형 AI 인재 추천 서비스AI
웹뷰 광고 연동 · 세션·행동 데이터FE
알바몬 앱인토스 · React Native 출시FE
알바몬 공고 탐색 · 검색 구조 재설계FE
업무 허브 · AI 코드 수정AI
야간 자동 이슈 처리AI
Claude Code 개발 하네스AI
메타 지식베이스AI
projects ×3
RN Network Debugger solo
Biolem · 시간의무덤 iOS App Store 출시 완료
사내 맛집 지도 · 점메추 team
stack.json
"ai · dx": Claude Code / MCP · Harness Engineering · Chrome Extension (CDP) · CLI · Hooks
"frontend": React · Next.js · TypeScript · React Native · React Query · Zustand · Turborepo · SSE / Streaming · Playwright
"backend · infra": Node.js · NestJS · PostgreSQL · Docker · AWS (EC2 · RDS · S3) · GitHub Actions · GitLab · MR / Issue Queue
"analytics · tools": GA / GTM · Braze · AppsFlyer · Sentry · Datadog · Grafana · Hotjar · Figma · Jira · Notion · Slack
misc.log
웍스피어 (Worxphere) · 구 잡코리아 & 알바몬 · 2022.06 — 현재
정보처리기사 · 2024.09
링커스타 수상 · 2023.07
SSAFY 6기 · 삼성 청년 SW 아카데미 · 2021.07 — 2022.06
가톨릭대학교 컴퓨터정보공학부 · 2021.02

RESUME · FRONTEND ENGINEER · JK/AM 기업 프로덕트

김용희

5년차 프론트엔드 엔지니어. 광고 결제와 기업 고객의 업무 흐름을 만듭니다. 웹·웹뷰·React Native의 상태·성능·행동 데이터를 다루고, 대화형 AI 인재 추천 서비스의 프론트엔드와 서비스 오류 수정·검증 자동화를 구현했습니다.

EXP5Y · 2022.06 ~
STATUS재직중
TEAMJK/AM 기업 프로덕트
BASESeoul, KR
광고 결제
CPC 이용내역 · 충전·차감·환불·증빙
기업 고객 업무
복합 검색 · 조건 저장 · 제안·발송 상태
웹뷰·행동 데이터
광고 연동 · 세션 유지 · 이벤트 정규화
업무에 적용한 AI
대화형 인재 추천 · 서비스 오류 수정·검증
~/about $ cat summary.md

광고 결제·기업용 서비스를 설계·운영하고, 대화형 AI 인재 추천과 서비스 오류 처리 자동화를 구현했습니다.

PRODUCT FE
광고 결제 · 기업 고객 업무
payment · search · webview · analytics
자금 상태 · 검색·제안 · 광고 연동 · 사용자 행동
APPLIED AI
대화형 AI 인재 추천 · 오류 처리 자동화
widgets · issue queue · validation · review
대화로 조건 입력·인재 추천 · 서비스 오류 수정·검증
제품 개발·운영

CPC 광고 결제 — 충전·차감·환불·증빙 화면과 과금 API 연동, 결제 SDK 크래시 원인 분석·수정 반영

기업회원 인재검색 — 복합 필터·검색조건 저장·면접 제안 상태, 데이터 API·BFF 구조로 전면 이관

웹뷰 — 광고 삽입·iOS 새 창 문제 해결, 로그인 세션 유지와 분석 이벤트 정규화

탐색·지원 — RN 미니앱 단독 출시, 지도·필터·URL 정합성과 목록 성능·오류 복구 개선

AI를 적용한 업무

대화형 AI 인재 추천 — 채용 조건을 입력하고 추천 결과를 확인하는 프론트엔드 개발, 실시간 응답·위젯·인증·결제 연결

서비스 유지보수 — 오류·개발 요청을 한 화면에서 조회하고, 선택한 작업을 AI 코드 수정·테스트·빌드·리뷰 요청으로 연결

야간 오류 처리 — 미해결 오류를 큐에서 처리하고, 실제 머지 상태를 기준으로 협업 도구의 작업 상태 동기화

실행 기반 — 사내 저장소 2곳에 수정 권한·완료 조건을 적용하고, 필요한 규칙·출처를 찾는 지식 검색 도구 구축

~/about $ ls ~/career/
웍스피어 (Worxphere) · 구 잡코리아 & 알바몬
Frontend Engineer → AI Platform Engineering → JK/AM 기업 프로덕트팀 · 2022.06 ~ 현재
Product FE AI 서비스·개발 자동화
CPC 광고 결제 · 충전·사용·환불
CPC · PAYMENT

광고 상품의 충전·차감·환불·세금계산서·선결제까지 프론트엔드를 구현했습니다. 화면과 함께 결제 상태, 예외 처리, API 연결을 설계했습니다.

  • 충전 포인트의 내역·충전·환불·소멸 예정, 전자세금계산서, 클릭당 과금(CPC) 광고 이용내역, 선결제까지 화면군 5종 신규 구현
  • 결제 SDK 충전 플로우 훅 설계 — 충전요청 생성 → 결제창 호출 → 결과 분기, UX 엣지케이스 처리 · 광고 과금 API 레이어(BFF) 설계
  • 번들 트리셰이킹 오판으로 인한 결제 SDK 크래시 원인 규명 → 회피 설정 → SDK 반영 후 회피 제거까지 완결, 결제 정책·상태 전이 정본 문서화
충전·차감·환불·계산서자금 흐름 전 구간
잡코리아 인재검색 구축 · 마이그레이션
SEARCH · MIGRATION

잡코리아의 인재 검색·제안 서비스를 신규 구축하고, 인재 데이터 연동을 BFF·신버전 API 구조로 전면 이관했습니다. 검색조건 저장과 제안·통보의 발송 상태까지 함께 다뤘습니다.

  • 추천 인재 섹션 · 산업/고용형태 필터 · and/or/not 연산자 검색 · 검색조건 저장 기능 구현
  • 인재 데이터 API를 신버전으로 전면 이관하고 검색 요청을 BFF 경유 구조로 전환 — 구버전 코드를 격리한 뒤 점진 제거하는 마이그레이션 수행
  • 저장된 검색조건이 사라지는 버그 7건 이상 근본 수정
  • 면접 제안·결과 통보 기능 구현 — 발송 상태를 모델링하고 중복 발송 방지 적용
신규 구축인재 검색·제안 서비스전면 이관인재 데이터 API · BFF 경유 구조7건+검색조건 유실 근본 수정
대화형 AI 인재 추천 서비스
AI · LLM

채용 담당자가 대화로 조건을 입력하면 AI가 인재를 추천하는 서비스의 프론트엔드를 개발했습니다. 추천 응답을 실시간으로 표시하고, 위젯의 사용자 행동과 인증·결제를 연결했습니다.

  • SSE 스트리밍 · URI 기반 위젯 라우팅 위에서 위젯 UI와 onAction 핸들러(사용자 인터랙션 → 백엔드) 구현
  • LLM 마크다운 응답을 커스텀 컴포넌트로 렌더링 — 코드 하이라이팅·테이블·리스트
  • GTM/GA 이벤트 설계(위젯 클릭·세션 시작·전환) 및 본인 인증 · PG 결제 플로우 구현
Next 15 · React 19Turborepo 모노레포
웹뷰 광고 연동 · 세션·행동 데이터
WEBVIEW · DATA

iOS·Android 앱 안의 웹뷰에서 화면 이동·로그인 상태·행동 데이터가 이어지도록 앱-웹 연결과 세션, 분석 도구 연동을 안정화했습니다.

  • 앱 브릿지·딥링크 기반 앱-웹 연동, Access/Refresh Token 세션 유지 개선으로 로그인 끊김 해결
  • 이벤트 정규화 및 GA · Braze · AppsFlyer · Hotjar 연동, 카카오 애드핏 DSP 광고 삽입(iOS 새 창 이슈 해결)
알바몬 앱인토스 · React Native 출시
SOLO · RN

공고 탐색부터 지원내역까지 React Native 미니앱으로 구현했습니다. 프론트엔드 단독으로 설계·개발·배포·QA를 맡고, 출시 후 성능과 오류 복구까지 개선했습니다.

  • 기존 운영 BFF를 재사용해 공고·필터·상세·지원·지원내역·스크랩 출시 — 기능 확장을 고려해 FSD로 화면·기능·도메인의 역할 분리
  • Phase 2에서 목록 렌더링과 반복 요청을 각각 개선 — FlashList·무한스크롤로 메모리 사용량 90% 감소, 캐싱으로 조회 데이터를 재사용해 네트워크 요청 70% 감소
  • API 응답 파싱 실패 시 가능한 기능을 유지하거나 대체 처리 — HTTP Client에서 오류를 공통 처리하고, 오류 코드별 화면 전환·스택 초기화로 네비게이션 상태 복원
  • 토스 인가코드 발급 전용 페이지 제공 — 통합인증·백엔드팀이 개발계에서 프론트 개발자 없이 독립 테스트할 수 있도록 지원
  • RN QA 이슈 153건 이상 대응 — 이 중 140건을 4일간 처리하며 출시·운영 품질 개선
단독 출시RN 프론트엔드 설계·개발·배포153건+RN QA 이슈 대응독립 테스트통합인증·백엔드팀 지원
알바몬 공고 탐색 · 검색 구조 재설계
SEARCH · APPLY

공고 탐색 UI와 AI 추천 탐색을 적용하면서, 지도·필터·URL·서버 결과의 검색 조건을 일치시키도록 구조를 재설계했습니다. 뒤로가기와 조건 변경 시 발생하던 레거시 오류도 근본 원인을 찾아 수정했습니다.

  • 단일 필터를 다중 필터 추가·조회·수정·삭제 구조로 전면 재설계하고, 공고 탐색 UI 개선·AI 추천 탐색 적용
  • 네이버 지도 API의 동(dong) 정보를 시·군·구 행정코드로 변환하는 매핑 로직 설계·구현 — CDN 사전 적재 후 추가 API 호출 없이 프론트에서 변환하고, 위경도·행정코드·반경을 하나의 검색 컨텍스트로 묶어 백엔드에 전달
  • 쿼리스트링 유무와 관계없이 서버를 조회하도록 변경해 검색 조건과 결과의 정합성 확보 — 필터 저장·닫기의 URL 상태를 분리하고, 뒤로가기 시 사용자 의도에 맞는 히스토리 복원
  • QA 이슈 200여 건 분석·해결 및 34개 채용관의 숨은 엣지 케이스 발굴·대응 — 히스토리 추적으로 레거시 오류의 근본 원인 확인
  • Zustand로 검색 페이지 8→1 통합, React Query 무한스크롤 재설계로 목록 CRUD 렌더링 지연 4→0.52초 단축 — 원클릭·다중 지원 개선 후 지원률은 전년 대비 42% 증가
  • 사내 공통 코드 API 전환과 장애 시 자동 전환(Fallback) 구조 설계
추가 호출 없음CDN 사전 적재 후 지역 코드 변환200여 건QA 이슈 분석·해결34개 채용관숨은 엣지 케이스 발굴·대응
업무 허브 · AI 코드 수정
AI DX · WORK HUB

Sentry · Jira · Notion · GitLab의 작업을 한 화면에 모으고, 담당자가 선택하면 AI 코드 수정 → 테스트·빌드 → 리뷰 요청까지 자동으로 진행하도록 구축했습니다.

  • Sentry · Jira · Notion · GitLab의 오류·업무 요청·기획 내용을 한 화면에 모아, 도구마다 접속해 내용을 찾고 대조하던 수작업을 줄임
  • 담당자가 작업을 선택하면 AI 코드 수정 → 테스트·빌드 → 코드 리뷰 요청까지 자동 진행하도록 구축 — 최종 반영은 사람이 검토·승인
  • 사내 웹에서는 업무 정보만 조회하고, 코드 변경은 본인 PC에서만 시작할 수 있도록 조회·실행 권한 분리
4 → 1시스템 → 조회 화면본인 PC코드 변경 시작사람 승인최종 반영
야간 자동 이슈 처리
AI OPS · NIGHT SHIFT

Sentry가 수집한 서비스 오류를 밤사이 AI가 수정하고, 자동 검증을 거쳐 코드 리뷰 요청까지 생성하도록 구축했습니다. 다음 날 담당자가 변경 내용을 검토하고 반영합니다.

  • Sentry 미해결 오류만 작업 대상으로 수집하고 GitLab 이슈 큐에 등록 — 오류 분류·이슈 등록과 코드 수정의 역할 분리
  • 작업을 실행하는 러너 2개 병렬 운영 — 락·실행 전 검사·작업 목록 1회 고정·연속 2건 차단 시 중단 조건을 두고, 이슈마다 새로운 작업 맥락으로 수정·검증·리뷰 요청
  • GitLab ↔ Notion ↔ Sentry 3시스템 상태 전이·멱등성 설계 — 실측(11건 중 3건 라벨 방치) 후 MR state 기반 머지 동기화 단계 추가
  • 야간 무인 실행 금지 규칙 10종(직접 push · 게이트 우회 · 이슈 신규 생성 · 자동 머지) — 머지는 사람만
4평일 자동 루틴2러너 레인 · 병렬0자동 머지 — 머지는 사람만파이프라인 상세 →
Claude Code 개발 하네스
AI DX

AI가 프로젝트 규칙을 적용하고 수정 범위와 작업 종료 조건을 지키도록, 규칙·도구·권한·검증 절차를 묶은 실행 환경을 사내 프론트엔드 레포 2곳에 설계·구축했습니다.

  • 규칙·에이전트·스킬·훅·상태 저장소 연결 — 에이전트·스킬 40개 이상을 구성하고 설계·구현·리뷰 3역할의 권한 분리
  • 실행 중 규칙을 검사하는 훅 7종 — 레거시 편집·파괴적 명령을 차단하고, 마무리 파이프라인을 실행하지 않으면 작업 종료 차단
  • 자가개선 루프(마찰 데이터 → 회고 → 백로그 → 실행)로 개선 15건 완료, 타 레포 이식 5단계 가이드 정립
  • 구축 4일 만에 스킬·문서 체계를 단순한 구조로 재편·축소 — 만들고, 운영하며 덜어내는 사이클로 유지
2개 레포사내 구축·이식7종실행 중 검사 훅15건운영 개선 완료구조 상세 →
메타 지식베이스
AI DX · KNOWLEDGE BASE

개발자가 작업에 필요한 규칙을 검색하면 관련 본문·출처·검토 상태와 함께 읽어야 할 문서를 확인할 수 있도록, 문서 형식과 조회·검증 도구를 설계·구현했습니다.

  • 문서마다 적용 대상·출처·검토 상태를 기록하고, 본문을 ID가 붙은 작은 단위로 나눠 필요한 부분만 읽도록 구성
  • 문서 검색·부분 읽기·선행 규칙 조회 CLI 구현 — 함께 확인해야 할 문서를 따라가고 누락·순환 참조를 표시
  • 문서 형식과 연결 오류를 검사하고, 검색 로직이 바뀐 뒤에도 같은 질문으로 필요한 문서를 찾는지 확인하는 평가 흐름 설계
~/about $ ls ~/projects/
chrome-extension · cdpsolo
RN Network Debugger

React Native CLI에 네트워크 탭이 없는 문제를 Chrome DevTools Protocol로 해결. WebSocket Proxy(Node) + Android(OkHttp Interceptor) + iOS(URLProtocol) 3계층.

TypeScript · Node.js · Kotlin · Swift
react-native · kotlin · awsiOS 출시 완료
Biolem · 시간의무덤

사진·장소·생각과 글귀를 남기고 지도와 달력으로 돌아보는 개인 기록 앱입니다. React Native 앱과 Kotlin·Spring Boot API 서버를 개발했습니다.

개발 범위 보기
  • 모바일 앱 — React Native로 사진·장소 기록과 생각·글귀 작성, 지도·달력 조회를 구현했습니다. 장소 기록은 서버에, 생각·글귀는 기기에 계정별로 저장하도록 구성했습니다.
  • 서버 · 배포 — Kotlin·Spring Boot로 인증·기록·이미지 API를 구현했습니다. GitHub Actions에서 Docker Compose를 실행해 AWS EC2에 서버를 자동 배포하도록 구성했습니다.
  • iOS 출시 — Xcode 배포 과정의 심볼·권한 오류를 해결하고 App Store에 출시했습니다.
React Native · TypeScript · Kotlin · Spring Boot · PostgreSQL · AWS · Docker · GitHub Actions
react · viteteam
사내 맛집 지도 · 점메추

퇴근 후 동료들과 런칭한 잡코리아/알바몬 맛집 지도·점심 메뉴 추천 사이트. PO 겸 개발.

React 19 · BiomeJS · Vite · GitHub Actions
~/about $ cat stack.json
{
"ai · dx":Claude Code / MCPHarness EngineeringChrome Extension (CDP)CLI · Hooks
"frontend":ReactNext.jsTypeScriptReact NativeReact QueryZustandTurborepoSSE / StreamingPlaywright
"backend · infra":Node.jsNestJSPostgreSQLDockerAWS (EC2 · RDS · S3)GitHub ActionsGitLab · MR / Issue Queue
"analytics · tools":GA / GTMBrazeAppsFlyerSentryDatadogGrafanaHotjarFigmaJiraNotionSlack
}
~/about $ cat misc.log
work웍스피어 (Worxphere) · 구 잡코리아 & 알바몬Frontend → AI Platform Engineering → JK/AM 기업 프로덕트팀 · 재직중2022.06 — 현재
cert정보처리기사국가공인 자격증2024.09
award링커스타 수상기획·디자인·QA·백엔드·네이티브·프론트 팀과의 협업 능력 인정2023.07
eduSSAFY 6기 · 삼성 청년 SW 아카데미웹 전공 수료2021.07 — 2022.06
edu가톨릭대학교 컴퓨터정보공학부졸업2021.02