이현명

📎 온라인 포트폴리오: https://hyunmyung-lee.pages.dev

프론트엔드 개발자 이현명입니다.
혼자 잘하는 것보다 함께 잘하는 환경을 만드는 데 관심이 많습니다.
다음 사람이 편하게 이어받을 수 있는 코드를 고민합니다.

Java 백엔드 개발로 시작해,
1인 팀에서 서비스를 처음부터 만들어 내보낸 경험 (2020 코액터스),
3인 팀에서 레거시를 걷어내고 개발 환경을 새로 세운 경험 (2021 오토위니)이 있습니다.
현재는 어린이집·유치원 교사의 업무를 돕는 플랫폼 서비스 키즈노트에서 일하고 있습니다 (2022 ~ 현재).

Experience
키즈노트프론트엔드파트2022.10 ~ 현재

B2B·B2C 웹 서비스의 주요 기능 개발 담당

  • 외주로 개발되던 요양 ERP를 인수해, 문서 없는 코드베이스에서 핵심 도메인 화면 9개를 사내 운영 체제로 전환 (2023~2024)
오토위니프론트엔드개발팀2021.09 ~ 2022.10 (1년 1개월)
  • 중고차 경매 서비스 프론트엔드 개발 및 개발·배포 환경 구축
코액터스프론트엔드개발2020.11 ~ 2021.06 (7개월)
  • 기업 전용 택시 예약 서비스를 초기 구축부터 런칭까지 프론트엔드 담당
  • Kakao Maps API 연동, Firebase 인증, 반응형 UI 구현
그로브소프트백엔드개발팀2017.10 ~ 2020.01 (2년 3개월)
  • 아모레퍼시픽 계열 5개 이상 서비스의 백엔드 개발 및 운영
  • Java·JSP·MySQL 기반 서버 사이드 개발, jQuery 기반 화면 구현 병행
Projects 대표 프로젝트 6건
배포 환경

CI/CD 배포 전환 및 표준 적용

키즈노트 · 2026.05 ~ 2026.07

담당 서비스의 배포를 사내 공통 GitHub Actions 재사용 워크플로우로 전환

Situation
담당 서비스가 서버에 직접 접속해 스크립트를 실행하는 방식으로 배포되고 있었습니다. 팀 차원에서 Jenkins 폐기가 진행 중이라 전환이 필요했습니다.
Action
  • 사내 공통 GitHub Actions 재사용 워크플로우로 전환
  • 개발·검증·샌드박스·운영 4개 환경 워크플로우를 구성(총 12종)하고, 환경별 워크플로우가 공용 워크플로우를 호출하는 구조로 중복 제거
  • 컨테이너 기반이 아닌 서버 환경 특성을 고려해 무중단 배포(blue/green)를 설계하고, 배포 후 정상 확인에 실패하면 이전 버전으로 자동 복귀되도록 처리
  • PR 단계 품질 게이트(Lint·Test·Build)를 구성하고 단위·E2E 테스트 연동
Result
서버 접속 없이 환경별 워크플로우 실행만으로 배포되고, 배포 이력·로그가 저장소에 기록되는 구조로 전환했습니다.
무중단 배포 전환 — 구버전 유지 → 신버전 준비 → 연결 전환 → 실패 시 복귀
워크플로우 실행 빌드 · 업로드 구버전 (blue) 그대로 유지 신버전 (green) 새 경로에 준비 현재 링크 요청이 향하는 곳 전환 배포 후 정상 확인 성공 / 실패 실패 시 구버전으로 자동 복귀
GitHub Actions
신규 기능

게시글 공감(리액션) 기능 및 디자인 협업 도구화

키즈노트 · 2026.05 ~ 2026.06

5개 화면에 공감 기능을 공통 구조로 도입하고, 애니메이션 수치를 디자이너가 직접 조정하는 튜닝 패널을 제작

