차량 호환 부품 자사몰
카페24 부품몰 스킨 위에 차량번호·VIN 검색, 제조사→모델→연식→트림 드릴다운, 상품 호환정보 탭, 주문서 차량 입력란을 얹는 프로젝트입니다.
프로젝트 개요
카페24 부품몰 스킨 위에 차량번호·VIN 검색, 제조사→모델→연식→트림 드릴다운, 상품 호환정보 탭, 주문서 차량 입력란을 얹는 프로젝트입니다. 중계 서버가 차량 제원 조회와 호환 부품 매칭을 맡도록 설계하고.
작업 범위
- 차량 검색: 차량번호나 차대번호를 입력하면 제조사·모델·연식·트림이 카드로 나오고, 그 차량에 맞는 부품만 아래 목록에 남습니다. 호환 여부는 부품 카드마다 표시됩니다
- 차종별 찾기: 제조사, 모델, 연식, 트림을 차례로 고르면 호환 부품 목록이 단계마다 좁혀집니다. 고른 경로는 칩으로 남아 한 단계씩 되돌릴 수 있습니다
- 부품 상세: 상품 상세에 호환정보 탭을 두어 호환 차종 목록과 순정 품번(OEM)을 보여 줍니다. 내 차량으로 조회한 상태라면 호환 여부가 상단에 판정됩니다
- 주문서: 주문서에 차량번호 또는 차대번호 입력란이 있어 주문마다 차량 정보가 함께 남습니다. 조회해 둔 내 차량이 있으면 자동으로 채워집니다
주요 업무
- 차량 검색 화면: 중계 서버가 차량 제원 조회 API 어댑터로 제원을 받아 자체 차종 마스터 코드로 변환한 뒤 호환 상품을 반환합니다
- 차종별 찾기 화면: 차종 마스터 트리를 단계별로 조회하고 선택 경로를 주소 상태에 담아 결과 화면을 공유할 수 있게 합니다
- 부품 상세 화면: 상품코드에 연결된 호환 차종과 품번을 호환정보 탭 한 번의 요청으로 받아 표시합니다
- 주문서 화면: 주문서 추가 입력 항목 값을 주문 데이터에 저장하고 관리자 주문 화면에서 차량 정보를 함께 봅니다



프로젝트 핵심 과제
차량 제원 조회 API 벤더가 정해지지 않아 응답 형식이 달라질 수
어댑터 인터페이스와 공통 제원 모델로 대응합니다
카페24 임대형 환경은 서버 로직을 직접 둘 수 없어 외부 중계 서버 호출 구조와 스킨 스크립트 연결 방식을 설계해야 합니다
제원 코드와 자체 차종 마스터 코드의 대응이 일대일이 아닌 경우
변환 규칙과 미매칭 처리 흐름을 설계해야 합니다
수만 건 상품과 차종의 다대다 매핑을 단계별 선택에 맞게 조회하려면 인덱스와 사전 집계 구조 설계가 필요합니다
핵심 기능 상세
차량 검색
차량번호나 차대번호를 입력하면 제조사·모델·연식·트림이 카드로 나오고, 그 차량에 맞는 부품만 아래 목록에 남습니다. 호환 여부는 부품 카드마다 표시됩니다.
- 입력 형식 검증과 번호 정규화 후 중계 서버 단일 엔드포인트 호출
- 차량 제원 조회 API 어댑터 인터페이스로 벤더 교체 구조 설계
- 제원 응답을 차종 마스터 코드로 변환하는 파싱 계층 분리
벤더가 정해지지 않은 상태에서도 어댑터 인터페이스 뒤에 조회 로직을 두어 계약 후 교체만으로 연결되는 구조를 설계합니다.


차종별 찾기
제조사, 모델, 연식, 트림을 차례로 고르면 호환 부품 목록이 단계마다 좁혀집니다. 고른 경로는 칩으로 남아 한 단계씩 되돌릴 수 있습니다.
- 차종 마스터 트리를 단계별 지연 조회로 읽고 상위 선택 변경 시 하위 선택 초기화
- 선택 경로를 URL 쿼리와 동기화해 결과 목록 링크 공유 구조 설계
- 차종-부품 N:M 매핑을 조인 테이블과 복합 인덱스로 조회
차종-부품 다대다 매핑을 복합 인덱스와 사전 집계 테이블로 조회해 수만 건 상품에서도 단계별 목록이 갱신되는 구조를 설계합니다.


부품 상세
상품 상세에 호환정보 탭을 두어 호환 차종 목록과 순정 품번(OEM)을 보여 줍니다. 내 차량으로 조회한 상태라면 호환 여부가 상단에 판정됩니다.
- 상품 상세 요청에 호환 차종·품번을 묶어 반환하는 조회 API 설계
- 내 차량 코드와 호환 차종 목록을 대조하는 판정 함수 분리
- 호환 차종 목록을 제조사별로 접는 그룹 UI 구성
카페24 상품 상세 영역에 호환정보 탭을 끼워 넣고 중계 서버 응답으로 채우는 구조를 설계합니다.


주문서
주문서에 차량번호 또는 차대번호 입력란이 있어 주문마다 차량 정보가 함께 남습니다. 조회해 둔 내 차량이 있으면 자동으로 채워집니다.
- 카페24 주문서 추가 입력 항목과 중계 서버 차량 코드 연결
- 저장한 차량이 있으면 입력란을 채우는 기본값 로직
- 차량번호 형식 검사를 제출 시점에 수행하고 오류를 칸 아래에 표시
주문서의 차량 입력값을 주문 데이터에 남겨 출고 담당자가 차량 확인 후 부품을 보낼 수 있는 흐름을 설계합니다.


프로젝트 진행 단계
차종 마스터·호환 매핑 데이터 모델 설계 · 2026.11
제조사·모델·연식·트림 트리와 상품-차종 N:M 매핑 ERD, 조회용 인덱스 설계
차량 조회 어댑터·매칭 API 개발 · 2026.11
제원 조회 어댑터 인터페이스, 제원-차종 코드 변환, 호환 부품 조회 API 구현
카페24 스킨 검색 위젯·상세 개발 · 2026.11
검색 위젯, 드릴다운, 호환정보 탭, 주문서 입력란을 반응형 스킨으로 구현
통합 테스트·배포 구성 · 2026.11
스킨과 중계 서버 연동 시나리오 테스트, 도메인 연결과 배포 구성 정리
개발 결과
기술적 주안점
- 벤더가 정해지지 않은 상태에서도 어댑터 인터페이스 뒤에 조회 로직을 두어 계약 후 교체만으로 연결되는 구조를 설계합니다
- 차종-부품 다대다 매핑을 복합 인덱스와 사전 집계 테이블로 조회해 수만 건 상품에서도 단계별 목록이 갱신되는 구조를 설계합니다
- 카페24 상품 상세 영역에 호환정보 탭을 끼워 넣고 중계 서버 응답으로 채우는 구조를 설계합니다