김규정 포트폴리오

► 담당 역할 : 웹 프론트엔드 개발 (기여도 50%)

► 업무 기간 : 2025.08 ~ 현재

► 기술 스택 : Next.js 13, React 18, JavaScript, Recoil, MUI v5 (Joy UI, X-DataGrid), Mapbox GL, ApexCharts, react-hook-form, i18next, Axios, Framer Motion

► 업무 내용

➢ 기업 고객 대상 비식별화 솔루션 관리 대시보드(어드민) 서비스 개발 및 유지보수

➢ 워크스페이스·사용자 권한 관리 및 조직 단위 멤버 초대/관리 기능 구현

➢ API Key 발급·삭제 및 REST API 연동 관리 페이지 개발

➢ ApexCharts를 활용한 처리 현황·사용량 통계 대시보드 구현

➢ MUI X-DataGrid 기반 작업 상태 보드(Task Status Board) 및 대용량 목록 관리 UI 구현

➢ 네트워크·시스템·보안 등 엔터프라이즈 설정 페이지 개발

➢ react-hook-form + yup 기반 폼 유효성 검사 처리

► 담당 역할 : 웹 프론트엔드 개발 (기여도 50%)

► 업무 기간 : 2025.02 ~ 현재

► 기술 스택 : Next.js 14, React 18, TypeScript, Recoil, Jotai, Tailwind CSS, MUI, i18next, React Konva, Video.js, WebAssembly, Stripe, Paddle, AWS Cognito, AWS S3, Framer Motion

► 업무 내용

➢ 동영상·이미지 내 얼굴·번호판 등을 AI로 자동 블러/모자이크 처리하는 글로벌 비식별화 SaaS 서비스 개발 및 유지보수

➢ WebAssembly 기반 블러 처리 모듈 연동 및 React Konva를 활용한 Canvas 기반 영역 수동 지정 UI 구현

➢ Video.js를 활용한 커스텀 영상 플레이어 및 프레임 단위 타임라인 조작 기능 개발

➢ Stripe·Paddle 결제 연동 및 플랜별 구독/크레딧 관리 시스템 구현

➢ react-i18next 기반 다국어(i18n) 지원 및 Next.js App Router [lng] 동적 라우팅 적용

➢ next-auth + AWS Cognito 기반 소셜 로그인 및 인증 플로우 구현

➢ Framer Motion을 활용한 랜딩페이지 인터랙션 및 모바일 반응형 UI 개발

➢ Recoil 전역 상태 관리 및 Jotai SSR 대응 처리

➢ LCP 개선 — 서버 컴포넌트에서 CMS 데이터의 첫 번째 섹션 이미지 URL을 추출 후 ReactDOM.preload() + fetchPriority: "high" 적용, Hero 컴포넌트에 priority prop 전달로 LCP 이미지 우선 로드

➢ TBT/FCP 개선 — component-resolver에서 첫 번째 섹션(Above the Fold)은 Eager import로 즉시 렌더링하고, 나머지 섹션은 React.lazy + Suspense로 분리해 초기 JS 파싱 비용 절감

➢ 코드 스플리팅 — next/dynamic을 활용해 Banner, Footer 등 비핵심 컴포넌트 지연 로드, 외부 스크립트는 ssr: false + 8초 defer 처리

➢ 번들 최적화 — optimizePackageImports로 MUI·lodash 트리쉐이킹, @next/bundle-analyzer 도입으로 번들 사이즈 분석, SWC minify + 프로덕션 console 제거

➢ 캐시 전략 — 공개 페이지 s-maxage=3600 / stale-while-revalidate=86400 CDN 캐시, 정적 자산 max-age=15552000(6개월) 장기 캐시, 인증·개인화 페이지 no-store 분리

➢ 폰트 최적화 — next/font/local로 Mona Sans 로컬 폰트 최적화(font-display: swap), Pretendard는 non-blocking 비동기 로드, CDN에 preconnect + dns-prefetch 적용

➢ 이미지 최적화 — Next.js 이미지 최적화 API 대신 CloudFront CDN 직접 연결로 Lambda@Edge 실행 비용 제거 및 응답속도 개선

➢ PWA — next-pwa로 Service Worker 기반 오프라인 캐싱 적용, StreamSaver SW와 충돌 방지 설정

