iOSAndroidWeb
EV King · 데이터 기반 차량 모니터링 및 시뮬레이션 플랫폼 개발
2022.10 ~ 2023.01·4개월
01
개요
EV King — 전기차 운전자가 충전 정보·실주행 데이터를 한곳에서 확인하고 가상 주행을 시뮬레이션 할 수 있는 종합 플랫폼 모바일 웹을 중심으로 iOS·Android 하이브리드 앱이 같은 웹을 감싸는 구조로 동일한 화면과 기능을 세 플랫폼에서 제공 출발지·도착지를 입력하면 카카오내비 경로 데이터와 차량 모델을 기반으로 가상 주행을 시뮬레이션하고 결과(주행거리·SOC 변화·충전 추천 등) 안내 실주행 모드에서 GPS 위치를 네이티브에서 실시간 수집해 웹뷰로 전달, 주행 데이터를 누적 기록하고 차량 운행 통계로 시각화 차량 정보 등록, 충전소/충전 서비스 검색, 주행 공유, 차량 스토리 커뮤니티, 마이페이지·인증서·구독 상담 등 EV 운전자 대상 부가 기능 통합 제공
02
WEB 핵심 작업 내용
- Next.js 12 + React 18 + TypeScript + Tailwind CSS + daisyUI 기반 모바일 웹 구축
- 가상 주행 시뮬레이션(/evplay/simulation) — 출발지·도착지 검색 → 카카오내비 경로 데이터 → 차량 모델/SOC 기반 주행 결과 산출 → 충전소 추천까지 단일 페이지에 구현
- 실제 주행 모드(/evplay/realDriving) — 네이티브에서 받은 GPS 좌표를 폴리라인으로 지도에 누적 표시하고 주행 데이터 서버 전송
- 주행 공유(/evplay/driveSharing) — 주행 기록을 다른 사용자와 공유
- 충전 서비스(/evplay/chargingService) + 충전소 정보(/evplay/chargingStationInfo) + 차량 정보(/evplay/vehicle) 페이지 제공
- EV 라이브 서비스(/evLiveService) 가입·내 라이브 영역 분리 구현
- 차량 스토리 커뮤니티(/community/vehicleStory), 마이페이지, 인증서, 구독 상담 등 보조 기능 페이지
- react-kakao-maps-sdk 로 Map·MapMarker·CustomOverlayMap·Circle·Polyline 활용한 지도 UI 구성
- Kakao 내비 API 호출을 위한 별도 httpRequestKakao 헬퍼 구현 (KakaoAK 헤더 + 401·403·5xx 분기 처리)
- 시뮬레이션 컴포넌트(ChargingStationButton · ControlBox · DashboardBox · StatusBox · Gallery)로 시뮬레이션 UI 모듈화
- Jotai 1.6 + optics-ts 기반 app · ev · charging · simulator 도메인 atom 글로벌 상태 관리
- react-query 3 으로 서버 상태 관리 및 자동 refetch
- React Hook Form 기반 신청·입력 폼 처리
- ApexCharts 기반 통계(Battery · Charts · FigureBar) 시각화
- @grapecity/activereports 기반 인증서 PDF 발급 영역 구현
- PassCertification 컴포넌트로 본인인증 흐름 처리
- next-themes 로 다크 모드 지원
- crypto-js + jwt-decode + cookies-next + device-uuid 기반 토큰 관리 및 디바이스 식별
- Husky + lint-staged + ESLint(airbnb) + TypeScript strict 코드 품질 게이트 구축
- 22개 API 모듈 분리 (address · ask · car365 · charging · common · ev · event · evLiveService · faq · main · next · notice · signup · simulation · story · user · weather 등)
03
AOS 핵심 작업 내용
- Kotlin + Android WebView 하이브리드 앱 구성 (compileSdk 34 / minSdk 21 / 100% Kotlin · View 시스템)
- Bridge.kt 클래스에 @JavascriptInterface 메서드 11개로 웹뷰 ↔ 네이티브 통신 (toast · currentLocation · driveLocation · stopLocation · openApp · getDeviceInfo · getAppVersion · openAppSetting · askPermission · openLocationSetting · statusBarColor)
- LocationService 로 백그라운드 GPS 위치 수집 및 실주행 모드 좌표 스트리밍 구현
- Google Play Services Location SDK 기반 GPS 추적
- CheckPermission 유틸로 위치·알림 권한 런타임 체크 및 분기 처리
- DeviceInfo 유틸로 디바이스 정보 조회(getDeviceInfo) 후 웹뷰에 전달
- MySharedPreference 로 로컬 영속 저장
- 패키지: com.pmgrow.baas2.evking
04
IOS 핵심 작업 내용
- Swift + UIKit + WKWebView 기반 하이브리드 앱 구성 (AppDelegate + SceneDelegate · 100% Swift)
- WKUserContentController messageHandlers 8개로 웹뷰 ↔ 네이티브 통신 (toast · currentLocation · driveLocation · stopLocation · openApp · getDeviceInfo · getAppVersion · openAppSetting)
- Alamofire 5.2 기반 네트워크 통신, Toast-Swift 로 토스트 UI, TAKUUID 로 디바이스 식별 UUID 발급
- UIDevice / Date / URL / Dictionary 확장(Extension) 으로 공통 기능 모듈화
- CocoaPods 기반 의존성 관리
05
CI/CD
- Jenkins 파이프라인 + Docker Compose 기반 deploy.sh 스크립트로 환경 변수 자동 주입
- build.sh / banner.sh 스크립트로 빌드 산출물 관리
- Yarn Berry 3.2.3(PnP) 기반으로 의존성 잠금하여 빌드 환경 일관성 확보 (webview)
06
기술 태그
#TypeScript#Next.js#React#Tailwind CSS#daisyUI#Jotai#optics-ts#React Query#React Hook Form#ActiveReports#ApexCharts#Kakao Maps#Kakao Navi#Lottie#Swiper#next-themes#crypto-js#JWT#cookies-next#device-uuid#Husky#ESLint#Swift#UIKit#WKWebView#Alamofire#Kotlin#Android WebView#Google Play Services Location#Docker#Jenkins#Yarn Berry#CocoaPods







