김진영 프로필 사진

Front-End Developer

김진영

반복되는 업무의 규칙을 찾고,제품과 팀의 기준으로 남깁니다.

반복 업무가 남기는 규칙을 제품으로 옮깁니다.

  • 엑셀 자동화, 발주/공급사 시스템, 결제/하드웨어, Framer/CRM처럼 현업과 비즈니스가 맞닿은 영역에서 제품을 만들었습니다.
  • 요청된 기능 뒤에 반복되는 판단과 예외를 찾아, 실무자가 직접 다룰 수 있는 도구와 운영 방식으로 바꿉니다.
  • 코드 안의 설계만큼 요청팀의 업무 방식, 마케터의 콘텐츠 운영, 프론트엔드 공통 스택에 남는 변화를 중요하게 봅니다.

Work Experience.

(주)위펀

Frontend Developer

2024. 07 - 재직중 (25개월)

R&D 개발부문

위펀 플랫폼 개발

2026. 07 착수

서비스별 계약과 수동 세팅에 의존하던 운영을 가입, 인증, 설정, 정산이 연결되는 B2B2E 플랫폼으로 전환하기 위한 개발입니다.

AX TF

반복 수작업을 단순 개발 요청으로 처리하지 않고, 요청팀이 스스로 운영할 수 있는 자동화 제품으로 재정의했습니다.
ReactTypeScriptNext.jsExcel automation
Exform: 변환 로직 요청을 운영 표준으로 전환
  • 고객사별 거래명세서 변환 업무에서, 양식이 늘어날 때마다 개발/운영 공수도 같이 늘어나는 병목을 확인했습니다.
  • 변환 로직을 개발팀이 계속 추가하는 대신, 요청팀이 raw.xlsx, template.xlsx, result.xlsx 관계를 직접 관리할 수 있는 xl3 표준을 제안했습니다.
  • xl3 문법과 예제를 공개 문서로 남겨 LLM이 템플릿 작성 규칙을 참고할 수 있게 했고, 원본/결과 파일 기반 템플릿 초안 생성 가능성을 검증했습니다.
  • 2026년 6월 기준 Exform 템플릿 66개 중 46개를 실무 적용 단계까지 끌어올렸고, 산정 가능한 AX TF 과제 기준 약 2.146 M/M 절감 추정치를 만들었습니다.
발주취합자동화: 신규 채널을 받아내는 변환 계층
  • 고객사별 발주 엑셀을 물류 자회사 위펀 풀필먼트 등록 포맷으로 변환하는 과정을 자동화 대상으로 정의했습니다.
  • 고객의 기존 양식을 유지해야 하는 B2B 제약을 고려해, 외부 템플릿과 내부 등록 포맷 사이에 변환 계층을 두었습니다.
  • 운영 공수를 줄이는 동시에 신규 채널이 늘어도 같은 방식으로 데이터를 흡수할 수 있는 기반을 만들었습니다.

모노레포 코어 모듈 설계

2024. 09 - 2025. 12

