오늘의 배송 Toodee: 배송접수 UI 및 구 개선 작업 작업기간: 2024.10 - 2025.04 오늘의 배송 Toodee는 퀵, 택배접수, 배송현황, 결제현황 등을 손쉽게 처리, 확인할 수 있는 PC/앱으로 제공되는 B2B 서비스입니다. 기존 퀵, 택배접수 UI의 리뉴얼 및 편의 기능 추가, 코드 리팩토링, 최적화 작업을 진행하였습니다. 핵심 성과 - 레거시 배송접수 페이지를 개선하여 코드 양 18% 감소, 퍼포먼스 30% 향상, 핵심 로직 커버리지 100% 달성 작업 내용 - react-hook-form, zod, react-query 도입 및 코드 개선으로 프레임 드랍 85% 감소 및 코드 양 18% 감소 - vitest, react-testing-library 사용한 단위, 통합테스트 작성, 중요도 기준으로 테스트 분류, 중요도 상 테스트 커버리지 100% 달성 - 기존 테스트 환경 Jest+MSW v1을 Vitest+MSW v2로 마이그레이션, 테스트 속도 70%향상 및 Storybook과 통합 - 홈페이지의 퍼포먼스 개선하여 html 로드 속도 50%감소, LCP 48%감소, FCP 60%감소 - 기존 UI PC/모바일 반응형 최적화 형태로 개선 마이리베 작업 기간: 2025.03 - 마이리베는 대리점, 판매점의 단말 리베이트 관리, 개통관리, 상담기능 등을 제공하는 B2B 서비스입니다. 단말 리베이트 정책 등록 및 개통 요청 작업을 담당, 프로젝트 기획, UI 설계 등 관여하여 MVP 프로젝트 출시에 성공하였습니다. 핵심 성과 - Next.js App router의 feature를 활용한 캐싱 기능 활용, 퍼포먼스 향상 및 API 호출수 감소 작업 내용 - Next.js App Router & React 19 기반 프로젝트 세팅 및 작업 진행 - JWT 인증을 Next-Auth 기반으로 구축하여 CSRF 방지 작업 등 보안 중심적인 인증 체계 구축 - 단말 시리즈/목록 관련 API들의 중복 호출 문제를 Data Cache 기법 적용하여 API 호출수 95%이상 감소 - Vercel, Github Action 기반 CI/CD 및 클라우드 배포 환경 구축 O2pluss Design System 작업 기간: 2024.02 - 2024.12 핵심 성과 - 재사용 가능한 컴포넌트 작성, 문서화 등을 통해 UI 작업공수 평균 70% 감소 작업 내용 - 재사용/커스터마이징 가능한 컴포넌트, 에니메이션 도입으로 UI 작업공수 평균 30~50% 감소 - vite를 사용한 모듈 번들로 다양한 환경 (SSR, cjs, esm)에서 사용가능한 라이브러리 빌드 - storybook 사용한 예제 작성 및 문서화 AI 사용한 자동화로 관련 작업시간 80%감소 - github actions, github packages 사용한 배포 CI/CD 파이프라인 구축 Coconuts 리뉴얼 및 개선 작업 작업 기간: 2024.03 - 2025.07 코코넛은 KT M&S와의 협력하에 운영중인 단말 요금 상담 및 유통 관리 기능을 담고 있는 서비스입니다. Vue 기반 레거시 서비스의 UI/UX 개선 및 비즈니스 로직 리팩토링, E2E 시나리오 테스트를 구축하였습니다. 핵심 성과 요금계산기 서비스의 모듈화 작업 및 리팩토링, E2E 테스트 구축하여 수정과 변경에 용이한 프로젝트로 개선 작업 내용 - 기존의 요금, 할인 계산 관련 레거시 코드를 Flux 패턴, selector 패턴 기반으로 개선하여 코드 흐름 및 유지보수성 개선 - Webpack Module Federation 사용하여 레거시 Vue프로젝트 점진적으로 React로 개선 환경 구축 - Cypress E2E 테스트 도입으로 시나리오 테스트 자동화로 반복 검증 작업 13% 감소 - Webpack 기반 React 프로젝트 구축, contenthash 적용하여 페이지 번들 로드 속도 50%증가, 안정적 cache busting 구축

