← 포트폴리오 목록

블랙박스 라이프스타일 확장 플랫폼

설계·구현 참고 자료 — 고객 납품 실적으로 구분된 항목이 아닙니다.

커뮤니티 제보 지도, 연간 이동 결산, 차량 정비·주유 관리, 통합 알림 센터를 더한 확장형 모바일 앱을 Flutter 기반으로 설계·구현하여 MVP 이후 생활밀착형 서비스로 확장합니다.

서비스 타입Web
업종플랫폼
기술 스택
FlutterDartRiverpodfreezedimage_pickerFCMGeolocatorREST API
주요 기능
  • 커뮤니티 제보·도움요청 지도
  • 연간 이동 결산 지도
  • 차량 정비·주유 관리
  • 통합 알림·리마인더 센터

프로젝트 개요

범위: 개발, 디자인, 기획

커뮤니티 제보 지도, 연간 이동 결산, 차량 정비·주유 관리, 통합 알림 센터를 더한 확장형 모바일 앱을 Flutter 기반으로 설계·구현하여 MVP 이후 생활밀착형 서비스로 확장합니다.

작업 범위

  • 커뮤니티 제보·도움요청 지도: 목격제보와 도움요청을 지도와 목록으로 함께 확인하고, 반경 500m 이내 새 제보를 알림으로 받습니다
  • 연간 이동 결산 지도: 연말·추석·설날 등 기간별 탭에서 17개 시도 도식 지도 위에 방문 지역을 강조 표시하고 대표 경로를 확인합니다
  • 차량 정비·주유 관리: 차량 정보와 정비 알림·소모품 교체 주기를 관리하고, 영수증을 촬영하면 OCR 인식 결과를 확인·수정할 수 있습니다
  • 통합 알림·리마인더 센터: 정비 알림, 리콜 안내, 주유 알림을 하나의 알림 센터로 통합해 우선순위와 채널별로 관리할 수 있도록 확장을 제안합니다

주요 업무

  • 커뮤니티 제보·도움요청 지도 화면: 지도 마커와 리스트 뷰를 동기화하고, FCM으로 반경 기반 실시간 알림을 전송하며 신고·차단 처리를 연결합니다
  • 연간 이동 결산 지도 화면: SVG 기반 커스텀 도식 지도에 방문 지역 데이터를 매핑하고, 기간별 탭 전환 시 방문 지역 강조 표시를 갱신합니다
  • 차량 정비·주유 관리 화면: image_picker로 촬영한 영수증 이미지를 OCR 인식 결과 확인·수정 UI에 연결하고, 주유내역은 촬영/직접입력/위치인식 3가지 입력 경로를 지원합니다
  • 통합 알림·리마인더 센터 화면: 기존 3종 알림 소스를 단일 알림 큐로 통합하고, 우선순위·읽음 상태·채널(푸시/인앱)별 필터를 적용하는 구조를 설계합니다
블랙박스 라이프스타일 확장 플랫폼
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

커뮤니티 제보 콘텐츠는 신고·차단 정책이 필요해

상태 기반 처리 흐름과 재노출 방지 규칙을 설계해 대응합니다

17개 시도 도식 지도는 실제 좌표와 시각 표현 사이 오차가 발생할 수 있어

SVG 좌표계를 별도로 보정하는 매핑 테이블로 대응합니다

영수증 OCR 인식은 정확도 편차가 있어

인식 결과를 사용자가 직접 수정할 수 있는 확인 단계를 두어 대응합니다

정비·리콜·주유 등 알림 소스가 늘어나면 우선순위 충돌이 생길 수 있어

채널·중요도 기준의 통합 정렬 규칙을 설계해 대응합니다

구현 내용

핵심 기능 상세

핵심 기능 1

커뮤니티 제보·도움요청 지도

목격제보와 도움요청을 지도와 목록으로 함께 확인하고, 반경 500m 이내 새 제보를 알림으로 받습니다. 지도 마커와 리스트 뷰를 동기화하고, FCM으로 반경 기반 실시간 알림을 전송하며 신고·차단 처리를 연결합니다.

  • 지도 마커 클릭과 리스트 선택 상태를 양방향 동기화하는 위젯 구조 구현
  • FCM 토픽 구독으로 반경 500m 이내 신규 제보를 실시간 푸시 알림 전송
  • 신고·차단 처리 결과를 제보 상세 상태에 즉시 반영하는 로직 구현

지도 기반 제보 목록과 실시간 알림을 하나의 위치 동기화 구조로 연결해 목격제보부터 신고 처리까지 이어지는 흐름을 구현합니다.

커뮤니티 제보·도움요청 지도
커뮤니티 제보·도움요청 지도 실제 화면
핵심 기능 2