Situation
공지사항·알림장·앨범·내소식·모아보기 5개 화면에 공감 기능을 도입해야 했습니다. 화면마다 개별 구현하면 같은 로직이 반복되는 구조였고, 애니메이션 디테일을 맞추려면 디자이너 요청 → 개발자 수정 → 재확인이 반복되는 상황이었습니다.
Action
  • 기획 검토 단계부터 참여해 여러 화면이 공유하는 공통 구조를 설계
  • 5개 화면에 순차 적용한 뒤 발견된 중복 로직을 공통 훅으로 다시 묶어 정리
  • 리액션 6종·4개 언어 대응
  • 화면 효과 애니메이션(Canvas)과 함께, 디자이너가 애니메이션 수치를 직접 조정하는 튜닝 패널을 별도 제작
  • iOS/Android와 애니메이션 값을 맞춰 플랫폼 간 동일한 효과 제공
Result
애니메이션 수치를 맞추는 데 들던 요청·수정·재확인 왕복과 대기 시간이 사라졌고, 5개 화면을 중복 구현 없이 대응했습니다.
TypeScriptReactCustom Hooks Canvasreact-i18next
디자이너용 튜닝 패널 · 수치 조절 → 실시간 효과 변화
리액션 선택 시 재생되는 화면 효과
구조 개선

업무시간 외 방해금지 강화

키즈노트 · 2026.05

화면마다 따로 있던 업무시간 판단을 공통 모듈 하나로 통합

Situation
알림장·공지사항·앨범·투표 4개 발송 화면이 업무시간 판단을 각자 갖고 있어, 정책이 바뀌면 4곳을 모두 수정해야 했습니다. 학부모와 교사의 발송 정책도 달라 분기가 얽히는 구조였습니다.
Action
  • 화면마다 따로 있던 업무시간 판단을 공통 모듈 하나로 통합
  • 학부모·교사 역할별 정책 차이를 분리 구현
  • 역할·시간대 조합별로 발송이 막히고 열리는 경우를 16가지로 정리해 검증
Result
업무시간 판단을 한 곳에서만 하도록 바꿔, 발송 정책이 바뀌어도 네 곳을 각각 고칠 필요가 없어졌습니다.
통합 전후 구조 비교 — 업무시간 판단 4개 → 공통 모듈 1개
BEFORE AFTER 알림장 공지사항 앨범 투표 업무시간 판단 ① 업무시간 판단 ② 업무시간 판단 ③ 업무시간 판단 ④ 정책 변경 시 4곳 모두 수정 알림장 공지사항 앨범 투표 공통 업무시간 판단 모듈 역할별 정책 분리 한 곳만 수정
TypeScriptReactCustom Hooksreact-i18next
신규 연동

퀵계좌이체(토스 PG) 결제수단 확장

키즈노트 · 2026.03 ~ 2026.04

앱 웹뷰 환경에서 정기결제 등록·단건·정기 4종 결제 흐름을 연동

Situation
기존 결제수단만으로는 결제 요구를 감당하기 어려웠습니다. 결제수단을 추가할 때마다 관리 화면을 손봐야 하는 구조였고, 앱 웹뷰 안에서 외부 인증 왕복이 필요한 환경이었습니다.
Action
  • 토스 SDK 인증 플로우를 연동하고 인증 성공 시 정기결제 등록을 처리
  • 정기결제 등록·단건 결제·정기 첫결제·정기 관리 4종 결제 흐름에 대응
  • 별도 창에서 등록하고 완료 후 뒤로가기 기록이 남지 않도록 처리
  • 등록 직후 서버 반영이 늦어질 때는 주기적 재조회로 대응해 등록 실패로 오인되지 않도록 처리
Result
퀵계좌이체를 4종 결제 흐름으로 연동해 결제수단을 확장하고, 배포 후 프론트엔드 귀속 결함 0건으로 마감했습니다.
앱 웹뷰 히스토리 처리 — 인증 왕복 후 뒤로가기가 외부 화면으로 되돌아가지 않도록
BEFORE 결제수단 관리 인증 화면 같은 웹뷰 안에서 이동 등록 완료 뒤로가기 → 인증 화면이 다시 노출 AFTER 결제수단 관리 인증 화면 별도 창에서 실행 등록 완료 뒤로가기 기록 정리 뒤로가기 → 결제수단 관리로 복귀
TypeScriptReactToss Payments SDK WebViewCustom Hooks
신규 기능

