프로젝트 배경
1) 문제점
차량을 보유하고 있음에도 오일 교체 시기, 종류, 제품 선택 등에 어려움을 겪는 사용자 많음
기존 차량 정비 서비스는 예약이 번거롭고, 제품/브랜드 정보를 사용자에게 충분히 제공하지 못함
온라인에서 오일을 구매하더라도 오프라인 교환소 연동이 어려워 정비로 연결되지 않음
2) 프로젝트 목표
차량 등록을 통해 AI 기반 오일 추천 시스템을 제공
사용자가 선택한 오일 제품을 바로 구매하고 정비소를 예약할 수 있는 흐름 구축
차량 정보 기반으로 최적 오일 규격 자동 매칭 + 제품 필터링 구조 구현
3) 주안점
UX 최적화: 차량정보 입력 → 추천 → 구매 → 예약까지 자연스럽게 연결
제품 필터/매핑 구조 정리: 다양한 점도/API 규격/브랜드 속성별로 정렬 가능하도록 구현
실제 예약 매장 선택: 위치 기반 업체 조회 및 시간 예약 기능 설계
차량을 보유하고 있음에도 오일 교체 시기, 종류, 제품 선택 등에 어려움을 겪는 사용자 많음
기존 차량 정비 서비스는 예약이 번거롭고, 제품/브랜드 정보를 사용자에게 충분히 제공하지 못함
온라인에서 오일을 구매하더라도 오프라인 교환소 연동이 어려워 정비로 연결되지 않음
2) 프로젝트 목표
차량 등록을 통해 AI 기반 오일 추천 시스템을 제공
사용자가 선택한 오일 제품을 바로 구매하고 정비소를 예약할 수 있는 흐름 구축
차량 정보 기반으로 최적 오일 규격 자동 매칭 + 제품 필터링 구조 구현
3) 주안점
UX 최적화: 차량정보 입력 → 추천 → 구매 → 예약까지 자연스럽게 연결
제품 필터/매핑 구조 정리: 다양한 점도/API 규격/브랜드 속성별로 정렬 가능하도록 구현
실제 예약 매장 선택: 위치 기반 업체 조회 및 시간 예약 기능 설계
프로젝트 성과
오일 추천 결과 → 구매 → 예약까지 전환 흐름 구축
1차 사용자 테스트에서 오일 추천 결과를 보고 실제 상품 선택 후 예약까지 완료한 비율이 약 68%로 나타남.
UX 흐름의 자연스러운 연결성과 정보 전달력이 입증됨.
UX 흐름의 자연스러운 연결성과 정보 전달력이 입증됨.
제품 필터링 구조 설계 및 UI 반영
약 20종 이상의 오일 규격(점도/API 등급 등)을 유저가 손쉽게 선택하고,
해당 조건에 맞는 제품만 노출되도록 동적 필터링 UI를 구현함.
해당 조건에 맞는 제품만 노출되도록 동적 필터링 UI를 구현함.
핵심 기능


차량 기반 오일 추천 시스템
차량 모델, 연식, 연료 타입에 따라 적합한 엔진오일 규격(API/점도 등)을 자동으로 매칭하여 사용자에게 추천


오일 제품 필터링 및 비교
점도, 성능, 가격 기준으로 오일 제품을 필터링하고 선택한 항목을 기준으로 가격 및 설명을 한눈에 비교 가능
진행 단계
기획 및 사용자 흐름 정의
2022.03.
차량 등록 → 오일 추천 → 제품 선택 → 예약까지의 전반적 흐름을 정의하고, 핵심 사용 시나리오를 정리함.
기존 오프라인 오일 구매/교환의 불편함을 줄이기 위한 UX 목표 수립.
기존 오프라인 오일 구매/교환의 불편함을 줄이기 위한 UX 목표 수립.
UI/UX 설계 및 디자인 가이드 제작
2022.05.
Figma를 기반으로 전체 UI 컴포넌트 및 화면 구성 설계.
반응형 구조와 향후 확장 가능한 구조를 고려하여 차량 카드, 오일 필터, 예약 시스템 등 시각화.
반응형 구조와 향후 확장 가능한 구조를 고려하여 차량 카드, 오일 필터, 예약 시스템 등 시각화.
프론트엔드 개발
2023.09.
React와 styled-components를 활용해 페이지 및 컴포넌트 단위 개발.
오일 규격별 필터 처리, 장바구니, 예약 기능 구현 중심으로 진행.
오일 규격별 필터 처리, 장바구니, 예약 기능 구현 중심으로 진행.
테스트 및 피드백 반영
2023.12.
내부 피드백을 기반으로 UI 조정 및 사용자 흐름 개선.
점도 선택 시 추천 상품 자동 하이라이트, 예약 가능 시간대 비주얼 처리 등 UX 최적화 적용 후 12월 완료.
점도 선택 시 추천 상품 자동 하이라이트, 예약 가능 시간대 비주얼 처리 등 UX 최적화 적용 후 12월 완료.
프로젝트 상세
해당 프로젝트는 차량 정보를 기반으로 사용자에게 적합한 엔진오일을 추천하고,
해당 오일을 구매 및 정비 예약까지 연결할 수 있는 모바일 차량 관리 플랫폼 구축을 목표로 진행되었습니다.
초기 기획 단계에서부터 차량 등록, AI 오일 추천, 제품 리스트 및 장바구니, 예약 시스템까지
전체 사용자 흐름을 React 기반 SPA 구조로 설계하였으며,
실제 차량 연식/모델에 따른 규격 매핑 로직 및 위치 기반 교환소 예약 흐름까지 UI로 구현하였습니다.
주요 기술적 이슈는 차량 정보에 따른 복잡한 오일 규격 분기 처리와
오일 제품의 다중 속성 필터(점도, API 등급, 브랜드) 대응 구조였으며,
이를 컴포넌트 기반으로 분리하여 재사용성과 유지보수성을 높였습니다.
디자인은 Figma에서 전달된 시안을 바탕으로 구현되었고,
사용자 경험을 고려하여 오일 추천 결과 → 제품 → 결제 → 예약까지 매끄럽게 이어지도록 설계하였습니다.
※ 실제 출시 전 단계이며, 고객사 시연용 MVP 수준 UI로 구축하였습니다.
해당 오일을 구매 및 정비 예약까지 연결할 수 있는 모바일 차량 관리 플랫폼 구축을 목표로 진행되었습니다.
초기 기획 단계에서부터 차량 등록, AI 오일 추천, 제품 리스트 및 장바구니, 예약 시스템까지
전체 사용자 흐름을 React 기반 SPA 구조로 설계하였으며,
실제 차량 연식/모델에 따른 규격 매핑 로직 및 위치 기반 교환소 예약 흐름까지 UI로 구현하였습니다.
주요 기술적 이슈는 차량 정보에 따른 복잡한 오일 규격 분기 처리와
오일 제품의 다중 속성 필터(점도, API 등급, 브랜드) 대응 구조였으며,
이를 컴포넌트 기반으로 분리하여 재사용성과 유지보수성을 높였습니다.
디자인은 Figma에서 전달된 시안을 바탕으로 구현되었고,
사용자 경험을 고려하여 오일 추천 결과 → 제품 → 결제 → 예약까지 매끄럽게 이어지도록 설계하였습니다.
※ 실제 출시 전 단계이며, 고객사 시연용 MVP 수준 UI로 구축하였습니다.