연간 이동 결산 지도

연말·추석·설날 등 기간별 탭에서 17개 시도 도식 지도 위에 방문 지역을 강조 표시하고 대표 경로를 확인합니다.

  • 17개 시도 SVG 도식 지도에 방문 지역 데이터를 색상 강조로 매핑
  • 연말·추석·설날 기간별 탭 전환 시 방문 지역 데이터를 재계산해 지도 갱신
  • 대표 경로를 지도 위 선으로 오버레이해 이동 결산 화면에 표시

기간별 이동 데이터를 도식 지도 위에 시각화하는 커스텀 렌더링 구조를 구현해 방문 지역과 대표 경로를 한눈에 보여줍니다.

연간 이동 결산 지도
연간 이동 결산 지도 실제 화면
핵심 기능 3

차량 정비·주유 관리

차량 정보와 정비 알림·소모품 교체 주기를 관리하고, 영수증을 촬영하면 OCR 인식 결과를 확인·수정할 수 있습니다.

  • image_picker로 촬영한 정비·주유 영수증을 OCR 인식 결과 확인·수정 화면에 연결
  • 소모품별 교체 주기를 주행거리·경과일 기준으로 계산하는 알림 로직 구현
  • 주유내역 입력을 촬영/직접입력/위치인식 3가지 경로로 분기하는 폼 구조 설계

영수증 촬영부터 OCR 결과 수정, 정비·주유 이력 관리까지 이어지는 차량 관리 흐름을 하나의 화면 그룹으로 구현합니다.

차량 정비·주유 관리
차량 정비·주유 관리 실제 화면
핵심 기능 4

통합 알림·리마인더 센터

정비 알림, 리콜 안내, 주유 알림을 하나의 알림 센터로 통합해 우선순위와 채널별로 관리할 수 있도록 확장을 제안합니다.

  • 정비·리콜·주유 알림을 단일 알림 큐 모델로 통합하는 구조를 설계
  • 우선순위·읽음 상태 기준으로 정렬·필터링하는 목록 위젯을 구현
  • 채널(푸시/인앱)별 수신 설정을 사용자가 개별 제어할 수 있는 설정 화면을 구현

분산된 3종 알림을 하나의 통합 센터로 모으는 구조를 설계해 MVP 이후 알림 확장의 기반을 마련합니다.

통합 알림·리마인더 센터
통합 알림·리마인더 센터 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

제보·알림 도메인 모델 확장 설계 · 2026.09

freezed 기반 제보·알림 데이터 모델을 확장하고, Riverpod 프로바이더 구조를 P1 리포트 도메인과 분리 설계

STEP 2

지도 기반 제보·이동결산 화면 구현 · 2026.09

지도 마커·리스트 동기화 위젯, 17개 시도 SVG 도식 지도 렌더링 구현

STEP 3

차량 관리·OCR 연동 화면 개발 · 2026.09

image_picker 촬영 흐름, OCR 결과 확인·수정 UI, 소모품 교체 주기 알림 로직 구현

STEP 4

통합 알림 센터 및 FCM 연동 구현 · 2026.09

3종 알림 소스를 통합 큐로 병합, FCM 채널별 수신 설정 화면 구현 및 통합 테스트

개발 결과

지도-리스트 양방향 동기화 구조 설계지도 마커 선택과 리스트 항목 상태를 하나의 프로바이더로 동기화하고, FCM 반경 알림과 연동하는 구조를 설계합니다.
17개 시도 SVG 도식 지도 렌더링 구현방문 지역·대표 경로 데이터를 SVG 좌표에 매핑하는 커스텀 렌더링 로직을 구현하고, 기간별 탭 전환에 맞춰 갱신합니다.
영수증 OCR 결과 확인·수정 UI 구현image_picker 촬영 결과를 OCR 인식 필드에 매핑하고, 항목별 수정이 가능한 폼 검증 구조를 구현합니다.
통합 알림 큐 아키텍처 설계정비·리콜·주유 알림을 단일 큐 모델로 통합하고, 우선순위·채널별 필터링이 가능한 구조를 설계합니다.

기술적 주안점

  • 지도 기반 제보 목록과 실시간 알림을 하나의 위치 동기화 구조로 연결해 목격제보부터 신고 처리까지 이어지는 흐름을 구현합니다
  • 기간별 이동 데이터를 도식 지도 위에 시각화하는 커스텀 렌더링 구조를 구현해 방문 지역과 대표 경로를 한눈에 보여줍니다
  • 영수증 촬영부터 OCR 결과 수정, 정비·주유 이력 관리까지 이어지는 차량 관리 흐름을 하나의 화면 그룹으로 구현합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의