프로젝트 본문으로
DDVERSERESUME

FRONTEND ENGINEER · 5년차

김용희

KIM
YONGHEE

광고 결제부터
기업 고객의 업무까지.

결제·검색·웹뷰의 상태와 사용자 흐름을 설계합니다.
대화형 AI 인재 추천 서비스의 프론트엔드를 개발하고,
서비스 오류 수정·검증을 자동화했습니다.

W.
웍스피어 · 잡코리아 & 알바몬2022.06 — 현재 · JK/AM 기업 프로덕트팀
EXPERIENCE INDEX03 FIELDS
10프로젝트 사례
분야별 프로젝트 보기

수록한 사례의 분야별 구성 · 분야를 선택해 탐색

01 / PROJECT EXPLORER

경력 사례

프로젝트를 선택해 문제, 설계, 결과를 살펴보세요.

10

선택한 프로젝트: CPC 광고 결제 · 충전·사용·환불

01 / 광고 결제 · B2BCASE STUDY

CPC 광고 결제 · 충전·사용·환불

결제가 끝난 뒤의 충전·사용·환불도 일관되게 보여주려면?

5종결제 화면군 신규 구현
전 구간충전·차감·환불·계산서
원인 → 해결결제 SDK 크래시 대응
문제

기업 고객이 CPC(클릭당 과금) 광고를 이용하려면 포인트 충전부터 광고 이용내역·환불·소멸 예정·세금계산서까지 자금 상태를 확인할 수 있어야 합니다.

설계

자금 흐름에 맞춰 화면군 5종과 과금 API 연동(BFF)을 설계했습니다. 충전 요청·SDK 결제창 호출·결과 분기를 공통 훅으로 묶고 예외를 처리했습니다.

동작 구조흐름과 상태의 연결
01사용자가 확인하는 자금 흐름
  1. 충전포인트 충전·선결제
  2. 사용CPC 차감·이용내역
  3. 정산환불·소멸 예정
  4. 증빙전자세금계산서
02결제 요청을 처리하는 구조
충전요청 생성SDK 결제창 호출
성공실패·예외

한 개의 결제 훅에서 요청·호출·결과 분기를 관리합니다.

구조 읽기

위쪽은 돈이 움직이는 과정, 아래쪽은 실제 결제 요청을 처리하는 과정입니다. 각 화면이 이 두 흐름을 함께 다룹니다.

담당 범위
광고 결제 화면군 · 결제 공통 훅 · 과금 API 연동(BFF) · 정책·상태 전이 문서화
구현·운영 결과
충전·차감·환불·증빙·선결제 화면군을 신규 구현했습니다. 트리셰이킹으로 발생한 결제 SDK 크래시의 원인을 규명하고, 회피 설정 적용부터 SDK 수정 반영 후 회피 제거까지 마무리했습니다.
CPC · 클릭당 과금
광고 클릭을 기준으로 비용이 발생하는 과금 방식입니다. 이용내역과 포인트 충전·차감 상태를 연결해 보여줍니다.
결제 SDK
결제사가 제공하는 연동 도구입니다. 결제창 호출과 결제 결과 처리를 돕습니다.
Payment SDKBFF상태 전이예외 처리
02 / 광고 결제 · B2BCASE STUDY

잡코리아 인재검색 구축 · 마이그레이션

검색·제안 서비스를 구축하면서, 기존 데이터 연동을 새 구조로 옮기려면?

신규 구축인재 검색·제안 서비스
전면 이관인재 데이터 API · BFF 경유 구조
7건+검색조건 유실 근본 수정
문제

인재 검색·제안 서비스를 신규 구축하면서 구버전 API 연동을 이관하고, 검색조건 유실과 제안·통보의 발송 상태까지 다뤄야 했습니다.

설계

검색·조건 저장·제안·통보를 구축하고, 인재 데이터 연동을 BFF·신버전 API 구조로 전면 이관했습니다. 구버전 코드는 격리 후 점진 제거했습니다.

