소개
React와 TypeScript로 서비스 성능과 공통 UI 구조를 개선해 온 프론트엔드 개발자입니다.
여러 서비스가 공유하는 유저 모듈과 디자인 시스템을 유지보수하고, 치과, 기공소의 환자 관리 서비스와 클라우드 관리 대시보드를 개발했습니다. 번들러 마이그레이션으로 공통 라이브러리의 HMR을 60초에서 3초로 줄이고 대시보드의 초기 화면 표시 시간을 3초에서 1.5초로 단축한 경험이 있습니다.
API 클라이언트, MSW 핸들러 생성, 환경변수 중앙 관리 등 반복 작업과 개발 대기를 줄이는 환경도 구축했습니다.
사이드 프로젝트에서 디자이너와 인터랙션을 구체화하고 배포 시간과 인프라 비용를 개선하며 경험을 넓히고 있습니다.
경력
수퍼게이트, Frontend Engineer.
2026.06 ~ 2026.09 (3개월)
OpenStack과 Kubernetes 기반 클라우드 관리 플랫폼 대시보드 개발
Next.js, TypeScript, TanStack Query
•
OpenAPI 명세를 기반으로 TypeScript API 클라이언트와 MSW 핸들러를 생성해 백엔드 서버 실행 없이 주요 화면을 개발·검증할 수 있도록 개선
오스템 임플란트, Frontend Engineer.
2025.03 ~ 2026.05 (1년 3개월)
치과, 기공소가 환자 정보와 보철 주문을 관리하는 웹 서비스 OneSpace의 프론트엔드 개발
React, TypeScript, TanStack Query
치과, 기공소의 환자 관리 및 보철 주문 업무 기능 개발
•
환자 관련 통계와 목록을 확인할 수 있도록 Recharts 기반 차트와 TanStack Table 기반 공통 DataTable을 구현하고, 화면별 컬럼 정의를 분리해 재사용
•
구강스캐너에서 생성한 3D 데이터를 웹에서 확인할 수 있도록 Three.js 기반 3D 뷰어 구현
•
임플란트, 인레이 등 보철 주문 내역을 문서로 제공하기 위해 주문 데이터 테이블을 PDF로 생성하는 기능 구현
초기 화면 표시 시간 단축
•
코드 스플리팅 적용, 폰트 경량화, CloudFront 도입, 리소스 유형 별 HTTP 캐시 정책 도입 등을 적용해 FCP 50% 단축 (3s → 1.5s), 스켈레톤 UI를 이용한 CLS 최적화 (0.209 → 0)
Google Maps 지도 마커의 불필요한 재계산 개선
•
병원, 기공소 위치를 지도에 표시하고 가까운 마커를 묶어 보여주는 기능에서 동일한 위치 데이터가 반복 로딩되는 원인 분석
•
GeoJSON 변환과 고정 설정 객체에 useMemo를 적용해 참조를 유지하고 불필요한 클러스터러 초기화와 데이터 재계산 방지
•
위치 데이터 로딩과 지도 범위·줌에 따른 클러스터 조회를 분리해, 지도 이동·확대 시 기존 데이터 인덱스를 재사용하도록 구성
•
마커 표시 영역을 별도 컴포넌트로 분리하고 React.memo를 적용해 동일한 props에 대한 리렌더링을 건너뛰도록 구성
여러 화면에서 사용하는 서버 상태 처리 공통화
•
같은 API 요청의 Query 정의를 queryOptions로 재사용하고 화면 요구에 따라 useQuery, useSuspenseQuery의 옵션을 확장하도록 구성
•
각 Mutation에서 반복하던 캐시 무효화 호출 로직을 공통 queryCache로 옮기고 meta를 통해 캐시 갱신 대상을 선언적으로 관리하도록 개선
•
Suspense와 Error Boundary를 적용해 페이지별 로딩 화면과 오류 처리 방식을 통일
환경변수 공유와 배포 과정 개선
•
Slack DM으로 공유하던 환경변수를 Doppler로 중앙 관리하고, 환경별 설정을 구분하는 관리 체계 구축
•
Bitbucket Pipeline의 독립 작업을 병렬화해 파이프라인 소요 시간 5분 → 1분 30초 단축
•
AWS S3, CloudFront 기반 정적 배포 환경을 구성하고 어드민 등 추가 서비스에서 UI, 설정을 공유할 수 있도록 Turborepo 기반 모노레포 구축
날짜 선택 Popover가 비정상으로 닫히는 문제 해결
•
Dialog 내부에서 날짜를 선택하면 Popover가 함께 닫히는 문제를 추적해 외부 클릭 감지에 사용되는 레이어 의존성의 중복 버전으로 이벤트 처리가 충돌하는 원인 확인
•
pnpm dedupe로 중복 의존성을 정리해 날짜 선택 시 팝업이 비정상적으로 닫히는 문제 해결
티맥스 와플, Frontend Engineer. (코어 모듈 팀)
통합 업무 플랫폼(메신저, 화상회의, 일정관리)의 유저 모듈을 고객사 요구사항에 맞게 커스터마이징 및 유지보수. 사내 디자인 시스템 유지보수 병행 수습 발표 자료
React, TypeScript, TanStack Query, Emotion, Storybook, Vitest
공통 라이브러리 개발 중 반복되는 대기 시간 개선 [Blog]
•
코드 저장마다 최대 1분을 기다려 작업 흐름이 끊기는 문제를 발견하고 Rollup → Vite 마이그레이션 제안 및 진행
•
tsup, esbuild, Vite 중 CSS 포함 여부, HMR 지원 여부 그리고 팀의 유지보수 여건을 고려해 사용 경험자가 많은 Vite를 선택하고 캘린더, 메일, 조직도 등 타 서비스에 테스트 버전을 연결해 스타일, 타입 호환성 검증
•
변경 반영 시간 60초 → 3초, 빌드 시간 60초 → 20초 단축
공통 모듈의 번들, 이미지 처리 개선
•
공통 모듈의 번들 구성을 분석하고 Tree Shaking 전략을 개선해 번들 크기 400KB → 200KB 축소
•
서버에서 이미지를 전처리할 수 없고 기존 라이브러리의 유지보수가 중단된 환경에서 Canvas API 기반 이미지 리사이징 직접 구현
•
이미지 용량 2MB → 200KB, 로딩 시간 730ms → 70ms로 줄이고 OffscreenCanvas, Web Worker로 이미지 처리 작업을 메인 스레드에서 분리
•
대용량 유저 검색 시 입력에 우선 응답할 수 있도록 useTransition, useDeferredValue로 입력과 검색 결과 갱신의 우선순위 구분
고객사별 브랜드 테마 지원 [Blog]
•
디자인 시스템이 단일 테마만 지원해 각 서비스에서 브랜드 색상을 하드코딩하던 문제 개선
•
Emotion Theme 타입을 제네릭으로 확장하는 makeTheme 유틸리티를 구현해 기본 디자인 토큰에 서비스별 토큰을 추가할 수 있도록 구성
•
기본, 확장 토큰 모두 TypeScript 자동완성을 제공해 고객사별 테마 적용과 타입 검증 지원
코드 품질 개선
•
백엔드 API 응답 전용 타입을 도입하여 Repository 계층의 any를 제거하고 API 변경 영향 범위를 Repository 내부로 한정
•
폼 상태 관리와 검증 로직을 React Hook Form, Zod 기반으로 통합
•
•
Profile 컴포넌트를 Compound Pattern으로 리팩토링하고 서비스 요구사항에 맞춰 Compound, Flat API를 함께 제공하여 재사용성 향상
사이드 프로젝트
2026.05 ~ (PM 1, DE 2, FE 2, BE 2) PR
마케터가 광고 채널의 상세 정보를 탐색하고, 채널별 예상 지표를 비교할 수 있는 서비스
Next.js, TypeScript, AWS, Motion
디자이너와 협업한 유저 플로우 개선
•
사용자가 로그인, 회원가입을 먼저 선택하던 흐름을 하나의 시작 버튼으로 통합하고 이메일 입력 후 계정 상태에 따라 분기하도록 개선안을 제안해 팀 디자인과 실제 인증 흐름에 반영 - 참고 사례
채널 탐색, 비교 결과 화면 인터랙션 구현
•
채널 상세 모달과 4개 정보 탭을 구현하고 탐색 방향을 반영한 전환과 콘텐츠에 맞춘 모달 높이 변화 애니메이션 적용 PR
•
포인터 입력에는 방향 모션, 키보드 입력에는 즉시 전환을 적용하고 prefer-reduced-motion 설정에서는 Fade를 사용하도록 인터랙션 정책 분리
•
정적 디자인을 바탕으로 모바일 헤더의 메뉴 열기, 닫기 동작을 디자이너와 구체화하고 메뉴 패널, 항목, 아이콘의 트랜지션을 연결해 구현 PR
•
채널 비교 차트의 지표를 바꿀 때마다 막대가 0부터 다시 그려지는 UX를 개선하기 위해 차트 재생성 대신 상태 기반 데이터 갱신 구조 적용
배포 시간과 운영 비용 개선
•
ECS Native Blue/Green의 Bake Time과 Health Check를 서비스 안정화 시간에 맞게 조정하여 평균 배포 시간 약 10분 → 5분 단축
•
트래픽 규모와 운영 비용을 고려해 NAT Gateway 대신 NAT Instance 기반 VPC Private 서브넷 구성, CPU 및 메모리 사용량에 맞춰 Task Spec을 조정하고 ARM, Spot Instance를 적용해 월 컴퓨팅 비용 비교 값 USD 55.47 → 45.58로 약 17.8% 절감
디자인 변경과 코드 리뷰의 반복 작업 개선
•
Tokens Studio → Style Dictionary → Tailwind CSS 변수 생성 과정을 자동화해 디자인 토큰 변경 후 수작업 제거 (Github)
•
•
AI 활용으로 커진 PR의 리뷰 부담을 줄이기 위해 Stacked PR을 제안·적용하고, 변경사항을 작은 단위로 나누어 검토하도록 개선
2025.01 ~ 2025.07 (DESIGN 2, FE 2, BE 2) [PR]
연합동아리 DND에서 진행한 게이미피케이션을 접목한 독서 기록 서비스 (12기 대상 수상)
Next.js, TypeScript, TanStack Query, Tailwindcss, Turborepo, Storybook
데이터 조회, 로그인 흐름 구현
•
서버 컴포넌트의 네트워크 워터폴을 줄이기 위해 Query Prefetch, HydrationBoundary 적용
•
Route Handler에서 카카오 OAuth를 처리하고 백엔드 JWT를 HttpOnly Cookie로 관리
기능 확장에 따른 호환성 대응
•
다른 사용자 책장 기능 추가로 URL 구조가 변경될 때 rewrites를 적용해 기존 공유 링크 유지
•
Safari에서 캡처 이미지가 누락되는 문제를 Blob 크기 검증 방식으로 해결
SEO 최적화
개발 환경 개선
•
GitHub Actions Composite Action과 PR 자동 라벨링을 적용하여 워크플로우 중복을 줄이고 리뷰 프로세스를 개선
활동
YAPP Plus (2026.09 ~ )
•
YAPP 구성원이 사용할 내부 iOS 앱을 React Native로 개발
YAPP 28기 (2026.05 ~ 2026.08)
•
•
오픈소스 컨트리뷰션 아카데미 - Continue (2024.09 ~ 2024.10)
•
•
오픈소스 컨트리뷰션 아카데미 - Yorkie (2023.07 ~ 2023.10)
•
동시 편집 지원 프로젝트의 의존성 마이그레이션과 UX 개선에 기여
교육
•
동국대학교 정보통신공학 학사 (2017.03 ~ 2024.02)
•
•
수상 및 자격증
•
•
AWS SAA(2026.04.04), 정보처리기사 (2020.09.04), SQLD (2021.06.25), OPIC - IM1(2025.03.19)
