현대모비스 브링앤티: 디지털키 서비스 운영 관리자
브링앤티는 기존 차량의 스마트키를 스마트폰과 연동해 디지털키처럼 사용할 수 있도록 지원하는 현대모비스의 차량용 디지털키 서비스입니다. 사용자는 모바일 앱을 통해 차량 문을 열고 잠그거나 오토도어 기능을 이용할 수 있으며, 디지털키 공유를 기반으로 차량 관리 서비스까지 연계할 수 있습니다.
2025.09 – 2026.02
- React
- Zustand
- React Hook Form
- Zod
- Tailwind CSS
- shadcn
- AG Grid
- Claude Code
- Codex
- FSD 도입과 개발 규칙 정리
- 공통 컴포넌트와 반복 로직 모듈화
- 페이지 유형별 AI 개발 방식 적용
- 개발 기준 공유와 작업 관리
- S3·CloudFront 배포 자동화
프로젝트 개요
브링앤티는 기존 차량의 스마트키를 스마트폰과 연동해 디지털키처럼 사용할 수 있도록 지원하는 현대모비스의 차량용 디지털키 서비스입니다. 사용자는 모바일 앱을 통해 차량 문을 열고 잠그거나 오토도어 기능을 이용할 수 있으며, 디지털키 공유를 기반으로 차량 관리 서비스까지 연계할 수 있습니다.
별도의 차량 개조 없이 기존 스마트키와 전용 디바이스를 활용해 디지털키 기능을 제공함으로써, 디지털키가 기본 탑재되지 않은 차량에서도 보다 편리한 차량 이용 경험을 제공합니다.
이 서비스를 운영하기 위한 관리자 웹을 새로 만들었습니다. 앱에서 이뤄지는 디지털키 등록·공유와 차량 이용 현황을 운영자가 확인하고, 전용 디바이스의 생산부터 CS까지 한곳에서 관리합니다.
| 항목 | 내용 |
|---|---|
| 팀 구성 | PM 1명, 디자이너 1명, 백엔드 개발자 1명, 프론트엔드 개발자 2명(본인 포함) |
주요 성과
- FSD 도입과 개발 규칙 정리: 기능·도메인 단위로 책임을 나누는 FSD(Feature-Sliced Design)를 팀 공통 개발 규칙으로 정했습니다. 화면이 늘어나도 같은 구조로 코드를 추가하면 돼서 유지보수와 확장이 쉬워졌습니다.
- 공통 컴포넌트와 반복 로직 모듈화: 디자인 시스템에 맞춰 공통 UI 컴포넌트와 테이블·필터처럼 반복되는 로직을 모듈로 분리하고, 페이지 유형별로 재사용할 수 있는 구조를 만들었습니다. 새 페이지를 만들 때 같은 코드를 다시 짜는 일이 줄었습니다.
- 페이지 유형별 AI 개발 방식 적용: FSD 구조와 페이지 구성 요소를 기준으로, 형태가 정해진 화면은 AI로 만들었습니다. 반복 작업이 줄어 개발 속도가 빨라졌습니다.
- 개발 기준 공유와 작업 관리: PL로서 공통 컴포넌트 사용법과 페이지 구현 규칙을 정해 공유했고, 이를 기준으로 팀원별 작업 분배와 일정 조율을 맡았습니다. 덕분에 여러 개발자가 같은 구조와 기준으로 작업할 수 있었습니다.
- S3·CloudFront 배포 자동화: 현업에서 전달받은 인프라 환경에 맞춰 GitHub Actions로 S3 배포와 CloudFront 캐시 무효화를 자동화해 수동 배포 절차를 줄였습니다.