동작 구조흐름과 상태의 연결
01 · 서비스 신규 구축

인재 탐색부터 면접 제안·결과 통보까지

  1. 인재 탐색추천 인재 · 복합 필터 · 연산자 검색
  2. 검색조건 저장저장한 조건 유지 · 유실 오류 수정
  3. 제안 · 결과 통보발송 상태 모델링 · 중복 발송 방지
산업·고용형태 필터and / or / not 검색검색조건 유실 7건+ 근본 수정
02 · 마이그레이션 수행

데이터 연동과 검색 요청 구조를 함께 이관

이관 대상구버전 인재 데이터 API

기존 API 연동 · 구버전 코드

직접 구현한 이관 구조
검색 요청BFF신버전 인재 API

데이터 API 전면 이관 · 검색 요청 경로 재구성

구버전 코드 격리 → 점진 제거
기존 연동 코드 정리까지 수행
구조 읽기

검색·제안 기능 구축과 데이터 연동 이관을 함께 수행하고, 검색조건·발송 상태를 관리했습니다.

담당 범위
기업회원 인재검색·제안 서비스 신규 구축 · 데이터 API 마이그레이션 및 BFF 경유 구조 전환 주도
구현·운영 결과
인재 데이터 API의 신버전 전면 이관과 BFF 경유 구조 전환을 완료했습니다. 검색조건 유실 7건 이상을 근본 수정하고, 면접 제안·결과 통보에 발송 상태 모델링과 중복 발송 방지를 적용했습니다.
BFF
화면이 필요한 데이터를 받도록 연결·가공하는 중간 서버 계층입니다. Backend for Frontend의 약자입니다.
이번 마이그레이션의 범위
인재 데이터 API 전면 이관, 검색 요청의 BFF 경유 구조 전환, 구버전 코드 격리·점진 제거입니다.
BFFAPI 마이그레이션검색조건 저장상태 모델링
03 / 광고 결제 · B2BCASE STUDY

대화형 AI 인재 추천 서비스

채용 담당자가 대화로 조건을 전달하고, 추천 인재를 확인하려면?

응답 → 행동위젯·마크다운 구현
인증·결제서비스 이용 흐름 연결
GTM / GA클릭·세션·전환 관측
문제

대화로 채용 조건을 입력하면 AI가 인재를 추천하는 서비스입니다. 추천 응답을 실시간으로 보여주고, 답변 속 기능을 선택하거나 인증·결제로 이어갈 수 있어야 합니다.

설계

인재 추천 응답을 마크다운·위젯으로 표시하는 프론트엔드를 구현했습니다. 응답을 도착하는 순서대로 보여주고, 위젯의 사용자 행동을 서버와 인증·결제에 연결했습니다.

동작 구조흐름과 상태의 연결
AI 인재 추천 응답

대화로 전달한 채용 조건에 맞춰 인재 추천

01텍스트 조각
02코드·표
03위젯 정보
SSE · 서버에서 화면으로
인재 추천 대화 화면 · 구성 예시
대화하며 추천 결과 확인

마크다운은 문단·표·코드에 맞게
각각의 컴포넌트로 표시합니다.

업무용 위젯응답 안에서 바로 행동
업무 진행
  1. 위젯에서 행동버튼·기능 선택
  2. 서버로 전달onAction 핸들러
  3. 업무 흐름 연결필요한 인증·결제
구조 읽기

채용 조건을 대화로 입력하면 AI가 인재를 추천합니다. 프론트엔드는 응답을 실시간으로 보여주고, 위젯에서 선택한 행동을 서버로 전달합니다.

