iOSAndroidWeb

Watt+ · EV 통합 플랫폼 서비스 개발

2025.09 ~ 2026.01·5개월
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 1
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 2
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 3
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 4
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 5
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 6
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 7
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 8
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 9
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 10
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 11
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 12
Watt+ · EV 통합 플랫폼 서비스 개발 스크린샷 13
01

개요

전기차 데이터 기반 통합 플랫폼 — 차량 상태 조회, 인증, 커뮤니티, 리워드 기능을 제공하는 사용자 서비스 차량 연동을 통해 배터리 상태(SOH), 충전 이력, 주행 거리 등 차량 데이터를 수집하고, 이를 기반으로 차량 상태를 분석·시각화하여 사용자가 직관적으로 확인할 수 있는 기능 제공 수집된 데이터는 배터리 상태를 객관적으로 확인할 수 있는 지표로 가공되며, 인증서 형태로 제공되어 차량 상태를 신뢰 가능한 기준으로 확인 가능 충전소 이용 후기, 주행 경험, 차량 관리 정보 등을 공유할 수 있는 커뮤니티 기능 제공, 사용자 간 정보 교환 및 콘텐츠 소비 가능 출석, 미션, 광고 참여 등을 통해 포인트를 적립할 수 있는 리워드 기능 포함, 적립된 포인트를 다양한 보상으로 교환 가능 차량 데이터 조회, 인증서 확인, 커뮤니티 활동, 리워드 적립 기능을 하나의 서비스 내에서 이용 가능한 전기차 사용자 대상 통합 플랫폼

02

WEB

  • TanStack Query 도입으로 캐싱·자동 refetch·상태 동기화 구축
  • Zustand 기반 도메인 단위 스토어 분리로 전역 상태 구조 설계
  • Sentry 기반 에러 추적·모니터링 및 이슈 대응 체계 구축으로 서비스 안정성 강화
  • Cypress 기반 E2E 테스트로 사용자 흐름 검증 및 회귀 오류 방지
  • React Hook Form uncontrolled 방식으로 다단계 폼 리렌더링 최소화
  • Rive·Lottie 기반 상태 애니메이션 구현으로 렌더링 효율성 확보
  • ApexChartsdynamic import(SSR off)로 분리하여 초기 번들 사이즈 최적화
  • Tailwind 기반 디자인 토큰·컴포넌트화로 UI 일관성 및 유지보수성 확보
03

AOS

  • BLE GATT Notify 통신을 SerialSocket 단일 인터페이스로 추상화하고 CRC32·TTL 이중 디듀프로 데이터 무결성 확보
  • ObdPacketQueue 순환 버퍼 기반 STX·CRC16·ETX 검증과 CRC 실패 시 다음 STX 점프 로직으로 빠른 재동기화 처리
  • MQTT(QoS=1)에 메모리 큐 + 디스크 영속 큐 적용하여 네트워크 불안정 환경에서도 데이터 유실 방지
  • MID(SHA256 기반 Message ID)로 서버측 멱등성 보장하여 중복 publish 자동 제거
  • MTU 협상·write 버퍼 큐잉·배치 spacing·backoff 제어로 안정적인 BLE 데이터 전송 흐름 구현
  • exponential backoff + jitter 기반 MQTT 자동 재연결 스케줄러 구현으로 연결 복원력 확보
  • ForegroundService(FGS) + Headless BLE Bridge 구조로 백그라운드 BLE 데이터 수집·전송 지속 처리
  • Android 14+ FGS onTimeout 콜백 처리로 timeout 크래시 방지 및 안정성 강화
  • WebView ↔ Native Bridge를 단일 @JavascriptInterface 클래스로 통합하여 양방향 통신 구조 구축
  • StepCounterManager + AlarmManager 자정 스냅샷 기반 걸음수 baseValue 롤오버 복구 처리
  • Firebase Crashlytics로 크래시율 모니터링 및 안정성 개선
04

