iOSAndroidWeb
GB EVcare · 배터리 케어 서비스 개발
2024.01 ~ 2024.04·4개월
01
개요
GB EVcare(app.gbevcare.com) — 전기차 운전자의 배터리 상태를 모바일에서 모니터링하고 케어할 수 있게 도와주는 서비스 주행·SOC(충전 상태)·SOH(잔존수명)·온도 4가지 지표 기반으로 차량 배터리를 진단·관리 모바일 웹을 중심으로 iOS·Android 하이브리드 앱이 같은 웹을 감싸는 형태로 동일한 화면·기능 제공 일자별 캘린더 뷰와 그래프 뷰로 배터리 상태 변화를 시각화하여 사용자에게 안내 회원가입 단계에서 차량 등록·약관 동의·개인 정보 수집을 분리해 진행하며, 푸시 알림으로 케어 이벤트를 사용자에게 전달
02
WEB 핵심 작업 내용
- Next.js 12 (Pages Router) + React 17 + TypeScript + Tailwind CSS 기반 모바일 웹 구축
- 배터리 케어 4개 지표 페이지 분리 구현 (/care/drive · /care/soc · /care/soh · /care/temperature)
- 통계 영역을 캘린더 뷰(/statistics/calendar)와 그래프 뷰(/statistics/graph)로 분리
- 회원가입 4단계 워크플로 (/signup/user → /signup/car → /signup/term → /signup/complete) 구현
- 정보 수집 동의(/collection/personal · /collection/vehicle) 페이지 분리
- 차량 관리(/vehicle/battery)와 마이페이지·설정·권한·서비스 일시중지(service-pause) 등 회원 관리 기능
- Recoil(common·modal atom) 기반 글로벌 상태 관리
- Axios + SWR 조합으로 API 응답 캐싱 및 자동 refetch 처리
- ApexCharts + react-apexcharts 로 배터리 지표 시각화
- React Hook Form 으로 회원가입·정보 수집 다단계 폼 처리
- Framer Motion 기반 화면 전환 인터랙션 + Lottie 로딩 애니메이션
- crypto-js + jwt-decode + cookies-next 기반 토큰 관리 및 민감 정보 암호화
- 9개 서비스 모듈 (addressService · axios · care · certificate · common · customer · statistics · user · vehicle)
03
AOS 핵심 작업 내용
- Kotlin + Android WebView 하이브리드 앱 구성 (compileSdk 35 / minSdk 24, Android 7.0 ~ 15)
- Bridge.kt 클래스에 @JavascriptInterface 메서드 7개로 웹뷰 ↔ 네이티브 통신 (권한 요청·디바이스 토큰·파일 다운로드·외부 URL·앱 설정 열기 등)
- Firebase Cloud Messaging(FCM) + MyFirebaseMessagingService 로 푸시 알림 수신·처리
- DataBinding + AppCompat + Jetpack Compose(BOM 2023.03) 의존성 포함하여 점진적 도입 기반 마련
- CheckPermission 유틸로 위치·알림·저장소 권한 런타임 체크
- KeyboardHeightProvider 로 키보드 영역과 웹뷰 높이 동기화
- WebViewClientClass 로 외부 URL·딥링크·에러 페이지 라우팅 분기
- DEBUG / RELEASE 빌드 타입에서 웹뷰 URL(app.gbevcare.com) buildConfigField 로 자동 적용
04
IOS 핵심 작업 내용
- Swift + UIKit + WKWebView 기반 하이브리드 앱 구성 (AppDelegate + SceneDelegate)
- WKUserContentController messageHandlers 5개로 웹뷰 ↔ 네이티브 통신 (앱 버전 체크·앱 설정 열기·첨부파일 다운로드·디바이스 토큰·외부 URL)
- Firebase Core + Firebase Messaging(CocoaPods) 으로 APNs ↔ FCM 푸시 통합
- UNUserNotificationCenter delegate + MessagingDelegate 패턴으로 푸시 수신·표시 처리
- NotificationService Extension(별도 타깃) 으로 푸시 페이로드 가공 처리
- GoogleService-Info.plist 기반 Firebase 설정 분리
05
CI/CD
- Jenkins 파이프라인 + Docker Compose 기반 deploy.sh 스크립트로 development 환경 자동 배포
- Yarn Berry 4.1(PnP) 기반으로 의존성 잠금하여 빌드 환경 일관성 확보 (webview)
06
기술 태그
#TypeScript#Next.js#React#Tailwind CSS#Recoil#SWR#Axios#React Hook Form#ApexCharts#Framer Motion#Lottie#crypto-js#JWT#cookies-next#Swift#UIKit#WKWebView#Kotlin#Android WebView#DataBinding#Firebase#FCM#APNs#Docker#Jenkins#Yarn Berry#CocoaPods


