SaaS B2B CLM Web Service 개발 / 2024.10 - 2025.07 SaaS B2B CLM Web Service의 프론트엔드 개발을 리드하며, 기술 및 프로세스 개선을 통해 운영 효율과 비즈니스 대응 속도를 극대화했습니다. [Vercel 기반 빌드/배포 파이프라인 개선 및 빌드 시간 70% 이상 단축] - 문제: GitHub Actions 기반 모노레포 구조에서 발생하는 평균 10분 이상의 긴 빌드 시간과 불필요한 비용. - 해결: Vercel의 'Ignored Build Step' 전략을 도입하여 CI/CD 파이프라인을 재설계하고, 변경된 프로젝트만 독립적으로 빌드되도록 최적화. - 성과: 평균 빌드 시간을 10분 > 3분 미만으로 70% 단축하고, 팀의 배포 경험 개선 및 비용 절감. [React Query 도입을 통한 상태 관리 구조 리팩터링 및 성능 개선] - 문제: useState와 props drilling에 의존하여 코드 복잡도, 사이드 이펙트, 불필요한 리렌더링 문제 발생. - 해결: 비동기 데이터 관리를 중앙화하고, 기존 로직을 custom hook으로 점진적으로 리팩터링. - 기술 선택 이유: 전역 상태보다 서버 상태(Server State)의 비중이 높다는 점에 주목, 클라이언트 상태 관리에 특화된 Zustand/Recoil보다 캐싱, refetching 등 비동기 데이터 관리에 강력한 React Query가 더 적합하다고 판단. - 성과: props drilling 해결로 컴포넌트 재사용성 및 유지보수성 향상, 최적화된 캐싱으로 렌더링 성능 개선. [동적 GNB 설계 및 개발 리소스 100% 절감] - 문제: 고객사별 상이한 메뉴 구조로 GNB 수정 요청 시마다 개발팀의 리소스가 반복 투입되는 비효율 발생. - 해결: 기획/운영팀과의 긴밀한 협업 하에 Retool 대시보드를 연동, 비개발자도 직접 GNB를 수정할 수 있는 시스템을 구축. - 성과: GNB 관련 개발 요청을 최소화하여 운영이 가능해졌고, 고객 요구사항 대응 속도를 평균 3일 > 실시간으로 단축. 기술 스택 : Next.js, TypeScript, React Query, TailwindCSS, Turborepo, Vercel

더보기

충전식 카드형 온누리상품권 / 2023.01 - 2024.10 충전식 카드형 온누리상품권 서비스의 프론트엔드 개발을 담당하며, 성능 및 안정성 문제를 해결하여 사용자 경험과 서비스 신뢰도를 높였습니다. [보안 키패드 로딩 개선으로 사용자 이탈 방지 및 CS 80% 감소] - 문제: 평균 3.5초의 키패드 로딩 시간으로 인한 높은 초기 이탈률과 관련 CS 문의 다수 발생. - 해결: 동기 방식의 라이브러리 초기화 로직을 비동기 폴링(polling) 방식으로 개선하여 렌더링 차단 제거. - 성과: 키패드 평균 호출 속도를 3.5초 > 0.5초 미만으로 85% 이상 단축, 해당 구간의 사용자 이탈 0건 달성 및 관련 CS 80% 감소. [데이터 정합성 문제 해결로 결제 기능 신뢰도 향상] - 문제: 네트워크 지연 및 앱 상태 변화 시 데이터 불일치로 인한 사용자 혼란 및 CS 문의 발생. - 해결: React Query 캐싱 정책 최적화 및 React Native의 AppState을 활용한 refetch 로직 구현. - 성과: 결제 및 선물 기능 CS가 90% 이상 감소, 서비스 신뢰도 및 안정성 확보. 기술 스택 : Next.js, React Native, React Query, Redux Toolkit, Chakra UI

더보기

개발 인프라 최적화, 프로세스 개선 다수의 웹/앱 서비스 개발 / 2020.06 - 2022.11 초기 스타트업의 개발 문화와 인프라를 구축하고, 다수의 웹/앱 서비스를 개발하며 비즈니스의 빠른 성장을 지원했습니다. ['만타' 플랫폼 Lighthouse 18점에서 90점으로 성능 최적화] - 문제: CSR 환경에서 Firebase SDK 초기화 지연으로 인한 TTFB 증가, 최적화되지 않은 이미지 로딩, Third-party 스크립트의 렌더링 차단 - 해결 - Next.js SSR과 Firebase Admin SDK를 활용한 하이브리드 렌더링 전략 구현 - Firebase Functions 기반 이미지 자동 최적화 파이프라인 구축 (WebP 변환, 다중 사이즈 생성, LQIP 적용) - Third-party 스크립트 실행 순서 최적화 및 지연 로딩 적용 - 성과: Lighthouse 성능 점수 18점 > 90점 (5배 향상), TTFB 3초 > 0.8초 단축, TTI 대폭 개선 [개발 인프라 구축으로 온보딩 기간 50% 단축] - 문제: 반복적인 초기 설정과 통일되지 않은 컨벤션으로 인한 개발 및 유지보수 효율 저하. - 해결: 공용 보일러플레이트 제작, eslint/prettier와 git hook 기반 코드 컨벤션 정립 및 온보딩 문서 표준화. - 성과: 신규 입사자 온보딩 기간 평균 8주 > 4주로 50% 단축, 팀 전체의 개발 생산성 향상. 기술 스택 : Next.js, TypeScript, Antd, Styled Components, React Native(Cli > Expo), Mobx, Redux Saga, Redux Toolkit, Zustand, React Query, Vercel, Express

더보기