IOS

  • 패킷 재조립 상태머신(AA 55 시작·AA 66 종료)과 CRC16-CCITT 검증으로 BLE notify 분할 수신 데이터 복원 및 무결성 확보
  • CoreBluetooth(CBCentralManager·CBPeripheralDelegate) 래핑으로 MTU 협상·CCCD 활성화·연결 상태 추상화 처리
  • OBD 펌웨어 업데이트 4단계 상태머신(MODE_UPDATEFWUP_RUNFWUP_WRITEFWUP_VERIFY)을 백그라운드 Thread 기반으로 구현
  • ACK 워치독(5s) · writeTimeoutTimer(3s) 적용으로 펌웨어 청크 전송 안정성 확보
  • SerialSocket NSLock 기반 write buffer 큐잉과 BLE 청크 분할 시 OBD 패킷 구조 보존으로 서버측 재조립 호환성 유지
  • WKUserContentController messageHandlers 기반 WebView ↔ Native Bridge 통합 인터페이스(20+ API)로 양방향 통신 구조 구축
  • ActivityKit 기반 Live Activity(iOS 16.1+) 및 Dynamic Island(compact·expanded·minimal) 구현으로 실시간 주행거리 표시
  • WattWidgetExtension TimelineProvider(5분 주기) 기반 잠금화면 위젯으로 오늘의 주행거리·미션 진입점 제공
  • Custom URL Scheme(wattsafeapp://) 기반 위젯·Live Activity 진입 라우팅을 SceneDelegate로 위임하여 진입 흐름 통합
  • HealthKit HKObserverQuery 기반 StepCounterManager로 걸음수 실시간 감지 및 웹뷰 콜백 전달
  • NotificationService Extension으로 FCM 푸시 페이로드 가공 및 serviceExtensionTimeWillExpire fallback 처리
  • AppTrackingTransparency(IDFA) 권한 요청 + AppsFlyer·FCM·AdMob·Buzzvil·Kakao·Naver·Apple SSO 통합
  • Firebase Crashlytics로 크래시율 모니터링 및 안정성 개선
05

CI/CD

  • Jenkins Rolling Update + deploy-flag readiness toggle + /api/ping healthcheck(60s drain·재시도)으로 무중단 배포 파이프라인 구축
  • Docker BuildKit · cache-from registry · Next.js standalone output · Turbo 캐시로 모노레포 빌드 시간 최적화
  • fastlane supply + Play Console 자동 업로드 스크립트화하고 Jenkins credentials(keystore·service account JSON) 동적 주입으로 서명 보안 확보
  • release.keystore 환경변수 기반 동적 서명 + ReleaseDev/Release 빌드 타입 분리로 dev·prod 산출물 동시 관리
  • Gradle(KSP 2.0.0) · AGP 8.10.0 · Kotlin 2.0.0 · Java 17/21 toolchain 자동 전환 기반 빌드 표준화
  • Sentry CLI auth token + widenClientFileUpload + deleteSourcemapsAfterUpload로 source map 업로드·삭제 자동화
  • Husky pre-commit + lint-staged + pnpm type-check 훅으로 ESLint·Prettier·TypeScript strict 코드 품질 게이트 구축
  • 환경별 (.env.development·.env.production) deploy.sh 스크립트로 mobile·admin·web 앱 환경 변수 자동 주입
06

기술 태그

#TypeScript#React#Next.js#Zustand#TanStack Query#React Hook Form#Tailwind CSS#ApexCharts#Lottie#Rive#Cypress#Sentry#Kotlin#Swift#WebView#WKWebView#CoreBluetooth#BLE#MQTT#Eclipse Paho#CocoaMQTT#Coroutines#OkHttp#URLSession#Crashlytics#FCM#APNs#Docker#Jenkins#fastlane#Gradle#KSP#Xcode#SPM#Turborepo#pnpm#ESLint#Prettier
← 이전 프로젝트WattEver · EV 배터리 인증서 발급 서비스 개발다음 프로젝트 →WattSafe Biz · 관제 모니터링 사이트 개발