김진영 프로필 사진

Frontend Developer · B2B Product & Platform

김진영

반복되는 문제를 해결하고, 팀이 스스로 운영할 수 있는 제품을 만듭니다.

고객별 요구를 수용하고, 반복되는 개발 의존성을 줄입니다.

  • 고객별 엑셀 변환 규칙을 운영자가 직접 작성·유지보수하는 자동화 시스템을 제안·개발했습니다. 여러 팀으로 활용이 확대되었으며, 확인된 적용 업무에서 월 약 40시간의 반복 공수를 절감했습니다.
  • 발주·공급사 관리 웹부터 React Native 기반 무인 판매 앱까지 개발하며, 다양한 결제수단과 인증 리더기·도어락 등 하드웨어를 연동했습니다.
  • Nx 모노레포에 공통 UI·API·오류 추적 모듈을 설계하고, 프로젝트들이 같은 개발 기반을 활용하도록 구성했습니다.

Work Experience.

(주)위펀

Frontend Developer · R&D 개발부문

2024. 07 - 재직중

고객 맞춤 업무 자동화 제품 개발 · AX TF

고객별 맞춤 대응이 서비스 가치인 B2B 환경에서, 운영자가 변환 규칙을 직접 작성·유지보수하는 시스템을 제안·개발했습니다. 거래명세서 자동화로 시작해 다른 팀의 엑셀 기반 업무로 활용이 확대되었습니다.
ReactTypeScriptNext.jsExcel automation
xl3: 고객별 변환 규칙을 운영자가 직접 유지보수
  • AM이 수작업으로 처리하던 77개 고객사의 거래명세서 변환 요청에서, 양식 변경마다 개발 요청이 반복될 것을 예상하고 운영자가 직접 규칙을 수정하는 구조를 제안했습니다.
  • 직접 개발한 xl3 엔진을 기반으로 업무용 변환 도구를 구축하고, AI가 생성한 템플릿 초안을 운영자가 검토·수정·등록해 반복 실행하는 흐름을 구현했습니다.
  • 고객사 정산·매출데이터 변환·송장 매핑 등 여러 팀의 업무로 활용이 확대되었으며, 산출근거가 확인된 적용 업무에서 월 약 40시간(0.25 M/M)의 반복 공수를 절감했습니다.
발주취합자동화: 신규 채널을 받아내는 변환 계층
  • 고객사별 발주 엑셀과 위펀 풀필먼트 등록 포맷 사이에 변환 계층을 두어, 고객의 기존 양식을 유지하면서 등록 과정을 자동화했습니다.
  • 운영 공수를 줄이는 동시에 신규 채널이 늘어도 같은 방식으로 데이터를 흡수할 수 있는 기반을 만들었습니다.
AX TF 자동화 과제 개발·멘토링
  • 영업·마케팅·정산 자동화 과제를 개발·멘토링해, AX TF 완료 과제 기준 월 1.54 M/M의 반복 운영 공수를 절감했습니다.

모노레포 코어 모듈 설계

2024. 09 - 2025. 12

