소개
성능 최적화와 프론트엔드 아키텍처 개선에 관심이 많은 React, TypeScript 기반 3년차 프론트엔드 개발자입니다. 협업툴 회사에서 여러 서비스가 공유하는 유저 모듈과 디자인 시스템을 유지보수했으며 이후 환자 관리 시스템 FE를 개발했습니다.
번들러 마이그레이션(HMR 95% 개선), 번들 사이즈 50% 감소, FCP 50% 단축 등 측정 가능한 성능 개선 경험이 있으며 피처 플래그, 환경변수 중앙관리, MSW 도입 등 팀이 더 빠르게 일할 수 있는 환경을 만들었습니다.
현재는 사이드 프로젝트를 통해 AWS ECS Native blue-green 배포 환경을 구축하며 운영 환경까지 경험을 확장하고 있습니다. Bake Time, Health Check 임계값 튜닝, NAT Instance 활용 등 안정성과 비용을 함께 고려한 아키텍처를 고민하고 있습니다.
또한 디자이너와 협업하며 애니메이션과 인터랙션을 통해 접근성을 해치지 않으면서도 자연스러운 사용자 경험을 만드는 방법에도 관심을 가지고 있습니다. 사용자 경험과 시스템 안정성을 모두 아우르는 개발자를 지향합니다.
경력
오스템 임플란트, Frontend Engineer.
2025.03 ~ 2026.05 (1년 3개월)
환자 관리 시스템 “OneSpace” 신규 개발
React, TypeScript, TanStack Query
성능 최적화
•
Google Maps 렌더링 성능 최적화
◦
GeoJSON 객체 참조 변경으로 클러스터가 반복 생성되는 문제를 React DevTools Profiler로 분석
◦
객체 참조를 안정화하고 마커 등록과 클러스터 계산을 분리하여 불필요한 렌더링과 연산 제거
•
FCP 50% 단축 (3s → 1.5s)
◦
TanStack Router의 파일 기반 라우팅과 Vite manualChunks 옵션으로 코드 스플리팅 적용
◦
◦
CloudFront를 도입하고 리소스 유형별 캐시 전략을 분리하여 정적 리소스 로딩 최적화
◦
스켈레톤 UI를 이용한 CLS 최적화 (0.209 → 0)
서버 상태 관리
•
queryOptions 기반 Query 정의를 재사용하고 useQuery, useSuspenseQuery에서 화면 요구사항에 맞게 옵션을 확장할 수 있도록 설계
•
queryCache.meta를 활용해 Mutation마다 반복되던 queryClient.invalidateQueries 호출을 제거하고 캐시 무효화를 선언적으로 관리
•
Suspense와 Error Boundary를 적용하여 페이지별 Fallback UI와 오류 처리를 동일하게 적용
기능 개발
•
Recharts, TanStack Table로 치과, 기공소를 위해 환자 대시보드 개발
◦
Recharts 기반 통계 대시보드 구현
◦
TanStack Table 기반 공통 DataTable 컴포넌트를 구현하고 컬럼 정의를 객체 기반으로 추상화하여 화면별 재사용
개발 생산성
•
Doppler를 도입하여 Slack DM으로 공유하던 환경변수를 중앙 관리하고 환경별 설정 관리 체계 구축
•
MSW로 API를 모킹해 백엔드 개발 일정과 독립적으로 프론트엔드 개발 진행
인프라
•
BitBucket Pipeline 기반 CI/CD 구성
◦
parallel 옵션으로 파이프라인을 병렬화해 소요 시간 70% 감소 (5분 → 1분 30초)
•
AWS S3, CloudFront를 활용한 프런트엔드 정적 배포 인프라 구성
•
어드민 등 타 서비스 확장을 고려해 Turborepo 기반 모노레포 설계 및 구축, pnpm Catalog로 공통 의존성 버전 관리
트러블 슈팅
•
Radix Dialog와 Popover 버전 충돌 해결
◦
Dialog 내부에서 DatePicker 사용 시 날짜 클릭과 동시에 Popover가 닫히는 이슈 발생
◦
react-dismissible-layer의 중복 버전으로 인해 외부 클릭 감지 로직이 충돌한 원인을 파악
◦
pnpm dedupe으로 중복 의존성을 제거하여 해결
티맥스 와플, Frontend Engineer. (코어 모듈 팀)
통합 업무 플랫폼(메신저, 화상회의, 일정관리)의 유저 모듈을 배달 공제회, 포스코 도시락, 서울시 교육청, 농어촌 공사, 육군본부 5개 B2B 고객사 요구사항에 맞게 커스터마이징 및 유지보수. 사내 디자인 시스템 유지보수 병행 수습 발표 자료
유저 모듈 유지보수
React, TypeScript, TanStack Query, Vitest, React-Testing-Library
DX 개선
•
HMR이 최대 1분까지 소요되는 문제를 해결하기 위해 tsup, esbuild, Vite를 비교 검증한 뒤 Vite로 마이그레이션하여 Build Time 67% 단축(60초 → 20초), HMR 95% 개선(60초 → 3초) [Blog]
•
Husky, Lefthook, Commitlint를 적용하여 커밋 컨벤션과 코드 포맷 검증 자동화
성능 최적화
•
번들 분석을 기반으로 Tree Shaking 전략을 개선하여 Bundle Size 50% 감소(400KB → 200KB)
•
서버 전처리가 불가능하고 기존 라이브러리 유지보수가 중단된 환경에서 Canvas API 기반 이미지 리사이징을 직접 구현하여 이미지 용량 90% 감소(2MB → 200KB), 로딩 시간 90% 단축(730ms → 70ms)
◦
OffscreenCanvas와 Web Worker를 적용하여 메인 스레드 블로킹 제거
•
React 18 동시성 기능(useTransition, useDefferedValue)를 활용하여 대용량 유저 검색 시 UI 블로킹 제거
코드 품질 개선
•
백엔드 API 응답 전용 타입을 도입하여 Repository 계층의 any를 제거하고, API 변경 영향 범위를 Repository 내부로 한정
•
폼 상태 관리 및 검증 로직을 React Hook Form + Zod 기반으로 리팩토링 해 관련 코드 30% 감소
•
•
Profile 컴포넌트를 Compound Pattern으로 리팩토링하고 서비스 요구사항에 맞춰 Compound, Flat API를 함께 제공하여 재사용성 향상
사내 디자인 시스템 유지보수
React, TypeScript, Emotion, Storybook, Rollup, Material UI
•
Emotion Interface의 선언적 확장을 이용해 여러 서비스에서 기본 디자인 토큰 외에 디자인 토큰을 TypeScript 타입 지원하도록 테마 오버라이딩 기능 개발 Blog
◦
디자인 시스템이 단일 테마만 지원해 고객사별 브랜드 색상 적용 불가, 각 팀이 색상 상수를 컴포넌트에 직접 하드코딩하는 방식으로 우회
◦
고객사별 브랜드 테마를 지원하기 위해 Emotion Theme 타입을 제네릭으로 확장하는 makeTheme 유틸리티 구현
◦
기본 디자인 토큰과 서비스별 확장 토큰 모두 TypeScript 자동완성을 지원하여 테마 확장성과 타입 안정성 확보
•
TypeScript 제네릭을 활용해 as prop 기반 컴포넌트 다형성을 구현해 태그에 맞는 HTML 속성 타입 추론 지원
사이드 프로젝트
연합동아리 Yapp에서 진행한 마케터를 위한 광고 채널 추천 서비스
Next.js, TypeScript, TanStack Query, AWS
인프라
•
GitHub Actions concurrency를 적용하여 동시 배포 시 발생하던 워크플로우 충돌 방지
•
ECS Native Blue/Green 배포에서 Bake Time과 Health Check를 서비스 특성에 맞게 조정하여 평균 배포 시간 10분 → 5분 단축
•
Tokens Studio → Style Dictionary → Tailwind CSS v4 변환 과정을 GitHub Actions로 자동화하여 디자인 토큰 변경부터 CSS 생성까지 수작업 제거
•
운영 비용을 고려해 NAT Gateway 대신 NAT Instance 기반 VPC 아웃바운드 통신 환경 구성
협업 제안
•
상태별(hover, disabled) 컬러 토큰을 opacity 기반으로 관리하는 방식을 제안하여 색상 토큰을 3개에서 1개로 통합하고 관리 포인트를 1/3로 감소
•
라프텔의 인증 UX 사례를 벤치마킹해 디자이너에게 개선안을 제안해 팀에 반영되어 로그인 플로우 개선
2025.01 ~ 2025.07 (DESIGN 2, FE 2, BE 2) [PR]
연합동아리 DND에서 진행한 게이미피케이션을 접목한 독서 기록 서비스 (12기 대상 수상)
Next.js, TypeScript, TanStack Query, Tailwindcss, Turborepo, Storybook, Github Actions
기능 개발
•
React Query Prefetch와 HydrationBoundary를 적용하여 서버 컴포넌트 워터폴 방지
•
Route Handler 기반으로 카카오 OAuth를 구현하고 백엔드 JWT를 HttpOnly Cookie로 관리
•
다른 유저 책장 기능 추가에 따른 URL 변경 시 rewrites를 적용하여 기존 링크의 하위 호환성 유지
•
Safari 리소스 최적화 정책으로 인해 캡처 이미지가 누락되는 문제를 Blob 크기 검증 방식으로 해결하여 크로스 브라우저 호환성 확보
SEO 최적화
개발 환경 개선
•
GitHub Actions Composite Action과 PR 자동 라벨링을 적용하여 워크플로우 중복을 줄이고 리뷰 프로세스를 개선
활동
2026.05 ~ 2026.08
YAPP 28기
•
디자이너와 개발자들이 협업하여 사이드 프로젝트를 진행하는 IT 연합동아리에서 광고채널 추천 서비스 chaeso-zip 개발
2025.03
멀티패러다임 프로그래밍 베타리더
2023.07 ~ 2023.10
2023 오픈소스 컨트리뷰션 아카데미
•
교육
2017.03 ~ 2024.02
동국대학교 정보통신공학 학사
2023.06 ~ 2023.12
2023.01 ~ 2023.02
수상 및 자격증
•
•
AWS SAA(2026.04.04), 정보처리기사 (2020.09.04), SQLD (2021.06.25), OPIC - IM1(2025.03.19)