► 담당 역할 : 풀스택 개발 전체

► 업무 기간 : 2024.02 ~ 2024.12

► 기술 스택 : React 18, Next.js 14, Typescript, React-query, Recoil, Material UI, Emotion, Lottie, fabric, i18n, Node.js, Express, Mysql, Redis, Websocket, AWS Amplify, AWS EC2

► 업무 내용

➢ 라이브 방송 스트리머를 위한 실시간 모션 그래픽 플랫폼 개발

➢ 미리 생성된 Lottie 모션, Image 디자인 템플릿을 사용자가 추가, 편집 및 실시간 방송에 오버레이로 송출할 수 있도록 개발

➢ Lottie 모션 오버레이를 편집하고 실시간 제어하며 방송기기에 송출하는 기능 개발

➢ 방송 큐시트를 직접 또는 AI로 작성하고 큐시트에 오버레이를 추가하여 큐시트 내용에 맞게 편집, 제어, 송출하는 기능 개발

➢ 메가라이브 방송기기와 웹소켓으로 실시간 통신

► 담당 역할 : 풀스택 개발 전체(기여도 100%)

► 업무 기간 : 2023.12 ~ 2024.02

► 기술 스택 : React 18, Next.js 14, Typescript, React-query, Recoil, Material UI, Emotion, Pixi.js, Node.js, Express, Mysql, Redis, Websocket, Swagger

► 업무 내용

➢ 정부과제 스마트 접현등 관제 서비스 개발

➢ Express 서버 API 구현, 정의서 작성

➢ 선박 접안 상태 실시간 통신, Pixi.js로 선박 상태 표시

► 담당 역할 : 웹 개발 전체(기여도 100%)

► 업무 기간 : 2023.07 ~ 2023.11

► 기술 스택 : React 18, Next.js 13, Typescript, Recoil, Material UI, Emotion, Firebase

► 업무 내용

➢ 사내 드론팀 장비, 드론비행일지 등 드론관리 웹 서비스 개발

➢ 장비 수정내역 History 열람 기능 개발

➢ 세분화된 비행일지, 체크리스트 개발

► 연계 업체 : (주)USEN

► 담당 역할 : 웹 프론트엔드 개발 전체(기여도 80%)

► 업무 기간 : 2021.12 ~ 2023.11

► 기술 스택 : Vue 2, Vuex, Vuetify, SCSS, Video.js, Canvas, Chart.js, AWS kinesis Video Streams, AWS Amplify

► 업무 내용

➢ AWS 기반 CCTV 실시간 영상 스트리밍 웹 서비스 개발

➢ 4개의 사용자 권한 웹서비스 구현, 권한에 맞게 기능 히든처리

➢ 다국어 지원(일본어, 영어, 한국어)

➢ AWS KVS 스트리밍 비디오를 Live, Ondemand 플레이 할 수 있는 서비스 구현

➢ Canvas로 개발한 비디오 타임라인에 북마크, 클립, 썸네일 캡쳐, 다운로드 등 다양한 동영상 이벤트 기능을 개발

➢ Chart.js로 매장 방문자 통계 데이터 시각화

➢ 모바일 비디오 플레이어 웹페이지 구현

➢ 웹팩 설정, 코드 스플리팅을 이용한 프론트엔드 성능 최적화(크롬 lighthouse 성능측정 - First Contentful Paint 17.4s, ToTal Blocking Time 280s, Speed Index 15s 감소)

➢ AWS Amplify를 이용해 배포 자동화

► 주요 성과

➢ 23.03 상용서비스 시작, 현재 카메라 약 2070대 온라인

➢ 동영상 타임라인 에디터를 포함한 비디오 플레이어 컴포넌트를 개발하여 이벤트 생성 및 세밀한 동영상 재생/편집 기능을 제공

➢ 동영상 4개, 9개, 16개 화면 동시재생

➢ 동영상의 메타데이터 획득이 안 되는 문제, 타임라인 생성 및 조작이 안 되는 문제 등 크로스 브라우징 이슈를 해결

► 연계 업체 : (주)파워풀엑스

► 담당 역할 : 태블릿 앱 개발 및 유지보수(기여도 100%)

► 업무 기간 : 2021.06 ~ 2022.02(약 8개월)

