트립머니

키오스크 앱 프론트엔드 개발

프로젝트 설명

키오스크 앱 프론트엔드 개발 및 유지보수

기간

2025.07 ~ 2026.02 (상시 업무)

팀원

2명 (FE 1, BE 1)
JavaScript
JavaScript
Vue
Vue
Sass
Sass
Axios
Axios
Electron
Electron
Babel
Babel
Vue 2.6 기반 키오스크 앱 프론트엔드 개발 및 유지보수를 담당했습니다.

상세 내용

1. 기능 구현

  • 선불교통카드 발급, 충전, 환불, 픽업 기능 구현
  • 외화 → 원화 환전 데이터 검증 및 에러 처리 개선
  • 카드 NFC/바코드 리더기, 카드 방출기, 지폐 투입기 등 하드웨어와 연결된 중요한 비즈니스 로직을 모듈화하고 데이터 검증 및 에러 처리 세분화
  • 특정 하드웨어의 구조적 한계로 인한 중복 요청 오류를 방지하기 위해 단일 요청 보장 구조 설계
  • 로그 데이터를 구체화하고 에러 유형, 발생 경로를 추가해 디버깅 및 에러 대응 개선

2. 성능 최적화

  • 구형 키오스크에서 언어 변경 시 런타임 중 폰트 동적 로딩으로 인한 메모리 피크로 프로그램이 종료되는 문제를 해결하기 위해 전체 폰트 프리로드 적용
  • 빌드 압축률을 높이고 불필요한 코드, 파일, 라이브러리를 제거하여 빌드 용량 12% 감소 (81MB → 71MB)
  • 컴포넌트 언마운트 이후에도 백그라운드에 남아있던 비동기 로직에 대해 클린업을 적용하여 메모리 누수 및 의도치 않은 에러 방지

3. 코드 품질 개선

  • 하드코딩된 코드를 전역 변수, 믹스인, 재사용 가능한 컴포넌트로 리팩토링
  • 폰트, 색상, 그림자 등 자주 사용되는 스타일에 디자인 토큰 적용