보육일지 AI 컨설팅

키즈노트 · 2024.11 ~ 2025.08

수 분 걸리는 AI 처리를 백그라운드 확인 구조로 바꿔, 사용자가 화면에 묶이지 않도록 구현

Situation
교사가 작성한 보육일지를 AI가 항목별로 분석·첨삭해야 했는데, 처리에 수 분이 소요돼 기다리는 동안 사용자가 화면에 묶이는 상황이었습니다.
Action
  • AI 처리 완료 여부를 백그라운드에서 주기적으로 확인하는 구조를 설계
  • 창을 닫아도 확인이 계속되도록 유지하고, 완료 시 전역 알림으로 안내
  • 로딩 화면(Lottie)과 결과 리포트 모달, 리포트 출력 기능을 구현
Result
요청 후 다른 작업을 이어가다 완료 알림으로 확인하는 흐름으로 전환했습니다.
요청 → 백그라운드 확인 → 완료 알림 흐름
컨설팅 요청 모달에서 시작 모달 닫기 사용자는 다른 작업 백그라운드 확인 완료 여부 주기적 조회 미완료 시 반복 대기 완료 감지 전역 알림 노출 결과 리포트 확인 모달 · 출력
TypeScriptReactTanStack Query RecoilLottie
레거시 전환

중고차 경매 서비스 마이그레이션 및 성능 개선

오토위니 · 2021.09 ~ 2022.10

jQuery 레거시를 React/TypeScript로 재구축하고, 메인 화면 Lighthouse 성능 점수를 30점대에서 80점대로 개선

Situation
jQuery 기반으로 모든 기능이 한 덩어리로 묶여 있어 유지보수·확장이 어려웠고, 메인 화면 초기 로딩이 느려 Lighthouse 성능 점수가 30점대에 머물렀습니다.
Action
  • React/TypeScript로 재구축하며 프론트엔드와 백엔드를 분리
  • 레이아웃 템플릿 및 컴포넌트 계층 설계
  • 초기 로딩 병목을 8개 iframe 일괄 렌더 방식으로 특정하고, 화면 단위 코드 분할·이미지 지연 로딩과 함께 개선
  • 개발·운영 환경 분리 및 Nginx·Jenkins 기반 빌드/배포 프로세스 구축
Result
Lighthouse 메인 화면 성능 점수가 30점대에서 80점대로 개선됐습니다.
구조 전환 — 한 덩어리 구조에서 React 화면 + API 분리로
BEFORE AFTER 서버 (화면 + 데이터 결합) JSP 템플릿 jQuery 스크립트 비즈니스 로직 · 데이터 조회 화면 변경이 서버 배포로 이어짐 React 화면 공통 컴포넌트 계층 서버 데이터 연동 API 서버 데이터 제공 비즈니스 로직 JSON 화면과 데이터를 독립적으로 배포 코드 분할 · 지연 로딩으로 초기 로딩 개선
TypeScriptReactNginxJenkins
Skills
언어·프레임워크
TypeScriptReact
스타일링
EmotionTailwind CSS
상태 관리
TanStack QueryRecoil
테스트
JestReact Testing LibraryPlaywright
빌드·배포
GitHub ActionsNginxJenkins
AI 도구
Claude CodeCursorCodeRabbit
Education · Certifications
덕성여자대학교영어영문학과 · 졸업2013.03 ~ 2016.02
오픈소스 기여Next.js 한국어 문서 번역2024.08
코드숨 리액트 6기교육2021.11
  • TDD 기반 개발 실습, 주간 코드 리뷰
정보처리기사자격증2018.08
Java 프로그래밍 개발자 과정교육2017.01
  • 한국소프트웨어기술진흥협회 수료