미리보기

• 대리점, 클레임 관리를 위한 B2B 백오피스 개발 및 기획(디자인) 담당

• 사용기술 : React, Tailwindcss, AWS OIDC, Github actions

[Plop.js 기반 코드 생성 자동화 CLI 구축]

• 프로젝트 내 반복되는 page, api, const 생성 과정을 자동화하기 위해 plop.js 도입

• 사용자 입력(생성 위치, 도메인명, 페이지명, 메뉴 링크명 등)을 받는 프롬프트를 구현해 일관된 디렉터리 구조 유지

• 팀원 누구나 터미널에 plop 명령 실행만으로 표준화된 골격 파일을 간편하게 생성 가능하도록 개발 환경 및 생산성 개선

[CRA → Vite 마이그레이션으로 빌드 타임 75% 단축]

• 기존 Create React App 기반 프로젝트를 Vite로 전환하여 빌드 시간 4분 → 1분으로 대폭 단축, 빠른 HMR 환경으로 개발 생산성 향상

• 초기 로딩 속도 또한 기존 대비 2배 이상 개선, 반복적인 기능 개발 및 테스트 사이클을 가속화

[AWS OIDC + Github actions 기반 CI/CD 구축으로 배포 자동화]

• AWS IAM과 OIDC 인증을 기반으로 GitHub Actions를 연동하여 보안성과 효율성을 갖춘 자동화 배포 파이프라인 구성

• S3 기반 무중단 배포 자동화로 운영 안정성 확보

• GitHub Actions 활용하여 빌드 시간 단축 및 배포 비용 최적화

• 브랜치 및 환경(dev, prod)별 배포 분리로 QA 효율과 운영 품질 동시 확보

[FSD 아키텍처 도입으로 유지보수성과 번들 사이즈 최적화]

• 기존 페이지/컴포넌트 단위 구조를 FSD 아키텍처로 개편하여 모듈화와 관심사 분리 강화

• shared/ui, features, entities, widgets 등 레이어 기반의 도메인 중심 설계 도입

• 중복 로직 제거 및 유틸 함수 통합으로 코드량 약 20% 감소, 초기 번들 사이즈 30% 절감

• 불필요한 의존성 제거, 스타일 가이드 정립, 공통 컴포넌트 정비를 통해 전반적인 코드 품질과 유지보수성 개선

[프로젝트 리딩 및 전반적인 구조 개선 경험]

• Git 브랜치 전략 및 커밋 컨벤션 도입으로 팀 내 협업 체계 정비 및 코드 리뷰 품질 향상

• 요구사항 수립, IA 및 프로토타입 작성, 화면 기획서 산출물 등을 직접 주도하여 기획-개발 간 전달 누락 방지

• 고객과 개발팀 간의 적극적인 조율을 통해 기획 품질과 배포 속도 모두 개선, 고객 만족도 향상에 기여

• 에듀테크 서비스(KDT, KDC 교육) 프론트 개발

• 수강생 관리 및 사내 백오피스 개발

• 사용 기술 : Next.js, Typescript, Remix.js Redux, Redux-thunk, React-query, SCSS, Tailwindcss, Storybook, Google Analytics, 뷰저블

[Yarn Workspaces 기반의 공통 패키지 설계 및 모노레포 환경 경험]

• Yarn Workspaces를 기반으로 UI 컴포넌트, 공통 유틸 함수, 도메인 모듈 등을 패키지 단위로 분리하여 모노레포 구조 설계 및 초기 환경 구축 주도

• symlink 기반의 실시간 참조 구조를 통해 중복 코드 제거 및 멀티 앱 개발 환경에서의 생산성 향상 도모

• 팀원 간 모듈 재사용 컨벤션 부재 및 이해도 차이로 인해 통합 운영에는 실패했으나, 구조적 설계와 실패 회고를 기반으로 도구 도입 시 온보딩, 가이드 문서화, 점진적 리팩터링 전략의 필요성을 명확히 인식

[데이터 기반 로그 분석 및 A/B 테스트 운영]

• Google Analytics, UTM, 뷰저블을 활용하여 정량적 클릭 흐름부터 정성적 시선 이동 분석까지 가능한 통합 사용자 분석 환경 구축

• 로그 기반 A/B 테스트를 직접 기획 및 실험, 클릭률 최대 32% 향상, 전환율 18% 증가에 기여

• 디자이너와 협업하여 UI 개선 가설 수립 → 실험 설계 → 결과 반영까지 전 과정을 주도함으로써 데이터 기반 제품 개선 문화 정착

[모듈화된 도메인 아키텍처 기반 서비스 설계 및 유지보수 효율화]

• apply, enterprise, order, onboarding 등 각 도메인을 독립적으로 모듈화하고, 컴포저블한 구조로 기능을 설계

• TailwindCSS 기반으로 코어 컴포넌트와 도메인 컴포넌트를 분리하여 재사용성과 확장성 확보

• 구조화된 패키징 전략으로 신규 도메인 기능 개발 기간을 평균 25% 이상 단축

[서비스 기능 고도화로 사용자 경험 개선 및 CS 리소스 80% 절감]

• 연간 일정 시스템, 수강 후기 기능 등 사용자 니즈 중심 기능을 기획 및 단독 구현

• 기능 도입 후 사용자 문의 건수가 월평균 15건 → 3건으로 80% 감소, 실질적인 고객 경험 개선에 기여

• UI/UX 개선으로 페이지 평균 체류 시간 1.6배 증가, 고객 리텐션 향상

• 데이터 시각화 솔루션 개발 및 퍼블리싱

• 사용기술 : Java, JSP, React, Sass, TypeScript, Highcharts

[빅데이터 거래 플랫폼 개발]

• 데이터 시각화 기반의 자사 솔루션 및 웹사이트 리뉴얼을 기획하고 전반적인 프론트 개발을 담당

[GIS 기반 지도 서비스 개발]

• 동대문구, 동작구의 GIS 기반 마을 지도 및 공공시설 정보 제공 및 데이터 시각화 웹 서비스 제작

[소상공인 대시보드 및 지도 서비스 개발]

• 소상공인진흥공단에서 버팀목 자금 관리를 위한 관리자용 대시보드 사이트 제작 및 서울시의 다양한 상가 업소 정보를 그래프와 지도로 보여주는 웹 서비스 제작