Blog복잡한 운영 도메인을 제품으로 풀어냅니다.
- B2B 운영 도메인에서 관리자페이지, 공급사 시스템, 결제/인증, 엑셀 자동화, CMS/트래킹을 개발했습니다.
- 반복 수작업의 원인을 찾아 xl3/Exform처럼 실무자가 직접 운영할 수 있는 제품 흐름으로 전환합니다.
- React, Next.js, Vue/Nuxt, React Native 기반의 웹, 앱, 키오스크 화면을 만들고 운영했습니다.
Work Experience.
(주)위펀
Frontend Developer
2024. 07 - 재직중 (25개월)
R&D 개발부문
AX TF / xl3, Exform
거래처별 엑셀 변환 업무를 개발자가 매번 스크립트로 만드는 방식에서, 실무자가 템플릿으로 직접 관리하고 실행할 수 있는 자동화 제품 흐름으로 재정의했습니다.
ReactTypeScriptNext.jsExcel automationxl3
요구의 형태에 갇히지 않고 문제를 다시 정의했습니다.
- 매달 고객사별 거래명세서를 수기로 변환하던 구조에서, 양식이 늘어날수록 담당 인력도 함께 늘어나는 원인을 확인했습니다.
- 77개 수기 변환 대상을 자동화 대상으로 정리하고, 변환 규칙을 코드가 아닌 템플릿 파일로 관리하는 방향을 설계했습니다.
- raw.xlsx, template.xlsx, result.xlsx로 이어지는 xl3 엔진과 실무자가 사용하는 Exform 제품 흐름을 연결했습니다.
실무자가 직접 운영할 수 있는 구조로 만들었습니다.
- 엑셀에 익숙한 실무자가 읽고 수정할 수 있도록 XTL 템플릿 문법을 엑셀 함수에 가까운 형태로 설계했습니다.
- 원본 파일과 결과 파일을 기반으로 LLM이 템플릿 초안을 만들 수 있는 AI Template Builder 구상을 검증했습니다.
- 2026년 6월 기준 Exform 템플릿 66개를 세팅했고, 46개 템플릿을 실무 적용 단계까지 끌어올렸습니다.
자동화 효과를 운영 지표로 확인했습니다.
- 약 60개 변환 로직을 실무자가 직접 제작하고 운영할 수 있는 흐름으로 전환했습니다.
- 산정 가능한 AX TF 과제 기준 As-is 2.538 M/M에서 To-be 0.392 M/M로, 약 2.146 M/M 절감 추정치를 만들었습니다.
- 2026년 5월 정산 업무 실사용 이후 2개월간 검증했고, AM팀 전체 교육 대상으로 확대했습니다.
공급사 관리 시스템
공급사 발주, 출고, 정산, 상품 관리를 위한 Next.js 기반 신규 웹 시스템을 개발했습니다.
Next.jsTypeScriptAnt DesignReact Query
운영자와 공급사의 업무 흐름을 화면으로 분리했습니다.
- 수기와 메신저 중심의 발주 방식에서 발생할 수 있는 누락과 커뮤니케이션 오류를 줄이기 위해 시스템 기반 발주 흐름을 구축했습니다.
- 서브도메인 기준으로 위펀 운영자 어드민과 파트너스 어드민을 분리하고, 역할과 권한에 따른 화면 분기를 구현했습니다.
- 주문/발주 목록과 상세, 검색/필터, 엑셀 업로드/다운로드, 데이터 검증 UI를 개발했습니다.
파일 업로드 병목을 개선했습니다.
- 대용량 이미지 업로드 지연과 실패, CX 문의가 반복되는 문제를 확인했습니다.
- Pre-signed URL 기반 직접 업로드 방식을 공급사 관리 시스템에 우선 적용하고 팀 내 적용 사례를 공유했습니다.
- 파일 업로드 관련 API 응답 속도를 약 90% 개선했습니다.
스마트냉장고, 무인편의점 결제/인증 고도화
스마트냉장고와 무인편의점 서비스의 인증, 상품 선택, 결제, 영수증, 취소 흐름을 분석하고 결제수단을 확장했습니다.
React NativeXStatePaymentKiosk
결제와 인증 흐름의 예외 케이스를 정리했습니다.
- QR, RFID, 휴대번호 인증부터 상품 선택, 영수증, 결제 취소까지 앱, 웹뷰, 키오스크, 단말기 연동 흐름을 개선했습니다.
- 카카오페이, 페이코, 비플페이 등 결제수단 확장을 검토하고 프론트엔드 연동을 수행했습니다.
- kscat-a 단말기를 통한 카카오페이 결제 전문 통신 모듈을 개발했고, 배포 후 별도 운영 이슈 없이 적용했습니다.
복잡한 앱 흐름을 상태 기반으로 파악했습니다.
- 스마트냉장고, 무인매장, 키오스크, 픽업포인트의 모드별 주문, 결제, 도어, 픽업 흐름을 문서화했습니다.
- XState 기반 워크플로우에서 예약주문 픽업대 모드를 기존 상태 흐름과 분리해 확장했습니다.
- 앱 초기화, OTA, 권한, 네트워크, 결제취소 감시 흐름을 분석해 유지보수 참고 문서로 남겼습니다.
홈페이지, 마케팅 시스템 개선
홈페이지, 블로그, Appsmith 운영 도구, Framer CMS, HubSpot, 디지털 사이니지처럼 마케팅과 운영이 만나는 화면을 개발하고 유지보수했습니다.
FramerNext.jsVue.jsNuxt.jsHubSpotAWS
마케팅/운영 요청을 반복 가능한 시스템으로 정리했습니다.
- 위펀 홈페이지, 블로그, 관리자페이지, Appsmith 기반 운영 도구를 유지보수하고 서비스별 운영 요청에 대응했습니다.
- Framer CMS 기반 블로그 리뉴얼, 예약 업로드, 커스텀 컴포넌트 개발을 수행했습니다.
- GA, UTM, HubSpot, Framer 연동과 디지털 사이니지 송출 페이지를 개발했습니다.
개발 리소스 없이 운영 가능한 흐름을 만들었습니다.
- YTN 카드뉴스 RSS를 기반으로 백엔드 리소스 없이 AWS와 외부 도구로 디지털 사이니지 화면을 개발했습니다.
- 캐싱 전략을 적용해 약 1,000대 디바이스 운용 구조를 만들고, 연간 약 1.2억 매출 기여 프로젝트를 지원했습니다.
- CMS 데이터를 활용한 HubSpot 폼 Framer 컴포넌트와 라이브챗 채널을 개발해 전환 수작업 약 1,400분, 90% 절감에 기여했습니다.
티오더
Frontend Developer
2023. 07 - 2024. 03 (9개월)
오더3팀
통합 인증 프론트엔드
사내 어드민과 사장님 앱 등 제품군의 인증/인가 통합 화면을 개발했습니다.
ReactTypeScriptZustandEmotionOAuth
제품군에 흩어진 인증 흐름을 정리했습니다.
- OAuth 소셜 로그인, 로그인/회원가입, 약관/개인정보처리방침, 인증 메일 템플릿 관리 기능을 구현했습니다.
- 인증/인가 흐름을 문서화하고 운영 이슈에 대응할 수 있는 기준을 만들었습니다.
태블릿 주문 PWA 오프라인 PoC
네트워크가 불안정한 매장 환경에서 주문 데이터 유실을 줄이기 위한 오프라인 주문 구조를 검증했습니다.
PWAReactTypeScriptCouchDBWeb Worker
오프라인에서도 주문 흐름이 이어질 수 있는지 검증했습니다.
- 웹뷰 주문 화면의 PWA 오프라인 모드 PoC를 개발했습니다.
- CouchDB와 Web Worker를 활용해 태블릿 간 주문 데이터 동기화 가능성을 검토했습니다.
- 로컬 HTTPS 인증서 기반 테스트 환경을 구성해 실제 매장에 가까운 조건에서 검증했습니다.
문서 구조화
Atlassian 도입 이후 팀 Confluence 문서 구조와 인덱싱 패턴을 설계했습니다.
ConfluenceDocumentationTeam Workflow
팀이 필요한 정보를 더 빨리 찾도록 정리했습니다.
- 제품과 도메인별 문서 탐색 구조를 만들고, 반복적으로 찾는 정보를 기준으로 인덱싱했습니다.
- 해당 구조가 내부 Best Practice로 채택되어 팀 문서화 방식의 기준이 되었습니다.
엘핀
Frontend Developer
2023. 02 - 2023. 07 (6개월)
프론트엔드 개발
인원 관제 플랫폼 / 실내 인구 밀집도 대시보드
Wi-Fi, 블루투스, 레이더/라이다 기반 인원 관제 데이터를 운영자가 확인할 수 있는 실내 인구 밀집도 대시보드로 구현했습니다.
ReactTypeScriptTailwind CSSReact Query
공간 데이터를 운영자가 읽을 수 있는 화면으로 바꿨습니다.
- 건물, 층, 구역 단위로 체류 인원 수, 밀집도, 이동 흐름을 확인할 수 있는 대시보드 화면을 개발했습니다.
- LiDAR 센서와 Wi-Fi 스캐너 데이터를 기반으로 밀집도 추이를 히트맵 차트로 시각화했습니다.
- 인파 관리, 인원 관리, 상권 분석처럼 위치 데이터가 필요한 운영 상황을 고려해 조회와 필터 UI를 구성했습니다.
개인정보를 직접 노출하지 않는 관제 흐름을 다뤘습니다.
- 얼굴 이미지 대신 무선 신호와 센서 데이터를 활용하는 인원 관제 도메인의 특성을 고려해 화면 정보를 구성했습니다.
- 위치 정보 API 관리 웹 애플리케이션과 데이터 조회 UI를 개발했습니다.
- Jenkins와 GitHub Actions 기반 CI/CD를 구성했습니다.
재사용 가능한 UI 구조를 설계했습니다.
- Compound Component와 Render Props 패턴을 적용해 화면별 변형에 대응할 수 있는 UI 구조를 만들었습니다.
- React Query와 Recoil 기반으로 서버 상태와 화면 상태의 책임을 분리했습니다.
케이에이앤
Module SW Developer
2020. 10 - 2022. 04 (19개월)
기업부설연구소
산업용 신호 계측 시스템
가속도, 스트레인, 전압, 전류, 온도, 영상 등 산업 현장의 신호를 계측하고 분석하는 장비용 소프트웨어를 개발했습니다.
PythonQtNumPyLinux
현장 장비와 분석 소프트웨어를 함께 개발했습니다.
- IEPE/ICP 타입 가속도 센서와 스트레인 게이지 기반 계측 데이터를 처리하는 장비 소프트웨어를 구현했습니다.
- 터치 패널에서 계측 설정, 데이터 확인, CSV 저장, 분석 기능을 사용할 수 있도록 Qt 기반 GUI를 개발했습니다.
- 현장 이동성을 고려한 펠리컨 케이스형 장비에서 동작하는 Linux 기반 제어 화면을 구현했습니다.
계측 데이터를 공정 진단으로 연결했습니다.
- 진동 주파수 데이터를 기반으로 형상 가공 기계의 공정 상태를 추정하는 분석 모듈을 개발했습니다.
- 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로 이어지는 구조를 설계하고, 자체 템플릿 언어 XTL 기반으로 동작하도록 만들었습니다.
- 엑셀 변환 규칙을 코드가 아니라 엑셀 파일 안에 남겨, 문서이자 실행 가능한 규칙서로 사용할 수 있게 했습니다.
- 병합 셀, 여러 시트, 수식처럼 flat하지 않은 실무 원본 파일을 다루기 위해 전처리 스크립트 실행 구조를 구상했습니다.
qextory
2023 - 현재
개발하며 겪은 문제와 해결 과정을 정리하는 개인 기술 블로그입니다.
Next.jsTypeScriptContentlayerMDXTailwind CSS
- 프론트엔드, UX, 개발 환경, 자동화 도구 제작 과정에서 얻은 생각과 구현 기록을 글로 남기고 있습니다.
- 최신 글과 프로젝트 아카이브를 연결해, 작업의 맥락과 결과가 함께 보이는 개인 공간으로 확장하고 있습니다.
Activities.
엘리스 SW 엔지니어 트랙 3기
2022. 09 - 2022. 12
JavaScript, TypeScript, React 기반 웹 개발 과정을 수료했습니다. WYSIWYG 게시물 작성/뷰어, 실시간 채팅, 댓글 알림 기능을 구현했습니다.
울산대학교 전기전자공학과
2014. 03 - 2020. 02
전기전자공학을 전공했고, 센서 데이터와 제어 소프트웨어를 다루는 초기 개발 경험으로 이어졌습니다.