프로젝트 배경
1) 문제점
정보 분산:전기차 관련 정보(충전소, 보조금, 차량 후기 등)가 여러 플랫폼에 흩어져 있어 사용자가 원하는 정보를 찾기 어려움
커뮤니티 부재:기존 자동차 커뮤니티는 내연기관 중심으로 운영되어, 전기차 오너들이 브랜드별 특성에 맞는 심층적인 정보를 교류할 공간이 부족
플랫폼 접근성 한계:대부분의 자동차 커뮤니티가 웹 기반으로만 운영되어, 이동 중 빠르게 정보를 확인하거나 공유하기 불편
신뢰도 문제: 익명 기반 커뮤니티에서 검증되지 않은 정보가 공유되어, 실제 차량 오너의 경험을 신뢰하기 어려움
2) 프로젝트 목표
전기차 전용 커뮤니티 구축:Tesla, Hyundai, Kia 등 브랜드별 라운지를 통해 같은 차량을 소유한 오너들이 심층적인 정보를 교류할 수 있는 전용 공간 제공
멀티 플랫폼 서비스: Web, Android, iOS를 단일 코드베이스로 지원하여 언제 어디서나 접근 가능한 서비스 구현
간편한 소셜 로그인: Kakao, Naver, Apple 3사 OAuth 연동으로 가입 허들을 낮추고, 인증된 사용자 기반의 신뢰할 수 있는 커뮤니티 형성
실시간 정보 공유 뉴스 피드 통합, 실시간 알림 시스템을 통해 전기차 관련 최신 정보를 빠르게 전달
사용자 참여 활성화:댓글, 감정 표현, 북마크 등 인터랙션 기능을 통해 사용자 간 활발한 소통 유도
3) 주안점
보안 및 인증:JWT 기반 토큰 인증과 HttpOnly 쿠키를 통한 XSS 방지, 토큰 자동 갱신으로 보안성과 사용자 편의성 동시 확보
일관된 사용자 경험:Ionic + Capacitor를 활용하여 Web/Android/iOS에서 동일한 UI/UX 제공, 플랫폼별 네이티브 기능(푸시 알림, 딥링크 등) 지원
확장 가능한 설계:TypeORM 기반 Repository 패턴으로 데이터 접근 추상화, 브랜드별 라운지 추가가 용이한 구조 설계
성능 최적화:React.lazy 코드 스플리팅, LRU Cache 활용, Skeleton UI로 체감 로딩 속도 개선
SEO 및 공유 최적화:React Helmet을 통한 동적 메타 태그 관리, OG 태그 파싱으로 SNS 공유 시 미리보기 지원
콘텐츠 품질 관리: 신고 시스템과 관리자 기능을 통한 부적절한 콘텐츠 필터링 및 커뮤니티 건전성 유지
정보 분산:전기차 관련 정보(충전소, 보조금, 차량 후기 등)가 여러 플랫폼에 흩어져 있어 사용자가 원하는 정보를 찾기 어려움
커뮤니티 부재:기존 자동차 커뮤니티는 내연기관 중심으로 운영되어, 전기차 오너들이 브랜드별 특성에 맞는 심층적인 정보를 교류할 공간이 부족
플랫폼 접근성 한계:대부분의 자동차 커뮤니티가 웹 기반으로만 운영되어, 이동 중 빠르게 정보를 확인하거나 공유하기 불편
신뢰도 문제: 익명 기반 커뮤니티에서 검증되지 않은 정보가 공유되어, 실제 차량 오너의 경험을 신뢰하기 어려움
2) 프로젝트 목표
전기차 전용 커뮤니티 구축:Tesla, Hyundai, Kia 등 브랜드별 라운지를 통해 같은 차량을 소유한 오너들이 심층적인 정보를 교류할 수 있는 전용 공간 제공
멀티 플랫폼 서비스: Web, Android, iOS를 단일 코드베이스로 지원하여 언제 어디서나 접근 가능한 서비스 구현
간편한 소셜 로그인: Kakao, Naver, Apple 3사 OAuth 연동으로 가입 허들을 낮추고, 인증된 사용자 기반의 신뢰할 수 있는 커뮤니티 형성
실시간 정보 공유 뉴스 피드 통합, 실시간 알림 시스템을 통해 전기차 관련 최신 정보를 빠르게 전달
사용자 참여 활성화:댓글, 감정 표현, 북마크 등 인터랙션 기능을 통해 사용자 간 활발한 소통 유도
3) 주안점
보안 및 인증:JWT 기반 토큰 인증과 HttpOnly 쿠키를 통한 XSS 방지, 토큰 자동 갱신으로 보안성과 사용자 편의성 동시 확보
일관된 사용자 경험:Ionic + Capacitor를 활용하여 Web/Android/iOS에서 동일한 UI/UX 제공, 플랫폼별 네이티브 기능(푸시 알림, 딥링크 등) 지원
확장 가능한 설계:TypeORM 기반 Repository 패턴으로 데이터 접근 추상화, 브랜드별 라운지 추가가 용이한 구조 설계
성능 최적화:React.lazy 코드 스플리팅, LRU Cache 활용, Skeleton UI로 체감 로딩 속도 개선
SEO 및 공유 최적화:React Helmet을 통한 동적 메타 태그 관리, OG 태그 파싱으로 SNS 공유 시 미리보기 지원
콘텐츠 품질 관리: 신고 시스템과 관리자 기능을 통한 부적절한 콘텐츠 필터링 및 커뮤니티 건전성 유지
프로젝트 성과
웹앱 서비스를 기반으로 네이티브(Android, iOS) 서비스 동시 운영
단일 코드베이스로 3개 플랫폼(Web, Android, iOS) 동시 개발 및 유지보수
약 95% 이상의 코드를 플랫폼 간 공유
Netlify CI/CD를 통한 웹 자동 배포
약 95% 이상의 코드를 플랫폼 간 공유
Netlify CI/CD를 통한 웹 자동 배포
핵심 기능