담당 범위
위젯·마크다운·인증·결제·Analytics 담당
구현·운영 결과
응답 표시부터 사용자 행동, 인증과 결제까지 서비스의 이용 흐름을 구현했습니다. 위젯 클릭·세션 시작·전환을 확인할 수 있도록 GTM/GA 이벤트도 설계했습니다.
SSE · 스트리밍
서버가 응답 조각을 계속 보내는 방식입니다. 전체 답변이 끝나기 전부터 읽을 수 있습니다.
위젯 · onAction
위젯은 답변 안의 기능 화면이며, onAction은 클릭 같은 사용자 행동을 전달하는 핸들러입니다.
Next.js 15React 19TurborepoSSEGTM / GA
04 / 앱·웹뷰 · 성능CASE STUDY

웹뷰 광고 연동 · 세션·행동 데이터

앱에서 웹 화면으로 넘어가도 로그인과 행동 기록이 이어지려면?

iOS · Android앱-웹 연동
세션 유지로그인 끊김 해결
광고·행동 데이터광고 연동 · 이벤트 정규화
문제

앱 안의 웹뷰에서 로그인과 행동 기록을 유지해야 했습니다. 광고를 삽입하면서 iOS의 새 창 동작도 처리해야 했습니다.

설계

브릿지·딥링크와 토큰 갱신으로 세션을 유지하고, 분석 이벤트를 정규화했습니다. 카카오 애드핏 광고를 연동하고 iOS 새 창 동작을 수정했습니다.

동작 구조흐름과 상태의 연결
iOS / Android 앱
앱 브릿지 · 딥링크
WebView앱 안에서 열리는 웹 화면
로그인 상태 유지Access / Refresh Token

화면을 이동해도 인증이 이어지도록

사용자 행동 기록이벤트 이름·형식 정규화

GA · Braze · AppsFlyer · Hotjar

웹뷰 광고 연동카카오 애드핏 광고 삽입

iOS 광고 새 창 문제 해결

구조 읽기

iOS·Android 앱 안에 웹 화면이 들어갑니다. 앱과 웹을 연결하는 경로 위에서 로그인 상태와 행동 데이터를 이어줍니다.

담당 범위
웹뷰 광고 삽입 · 앱 브릿지·딥링크 · 세션 유지 · 분석 이벤트 연동
구현·운영 결과
로그인 끊김과 iOS 광고 새 창 이슈를 해결했습니다. 이벤트 형식을 정리하고 GA·Braze·AppsFlyer·Hotjar에 연동해 플랫폼 간 행동 데이터 수집을 안정화했습니다.
웹뷰 · WebView
네이티브 앱 안에서 웹 페이지를 보여주는 화면입니다.
브릿지 · 토큰
브릿지는 앱과 웹의 통신 경로입니다. 토큰은 로그인 상태를 확인하고 유지하는 데 쓰입니다.
iOS · AndroidWebViewAccess / Refresh TokenAnalytics
05 / 앱·웹뷰 · 성능CASE STUDY

알바몬 앱인토스 · React Native 출시

공고 탐색부터 지원내역까지, 토스 안에서 채용 경험을 완성하려면?

단독 출시RN 프론트엔드 설계·개발·배포
153건+RN QA 이슈 대응
독립 테스트통합인증·백엔드팀 지원
문제

기존 운영 BFF와 연결해 공고 탐색·지원 전 과정을 새 플랫폼에 구현해야 했습니다. 프론트엔드 단독으로 출시·QA를 맡고, 목록 성능과 API 오류 이후의 화면 복구도 다뤘습니다.

설계

기존 BFF를 재사용하고 FSD로 기능을 구성해 React Native 미니앱을 출시했습니다. Phase 2에서는 목록 렌더링·요청 재사용·오류 복구를 나눠 개선했습니다.

동작 구조흐름과 상태의 연결
01 · React Native 신규 출시

기존 운영 BFF와 연결한 채용 흐름

  1. 공고 탐색공고 목록 · 필터
  2. 공고 확인 · 지원공고 상세 · 지원하기
  3. 지원 이후 관리지원내역 · 스크랩
02 · Phase 2 개선

