오픈마일: 차량관리 통합 서비스 BOS
오픈마일은 차량 탁송과 물류 업무에 IT를 접목한 모빌리티 서비스입니다. 화주, 운송사, 운전자를 플랫폼으로 연결해 차량 탁송, 순회점검, 검사 대행, 차량 매각 같은 차량 관리 업무를 제공하고, 주문 관리와 기사 배정, 정산, 차량 위치 관제 업무를 시스템으로 처리합니다.
2022.08 – 2023.01
- TypeScript
- React
- Redux Toolkit
- RTK Query
- redux-persist
- AG Grid
- 네이버 지도
- Ant Design
- styled-components
- Formik
- GitHub Actions
- 웹 영역 PL로 기술 선정과 일정 관리
- 아토믹 디자인 패턴 첫 적용
- 목록 화면 조회 로직 공통화
- URL에 조회 상태 보존
- 상태별 지도 마커와 자동 갱신
프로젝트 개요
오픈마일은 차량 탁송과 물류 업무에 IT를 접목한 모빌리티 서비스입니다. 화주, 운송사, 운전자를 플랫폼으로 연결해 차량 탁송, 순회점검, 검사 대행, 차량 매각 같은 차량 관리 업무를 제공하고, 주문 관리와 기사 배정, 정산, 차량 위치 관제 업무를 시스템으로 처리합니다.
따로 처리하던 차량 이동과 관리 업무를 한 플랫폼에서 다루고, 차량의 이동 현황과 서비스 진행 상태를 바로 확인할 수 있게 합니다. 렌터카, 완성차, 차량 운영 기업 같은 B2B 고객사의 차량 운영·관리 업무를 효율화하는 것이 목표입니다.
저는 카서비스 안의 차량관리 통합 서비스 BOS를 새로 만드는 프로젝트에 참여했고, 개발과 테스트 단계까지 진행했습니다. 웹 영역 PL을 맡아 웹 라이브러리를 모두 직접 골랐고, 웹 관련 요구사항 조율과 일정·업무 분배를 담당했습니다. 구현은 AG Grid 기반 메인 테이블·필터 영역과 위치 데이터 지도 마커 표시를 맡았습니다.
| 항목 | 내용 |
|---|---|
| 팀 구성 | PM 1명, 디자이너 1명, 백엔드 개발자 3명, 웹 프론트엔드 개발자 2명(본인 포함), 앱 프론트엔드 개발자 1명 |
주요 성과
- 웹 영역 PL로 기술 선정과 일정 관리: 차량관리 BOS 신규 구축에서 웹 영역 PL을 맡았습니다. 웹 라이브러리를 직접 골랐고, 웹 관련 요구사항 조율과 일정·업무 분배를 담당했습니다.
- 아토믹 디자인 패턴 첫 적용: 이전 프로젝트에서는 공용 컴포넌트만 components 폴더에 따로 두고, 나머지는 페이지 단위로 관리했습니다. 이 프로젝트에서는 당시 많이 쓰이던 아토믹 디자인 패턴을 찾아보고, 컴포넌트를 더 효율적으로 관리할 수 있다고 판단해 처음 적용했습니다. 공통 컴포넌트를 atoms, molecules, organisms, templates로 나눴고, 대부분의 페이지를 목록·상세 템플릿 위에 구성했습니다.
- 목록 화면 조회 로직 공통화: 목록 화면의 조회·필터·페이지 처리를 공통 훅
useGridData로 묶었습니다. 각 페이지는 조회 경로, 필터 초기값, 컬럼 정의만 넘기면 됩니다. - URL에 조회 상태 보존: 필터·페이지·페이지 크기를 URL 쿼리스트링에 담았습니다. 요구사항에는 없었지만 어드민에 꼭 필요하다고 판단해 넣은 기능으로, 새로고침이나 뒤로가기를 하거나 링크를 전달받아도 같은 조회 결과가 열립니다.
- 상태별 지도 마커와 자동 갱신: 네이버 지도에 작업 상태와 선택 여부에 따라 다른 마커를 표시하고, 마커를 선택하면 해당 위치로 지도를 옮겼습니다. 위치 데이터는 30초마다 다시 조회하되, 자동 갱신일 때는 지도를 다시 마운트하지 않아 보고 있던 지도 상태가 유지되게 했습니다.