웹 프로젝트가 늘어나며 UI, API, 서버 상태 관리 방식이 흩어지는 문제를 보고, Nx 모노레포와 shadcn/ui, TanStack Query 기반 표준 스택 도입을 설득하고 초기 설계를 맡았습니다.
NxTypeScriptshadcn/uiTanStack QueryAxiosSentry
반대가 있던 스택 전환을 설득
  • Tailwind CSS와 신규 공통 스택에 대한 우려가 있던 상황에서, 도메인 확장성과 프로젝트 간 일관성 관점으로 도입 필요성을 설명했습니다.
  • Nx 모노레포 전환을 제안하고 libs/* 기준 공용 모듈, UI, API 호출, 서버 상태 관리 패키지의 초기 형태를 잡았습니다.
  • shadcn/ui와 TanStack Query를 공통 스택으로 도입해 새 프로젝트가 같은 UI/데이터 패턴 위에서 출발하도록 세팅했습니다.
API 사용 방식을 공통 모듈에 남김
  • Axios 인스턴스는 전송 계층과 인증/인터셉터 책임으로, 도메인 queryOptions는 조회 규칙과 캐시 키 책임으로 분리했습니다.
  • 목록, 상세, Mutation 확장 패턴을 TanStack Query의 queryOptions API 기준으로 잡아 API 사용 방식의 편차를 줄였습니다.
  • Sentry 설정과 이벤트 태깅을 공용 모듈에 선언적으로 연결해 프로젝트별 설정 중복을 줄였습니다.
  • Feature-Sliced Design 관점에서 폴더 구조, utils 책임 혼재, 순환 참조 가능성을 기록해 온보딩 근거로 남겼습니다.

공급사 관리 시스템

공급사와 내부 운영자가 메신저와 엑셀로 처리하던 발주, 출고, 정산, 상품 관리 업무를 Next.js 기반 시스템으로 옮겼습니다.
Next.jsTypeScriptAnt DesignTanStack Query
운영자와 공급사의 업무 경계를 화면에 반영
  • 수기와 메신저 중심 발주에서 발생하던 누락과 커뮤니케이션 오류를 줄이기 위해 시스템 기반 발주 과정을 구축했습니다.
  • 서브도메인 기준으로 위펀 운영자 어드민과 파트너스 어드민을 분리하고, 역할과 권한에 따라 화면과 데이터 접근을 제어했습니다.
  • 주문/발주 목록과 상세, 검색/필터, 엑셀 업로드/다운로드, 데이터 검증 UI를 실제 업무 순서에 맞춰 개발했습니다.
대용량 이미지 업로드 실패를 줄임
  • 공급사 상품 등록에서 대용량 이미지 업로드 지연, 실패, CX 문의가 반복되는 문제를 확인했습니다.
  • Pre-signed URL 기반 직접 업로드 방식을 공급사 관리 시스템에 우선 적용하고, 팀 내 파일 업로드 개선 사례로 공유했습니다.
  • 파일 업로드 관련 API 응답 속도를 약 90% 개선했습니다.

스마트냉장고, 무인편의점 결제/인증 고도화

무인 판매 환경에서 결제수단, 결제 단말기, 전문 통신, 도어락/라벨 출력처럼 웹 화면 밖의 장비까지 연결되는 제품을 유지보수했습니다.
React NativeXStatePaymentKioskHardware
결제 단말기와 화면 상태를 연결
  • 카카오페이, 페이코, 비플페이 등 결제수단 확장을 검토하고 프론트엔드 연동과 운영 이슈 대응을 수행했습니다.
  • kscat-a 결제 단말기 기반 카카오페이 요청 전문 통신 모듈을 개발해 앱, 웹뷰, 단말기 사이의 결제 상태를 맞췄습니다.
  • 결제 요청, 승인, 취소, 실패 응답을 화면 상태와 QA 시나리오로 연결해 무인 판매 환경의 유지보수성을 높였습니다.
주문부터 도어락까지 장비 연동
  • QR, RFID, 휴대번호 인증부터 상품 선택, 결제, 영수증 라벨지 출력, 도어락 컨트롤까지 이어지는 장비 연동을 구현하고 분석했습니다.
  • 스마트냉장고, 무인매장, 키오스크, 픽업포인트의 모드별 주문, 결제, 도어, 픽업 상태를 XState 기반 워크플로우로 표현했습니다.
  • 앱 초기화, OTA, Android 권한, 네트워크, 터치, 메모리, 결제취소 감시 지점을 추적해 장애 대응 단서를 남겼습니다.

Framer 기반 성장 채널 운영 체계

개발자가 반복 대응하던 랜딩, 블로그, 폼, CRM 요청을 Framer CMS와 컴포넌트 운영 체계로 옮겨 마케터가 직접 움직일 수 있는 성장 채널을 만들었습니다.
FramerCMSJSON-LDHubSpotTallySalesforce
블로그를 검색 유입 채널로 키움
  • 2026년 7월 기준 최근 30일 7.3만 UV, 23.9만 PV 규모로 운영되는 wefuncorp.com에서 Framer CMS 기반 위펀 블로그를 구축했습니다.
  • CMS 데이터 기반 메타 정보, JSON-LD, 내부 링크, OG 이미지 구성을 세팅해 콘텐츠 발행과 검색 노출을 함께 고려했습니다.
  • 예약 업로드, 카테고리, 상세 페이지, 검색 노출에 필요한 기술 세팅을 지원해 마케터가 블로그를 직접 운영하게 만들었습니다.
랜딩 수정을 개발 티켓에서 운영 업무로 전환
  • 반복적인 Framer 랜딩 수정 요청을 개발자가 매번 처리하지 않도록 운영 가능한 컴포넌트 범위와 수정 원칙을 세웠습니다.
  • Tally, Airtable 기반 폼/리드 적재에서 HubSpot 폼과 라이브챗으로 전환하는 과정의 프론트엔드 기술 서포트를 수행했습니다.
  • CRM 도구가 바뀌어도 랜딩, CMS, 폼, 트래킹의 연결 지점을 유지할 수 있도록 마케팅팀과 협업 방식을 만들었습니다.

티오더

Frontend Developer

2023. 07 - 2024. 03 (9개월)

오더3팀

통합 인증 프론트엔드

어드민마다 흩어져 있던 로그인, 약관, 인증 화면을 하나의 통합 인증 경험으로 모았습니다.
ReactTypeScriptZustandEmotionOAuth
여러 어드민이 공유하는 인증 진입점
  • 제품군별 로그인, 회원가입, 약관, 개인정보처리방침 화면을 통합 인증 진입점 안에서 재구성했습니다.
  • OAuth 2.0 RFC를 기준으로 authorization redirect, client, redirect URI, callback을 따라가며 프론트엔드가 책임질 인증 경계를 확인했습니다.
  • 인증 메일 템플릿 관리와 인가 예외 대응 방식을 잡아 어드민별 확장 여지를 남겼습니다.

태블릿 주문 PWA 오프라인 PoC

가맹점 네트워크 장애 상황에서도 주문을 받을 수 있는 PWA 오프라인 주문 모델을 PoC 수준에서 검토했습니다.
PWAReactTypeScriptCouchDBWeb Worker
서버 단절에도 주문을 받는 모델 검토
  • 태블릿에서 티오더 서버를 거쳐 가맹점 POS로 주문이 전달되는 기존 구조에서, 네트워크 단절 시 주문이 멈추는 지점을 확인했습니다.
  • 오프라인 상태에서도 캐시된 웹뷰로 메뉴 조회와 주문 입력이 가능하고, POS로 직접 주문 요청을 보낼 수 있는 모델을 검토했습니다.
  • 온라인 복구 후 오프라인 동안 쌓인 주문과 메뉴 데이터를 동기화하는 방식으로 CouchDB와 Web Worker 활용 가능성을 살펴봤습니다.

엘핀

Frontend Developer

2023. 02 - 2023. 07 (6개월)

프론트엔드 개발

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

Wi-Fi, 블루투스, 레이더/라이다 기반 비식별 위치 데이터를 사람이 판단하기 쉬운 실내 인구 밀집도 대시보드로 만들었습니다.
ReactTypeScriptTailwind CSSTanStack Query
센서 데이터를 운영 화면으로 번역
  • 건물, 층, 구역 단위로 체류 인원 수, 밀집도, 이동 정보를 읽을 수 있도록 관제 화면의 정보 구조를 설계했습니다.
  • LiDAR 센서와 Wi-Fi 스캐너 데이터로 밀집도 추이를 히트맵 차트에 시각화했습니다.
  • 인파 관리, 인원 관리, 상권 분석처럼 위치 데이터가 필요한 운영 상황을 고려해 조회와 필터 UI를 구성했습니다.
얼굴 없이 판단 가능한 관제 경험
  • 얼굴 이미지 대신 무선 신호와 센서 데이터를 활용하는 도메인 특성을 고려해 개인정보 노출을 줄이는 화면 구성을 선택했습니다.
  • 위치 정보 API 관리 웹 애플리케이션과 데이터 조회 UI를 개발했습니다.
변형 많은 화면을 컴포넌트로 흡수
  • Compound Component와 Render Props 패턴을 적용해 화면별 변형을 공통 UI 안에서 처리했습니다.
  • TanStack Query와 Recoil로 서버 상태와 화면 상태를 분리해 데이터 조회 화면의 복잡도를 낮췄습니다.

케이에이앤

Module SW Developer

2020. 10 - 2022. 04 (19개월)

기업부설연구소

산업용 신호 계측 시스템

가속도, 스트레인, 전압, 전류, 온도, 영상 등 산업 현장의 신호를 수집/분석하는 장비용 소프트웨어와 터치 패널 조작 경험을 개발했습니다.
PythonQtNumPyLinux
계측 장비를 현장에서 다룰 수 있게 개발
  • IEPE/ICP 타입 가속도 센서와 스트레인 게이지 기반 계측 데이터를 처리하는 장비 소프트웨어를 구현했습니다.
  • 터치 패널에서 계측 설정, 데이터 확인, CSV 저장, 분석 기능을 사용할 수 있도록 Qt 기반 GUI를 개발했습니다.
  • 현장 이동성을 고려한 펠리컨 케이스형 장비에서 동작하는 Linux 기반 제어 화면을 구현했습니다.
진동 데이터로 공정 상태 98% 판별
  • 진동 주파수 데이터를 기반으로 형상 가공 기계의 공정 상태를 추정하는 분석 모듈을 개발했습니다.
  • FFT, Rainflow Cycle Counting 등 현장에서 필요한 분석 절차를 소프트웨어 기능으로 연결했습니다.
  • Python 기반 데이터 처리 로직으로 가공 상태 판별 정확도 98% 수준을 달성했습니다.
여러 신호를 하나의 계측 시나리오로 연결
  • 장치 내부 상황을 Triggering으로 인식하고 실제 동작 시점의 데이터를 수집하는 계측 시나리오를 구현했습니다.
  • 전압, 전류, 회전각, 온도, 영상 등 다양한 신호를 수집하고 확인하는 화면을 개발했습니다.
  • 외부 백업과 현장 확인이 필요한 작업자를 고려해 USB 저장과 터치 패널 중심의 조작 방식을 만들었습니다.

AHRS 자세 계측 모듈

굴삭기 테스트 주행 환경에서 AHRS 자세 데이터를 수집하고 확인하는 계측 모듈 응용 소프트웨어를 개발했습니다.
QtDjangoPythonLinux
테스트 주행 데이터를 수집하는 제어 화면
  • 센서 데이터 수집, 캘리브레이션, 데이터 관리 기능을 구현했습니다.
  • 테스트 주행 환경에서 사용할 PC 제어 화면을 개발했습니다.

Project.

xl3

2026

원본 엑셀 파일과 템플릿 엑셀 파일을 조합해 결과 엑셀을 생성하는 Excel Template Execution Engine입니다.
TypeScriptExcelDSLAutomation
  • raw.xlsx, template.xlsx, result.xlsx로 이어지는 구조를 설계하고, 템플릿 변환 규칙을 표준화하는 방향을 제안했습니다.
  • 엑셀 변환 규칙을 코드가 아니라 엑셀 파일 안에 남겨, 문서이자 실행 가능한 규칙서로 사용할 수 있게 했습니다.
  • 병합 셀, 여러 시트, 수식처럼 flat하지 않은 실무 원본 파일을 다루기 위해 전처리 스크립트 실행 구조를 구상했습니다.

qextory

2023 - 현재

개발하며 겪은 문제와 해결 과정을 정리하는 개인 기술 블로그입니다.
Next.jsTypeScriptContentlayerMDXTailwind CSS
  • 프론트엔드, UX, 개발 환경, 자동화 도구 제작 과정에서 얻은 생각과 구현 기록을 글로 남기고 있습니다.
  • 최신 글과 프로젝트 아카이브를 연결해, 작업의 맥락과 결과가 함께 보이는 개인 공간으로 확장하고 있습니다.

Education.

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

2014. 03 - 2020. 02

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