← 포트폴리오 목록

차량 호환 부품 자사몰

카페24 부품몰 스킨 위에 차량번호·VIN 검색, 제조사→모델→연식→트림 드릴다운, 상품 호환정보 탭, 주문서 차량 입력란을 얹는 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종이커머스
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPrismaPostgreSQL카페24 Open APIAWS
주요 기능
  • 차량 검색
  • 차종별 찾기
  • 부품 상세
  • 주문서

프로젝트 개요

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

카페24 부품몰 스킨 위에 차량번호·VIN 검색, 제조사→모델→연식→트림 드릴다운, 상품 호환정보 탭, 주문서 차량 입력란을 얹는 프로젝트입니다. 중계 서버가 차량 제원 조회와 호환 부품 매칭을 맡도록 설계하고.

작업 범위

  • 차량 검색: 차량번호나 차대번호를 입력하면 제조사·모델·연식·트림이 카드로 나오고, 그 차량에 맞는 부품만 아래 목록에 남습니다. 호환 여부는 부품 카드마다 표시됩니다
  • 차종별 찾기: 제조사, 모델, 연식, 트림을 차례로 고르면 호환 부품 목록이 단계마다 좁혀집니다. 고른 경로는 칩으로 남아 한 단계씩 되돌릴 수 있습니다
  • 부품 상세: 상품 상세에 호환정보 탭을 두어 호환 차종 목록과 순정 품번(OEM)을 보여 줍니다. 내 차량으로 조회한 상태라면 호환 여부가 상단에 판정됩니다
  • 주문서: 주문서에 차량번호 또는 차대번호 입력란이 있어 주문마다 차량 정보가 함께 남습니다. 조회해 둔 내 차량이 있으면 자동으로 채워집니다

주요 업무

  • 차량 검색 화면: 중계 서버가 차량 제원 조회 API 어댑터로 제원을 받아 자체 차종 마스터 코드로 변환한 뒤 호환 상품을 반환합니다
  • 차종별 찾기 화면: 차종 마스터 트리를 단계별로 조회하고 선택 경로를 주소 상태에 담아 결과 화면을 공유할 수 있게 합니다
  • 부품 상세 화면: 상품코드에 연결된 호환 차종과 품번을 호환정보 탭 한 번의 요청으로 받아 표시합니다
  • 주문서 화면: 주문서 추가 입력 항목 값을 주문 데이터에 저장하고 관리자 주문 화면에서 차량 정보를 함께 봅니다
차량 호환 부품 자사몰
요구사항 정의

프로젝트 핵심 과제

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

차량 제원 조회 API 벤더가 정해지지 않아 응답 형식이 달라질 수

어댑터 인터페이스와 공통 제원 모델로 대응합니다

카페24 임대형 환경은 서버 로직을 직접 둘 수 없어 외부 중계 서버 호출 구조와 스킨 스크립트 연결 방식을 설계해야 합니다

제원 코드와 자체 차종 마스터 코드의 대응이 일대일이 아닌 경우

변환 규칙과 미매칭 처리 흐름을 설계해야 합니다

수만 건 상품과 차종의 다대다 매핑을 단계별 선택에 맞게 조회하려면 인덱스와 사전 집계 구조 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

차량 검색

차량번호나 차대번호를 입력하면 제조사·모델·연식·트림이 카드로 나오고, 그 차량에 맞는 부품만 아래 목록에 남습니다. 호환 여부는 부품 카드마다 표시됩니다.

  • 입력 형식 검증과 번호 정규화 후 중계 서버 단일 엔드포인트 호출
  • 차량 제원 조회 API 어댑터 인터페이스로 벤더 교체 구조 설계
  • 제원 응답을 차종 마스터 코드로 변환하는 파싱 계층 분리

벤더가 정해지지 않은 상태에서도 어댑터 인터페이스 뒤에 조회 로직을 두어 계약 후 교체만으로 연결되는 구조를 설계합니다.

차량 검색
차량 검색 실제 화면
핵심 기능 2

차종별 찾기