프로젝트마다 흩어진 UI, API, 서버 상태 관리 방식을 통합하기 위해 Nx 모노레포 전환을 제안하고, 공용 패키지의 초기 구조와 사용 규칙 수립을 주도했습니다.
NxTypeScriptshadcn/uiTanStack QueryAxiosSentry
공통 스택 도입과 초기 구조 설계
  • 신규 공통 스택에 대한 우려를 도메인 확장성과 프로젝트 간 일관성 관점에서 조율하고, Nx 모노레포와 libs/* 기반 공용 패키지 구조를 제안했습니다.
  • shadcn/ui와 TanStack Query를 공통 스택으로 도입해 새 프로젝트가 같은 UI/데이터 패턴 위에서 출발하도록 세팅했습니다.
API와 관측성 사용 방식을 표준화
  • Axios 인스턴스와 도메인 queryOptions의 책임을 분리하고, 목록·상세·Mutation 확장 패턴을 정해 API 사용 방식의 편차를 줄였습니다.
  • Sentry 설정과 이벤트 태깅을 공용 모듈에 선언적으로 연결해 프로젝트별 설정 중복을 줄였습니다.

공급사 관리 시스템

공급사와 내부 운영자가 메신저와 엑셀로 처리하던 발주, 출고, 정산, 상품 관리 업무를 Next.js 기반 시스템으로 옮겼습니다.
Next.jsTypeScriptAnt DesignTanStack Query
발주 흐름과 역할별 권한을 시스템화
  • 수기와 메신저 중심 발주를 목록·상세, 검색·필터, 엑셀 업로드·다운로드와 데이터 검증이 연결되는 시스템 흐름으로 옮겼습니다.
  • 서브도메인 기준으로 위펀 운영자 어드민과 파트너스 어드민을 분리하고, 역할과 권한에 따라 화면과 데이터 접근을 제어했습니다.
이미지 직접 업로드 방식을 제안하고 전 프로젝트로 확산
  • 기존 프로젝트에서 겪은 이미지 업로드 문제가 반복될 것으로 예상해, 공급사 관리 시스템 신규 개발 시 Pre-signed URL 기반 직접 업로드 방식을 제안하고 적용했습니다.
  • 공급사 관리 시스템에서 적용 효과를 검증한 뒤 다른 프로젝트로 확산되어, 애플리케이션 서버를 경유하지 않는 공통 이미지 업로드 방식으로 정착했습니다.
  • 후속 적용한 배송 일정 수정 API의 전후 트레이스 표본에서 처리 시간 중앙값이 약 841ms에서 57ms로 93% 감소한 것을 확인했습니다.

스마트냉장고·무인편의점 결제 앱 고도화 및 장비 연동

React Native 기반 무인 판매 앱에서 다양한 결제수단과 결제 단말기를 연동했습니다. 사용자 인증부터 결제, 도어락 제어, 영수증 출력까지 실제 매장 장비와 연결되는 앱을 고도화했습니다.
React NativeXStatePaymentKioskHardware
간편결제·식권 연동과 결제 단말기 전문 통신
  • kscat-a 결제 단말기를 통해 앱에서 직접 결제 전문을 송수신하는 통신 모듈을 구현했습니다.
  • PAYCO(간편결제·식권), 비플페이, 카카오페이 등 다양한 결제수단을 무인 판매 앱에 연동했습니다.
사용자 인증부터 도어락·프린터까지 하드웨어 연동
  • ADT캡스·HID 사원증 리더기 등 인증 장비를 앱에 연동하고, 시리얼 통신·키보드 이벤트 등 서로 다른 입력 방식을 사용자 인증 흐름에 연결했습니다.
  • QR, RFID, 휴대번호 인증부터 상품 선택, 결제, 영수증 라벨지 출력, 도어락 컨트롤까지 이어지는 장비 연동을 구현하고 분석했습니다.
  • 스마트냉장고, 무인매장, 키오스크, 픽업포인트의 모드별 주문, 결제, 도어, 픽업 상태를 XState 기반 워크플로우로 표현했습니다.
React Native 앱 구조 개선과 OTA 배포 검증
  • 2026년 3월 인계받은 React Native 결제·장비 앱에서 모듈 배치와 의존 방향을 재정의하고, 상태·수명·부수효과를 기준으로 공통 구조를 정리했습니다.
  • PR부터 개발 브랜치와 OTA 배포까지 같은 검증 절차를 거치도록 CI 게이트를 배포 파이프라인에 연결했습니다.
월 순방문자 약 10만 명 규모의 위펀 공식 사이트를 Framer 기반으로 운영했습니다. 개발자에게 집중되던 사이트 수정과 운영을 디자이너·마케터가 직접 수행하는 체계로 재편했습니다.
FramerCMSJSON-LDHubSpotTallySalesforce
Framer 운영의 개발 티켓을 제로 수준으로 축소
  • 프론트엔드 개발자가 Framer를 학습하며 수정·이슈 대응을 반복하던 구조를 개선하기 위해, Framer 전문 디자이너 영입을 주도하고 운영을 이관했습니다.
  • 디자이너·운영자가 일상적인 사이트 수정을 직접 처리하고, 개발자는 간헐적인 코드 수정만 지원하도록 역할을 정리해 상시 개발 대응 공수를 거의 없앴습니다.
  • Tally·Airtable에서 HubSpot 폼과 라이브챗으로 전환하며 랜딩, CMS, 폼, 트래킹의 연결 지점을 정리했습니다.
마케터가 직접 운영하는 검색 채널 구축
  • 위펀 공식 사이트(wefuncorp.com)에 Framer CMS 기반 블로그를 구축해 콘텐츠 발행을 마케팅팀의 운영 업무로 전환했습니다.
  • CMS 기반 메타 정보, JSON-LD, 내부 링크와 OG 이미지를 구성하고, 예약 발행과 카테고리 운영을 마케터가 직접 수행하도록 만들었습니다.

티오더

Frontend Developer · 오더3팀

2023. 07 - 2024. 03

어드민마다 흩어져 있던 로그인, 약관, 인증 화면을 하나의 통합 인증 경험으로 모았습니다.
ReactTypeScriptZustandEmotionOAuth
여러 어드민이 공유하는 인증 진입점
  • 제품군별 로그인, 회원가입, 약관, 개인정보처리방침 화면을 통합 인증 진입점 안에서 재구성했습니다.
  • OAuth 2.0 흐름에 맞춰 authorization redirect, client·redirect URI, callback 처리 책임을 정리하고 어드민별 인가 예외와 확장 구조를 설계했습니다.

엘핀

Frontend Developer · 프론트엔드 개발

2023. 02 - 2023. 07

인원 관제 플랫폼 / 실내 인구 밀집도 대시보드

무선 신호와 레이더·라이다 기반의 인원관제 플랫폼에서, 체류 인원·밀집도·이동 흐름을 확인하는 웹 대시보드를 개발했습니다.
ReactTypeScriptTailwind CSSTanStack Query
구역별 인원 조회와 밀집도 시각화
  • 건물, 층, 구역 단위로 체류 인원 수, 밀집도, 이동 정보를 읽을 수 있도록 관제 화면의 정보 구조를 설계했습니다.
  • LiDAR 센서와 Wi-Fi 스캐너 데이터로 밀집도 추이를 히트맵 차트에 시각화했습니다.
공통 컴포넌트와 상태 관리 구조 설계
  • Compound Component와 Render Props 패턴을 적용해 화면별 변형을 공통 UI 안에서 처리했습니다.
  • TanStack Query와 Recoil로 서버 상태와 화면 상태를 분리해 데이터 조회 화면의 복잡도를 낮췄습니다.

케이에이앤

Module SW Developer · 기업부설연구소

2020. 10 - 2022. 04

전기전자 전공을 바탕으로 가속도·스트레인 등 산업용 센서 연동부터 데이터 처리, Qt 기반 계측 GUI까지 개발했습니다. 장비 데이터를 시각화하고 제어하는 경험에서 UI 개발에 흥미를 느껴 웹 프론트엔드로 영역을 넓혔습니다.
PythonQtNumPyLinux
10kHz 센서 데이터 실시간 처리
  • 라즈베리파이에서 초당 10,000회 유입되는 센서 데이터를 처리하고, 센서공학·신호 및 시스템 지식을 바탕으로 화면 표시용 데이터를 샘플링했습니다.
  • 멀티프로세싱·멀티스레딩으로 데이터 처리, GUI 갱신, 저장 작업을 병행해 실시간 그래프 표시와 계측 데이터 기록을 함께 수행하도록 구현했습니다.
센서 연동부터 터치 패널 GUI까지 구현
  • IEPE/ICP 가속도 센서와 스트레인 게이지의 계측 데이터를 연동하고, Qt 터치 패널에서 계측 설정·실시간 그래프·CSV 저장·분석 기능을 제공했습니다.
  • 현장에 휴대하는 펠리컨 케이스형 계측 장비의 Linux 환경에서 GUI를 구동해, 장비 화면으로 신호를 확인하고 계측을 제어하도록 구현했습니다.
진동 데이터로 공정 상태 98% 판별
  • 진동 주파수 데이터를 기반으로 형상 가공 기계의 공정 상태를 추정하는 분석 모듈을 개발했습니다.
  • Python 기반 데이터 처리 로직으로 가공 상태 판별 정확도 98% 수준을 달성했습니다.

Projects.

xl3

2026

엑셀에 익숙한 문법으로 데이터 가공과 출력 양식을 정의하는 템플릿 실행 엔진입니다.
  • 양식 변경마다 개발자가 코드를 수정하던 문제를 해결하고자 직접 제안·개발하고, 실무에 적용해 운영자가 변환 규칙을 직접 유지보수하도록 했습니다.
  • 문법과 예제를 공개해, 운영자가 AI의 도움으로 템플릿을 작성·수정할 수 있는 기반을 마련했습니다.

qextory

2023 - 현재

개발하며 겪은 문제와 해결 과정을 정리하는 개인 기술 블로그입니다.
  • 프론트엔드, UX, 개발 환경, 자동화 도구 제작 과정에서 얻은 생각과 구현 기록을 글로 남기고 있습니다.

Education.

울산대학교 전기전자공학과

2014. 03 - 2020. 02

전기전자공학을 전공했고, 센서 데이터와 제어 소프트웨어를 다루는 초기 개발 경험으로 이어졌습니다.