신규 비즈니스의 첫 고객 접점 설계, 지표 기반 성장 실험, 성숙 서비스의 구조 개선을 함께 풀어온 7년차 프론트엔드 개발자입니다. MAU 50만~60만 규모의 웹/데스크톱 서비스를 개발하며 사용자 행동 데이터와 운영 병목을 바탕으로 제품 문제를 정의하고 해결해왔습니다.

사용자 이탈, API 응답 지연처럼 제품 완성도를 떨어뜨리는 문제를 지표와 로그로 확인하고, 사용자 경험과 프론트엔드 구조를 함께 개선해왔습니다. 핵심 이용 흐름의 안정성 개선, API 응답 속도 평균 5초에서 1초 미만 단축, 서버 CPU 부하 70%에서 6~7% 수준 개선처럼 고객 경험과 운영 효율에 연결되는 성과를 만든 경험이 있습니다.

외부 시스템 연동, 실시간 이벤트 처리, 장시간 작업의 상태 변화처럼 예외 케이스가 많은 비동기 흐름을 예측 가능한 구조로 정리해왔습니다. 상태 전이 모델링과 책임 분리를 통해 조건 분기 중심의 로직을 유지보수 가능한 프론트엔드 구조로 개선하는 데 강점이 있습니다.

대학교에서 사용하는 문제은행, 학습 관리, AI Tutor 기능의 프론트엔드 개발을 담당하며 문제 풀이, 채점, 학습 이력 저장으로 이어지는 사용자 흐름과 API 연동 구조를 정리

프론트엔드 아키텍처 설계와 복잡한 UI/UX 구현에 주력하면서도, 기능 연동의 병목을 없애고 개발 속도를 높이기 위해 NestJS 기반의 백엔드 API 개발까지 직접 병행

장애 대응 과정에서 서버별 SSH 접속과 수동 로그 확인에 의존하는 방식이 원인 추적 시간을 늘리고 있다고 판단해, 서비스별 로그 포맷을 표준화하고 Grafana/Loki 기반 통합 로그 수집·검색 흐름을 구축

MAU 50만 규모의 오퍼월 기반 레거시 웹 서비스를 Next.js 15 기반으로 재구축하며, 기존 페이지와 기능을 도메인 단위로 나누어 새로운 코드베이스로 점진 이관

신규 코드베이스 전환 이후 오퍼월 유입, 퀴즈 시작, 광고 노출 구간 유지, 퀴즈 완료, 리워드 지급으로 이어지는 핵심 퍼널을 사용자 행동 데이터로 분석하고, 이탈 구간의 UI/UX 개선과 기능 실험을 반복하며 광고 수익 기반 전환 최적화를 주도

서버에 집중되던 이미지 생성 및 합성 로직을 OffscreenCanvas를 활용해 클라이언트 브라우저로 위임하는 아키텍처로 전환하여, API 응답 속도를 평균 5초에서 1초 미만으로 단축하고 서버 CPU 부하를 70%에서 6~7% 수준으로 대폭 개선

초기 진입 성능 개선과 Origin 서버 부하 완화를 위해 Next.js assetPrefix 와 CloudFront 기반 정적 리소스 캐싱 전략을 설계해 캐시 히트율 99.96%를 달성하고, 정적 에셋 요청이 Next.js 서버 병목으로 이어지지 않는 배포 구조를 마련

Native ESM(Rollup)과 CDN 매니페스트를 활용하여 MFE(Micro Frontends) 기반의 동적 플러그인 시스템을 설계하고, 프론트엔드 모듈의 독립적인 배포 환경 구축

MAU 60만 규모의 League of Legends 데스크톱 어시스턴트 앱을 초기 설계부터 구현하며, 롤 클라이언트 연동 로직과 사용자 화면 로직을 분리한 Electron 앱 구조를 설계

외부 클라이언트 연결과 프로필 동기화로 발생하던 초기 렌더링 병목을, 기존 프로필을 먼저 보여주고 최신 정보는 백그라운드에서 갱신하는 구조로 해소해 첫 화면 진입 대기 시간을 4~6초 단축

게임 하이라이트 영상 처리의 S3 업로드, 키 발급, 결과 반환 등 실패와 재시도가 발생할 수 있는 비동기 흐름을 FSM 기반으로 재구성해, 조건 분기 중심 로직을 상태 전이 중심으로 단순화

GGQ Web의 첫 진입 속도를 늦추던 초기 번들 병목을 분석하고, 지연 로딩과 번들 경량화를 적용해 공통 JS 번들을 50%, 메인 페이지 First Load JS를 93.8% 축소

Sentry와 GA4 기반으로 프로덕션 오류와 사용자 행동 데이터를 추적하고, 실제 사용 환경의 지연과 오류를 기준으로 제품 안정화 우선순위를 판단

바닐라 JavaScript 기반 레거시 실시간 수업 서비스를 Next.js 코드베이스로 점진 이관하며, 수업 입장·대기·진행·종료 흐름을 도메인 단위로 분리하고 유지보수 가능한 클라이언트 구조로 재설계

수업 중 오디오 끊김과 접속 실패가 실제 수업 실패로 이어지는 문제를 Agora WebRTC 이벤트, 디바이스 권한, 네트워크 상태 흐름 중심으로 추적하고 개선해 수업 실패율 15% 감소

초기 진입 지연과 렌더링 병목을 Lighthouse/Core Web Vitals 기준으로 측정하고, 리소스 로딩·번들 분리·렌더링 최적화를 적용해 Lighthouse 성능 점수를 15점에서 92점으로 개선

AWS Elastic Beanstalk와 GitHub Actions 기반 CI/CD를 고도화하여 배포 자동화와 환경 일관성을 확보

모바일 앱 전담 리소스가 제한된 환경에서 Vue.js/Ionic 기반 하이브리드 앱 구조를 설계하고, 기존 웹 화면을 인앱 WebView로 재사용하는 전략으로 iOS/Android 신규 교육 서비스를 런칭

수강 신청·결제·학습 알림·발음 분석으로 이어지는 모바일 학습 흐름을 인앱결제, 푸시 알림, STT 분석 기능과 연동하며 플랫폼별 권한·결제·WebView 예외 케이스를 제품 수준에서 해결

운영팀이 학습 현황, 결제 상태, 발음 분석 데이터를 직접 확인할 수 있도록 관리자 백오피스와 데이터 시각화 대시보드를 개발해 수동 확인 중심의 운영 흐름을 데이터 기반으로 전환

누적 2만+ 다운로드 앱을 운영하며 iOS/Android 디바이스, WebView, 푸시, 인앱결제 동작을 검증하는 호환성 체크리스트를 정리해 멀티 디바이스 배포 안정성을 높임

4.2 / 4.5

대학(2,3년)

Frontend: React, Next.js, TypeScript, Zustand, React Query, XState, TailwindCSS, Electron, Vite, Rollup, Turborepo

Backend & Infra: Node.js, NestJS, MySQL, PostgreSQL, AWS, Docker, GitHub Actions

Monitoring & QA: Grafana, Loki, Sentry, Jest, Playwright

React, TypeScript 기반 프로젝트 코드 리뷰를 통해 확장 가능 컴포넌트 설계, 상태 관리, 테스트 전략 수립 등 실무형 코드 품질 기준을 지도

주니어 개발자의 기술적 병목을 페어 프로그래밍과 코드 리뷰로 해소하고 실제 서비스 아키텍처 사례 중심으로 도메인 모델링 관점을 전파

체계적 피드백과 학습 로드맵 제시로 평균 4.6점 멘토 만족도를 기록하며 팀 단위 생산성 향상에 기여