About Me
사용자 경험을 위해 성능의 한계까지 집요하게 파고드는 엔지니어입니다.
초기 번들 96.8% 절감 및 FCP 47% 단축 등 수치 기반의 최적화로 기술이 비즈니스 가치로 이어지는 과정을 경험했습니다. 무한 스크롤과 이미지 최적화 등 렌더링 성능을 개선하는 과정에서 얻은 집요함으로 서비스의 성능을 고민합니다.
사람의 실수에 기대지 않고 '규칙과 시스템'으로 효율과 안정성을 통제하는 아키텍트를 지향합니다.
9가지 인증 엣지 케이스 방어와 45개의 테스트 자동화로 런타임 오류를 차단하고, Atomic Design 기반의 UI 시스템 구축을 통해 팀 전체의 개발 생산성을 향상시키는 구조적 해결에 집중합니다.
PAI 상위 1%의 멘탈과 150명 규모를 이끈 리더십으로 비즈니스 임팩트를 완수합니다.
실사용자 500명 규모의 서비스 운영부터 스타트업 MVP 런칭, 저작권 등록 및 수상으로 이어지는 실행력을 갖췄습니다. 기술적 난관 앞에서도 흔들림 없이 소통하며 팀의 목표를 달성해 내는 동료가 되겠습니다.
Skills
Frontend
Infra
Collaboration
Languages & Tools
Career
넛지(Nudge)
프론트엔드 개발자 · 수원 · 하이브리드 근무
프리랜서
1개월2025.02 – 2025.03
useOAuthPopup Custom Hook implements pop-up OAuth without full page reloading, improves login waiting time by 40%
Resolve Fat Component with SRP-based hook separation (useStickyHeader, etc.) and delete legacy code 134 lines
인턴
4개월2024.08 – 2024.12
Jira-based Agile Sprint-led and Multi-jik Group (Planning and Design) Collaboration to Launch MVP
Accelerate deployment of new pages by 40% with the establishment of an Atomic Design-based design system
Education
아주대학교
소프트웨어학과
졸업전체평점
전공학점
Experience & Activities
2024.03 ~ 2025.02
2024.03 ~ 2025.02
2024.01 ~ 2025.03
2023.03 ~ 2024.12
2023.03 ~ 2024.12
2023.03 ~ 2024.12
2023.03 ~ 2024.12
2023.03 ~ 2024.02
Awards
2025.06
2025.05
2024.12
Certifications
2025.05
Languages
2024.12, ACTFL
Project Overview
Results
System Architecture
Engineering
9가지 진입 케이스를 커버하는 3단 라우팅 가드 설계
accessToken · user · role · FCM 조합으로 분기되는 9가지 진입 케이스를 처리하는 라우팅 아키텍처
Background
망고보스는 소상공인 사장님의 알바생 관리를 자동화하는 서비스로, BOSS(사장)와 STAFF(알바생) 두 역할에 맞게 출퇴근 관리·자동 송금·스케줄 관리 등의 기능을 제공한다.
OAuth 인증으로 사용자 정보(이름·전화·이메일·생년월일)는 카카오에서 자동으로 채워지므로 별도 입력이 없다. ADMIN은 일반 사용자와 분리된 별도 경로로 관리된다.
Problem
accessToken · user · role · FCM 4가지 조건의 조합으로 총 9가지 진입 케이스가 발생. 단순 플래그 하나로는 각 케이스를 정확히 구분할 수 없어, 로딩 시점 잘못된 리다이렉트(Flash)부터 역할 불일치 URL 직접 접근까지 라우팅 취약 지점이 다수 존재.
진입 조건
① 비로그인 (accessToken = null)② 권한 확인 대기 (user = null)③ 역할 선택 미완료 (role = UNASSIGNED)회원가입 완료 시
역할 × FCM
Action
Step 1. 상태 모델링 — 로딩 중 / 로그인 완료 명시적 분리
Step 2. 가드 레이어 3단 분리
| 가드 | 역할 | 처리 케이스 |
|---|---|---|
PublicRoute | 비로그인 전용 페이지 보호 | ①, 역로그인 차단 |
ProtectedRoute | 로그인 + 온보딩 완료 검증 | ②, ③ |
RoleRoute | 역할별 접근 제어 | 역할 불일치 URL 직접 접근 차단 |
Step 3. AppInitializer — 인증 초기화 단일 진입점
Step 4. FCM 권한 요청 지연
State Diagram
Result
9가지 진입 케이스 전체에 대해 의도하지 않은 화면 노출을 효과적으로 차단하고, 단일 진입점 기반의 일관된 인증 처리 구조 확보.
모놀리식 번들 4.27MB → 182kB, 이중 Lazy 전략으로 FCP 47% 단축
Problem
랜딩 페이지 배포 후 모바일 환경 FCP 13.3s, TBT 1.4s 지연 측정으로 인한 사용자 이탈 우려. 번들 분석 결과 단일 모놀리식 번들로 인해 메인 스레드가 블로킹되며, 방문자에게 불필요한 전체 코드 및 대규모 SVG가 강제로 로드되는 심각한 초기 로딩 병목 확인.
Action
Step 1. 해결 방향 검토
Step 2. 번들 세분화 (manualChunks)
Step 3. 이중 Lazy 라우팅 전략
Step 4. 트레이드오프 파훼 (Optimization)
Bundle Treemap Comparison
Result
모놀리식 환경 대비 렌더링 성능의 비약적 향상 및 초기 로딩 병목의 효과적 해소
추가 케이스
role Frontend Developer
member 6명 (Front-end 2, Back-end 2, Designer 1, PM 1)
- Jira 기반 애자일 스프린트 주도 및 다직군(기획·디자인) 협업으로 MVP를 런칭
- Atomic Design 기반 디자인 시스템 수립으로 신규 페이지 구현 속도 40% 단축
- useOAuthPopup 커스텀 훅으로 전체 페이지 리로딩 없는 팝업 OAuth 구현, 로그인 대기 시간 40% 개선
- SRP 기반 훅 분리(useStickyHeader 등)로 Fat Component 해소, 레거시 코드 134라인 삭제
role Frontend Developer
member 4명 (Front-end 1, Back-end 2, Crawling 1)
- 실서비스 운영 — 누적 유저 400명, 활성 유저 150명 달성 (GA4 기반)
- PWA + FCM으로 앱스토어 없이 iOS/Android 푸시 알림 독립 배포 채널 확보
- IntersectionObserver 기반 무한 스크롤로 초기 렌더링 45% 개선
- MSW v2 기반 API 모킹 환경 구축 및 45개의 핵심 비즈니스 로직 테스트 자동화