프론트엔드 엔지니어2021 – 2026.05

• 직영 유기동물센터를 방문해 요구사항을 수집했습니다.
• Python·Selenium으로 데이터를 크롤링하고 Pandas로 가공했습니다.
• 중소기업 연계 프로젝트를 수행했습니다.

React · Python · Selenium · Pandas · Matplotlib

• 독서 모임 플랫폼 Dadok에서 Matter.js 게이미피케이션 UI와 실시간 화상 모임을 구현했습니다.
• Solidity·MetaMask를 연동한 블록체인 공동구매 플랫폼을 개발했습니다.
• Git 기반 형상 관리, 애자일 협업, 코드 리뷰를 경험했습니다.

Vue · Vuex · Matter.js · OpenVidu

• 팀 리더로서 프로젝트 일정과 품질을 관리했습니다.
• 반응형 웹 디자인과 주요 화면 설계, 가계부 등록·계산 로직을 담당했습니다.
• Next.js App Router 기반 PWA 모바일 화면 흐름을 구성했습니다.

Next.js · React · PWA · MUI · Charts

• 기존 JSP 기반 화면을 Vue.js 기반 구조로 전환하는 마이그레이션 작업에 참여했습니다.
• KB ITQ PLUS CI/CD 환경에서 테스트 코드 및 결재 라인 관련 화면의 기능 이전을 지원했습니다.
• IBSheet 업그레이드와 기능 안정화를 담당하여 데이터 그리드 기반 화면의 동작 오류를 개선했습니다.
• 레거시 시스템 구조와 신규 프론트엔드 구조를 함께 이해하며, 기존 업무 흐름을 유지하면서도 화면 구조를 개선하는 경험을 쌓았습니다.
• 금융권 프로젝트 환경에서 개발 산출물 관리, 기능 검증, 안정성 중심의 개발 프로세스를 경험했습니다.

Vue.js · TypeScript · IBSheet · JPQL

• AWS/NCP 주요 기능을 내부 퍼블릭 클라우드 관리 솔루션으로 제품화하는 데 참여했습니다.
• AWS 네트워크 자원 영역을 집중적으로 담당하여 VPC, Subnet, Routing Table, Security Group, Network ACL, Internet Gateway, Target Group, Auto Scaling 등 주요 자원 관리 화면을 개발했습니다.
• 클라우드 자원별 생성·수정 Form에서 반복되는 입력 구조와 유효성 검증 로직을 모듈화하여 개발 생산성과 유지보수성을 개선했습니다.
• IP Pool 기능에서 VPC/Subnet 정보를 활용해 IP 사용 가능 수, 사용률 등 네트워크 자원 현황을 계산하고 시각적으로 제공하는 기능을 개발했습니다.
• Ant Design Vue 기반의 복잡한 Form UI와 테이블 화면을 구현하며, 대규모 관리 콘솔에서 필요한 사용자 흐름과 데이터 처리 구조를 경험했습니다.
• ECharts, CodeMirror 등을 활용하여 모니터링성 데이터와 코드성 입력 UI를 제품 요구사항에 맞게 구현했습니다.

결과 · 2025년 성과 기록 기준 신규 화면·기능 20개 이상을 일정 내 완료하고 QA 이슈 40건 이상을 해결했습니다.

Vue3 Composition API · TypeScript · Pinia · VeeValidate · Ant Design Vue · Axios · ECharts · CodeMirror · TanStack Query · Module Federation · AWS · NCP

• 인스턴스 관리 등 6개 이상의 핵심 화면을 구현했습니다.
• 볼륨·보안그룹 조회, 키페어 관리, VPC·Subnet 조회 등 10여 개 세부 기능을 구현했습니다.

결과 · 담당 기능의 구현과 안정화로 플랫폼 보안 기능 확인서 취득에 기여했습니다.

Vue 3 · TypeScript · AWS

• VMware 기반의 폴더 및 자원 이동 기능을 구현하여 사용자가 콘솔에서 가상화 자원을 관리할 수 있도록 개발했습니다.
• NSX 네트워크 영역의 Gateway Firewall, Firewall Policy 등 보안 정책 관리 화면을 개발했습니다.
• TanStack Query를 활용하여 서버 상태 관리와 API 호출 흐름을 정리하고, 데이터 조회·변경 이후의 갱신 로직을 안정적으로 처리했습니다.
• VeeValidate 기반의 Form 검증 로직을 적용하여 입력값 검증과 사용자 피드백 흐름을 개선했습니다.
• 프라이빗 클라우드 도메인에 대한 이해를 바탕으로 복잡한 인프라 기능을 웹 콘솔에서 사용하기 쉬운 형태로 구현했습니다.

Vue3 Composition API · TypeScript · Pinia · VeeValidate · TanStack Query · Module Federation · VMware · NSX

• Storybook을 도입하여 공통 컴포넌트의 사용 예시와 상태별 UI를 문서화했습니다.
• 페이지별 Layout 구조와 예시 코드를 작성하여 개발자가 동일한 기준으로 화면을 구성할 수 있도록 지원했습니다.
• 디자인 시스템과 실제 제품 개발 환경 간의 간극을 줄이기 위해 컴포넌트 사용 방식, props 구조, 예시 패턴을 정리했습니다.
• 반복적으로 사용되는 UI 패턴을 공통화하여 개발 생산성과 화면 품질의 일관성을 높이는 데 기여했습니다.

결과 · Create Layout을 포함한 8개 주요 과제를 완료하고, 생성 화면을 일관된 패턴으로 개발하는 기반을 마련했습니다.

Vue3 Composition API · Storybook · Vite · Pnpm · Nx · Monorepo

• Nx, Pnpm 기반의 모노레포 구조를 활용하여 여러 내부 솔루션에서 공통으로 사용할 수 있는 프론트엔드 개발 환경 구성에 참여했습니다.
• Feature-Sliced Design 구조를 적용하여 기능 단위의 책임을 분리하고, 페이지·위젯·공통 컴포넌트 간 의존성을 정리했습니다.
• 제품별 반복되는 화면 구조를 공통 템플릿으로 개발하여 신규 화면 개발 시 초기 세팅 비용을 줄이고, 팀 내 개발 방식의 일관성을 높였습니다.
• ABAC 기반 권한 정책을 고려한 페이지 및 컴포넌트를 개발하여 사용자 권한에 따라 접근 가능한 기능과 화면이 제어되도록 구현했습니다.
• 퍼블릭 클라우드 및 프라이빗 클라우드 콘솔 리뉴얼 개발에 참여하여 기존 기능의 사용성과 유지보수성을 개선했습니다.

Vue3 Composition API · Storybook · Vite · Pnpm · Nx · Monorepo · FSD

• Web Audio API 기반 녹음 상태와 오디오 시각화 UI
• FSD 구조로 page, widget, feature, entity 역할 분리
• 회의록 상세 편집, 템플릿 선택, API 연동 흐름 설계

React 19 · TypeScript · Vite · Tailwind · FSD

• 점심 방 리스트, 방 생성, 상세, 참여 흐름 구현
• 카카오맵 연동으로 음식점 위치와 상세 장소 정보 제공
• FSD 구조로 페이지, 위젯, 기능, 엔티티 계층 정리

React 18 · TypeScript · React Query · Recoil · Vitest

• pnpm 모노레포로 웹 앱, API, DB 패키지를 분리했습니다.
• 실제 필요에서 출발한 모바일 청첩장의 정보 구조와 사용자 흐름을 설계했습니다.
• 경력을 걸어 다니며 보는 전시관 형태로 다시 표현했습니다.

Next.js · TypeScript · tRPC · Prisma · Tailwind