메일빈 Electron 키오스크 소프트웨어
1. 네트워크 유실 대응을 위한 Offline-First 아키텍처
- 기존 문제점 : 서버 응답 의존 구조는 네트워크 불안정 시 키오스크 부팅 불가 및 결제 중단으로 인한 매출 손실 리스크가 컸습니다.
- 해결 전략 : 결제 로직과 데이터 동기화 로직을 완전히 격리한 Offline-First 아키텍처를 설계했습니다. SQLite Trigger와 Node.js Worker Threads를 결합하여 메인 스레드 성능을 최적화하고 데이터 영속성을 보장했습니다.
- 동기화 메커니즘 : 결제 성공 시 DB 트리거가 즉시 전송 대기열(sync_queue)에 데이터를 복사하는 Event-driven 방식을 채택했습니다. 전송 실패 시 지수 백오프(Exponential Backoff) 알고리즘이 적용된 복구 워커가 재시도를 수행합니다.
- 성과 : 실제 네이버 클라우드 장애 상황에서도 유실 0건을 기록했으며, 과거 2주가 소요되던 수동 복구 인건비를 100% 절감했습니다.
2. 하드웨어 의존성 탈피를 통한 개발 공정 혁신
- 기존 문제점 : 신규 모델 출시 시 소프트웨어가 실제 장비에 종속되어 발생하는 직렬적 개발 구조와 출시 지연(Time-to-Market) 리스크 존재
- 해결 전략 : Strategy Pattern을 활용한 DevicePort 인터페이스 추상화 레이어를 설계했습니다. 이를 통해 실제 시리얼 통신을 담당하는 어댑터와 에뮬레이션용 MockDevicePort를 런타임 환경에 따라 동적으로 주입할 수 있도록 구현했습니다.
- 기술적 해소 방법 : vi.mock과 EventEmitter를 활용해 실제 장비의 응답 패킷과 레이턴시를 코드 레벨에서 재현하여 하드웨어 없이 비즈니스 로직을 100% 검증할 수 있는 환경을 구축했습니다.
- 성과 : 하드웨어 생산과 소프트웨어 개발의 병렬 진행이 가능해졌으며, 신제품 출시 기간을 최소 1~3주 단축하고 예외 케이스(체크섬 오류 등)에 대한 품질 검증 능력을 확보했습니다.
3. 다국어(i18n) 시스템 구축
- 기존 문제점 : 국가별 별도 패키징으로 인한 런타임 언어 전환 불가 및 유지보수의 비효율성이 있었습니다.
- 타입 안정성 중심의 설계 : Module Augmentation을 활용하여 자동 추론 될 수 있게 했고, Mapped Type 기반의 LanguageStyle<T> 유틸리티를 구현하여 언어별 스타일 오버라이드를 타입 시스템 내에서 안전하게 관리하여 언어별 일관성 있는 레이아웃을 유지할 수 있도록 구현했습니다.
- 성과 : 국가별 개별 빌드/배포 파이프라인 통합으로 유지보수 공수 50% 이상 단축, 신규 언어 대응 시 코드 수정 없이 리소스 추가만으로 즉시 배포 가능한 환경을 구축했습니다.
4. UI/UX 개선 및 고도화 : 사용자 경험 중심의 시스템 리뉴얼
- 기존 문제 : 산업용 기기 특유의 투박한 UI와 시각적 피드백 부재로 인한 사용자의 오조작 리스크가 존재했습니다.
- 정보 설계(IA) 최적화 : 포인트 적립 및 결제 프로세스의 불필요한 단계를 축소하고, 사용자 동선을 고려한 인터페이스 재배치
- 핵심 구현 사항
- 포인트 시스템 UI 개편 : 다양한 연령층을 고려하여 '적립/사용' 과정을 간소화하고, 직관적인 모달 UI를 통해 결제 이탈률 방지했습니다.
- 결제 페이지 구조 개선 : 결제 수단 추가 및 변경에 유연하게 대응할 수 있도록 비즈니스 로직과 UI 컴포넌트 분리하여 설계했습니다.
- 성과 : 직관적인 UI 도입 후 기기 조작 미숙으로 인한 CS 문의가 감소했고, 신규 결제 수단에 따른 대응 용이성이 증대 되었습니다.
제휴 페이지 구현
1. AI 프롬프트 상세 작성으로 작업 효율성 증대
- Claude Code의 설정 파일 및 계획 수립 및 작성 제어로 예상 기간 1주~2주보다 획기적으로 빠르게 작업을 마무리했습니다.
- CLAUDE.md 파일 및 AI 토큰 효율성을 높일 수 있는 rtk 등을 적극적으로 활용하였습니다.
顯示更多