제조사, 모델, 연식, 트림을 차례로 고르면 호환 부품 목록이 단계마다 좁혀집니다. 고른 경로는 칩으로 남아 한 단계씩 되돌릴 수 있습니다.

  • 차종 마스터 트리를 단계별 지연 조회로 읽고 상위 선택 변경 시 하위 선택 초기화
  • 선택 경로를 URL 쿼리와 동기화해 결과 목록 링크 공유 구조 설계
  • 차종-부품 N:M 매핑을 조인 테이블과 복합 인덱스로 조회

차종-부품 다대다 매핑을 복합 인덱스와 사전 집계 테이블로 조회해 수만 건 상품에서도 단계별 목록이 갱신되는 구조를 설계합니다.

차종별 찾기
차종별 찾기 실제 화면
핵심 기능 3

부품 상세

상품 상세에 호환정보 탭을 두어 호환 차종 목록과 순정 품번(OEM)을 보여 줍니다. 내 차량으로 조회한 상태라면 호환 여부가 상단에 판정됩니다.

  • 상품 상세 요청에 호환 차종·품번을 묶어 반환하는 조회 API 설계
  • 내 차량 코드와 호환 차종 목록을 대조하는 판정 함수 분리
  • 호환 차종 목록을 제조사별로 접는 그룹 UI 구성

카페24 상품 상세 영역에 호환정보 탭을 끼워 넣고 중계 서버 응답으로 채우는 구조를 설계합니다.

부품 상세
부품 상세 실제 화면
핵심 기능 4

주문서

주문서에 차량번호 또는 차대번호 입력란이 있어 주문마다 차량 정보가 함께 남습니다. 조회해 둔 내 차량이 있으면 자동으로 채워집니다.

  • 카페24 주문서 추가 입력 항목과 중계 서버 차량 코드 연결
  • 저장한 차량이 있으면 입력란을 채우는 기본값 로직
  • 차량번호 형식 검사를 제출 시점에 수행하고 오류를 칸 아래에 표시

주문서의 차량 입력값을 주문 데이터에 남겨 출고 담당자가 차량 확인 후 부품을 보낼 수 있는 흐름을 설계합니다.

주문서
주문서 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

차종 마스터·호환 매핑 데이터 모델 설계 · 2026.11

제조사·모델·연식·트림 트리와 상품-차종 N:M 매핑 ERD, 조회용 인덱스 설계

STEP 2

차량 조회 어댑터·매칭 API 개발 · 2026.11

제원 조회 어댑터 인터페이스, 제원-차종 코드 변환, 호환 부품 조회 API 구현

STEP 3

카페24 스킨 검색 위젯·상세 개발 · 2026.11

검색 위젯, 드릴다운, 호환정보 탭, 주문서 입력란을 반응형 스킨으로 구현

STEP 4

통합 테스트·배포 구성 · 2026.11

스킨과 중계 서버 연동 시나리오 테스트, 도메인 연결과 배포 구성 정리

개발 결과

차량 제원 조회 어댑터 구조 설계벤더별 응답을 공통 제원 모델로 바꾸는 어댑터 인터페이스를 설계해 계약 후 벤더 교체와 병행 연동이 가능하게 구성합니다.
차종-부품 N:M 호환 조회 구현조인 테이블과 복합 인덱스로 차종 코드에서 호환 상품 목록을 한 번의 쿼리로 반환하는 조회 API를 구현합니다.
단계별 드릴다운 검색기 구현제조사부터 트림까지 4단계 선택을 URL 상태와 동기화하고 상위 변경 시 하위 선택을 초기화하는 검색기를 구현합니다.
상품 호환정보 탭 구현호환 차종과 순정 품번을 상품 상세 한 번의 요청으로 받아 제조사별로 묶어 보여 주는 탭 컴포넌트를 구현합니다.

기술적 주안점

  • 벤더가 정해지지 않은 상태에서도 어댑터 인터페이스 뒤에 조회 로직을 두어 계약 후 교체만으로 연결되는 구조를 설계합니다
  • 차종-부품 다대다 매핑을 복합 인덱스와 사전 집계 테이블로 조회해 수만 건 상품에서도 단계별 목록이 갱신되는 구조를 설계합니다
  • 카페24 상품 상세 영역에 호환정보 탭을 끼워 넣고 중계 서버 응답으로 채우는 구조를 설계합니다

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

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

프로젝트 문의