LGU+ Connect
비공개 통신사 차량 운영팀프런트엔드 엔지니어2023-12
실시간 데이터, 밀도 높은 워크플로, 지도 중심 UI의 균형을 맞추며 차량 추적과 분석을 위한 대규모 운영 인터페이스를 구축했습니다.
ReactTypeScriptApollo ClientRecoiliNavi MapsReact Hook FormApexChartsAg-Grid
- 실시간 추적, 보고, 운영 제어를 하나의 인터페이스에서 처리하는 대시보드를 제공했습니다.
- 양식, 상태 관리, 데이터 표현을 표준화해 밀도 높은 워크플로의 마찰을 줄였습니다.
- 지도, 테이블, 분석 모듈의 재사용 패턴으로 복잡한 프런트엔드의 유지보수성을 높였습니다.
비공개 프로젝트입니다. 민감한 구현 세부 사항과 소스 코드는 공개하지 않습니다.
배경
이 제품은 위치 데이터, 보고, 운영자 작업이 하나의 프런트엔드에서 함께 작동해야 하는 차량 운영을 지원했습니다. 단순 프레젠테이션 대시보드가 아니라 실제 운영에서 사용할 수 있어야 했습니다.
문제
지도, 대규모 데이터, 잦은 업데이트가 한 화면에서 경쟁하면 차량 관리 도구는 빠르게 복잡해집니다. 운영자가 충분히 제어하면서도 인터페이스를 읽기 쉽게 유지하는 것이 과제였습니다.
접근 방식
지도, 데이터 그리드, 분석, 양식을 위한 안정적인 프런트엔드 패턴 구축에 집중했습니다. 기능을 줄이지 않으면서 정보 밀도가 높은 운영 화면을 더 쉽게 이해하고 유지하는 것이 목표였습니다.
출시한 기능
- 실시간 업데이트와 지도 연동을 이용한 차량 추적 화면
- 구조화된 차트와 테이블을 사용하는 분석·보고 화면
- 더 강력한 검증과 예측 가능한 상태 관리를 제공하는 재사용 양식 흐름
- 대규모 데이터 화면의 운영자 워크플로를 위한 공통 UI 패턴
결과
- 분리된 여러 도구 대신 하나의 프런트엔드에서 모니터링과 관리 작업을 처리할 수 있게 되었습니다.
- 재사용 가능한 프런트엔드 패턴이 운영 화면 추가와 유지보수 비용을 낮췄습니다.
- 정보량이 많고 명확성이 기능만큼 중요한 워크플로에서 인터페이스의 복원력이 향상되었습니다.
기술 메모
React, TypeScript, Apollo Client, Recoil, React Hook Form, 차트, 지도 연동을 사용했습니다. 데이터 밀도가 증가해도 복잡한 화면을 빠르고 일관되게 유지하는 것이 핵심 엔지니어링 과제였습니다.
더 살펴보기
이런 제품 개발이 필요하신가요?
깔끔하게 출시되고 실제 운영에서도 견고해야 하는 AI 기능, 제품 인터페이스, 콘텐츠 시스템을 개발합니다.