렌더링 비용과 반복 요청을 각각 개선

메모리 사용량 · 90% 감소

이전100
개선10

FlashList·무한스크롤로 목록 렌더링과 데이터 로딩 방식을 개선

네트워크 요청 · 70% 감소

이전100
개선30

캐싱으로 이미 조회한 데이터를 재사용

Phase 2 개선율 · 최적화 전을 100으로 환산한 상대 비교

오류 처리와 화면 복구를 공통으로

API 응답 파싱 실패
Graceful degradation으로 가능한 기능 유지·대체 처리
오류 이후 화면 전환
HTTP Client 중앙 처리 → 오류 코드별 라우팅 → 스택 초기화로 상태 복원
구조 읽기

탐색·지원 흐름을 출시한 뒤 목록·요청 비용을 개선하고, 공통 오류 처리와 화면 복구를 구현했습니다.

담당 범위
React Native 프론트엔드 단독 설계·개발·배포 · QA 대응 · Phase 2 성능·안정성 개선
구현·운영 결과
공고·필터·상세·지원·지원내역·스크랩을 출시하고 RN QA 153건 이상에 대응했습니다. 이 중 140건을 4일간 처리했습니다. 토스 인가코드 발급 전용 페이지를 제공해 통합인증·백엔드팀이 개발계에서 프론트 개발자 없이 독립 테스트할 수 있게 했습니다.
FSD · 기능별 구조
화면·기능·도메인의 역할을 나누는 프론트엔드 구조입니다. 미니앱의 기능 확장을 고려해 적용했습니다.
Graceful degradation
일부 응답 처리가 실패해도 가능한 기능을 유지하거나 대체 동작을 제공하는 방식입니다.
React Native기존 BFF 연동FSDFlashList공통 오류 처리
06 / 앱·웹뷰 · 성능CASE STUDY

알바몬 공고 탐색 · 검색 구조 재설계

지도에서 찾든, 조건을 바꾸든, 뒤로 가든 — 같은 검색 맥락을 유지하려면?

추가 호출 없음CDN 사전 적재 후 지역 코드 변환
200여 건QA 이슈 분석·해결
34개 채용관숨은 엣지 케이스 발굴·대응
문제

지도 반경 검색과 행정코드 검색의 기준이 달랐습니다. 필터 변경·뒤로가기 시 조건과 결과가 어긋나는 문제도 있었습니다.

설계

동→행정코드 매핑으로 검색 조건을 통합했습니다. 다중 필터·쿼리스트링을 재설계하고, 항상 서버를 조회해 결과를 복원했습니다.

동작 구조흐름과 상태의 연결
공고 탐색 UI 개선 · AI 추천 탐색 적용

단일 필터 다중 필터 추가·조회·수정·삭제

01

지도와 지역 검색의 기준 맞추기

좌표로 찾은 위치를, 기존 서버도 이해할 수 있는 검색 조건으로.

네이버 지도 API

위경도동(dong) 정보

지도 기반 반경 검색

프론트엔드에서 변환

동 → 시·군·구 코드

CDN 사전 적재 데이터

변환을 위한 추가 API 호출 없음

하나의 검색 컨텍스트

위경도행정코드반경

조건을 묶어 백엔드에 전달

02

URL·서버·화면의 상태 맞추기

필터를 저장하거나 닫을 때, 뒤로 갈 때도 검색 맥락을 유지하도록.

이전

쿼리스트링이 있으면 서버 조회 생략

개선

쿼리스트링 유무와 관계없이 서버 조회

  1. 필터 조작 · 뒤로가기저장·닫기·이전 화면 이동
  2. URL · 히스토리 관리저장·닫기 상태 분리 · 의도한 이력 복원
  3. 서버 조회 · 화면 반영검색 조건과 결과의 정합성 확보
구조 읽기

지도 위치를 지역 코드와 묶어 검색하고, URL·이동 이력·서버 결과를 맞춰 화면을 복원합니다.