더보기

특이사항: 미니스쿨로부터 고용승계 ● VLOC Console 2022.12 - 2023.03 프로젝트 소개 - Client SDK의 사용에 필요한 Auth Token의 생성, 옵션 설정 기능이 있는 B2C프로젝트입니다. - USDC, VLOC Token을 지불하여 데이터 사용량 구매할 수 있습니다. - Client SDK 사용 현황을 차트, 테이블 형태로 제공합니다. 기여도 - UI개발담당 (70%) 성과 - SSR, Tree Shaking, Code Spliting 적용하여 웹 퍼포먼스 개선 (LCP 평균 1.5초 감소) - React Query 데이터 캐싱 사용하여 API호출 횟수 약 10%감소 - Jest, Testing Library, MSW 사용한 단위테스트 작성 (coverage 70%) - Multi Stage Build 적용해 Docker 이미지 용량 감소(2.5GB->300MB), 배포 시간 70% 감소 - Github Actions 사용하여 CD/CI 구축 - SEO 최적화 관련 작업으로 Lighthouse 기준 SEO 점수 90점 달성 ● Larla 2022.08 - 2022.09 프로젝트 소개 - Client SDK 의 화상통화 기능 시연을 담당하는 화상통화 웹 애플리케이션입니다. - Google Meet, Zoom과 같은 화상통화 기능을 가지고 있습니다. 기여도 - 프론트엔드 ui 개발 담당(100%) 성과 - Zustand 도입하여 Redux 사용 시보다 코드 양 50% 이상 감소 - Debounce, Memo 등 활용하여 컴포넌트 렌더링 최적화(초당 100회 이상->최대 10회) - Github Actions로 CI/CD 구축, AWS EC2에 프로젝트 배포 ● VLOC Web Client SDK 2022.06 - 2022.11 프로젝트 소개 - 화상통화 기능을 담은 SDK입니다. 기여도 - SDK 개발 및 배포 (100%) 성과 - OOP 기반의 SDK 라이프사이클 구현 - Websocket 요청/응답 처리를 Promise, async/await기반으로 변경하여 가독성 향상 - Rollup, Terser 등을 사용하여 SDK 빌드 사이즈 80kb가량까지 감소

더보기

● New Editor 2021.06 - 2021.11 프로젝트 소개 - 기존 Editor의 여러 문제점들로 인한 작업시간 증가로 신규로 제작한 프로젝트 기여도 - 프론트엔드 개발, 코드리뷰&컨벤션 관리 담당 (35%) 성과 - Redux selector 중복코드 제거하여 전체 코드 양 10%가량 감소 - Jest, React Testing Library 사용한 단위테스트 작성 (coverage 50%) - UI Design System을 Github Packages로 배포하여 UI 작업 생산성 증가 - ESBuild-loader 적용하여 로드시간 감소 (5.5s->2s) ● 애셋관리자 고도화 작업 2021.03 - 2021.15 프로젝트 소개 - Editor 내 기능 중 하나인 애셋관리자 개선, 고도화 작업 수행 기여도 - 프론트엔드 개발 (100%) 성과 - Intersection Observer 사용한 무한스크롤 기능 추가로 애셋리스트 로드속도 약 10% 증가 - 애셋 검색어 입력 시 Debounce 추가하여 검색결과 API 호출 횟수 감소 - selector pattern 적용하여 상태관리 단순화

더보기

● 서비스에 대한 어드민 페이지 개발 2019.07 - 2020.03 프로젝트 소개 - 하이원 서울가요대상 투표앱의 백오피스 서비스 개발을 담당하였습니다. 기여도 - 프론트엔드 (100%) 성과 - Vue.js 사용한 SPA 프로젝트 개발 - JWT 인증 기반 로그인 로직 구현 - bootstrap 사용한 layout, ui 구현

더보기