소셜 로그인 통합 인증 시스템
카카오, 네이버, 애플 로그인 제공

브랜드별 라운지 제공
내가 구입하거나 관심한 전기차 모델별로 집중적으로 커뮤니티 가능

게시글 작성 및 댓글
자유롭게 글을 작성하고, 공감 가능
프로젝트 상세
모빌리티(전기차) 커뮤니티 O2O 플랫폼으로, 전기차 관련 정보를 공유하고 소통하고자 하는 모든 사용자를 타겟으로 합니다. 전기차 오너 및 관심자들이 브랜드별 라운지에서 차량 정보, 충전소 정보, 운행 경험 등을 실시간으로 공유할 수 있는 커뮤니티 서비스입니다.
보안 강화 JWT 기반 토큰 인증, HttpOnly 쿠키를 통한 XSS 방지, 토큰 자동 갱신 메커니즘 구현
멀티 플랫폼 지원 Ionic + Capacitor를 활용한 단일 코드베이스로 Web/Android/iOS 동시 지원
사용자 경험 최적화 React.lazy를 활용한 코드 스플리팅, Skeleton UI로 로딩 상태 개선
확장 가능한 아키텍처 TypeORM을 활용한 엔티티 기반 데이터 모델링, Repository 패턴으로 데이터 접근 추상화
캐싱 전략 LRU Cache를 활용한 임시 토큰 저장으로 OAuth 플로우 최적화
SEO 최적화 React Helmet을 통한 동적 메타 태그 관리, OG 태그 지원으로 SNS 공유 최적화
플랫폼 지원:
✅ Android 앱 (Google Play Store) - 현재는 운영 중단
✅ iOS 앱 (App Store) - 현재는 운영 중단
✅ 반응형 웹 (www.picar.kr)
보안 강화 JWT 기반 토큰 인증, HttpOnly 쿠키를 통한 XSS 방지, 토큰 자동 갱신 메커니즘 구현
멀티 플랫폼 지원 Ionic + Capacitor를 활용한 단일 코드베이스로 Web/Android/iOS 동시 지원
사용자 경험 최적화 React.lazy를 활용한 코드 스플리팅, Skeleton UI로 로딩 상태 개선
확장 가능한 아키텍처 TypeORM을 활용한 엔티티 기반 데이터 모델링, Repository 패턴으로 데이터 접근 추상화
캐싱 전략 LRU Cache를 활용한 임시 토큰 저장으로 OAuth 플로우 최적화
SEO 최적화 React Helmet을 통한 동적 메타 태그 관리, OG 태그 지원으로 SNS 공유 최적화
플랫폼 지원:
✅ Android 앱 (Google Play Store) - 현재는 운영 중단
✅ iOS 앱 (App Store) - 현재는 운영 중단
✅ 반응형 웹 (www.picar.kr)