► 기술 스택 : Flutter, Dart, AWS Rekognition, Google ML Kit

► 업무 내용

➢ 자사 솔루션 AI 무인 매대 시스템에 태블릿을 붙여서 파워풀엑스에 납품

➢ AI 무인 매대와 연동되는 태블릿 앱(FACE BOX) 개발

➢ AWS Rekognition 기반 얼굴인식 데이터를 사용하여 회원가입 및 인증을 구현

➢ 상시 전면 카메라 활성상태에 얼굴인식 기능으로 조작이 필요없는 구매 프로세스 개발

➢ Google ML Kit를 이용해 카드번호 OCR 개발

➢ 페이 앱 결제, 카드 결제 기능 구현

► 주요 성과

➢ 얼굴인식으로 AI 무인 매대를 이용하는 기능 개발

► 담당 역할 : 웹 프론트엔드 개발 전체(기여도 100%)

► 업무 기간 : 2021.01 ~ 2021.04(약 4개월)

► 기술 스택 : Vue 2, Vuex, Vuetify, Typescript, SCSS, Canvas, OpenLayers, Turf.js, Jenkins

► 업무 내용

➢ 자사 솔루션 드론관제시스템 Beflyer 리뉴얼(커피스크립트 → Vue.js)

➢ 인증된 회원에게 등록된 드론을 실시간으로 지도로 관제할 수 있는 서비스 개발

➢ OpenLayers로 지도 컴포넌트 개발. Turf.js로 위치정보 데이터 가공. 웹 소켓으로 실시간 텔레메트리 데이터 송수신. 날씨 및 비행금지구역 기능 구현

➢ 지도상에 실시간 통신으로 드론 위치 표시(웹소켓 통신)

➢ 웨이포인트, 그리드 기능을 사용해 드론 비행 미션 생성

► 주요 성과

➢ 외주 개발된 프로젝트를 자체적으로 유지보수 가능

➢ 커피스크립트로 개발된 프로젝트를 Vue.js로 리팩토링하여 유지보수가 용이함

► 담당 역할 : IOT기기와 통신할 게이트웨이 개발(기여도 100%)

► 업무 기간 : 2020.10 ~ 2020.11(약 2개월), 2021.05 ~ 2021.06(약 2개월)

► 기술 스택 : Node.js, Firebase, Raspberry-Pi 4, bluetooth(noble)

► 업무 내용

➢ 캣휠, 체중계, 팬던트 등 각종 IOT 기기들을 블루투스를 이용해 게이트웨이와 연결하여 실시간 데이터 통신 구현

➢ node.js 기반 블루투스 기능 개발(noble 라이브러리 사용)

➢ 반려동물의 각종 데이터를 확인할 수 있는 시스템 개발

► 주요 성과

➢ 게이트웨이 단말기에 동시에 여러 기기(3개 이상)들을 블루투스로 연결 가능하도록 구현

➢ 센서 데이터 실시간 전송 및 앱과 연동

► 담당 역할 : 모바일 앱 개발(드론 배송 앱)(기여도 70%)

► 업무 기간 : 2020.03 ~ 2020.06(약 3개월)

► 기술 스택 : Flutter, Dart

► 업무 내용

➢ 국가과제 세종시 드론 배송 실증에 사용할 모바일 앱 개발

► 주요 성과

➢ 구매자/판매자/배송 기사 권한이 구분되어 하나의 앱으로 이용 가능하도록 개발

➢ 구글 앱스토어 배포

► 담당 역할 : 웹 프론트엔드 개발 전체(기여도 100%), 하이브리드 앱 개발 및 유지보수(기여도 100%)

► 업무 기간 : 2019.10 ~ 2022.05

► 기술 스택 : Vue 2, Vuex, Typescript, SCSS, Flutter, Dart, Jenkins

► 업무 내용

➢ 자사 솔루션 AI 무인 매대 시스템 개발 및 유지보수 업무

➢ 웹 소켓 통신으로 실시간 무인매대 관리 기능 구현

➢ 무인 매대 관리 웹, 무인 매대 관리 모바일 앱 개발 및 유지보수

➢ QR코드로 접속 가능한 모바일 웹 구매 서비스 웹앱 구현

► 주요 성과

➢ 모바일 결제 연동(카카오페이, 페이코)