담당 범위
공고 탐색 UI·AI 추천 탐색 적용 · 다중 필터 CRUD · 지도 검색 매핑 · 검색 라우팅 설계·구현
구현·운영 결과
히스토리 추적으로 레거시 오류의 근본 원인을 해결했습니다. 함께 진행한 개선으로 검색 페이지 8→1 통합, 목록 CRUD 렌더링 지연 4→0.52초 단축. 원클릭·다중 지원 개선 후 지원률은 전년 대비 42% 증가했습니다.
검색 컨텍스트
위경도·행정코드·반경처럼 하나의 검색을 설명하는 조건 묶음입니다.
쿼리스트링
URL에 담는 검색 조건입니다. 화면의 필터·서버 결과·이동 이력과 맞아야 합니다.
지도·행정코드 매핑CDN검색 라우팅React QueryZustand
07 / 개발·운영 자동화CASE STUDY

업무 허브 · AI 코드 수정

여러 도구의 요청을, 바로 실행할 수 있는 작업으로 모을 수 있을까?

4 → 1시스템 → 업무 화면
본인 PC코드 변경 시작
사람 승인최종 반영
문제

서비스 오류와 개발 요청을 처리할 때, 오류 기록·기획·코드가 서로 다른 도구에 흩어져 있어 찾아보고 대조하는 일이 반복됩니다.

설계

업무 조회 화면을 하나로 합치고, 담당자가 선택한 작업을 AI 수정·검증·리뷰 요청에 연결했습니다.

동작 구조흐름과 상태의 연결
Sentry서비스 오류
Jira업무 요청
Notion기획·문서
GitLab코드·이슈
흩어진 정보를 한곳으로
업무 허브담당자가 조회하고 작업을 선택
사내 웹 · 조회
담당자가 본인 PC에서 시작
본인 PC · 코드 변경
  1. AI 코드 수정선택한 작업 구현
  2. 자동 검증테스트·빌드 실행
  3. 리뷰 요청사람이 검토·승인
구조 읽기

4개 도구의 정보를 한 화면에서 봅니다. 담당자가 본인 PC에서 작업을 시작하면 AI가 수정하고, 최종 반영은 사람이 승인합니다.

담당 범위
업무 통합 화면 · AI 수정 파이프라인 · 조회·실행 권한 설계
구현·운영 결과
4개 시스템을 하나의 조회 화면으로 모으고, 업무 선택 이후의 반복 작업을 자동화했습니다. 최종 반영은 사람이 변경 내용을 검토·승인하는 흐름으로 남겼습니다.
조회·실행 권한 분리
업무를 볼 수 있는 권한과 실제 코드를 바꾸는 권한을 따로 둡니다.
리뷰 요청
변경한 코드와 검증 결과를 담당자에게 검토받는 단계입니다.
Sentry · JiraNotion · GitLabAI 코드 수정권한 분리
08 / 개발·운영 자동화CASE STUDY

야간 자동 이슈 처리

밤사이 오류를 수정하되, 반영 여부는 사람이 결정하게 하려면?

4개평일 자동 루틴
2개병렬 러너 레인
0건자동 머지
문제

사람이 지켜보지 않는 실행에는 작업 범위·중단 조건·상태 동기화가 필요합니다.

설계

미해결 오류를 작업 큐에 모으고 2개 러너에서 처리합니다. 반복 차단 시 중단하고, 검증한 변경은 리뷰 요청으로 남깁니다.

동작 구조흐름과 상태의 연결

미해결 오류 수집

Sentry → GitLab 작업 큐

대기 작업대기 작업대기 작업
A
러너 A

새 작업 맥락 → 수정 → 검증

B
러너 B

새 작업 맥락 → 수정 → 검증

서로 다른 작업을 2개 레인에서 병렬 처리
리뷰 요청변경 코드 + 검증 결과
다음 날, 사람의 반영
작업 범위 고정연속 2건 차단 시 중단자동 머지 없음
구조 읽기

