이현명 Frontend Engineer
신규 서비스 구축부터 핵심 서비스 고도화까지, 사용자 관점으로 문제를 해결하는 프론트엔드 개발자
📎 온라인 포트폴리오 (동영상 포함): https://hyunmyung-lee.pages.dev
About
백엔드 개발로 시작해 프론트엔드 개발로 무게중심을 옮기며, 시스템 전반을 이해하고 사용자 관점에서 문제를 해결하는 개발자로 성장해왔습니다. 신규 서비스 구축부터 핵심 서비스 고도화까지 경험하며 제품의 안정성과 완성도를 높이는 데 집중해왔습니다.
레거시 시스템 현대화, CI/CD 표준화, 외주 자산 내재화처럼 지속 가능한 개발 환경을 만드는 일에 강점이 있습니다. 최근에는 AI 도구를 업무 전반에 적극 활용하고 있습니다. 생성과 탐색은 도구에 맡기되 검증과 판단은 놓지 않으며, 생산성과 품질을 함께 챙깁니다. 앞으로도 사용자에게 닿는 기능뿐 아니라 팀의 개발 경험도 함께 고민하는 개발자로 일하고 싶습니다.
Skills
- Frontend
- JavaScriptTypeScriptReactNext.js
- State & Data
- react-queryZustand
- Testing
- JestReact Testing LibraryPlaywrightCypress
- Build & CI/CD
- GitHub ActionsWebpack
- i18n
- react-i18next
* Backend 경험: Node.js, Java (코액터스·그로브소프트 재직 시)
Experience 총 8년 1개월
키즈노트프론트엔드파트2022.10 ~ 재직중 (약 3년 11개월)
- CI/CD 배포 이관 및 표준 적용
- 담당 서비스의 Jenkins·PM2/SCP 기반 배포를 사내 공통 GitHub Actions 재사용 워크플로우로 이관
- 무중단 배포 및 자동 롤백 파이프라인을 적용하고, 기존 빌드 동작과의 동일성 검증
- PR/Push 품질 게이트(Lint·Test·Build) 적용
- 다국어 적용 및 번역 워크플로우 활용
- 신규 프로젝트 개발 시 기존 다국어(ko·en·ja) 플로우 적용 및 베트남어(vi) 추가 확장
- 서비스별 네임스페이스·Trans 컴포넌트 활용으로 다국어 적용
- 코드에서 번역 키를 추출하고 시트와 동기화해 코드에 반영하는 번역 워크플로우 수행
- 패밀리케어 ERP 내재화 (외주 → 사내)
- 외주 레거시 유지보수: 수급자·급여·직원 관리 등 기존 ERP 핵심 도메인 기능을 안정화·확장
- 사내 공통 컴포넌트 신규 구축: 사내 컨벤션 기반 공통 컴포넌트 층을 새로 구축하고, 계정별 로직 분리로 외주 시스템과 안전하게 병행
- 스마트주문 결제수단 신규 구축
- 토스 퀵계좌이체 결제 FE 연동 (빌링 발급~결제 승인)
- 웹뷰 히스토리 오염 방지(별도 창 등록·history.replace)와 등록 직후 백엔드 동기화 폴링·refetch 처리
- 게시글 공감(리액션) 기능 + 디자인 협업 도구화
- 알림장, 공지, 앨범 공감 기능을 공용 훅과 컴포넌트로 구현 (Canvas 파티클 효과)
- 애니메이션 수치를 실시간 조절하는 디자이너용 튜닝 도구 제공으로 협업 루프 단축
- 전자문서 리치텍스트 에디터 (RoosterJS)
- 편집기 툴바·서식·이미지 기능 구현
- React 18 마이그레이션 시 에디터 크래시 안정화
- 보육일지 AI 컨설팅
- 작성된 일지를 AI가 항목별로 분석·첨삭하는 기능 구현
- 수 분 걸리는 AI 작업을 비동기 폴링 기반으로 처리하는 UX 구현
- 서비스 안정성 및 품질 관리
- 팀의 테스트 중심 개발(TDD)에 참여해 담당 영역의 단위·E2E 테스트 작성 (Jest, React Testing Library, Playwright)
- 작성한 테스트를 CI 파이프라인에 통합해 PR 단계에서 자동 실행, 회귀 결함 예방 및 배포 안정성 향상
- AI 도구 활용
- Claude Code, Cursor, Codex로 코드 조사, 리팩토링, 반복 작업 자동화
- CodeRabbitAI 도입으로 PR 자동 리뷰와 코드 품질 체크 프로세스 구축
- 생성과 탐색은 AI, 검증과 판단은 사람 (테스트와 실측으로 가드레일)
오토위니프론트엔드개발팀 · 주임2021.09 ~ 2022.10 (약 1년 1개월)
- 옥션위니 마이그레이션
- jQuery 기반 모놀리식 구조를 React/TypeScript로 재구축, FE·BE 분리 아키텍처 전환
- 레거시 중심 개발 환경을 현대화하여 기능 확장 기반 마련
- Context API 상태 관리와 공통 컴포넌트 설계로 재사용성과 유지보수성 향상
- 개발 환경 구축
- 개발·운영 환경 분리 및 Nginx·Jenkins 기반 빌드/배포 프로세스 구축
- 배포 일관성과 운영 안정성 확보
코액터스프론트엔드개발 · 팀원2020.11 ~ 2021.06 (약 7개월)
- 기업 전용 택시 예약 서비스 신규 구축
- 프론트엔드 개발 (초기 구축부터 런칭까지)
- Kakao Maps API 연동, Firebase 인증, 반응형 UI 구현
- 고요한 M 모바일 플랫폼 백엔드 개발
- 포인트·친구추천 도메인 API 설계 및 구현
- 서비스 운영 기능 및 신규 기능 개발
그로브소프트백엔드개발팀 · 사원2017.10 ~ 2020.01 (약 2년 3개월)
- 아모레퍼시픽 계열 서비스 개발
- 그룹 내 다양한 도메인의 백엔드 시스템 개발 및 유지보수
- 5개 이상의 서비스 운영 경험으로 실서비스 개발 및 운영 역량 확보
Projects
재직 중 진행한 대표 프로젝트를 선정해 정리했습니다.
게시글 공감(리액션) 기능 + 디자인 협업 도구화
공감 기능을 공용 훅과 컴포넌트로 구현하고, 애니메이션 수치를 실시간 조절하는 디자이너용 튜닝 도구를 만들어 디자인↔개발 반복 루프를 단축
- Situation
- 알림장, 공지, 앨범 등 여러 게시물에 공감 기능을 도입해야 했고, 폭죽/상승 애니메이션의 디테일을 디자이너가 원하는 대로 맞춰야 했음
- Action
- 공감 기능을 재사용 가능한 공용 컴포넌트로 설계하여 다양한 게시물 타입에서 활용. Canvas 파티클 효과와 함께 디자이너가 애니메이션 수치를 실시간으로 조정하는 튜닝 패널을 제공
- Result
- 디자이너가 값을 조정하여 개발자와의 수치 왕복 커뮤니케이션 제거. iOS/Android와 물리값을 일치시켜 플랫폼 간 일관된 UX 제공
ReactCustom HooksCanvas / Particle
Design Tooling (DX)i18nTypeScript
디자이너용 튜닝 패널 · 파라미터 조절 → 실시간 효과 변화
리액션 선택 시 재생되는 파티클 효과
전자문서 리치텍스트 에디터 (RoosterJS)
사내 전자문서(보육일지·운영안내서·회의록 등) 전반에 쓰이는 공통 편집기
- Situation
- 여러 전자문서 화면이 공통으로 쓰는 리치텍스트 편집기가 필요했고, 서식·이미지·표 편집과 안정적인 폼 연동이 요구됨
- Action
- RoosterJS 기반 에디터에서 툴바·서식·이미지 첨부 기능 및 UI 디자인을 구현. React 18 마이그레이션 시 발생한 에디터 크래시 이슈를 해결하여 안정화
- Result
- 전자문서 전반에서 재사용되는 편집기의 서식·이미지 UX와 프레임워크 마이그레이션 안정성을 확보
ReactRoosterJSroosterjs-react
react-hook-formTypeScript
전자문서 에디터 동작 데모 (서식 · 이미지 · 표)
토스 퀵계좌이체 결제 연동
앱 웹뷰 환경의 스마트주문에 정기결제용 퀵계좌이체 결제수단을 신규 연동
- Situation
- 스마트주문에 퀵계좌이체 기반 정기결제 수단을 새로 도입해야 했고, 앱 웹뷰 안에서 외부 인증 왕복이 필요한 환경이었음
- Action
- 토스 SDK의 빌링 인증 플로우를 연동하고, 인증 성공 콜백에서 빌링키 등록 훅을 구현. 별도 창 등록과
history.replace로 웹뷰 히스토리 오염을 방지하고, 등록 직후 백엔드 동기화를 폴링·refetch로 반영 - Result
- 퀵계좌이체 결제수단을 안정적으로 연동하고, 웹뷰 뒤로가기 UX 오염을 차단
ReactTypeScriptToss Payments SDK
WebViewCustom Hooks
패밀리케어 ERP 외주 자산 내재화
외주로 개발된 방문요양·주간보호 ERP를 인수해 도메인 기능을 유지보수하고, 사내 공통 컴포넌트를 새로 구축해 병행
- Situation
- 방문요양·주간보호 ERP가 외주(Redux 기반)로 개발돼 유지보수·확장이 어려웠고, 사내에서 운영·개발 가능한 형태로 내재화해야 했음
- Action
- 인수한 코드베이스에서 수급자·급여·직원 관리 등 핵심 도메인 기능을 구현·유지보수하고, 외주 코드 위에 사내 컨벤션 기반 공통 컴포넌트(Badge·Button·DatePicker 등)를 새로 구축해 병행. 계정 타입별로 외주/자체 로직이 섞이지 않도록 분리
- Result
- 외주 의존도를 낮추고 사내에서 운영·확장 가능한 형태로 안착
ReactTypeScriptRedux (외주)
react-queryZustand공통 컴포넌트
보육일지 AI 컨설팅
교사가 작성한 보육일지를 AI가 항목별로 분석·첨삭해 컨설팅 리포트를 생성하는 기능
- Situation
- 교사가 작성한 보육일지를 AI가 항목별로 분석·첨삭해 리포트를 생성해야 했고, AI 처리가 수 분 소요됨
- Action
- 전용 백엔드 프록시를 통한 비동기 폴링 방식으로 구성하고, 창을 닫아도 백그라운드에서 폴링을 유지해 완료 시 전역 토스트로 알림. Lottie 로딩·결과 리포트 모달·출력 기능을 구현
- Result
- 긴 AI 처리 시간에도 사용자가 화면에 묶이지 않는 UX를 제공
Reactreact-query비동기 폴링(job)
RecoilLottiereact-to-printTypeScript
AI 컨설팅 동작 데모 (요청 → 로딩 → 결과 리포트)
옥션위니 마이그레이션 & 성능 개선
jQuery 레거시를 React/TypeScript로 재구축하고, 메인 화면 웹 성능 점수를 30점대에서 80점대로 개선
- Situation
- jQuery 기반 모놀리식 구조가 유지보수·확장을 어렵게 했고, 메인 화면 초기 로딩이 느려 웹 성능 점수가 30점대에 머물렀음
- Action
- React/TypeScript로 재구축하며 FE·BE를 분리하고, 공통 컴포넌트(Modal·Paging·Loading·ErrorPage)와 레이아웃 템플릿·컴포넌트 계층을 설계. react-query로 서버 상태를 관리하고 뷰/데이터 로직을 분리(custom hook). 성능은 라우터 React.lazy 코드 분할, 8개 iframe을 전부 렌더하던 방식 개선, 이미지 레이지 로딩, react-helmet·react-snap 기반 SEO 개선으로 끌어올림. Storybook·Cypress로 컴포넌트 확인과 E2E 검증 기반도 마련
- Result
- 재사용성·유지보수성을 높이고, Lighthouse 성능 점수를 30점대 → 80점대로 개선
ReactTypeScriptreact-query
React.lazyStorybookCypress
Education
덕성여자대학교영어영문학과 · 졸업2013.03 ~ 2016.02
Awards · Certifications · Etc
오픈소스 기여기타2024.08
- Next.js 한국어 문서 번역 프로젝트 — Pages Router API Reference 번역 기여 (luciancah/nextjs-ko#88)
코드숨 리액트 6기교육2021.11
- TDD 기반 코드 개발 실습, 매주 코드 리뷰
정보처리기사자격증2018.08
Java 프로그래밍 개발자 과정교육2017.01
- 한국 소프트웨어 기술 진흥 협회 수료