제조 실행 시스템(MES) · 모바일/태블릿 앱
DongjinMES
제조 현장 작업자를 위한 모바일·태블릿 최적화 MES(제조 실행 시스템) 프론트엔드. 입고부터 생산·품질·출고까지 제조 전 공정을 현장에서 처리할 수 있도록 설계한 React 기반 하이브리드 앱입니다.
프로젝트 개요
DongjinMES는 제조 기업의 생산 현장 디지털 전환을 목표로 한 MES(제조 실행 시스템) 클라이언트입니다.
작업자가 PC가 아닌 태블릿·모바일 기기를 들고 현장을 다니며 입고 검수, 생산 실적 등록, 품질 검사, 출고 처리를 실시간으로 수행할 수 있도록 설계했습니다.
웹앱을 Capacitor로 패키징해 Android 네이티브 앱으로 배포함으로써, 단일 React 코드베이스로 웹과 네이티브 앱을 동시에 운영하는 하이브리드 전략을 채택했습니다.
실마릴은 이 프로젝트에서 프론트엔드 개발을 담당했습니다.
담당 역할 & 기여
- 프론트엔드 개발 전반 — 기능 설계·구현·API 연동·네이티브 빌드를 담당했습니다.
- TypeScript/React 약 31,000줄, 38개 페이지, 24개 API 모듈 규모로 구현했습니다.
- 제조 전 공정(입고 → 생산 → 품질 → 출고)을 7개 도메인으로 모듈화했습니다.
- 웹앱을 Capacitor로 패키징해 Android 네이티브 앱으로 배포했습니다.
- 단일 React 코드베이스로 반응형 웹과 네이티브 앱을 동시에 운영하는 하이브리드 전략을 적용했습니다.
주요 기능
입고 (Inbound)
입고 등록, 수량 입력, 라벨 출력 설정, 입고 이력을 처리합니다.
출고 (Outbound)
바코드 스캔 기반 출고, 수량 처리, 출고 이력을 관리합니다.
생산 (Production)
생산 지시 조회, 투입 품목 관리, 생산 실적·검사 등록을 BOM·LOT 추적과 연동해 제공합니다.
품질 (Quality)
수입 검사 · 공정 검사 · 출하 검사의 3단계 검사 워크플로우를 구현했습니다.
정비 · 설비 (Maintenance)
설비 점검과 정비 이력을 관리합니다.
운전일지 (Operation)
운전 기록과 특이사항 메모를 남깁니다.
알림 (Notification)
FCM 푸시 알림과 알림 내역을 관리합니다.
기술 하이라이트
개발/퍼블리싱 분리 모노레포
apps/(API 연동 개발)와 pages/(순수 퍼블리싱)를 각자 독립된 shared/를 가진 두 워크스페이스로 분리했습니다. 퍼블리셔와 개발자가 서로의 작업을 침범하지 않고 병렬로 진행하며, Path Alias(@components·@hooks 등)를 양쪽에 동일하게 맞춰 코드 이동 비용을 최소화했습니다.
JWT 자동 만료 관리 API 클라이언트
Axios 인터셉터 위에 토큰 만료를 주기적으로 감지(setInterval)하고 자동 갱신하는 레이어를 직접 구현했습니다. isRefreshing 플래그로 동시다발적 401 요청의 중복 리프레시를 방지하고, 요청/응답을 색상 구분해 출력하는 디버그 로거로 현장 디버깅 효율을 높였습니다.
API 레이어의 일관된 추상화
24개 도메인 각각에 endpoints(순수 API 함수) → hooks/api(React 커스텀 훅) 2계층 패턴을 일관되게 적용했습니다. 컴포넌트는 비즈니스 데이터에만 집중하고, 로딩·에러·재호출 로직은 훅이 캡슐화합니다.
현장 친화적 모바일 UX
숫자 키패드·검색 선택·날짜 선택·수량 입력 등 20여 종의 모달을 재사용 단위로 설계하고, iPhone 노치·홈 인디케이터를 위한 Safe Area 대응과 모바일(375px)~태블릿 가로(851px+) 3단계 반응형을 적용했습니다. 장갑 낀 작업자도 쓸 수 있는 큰 터치 타깃과 키패드 중심 인터랙션으로 구성했습니다.
웹 → 네이티브 하이브리드 빌드 파이프라인
Vite 빌드 산출물을 Capacitor로 동기화하는 빌드 스크립트(cap:build·copy-static)를 구성해, 단일 명령으로 웹 빌드부터 Android 앱 패키징까지 자동화했습니다.
기술 스택
성과 및 의의
- 제조 전 공정(입고 → 생산 → 품질 → 출고)을 하나의 모바일 앱으로 통합해, 현장의 종이 기반 작업을 디지털화했습니다.
- 단일 코드베이스로 웹과 Android 앱을 동시에 운영해 유지보수 비용을 절감했습니다.
- 도메인별로 일관된 API·컴포넌트 패턴을 확립해, 신규 기능 추가 시 확장성을 확보했습니다.