오류가 대기열에 들어오면 두 러너가 나눠 처리합니다. 밤에는 수정·검증·리뷰 요청까지, 다음 날 담당자가 반영합니다.

담당 범위
야간 무인 이슈 처리 파이프라인 설계·구축
구현·운영 결과
평일 자동 루틴 4개와 무인 실행 금지 규칙 10종을 구성했습니다. GitLab·Notion·Sentry 간 상태 전이와 중복 실행 처리를 설계하고, 실측 11건 중 3건에서 발견한 라벨 누락을 MR 상태 기반 동기화로 보완했습니다.
큐 · Queue
처리할 작업을 차례로 보관하는 대기열입니다.
러너 · Runner
대기 중인 작업을 가져와 실제로 실행하는 프로세스입니다.
Claude CodeSentryGitLabNotion
구조 상세 (새 탭)
09 / 개발·운영 자동화CASE STUDY

Claude Code 개발 하네스

AI에게 코드를 맡길 때, 프로젝트 규칙을 어떻게 지키게 할까?

2개 레포사내 구축·이식
7종실행 중 검사 훅
15건운영 개선 완료
문제

규칙을 문서에 적어두는 것만으로는 AI의 수정 범위와 작업 종료 조건을 보장하기 어렵습니다.

설계

설계·구현·리뷰의 권한을 나누고, 실행 중 검사하는 훅으로 수정 범위와 완료 조건을 통제했습니다.

동작 구조흐름과 상태의 연결
프로젝트 규칙수정 범위 · 역할별 권한 · 완료 조건
규칙을 역할과 실행 과정에 적용
  1. 설계무엇을 바꿀지 정하기
  2. 구현허용된 범위의 코드 수정
  3. 리뷰변경 내용 검토하기
실행 중 검사 · 훅 7종

레거시 편집·파괴적 명령 차단 / 마무리 절차 확인

작동 예시
규칙을 확인하며 작업 진행

허용된 범위에서 구현하고, 정해진 완료 절차를 수행합니다.

구조 읽기

AI는 정해진 역할로 작업합니다. 실행 중 규칙을 검사하고, 문제가 있으면 진행이나 종료를 막습니다.

담당 범위
하네스 설계·구축 · 레포 이식 · 운영 개선
구현·운영 결과
2개 레포에 구축·이식하고, 마찰 데이터 → 회고 → 백로그 → 실행의 루프로 개선 15건을 완료하고, 다른 레포로 이식하는 5단계 가이드를 정리했습니다. 구축 후 4일 만에 스킬·문서 체계를 재편·축소하며 운영 구조도 다듬었습니다.
하네스
AI의 작업 규칙·도구·권한·검증 절차를 묶은 실행 환경입니다.
훅 · Hook
특정 동작 시점에 자동으로 실행되는 검사나 작업입니다.
Claude CodeAgents · SkillsHooks권한 분리
구조 상세 (새 탭)
10 / 개발·운영 자동화CASE STUDY

메타 지식베이스

많은 문서 중, 지금 작업에 필요한 규칙만 찾을 수 있을까?

본문 단위필요한 부분만 조회
출처·상태판단 근거 함께 제공
같은 질문검색 변경 후 재검증
문제

규칙의 본문뿐 아니라 적용 대상, 출처, 검토 상태와 함께 읽을 문서까지 확인해야 합니다.

설계

문서를 작은 단위로 나누고, 검색 결과에서 필요한 본문과 관련 규칙을 함께 조회하도록 만들었습니다.

동작 구조흐름과 상태의 연결
문서 저장소
개발 규칙
설계 문서
검토 기록
검색 → 필요한 문단

문서 전체 대신
ID가 있는 본문 단위로 읽기

