프로젝트 목록
Firebase

Mocar

SwiftUI + Firebase 기반의 중고차 검색/필터링 경험을 고도화한 iOS 앱

나의 역할

FE

구성원

Backend 2명 Frontend 3명

작업기간

2025.07.10 - 2025.07.23 (2주)

Mocar

프로젝트 개요

Mocar iOS는 중고차 탐색부터 상세 필터링, 최근 검색 기록, 찜 연동까지 이어지는 검색 중심 iOS 앱입니다. 저는 머지 커밋을 제외한 실제 작업 커밋 기준으로 검색/필터 도메인을 주도적으로 설계·구현했고, Firebase 연동(브랜드/최근기록/찜), 디바운스, 슬라이더-텍스트 동기화, 공통 SearchBar 분리, 네비게이션/바텀바 정리까지 사용자 경험과 유지보수성을 동시에 개선했습니다.

주요 화면

11개의 이미지

담당 역할 / 업무

01

검색/필터 도메인 오너십 (상태 설계 + 화면 연결)

제조사/모델/가격/연식/주행거리/연료/지역/차종의 복합 필터 상태를 일관되게 설계하고, 검색 결과 페이지 필터 적용 및 차종 리스트 연결·수량 카운트까지 흐름을 완성했습니다.

02

Firebase 연동 및 데이터 신뢰성 강화

Firebase 연결과 검색 디바운스를 도입하고, car_brand 로고 연동, 최근 검색 기록/키워드 Firebase 연동, 찜 상태 업데이트까지 검색 경험에 필요한 핵심 데이터를 실사용 수준으로 연결했습니다.

03

UI/UX 안정화 및 공통 컴포넌트화

공통 SearchBar를 분리해 재사용 구조로 전환하고, 검색창 디자인 통일, SearchView 진입 시 바텀바 제거, 불필요한 NavigationStack 제거 등 화면 일관성과 내비게이션 안정성을 높였습니다. 특히 슬라이더 최대/최소 경계, 팝업 열림 시 텍스트 초기화, 슬라이더 이동 시 텍스트필드 즉시 갱신 등 입력 UX 디테일을 촘촘하게 다듬었습니다.

주요 성과

  • 복합 필터 상태 관리(8개 축) + 최근 필터 기록 저장/강조 표시까지 검색 UX의 뼈대를 구축
  • 검색 결과 페이지에 필터 상태를 실제로 반영하고, 차종 리스트 연결 및 수량 카운트까지 완결
  • Firebase 기반 최근 검색 기록/최근 검색 키워드/브랜드 로고/찜 상태 업데이트를 검색 흐름에 통합
  • 검색 디바운스 도입으로 불필요한 호출을 줄이고 입력 체감 성능을 개선
  • 공통 SearchBar 분리 및 검색창 디자인 통일로 재사용성과 UI 일관성을 동시에 확보
  • 슬라이더-텍스트 입력 동기화, 경계값 처리, 팝업 상태 초기화 등 상태 꼬임을 줄이는 UX 안정화 수행

트러블슈팅

실시간 검색 입력으로 인한 과도한 요청

이슈: 검색 입력 중 매 타이핑마다 요청이 발생하면 네트워크 비용과 렌더링 부담이 커지고 UX가 불안정해질 수 있었음.

해결: 검색 디바운스를 도입해 입력 안정화 이후에만 요청이 발생하도록 제어하고, 검색 흐름을 Firebase 연동 구조에 맞게 정리함.

💡 배운 점: 검색 경험에서는 '정확한 결과'만큼 '요청 타이밍 제어'가 성능과 비용, UX를 동시에 좌우한다는 점을 체득함.

슬라이더와 텍스트 입력 간 상태 불일치

이슈: 범위 슬라이더와 텍스트필드가 서로 다른 타이밍으로 갱신되며 값 불일치, 팝업 재진입 시 이전 값 잔존 같은 문제가 발생할 여지가 있었음.

해결: 슬라이더 이동 시 텍스트필드 즉시 갱신, 팝업 열림 시 텍스트 초기화, 최대/최소 경계 처리 및 보정 로직을 정리해 상태 동기화를 강화함.

💡 배운 점: 복합 입력 UI는 단일 진실 공급원(SSOT)과 상태 전이 타이밍 설계가 품질을 좌우한다는 걸 명확히 배움.

최근 검색 기록의 저장 조건과 안전한 타입 처리

이슈: 필터 미적용 상태에서도 최근 검색에 저장되거나, 옵셔널 언래핑 이슈로 런타임 위험이 있는 구간이 존재했음.

해결: 필터 미적용 시 저장 방지 조건을 명시하고, 최근검색기록 옵셔널 언래핑을 안전하게 수정해 기록 신뢰성과 안정성을 보완함.

💡 배운 점: 로그/기록성 데이터는 저장 조건 설계와 타입 안정성이 곧 사용자 신뢰로 이어진다는 점을 확인함.