HM소프트

쇼핑몰 고객 상담 챗봇을 LLM 없이 규칙 기반으로 만든 기록. 버튼 우선·자유 입력 보조의 두 갈래 대화 엔진과 키워드·FAQ 양방향 매칭, 환불 정책을 SQL 조건으로 표현하기, sql.js의 동시성 트레이드오프, npm ci와의 CI 싸움까지 담았다.왜 LLM 없이 시작했나쇼핑몰에 들어오는 고객 문의는 패턴이 지독하게 뻔하다. "주문한 거 언제 와요", "환불 어떻게 해요", "사이즈 바꿀 수 있나요". 상담 인력이 같은 답을 하루에 수십 번씩 복사·붙여넣기 하는 걸 보면, 이건 사람이 아니라 코드가 할 일이라는 생각이 든다. 그래서 한 쇼핑몰의 고객 상담용 챗봇을 만들기로 했다.처음부터 외부 LLM API를 붙일 수도 있었다. 하지만 일부러 그 길을 택하지 않았다. 이유는 세 가지였다. 첫째, 쇼..

EJS 서버 렌더 데모를 링크 하나로 공유되는 정적 사이트로 전환한다. build.js로 HTML을 굽고, fetch 가로채기 shim으로 API를 정적 JSON에 연결하며, BASE_PATH 변수로 멀티 호스팅 경로를 통일한다. Playwright 감사 스크립트로 상태코드와 NaN 같은 조용한 실패까지 배포 게이트로 잡는다.데모는 서버 없이, 링크 하나로 돌아가야 한다1편에서 만든 커피머신 컨트롤 패널 데모(추출구 5개짜리 자동 드립 머신의 태블릿 화면)를 이제 누구에게나 링크 하나로 보여줘야 했다. 문제는 원래 구조였다. 화면은 EJS 템플릿을 Express가 서버에서 렌더링하고, 데이터는 /api/* 엔드포인트가 목 JSON을 돌려주는 방식이다. 보여주려면 어딘가에 Node 서버가 떠 있어야 한다...

추출구 5개 자동 드립 머신의 태블릿 컨트롤 패널을 빌드 없는 브라우저 Babel과 CDN React로 만든다. 5열 그리드 잠금, 진행률 링 대신 단면도 애니메이션, getBrewSnapshot 한 함수로 큰 화면과 미니 화면을 동기화한 시간 모델, 공전 주전자 vs 고정 물줄기 정렬 버그까지 다룬다.시리즈를 시작하며핸드드립 커피를 자동으로 내려주는 기기의 태블릿용 컨트롤 패널 데모를 만들었다. 실제 장비는 추출구(스파웃)가 다섯 개 달린 자동 드립 머신인데, 영업·전시 자리에서 "이 기기는 화면에서 이렇게 동작합니다"를 장비 없이 보여줄 프로토타입이 필요했다. 그래서 두 가지 제약이 처음부터 못 박혀 있었다. 첫째, 백엔드 없이도 돌아가야 한다 — 데모를 위해 서버를 운영하고 싶진 않았다. 둘째, 화..

부품 유통 관리 ERP 프로토타입을 React와 Express로 만든 기록. 회계·인사·영업·구매·재고·생산 6개 모듈 경계를 API prefix로 강제하고, 집계 전용 대시보드 엔드포인트, 인메모리 데이터 계층과 prefix ID, 다국가 통화 분리, 재고 알림 재계산과 작업지시 상태 머신, YAML 한 장 배포와 CORS·SPA rewrite까지 다룹니다.프로토타입에 ERP를 통째로 욱여넣기여러 나라에서 부품을 수입해 국내에 공급하는 유통 업무를 가정하고, 그 업무 흐름을 한 화면에서 다루는 웹 ERP 프로토타입을 만들었다. 회계·인사·영업·구매·재고·생산 — 보통 ERP라고 부르는 영역 6개를 모듈로 나눠 한 시스템에 담았다. 백엔드는 Express, 프론트엔드는 React로 짰고, 마지막에 클라우..

임베디드 기기의 키오스크 UI에서 WebSocket 푸시와 HTTP 폴링을 한 화면에 충돌 없이 공존시킨 기록. 이벤트 봉투 펍/섭 버스, 지수 백오프 재연결과 포기 가드, 소유권 집합으로 라이브·정적 필드를 분담시킨 인계 로직, mock WS 서버와 Playwright E2E 검증까지 다룬다.시리즈를 시작하며 — 기기 상태가 곧 화면인 UI여러 개의 추출구(스테이션)를 가진 음료 추출 기기의 터치 키오스크 UI를 만들었다. 임베디드 보드 위에서 웹(EJS 템플릿 + 바닐라 JS + CSS)으로 서빙되는 태블릿 화면이고, 화면에 보이는 거의 모든 것이 기기의 현재 상태다. 어느 추출구가 비어 있고, 어디서 추출이 진행 중이고, 진행률이 몇 퍼센트이고, 알람이 떴는지. 사용자가 입력하는 폼이 주인공인 보통..