조회 결과의 구성
관련 규칙의 본문
어디에 적용?
적용 대상
무엇이 근거?
출처
확인한 내용?
검토 상태
함께 읽을 선행 문서로 연결
문서 형식 확인누락·순환 참조 검사같은 질문으로 검색 검증
구조 읽기

질문으로 규칙을 찾고, 필요한 문단을 읽습니다. 출처와 검토 상태를 확인한 뒤 관련 문서로 이어집니다.

담당 범위
문서 모델 · 검색·부분 읽기 CLI · 검증·평가 설계
구현·운영 결과
문서 형식, 연결 오류, 누락·순환 참조를 검사하도록 구성했습니다. 검색 로직이 바뀌어도 같은 질문으로 필요한 문서를 찾는지 확인하는 평가 흐름을 설계했습니다.
메타데이터
본문을 설명하는 정보입니다. 적용 대상·출처·검토 상태 등이 해당합니다.
CLI
터미널에서 명령어로 실행하는 도구입니다. 여기서는 문서를 검색하고 읽는 데 씁니다.
Knowledge BaseCLI문서 메타데이터검색 평가
구조 상세 (새 탭)
02 / INDEPENDENT WORK

사이드 프로젝트

03
01

RN Network Debugger

개인 개발

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

  1. 모바일 앱네트워크 요청 수집
  2. 중간 연결 서버WebSocket Proxy
  3. 개발자 도구요청·응답 확인
TypeScriptNode.jsKotlinSwift
02

Biolem · 시간의무덤

iOS App Store 출시 완료

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

  1. 기록 남기기사진 · 장소 · 생각과 글귀
  2. 모아 보기장소별 지도 · 기록 목록
  3. 다시 돌아보기날짜별 달력 · 북마크
개발 범위 보기
모바일 앱
React Native로 사진·장소 기록과 생각·글귀 작성, 지도·달력 조회를 구현했습니다. 장소 기록은 서버에, 생각·글귀는 기기에 계정별로 저장하도록 구성했습니다.
서버 · 배포
Kotlin·Spring Boot로 인증·기록·이미지 API를 구현했습니다. GitHub Actions에서 Docker Compose를 실행해 AWS EC2에 서버를 자동 배포하도록 구성했습니다.
iOS 출시
Xcode 배포 과정의 심볼·권한 오류를 해결하고 App Store에 출시했습니다.
React NativeTypeScriptKotlinSpring BootPostgreSQLAWSDockerGitHub Actions
03

사내 맛집 지도 · 점메추

PO · 개발

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

  1. 문제 발견점심 장소를 고르기 어려움
  2. 지도 서비스사내 맛집·메뉴 추천
  3. 팀과 출시PO 겸 개발 참여
React 19BiomeJSViteGitHub Actions
BIOLEM / iOS DELIVERY

iOS 앱 배포 과정

iOS App Store 출시 완료2026-09-27 기록 기준

iOS 앱 출시

앱 패키징부터 App Store 공개까지

  1. 01
    완료
    앱 패키징

    Xcode Archive · 서명·심볼 오류 해결

  2. 02
    완료
    스토어 제출

    앱 정보·스크린샷·심사 자료 준비와 제출

  3. 03
    출시 완료
    App Store 출시

    개인 기록 앱을 iOS 앱스토어에 공개

배포 오류를 해결한 과정은 아래 기술 노트에서 확인할 수 있습니다.

03 / TOOLKIT & BACKGROUND

기술과 이력

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
  1. 2022.06 — 현재웍스피어 (Worxphere) · 구 잡코리아 & 알바몬

    Frontend → AI Platform Engineering → JK/AM 기업 프로덕트팀 · 재직중

  2. 2024.09정보처리기사

    국가공인 자격증

  3. 2023.07링커스타 수상

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

  4. 2021.07 — 2022.06SSAFY 6기 · 삼성 청년 SW 아카데미

    웹 전공 수료

  5. 2021.02가톨릭대학교 컴퓨터정보공학부

    졸업