카픽(carpick) — 그누보드5 기반 중고차 매물 플랫폼 (실제 브랜드·상세 필터·딜러 30곳(인증 19곳)·찜/최근 본 차·상담 문의)
실제 브랜드·모델 카탈로그와 상세 필터, 인증 딜러관, 찜·최근 본 차, 상담 문의 흐름을 갖춘 그누보드5 기반 중고차 매물 플랫폼
PHP
MySQL
JavaScript
그누보드5
소개
카픽(carpick)은 그누보드5 커스텀 테마로 만든 중고차 매물 플랫폼입니다. 실제 국산·수입 브랜드와 모델 카탈로그를 기준으로 매물을 등록하고, 제조사·모델·가격·연식·주행거리·연료로 좁혀 찾습니다. 매물마다 성능점검·무사고 여부와 판매 딜러를 함께 보여 주고, 마음에 드는 차는 찜해 두었다가 전화나 상담 신청으로 문의합니다.
주요 기능
- 실제 브랜드·모델 카탈로그 — 현대·기아·제네시스·KG모빌리티·르노코리아·쉐보레·BMW·벤츠·아우디·폭스바겐·볼보·렉서스·테슬라·미니·포르쉐 등 15개 브랜드·72개 모델 카탈로그를 로고와 함께 정리했습니다. 메인에서 브랜드 로고를 눌러 바로 검색합니다.
- 매물 300대 — 연식·주행거리·연료·지역·가격·월 할부 예상액을 카드에 보여 주고, 프리미엄·무사고·성능점검 배지를 붙입니다. 추천·최신 등록·가격·짧은 주행·최근 연식 순으로 정렬합니다.
- 상세 필터 — 제조사→모델 연동 선택, 가격 범위, 연식, 주행거리, 연료, 검색어로 거릅니다. 모바일에서는 전체 화면 필터 시트로 열리며, 상단 닫기(X)와 하단 고정 'N대 보기' 버튼을 둡니다.
- 딜러 30곳(인증 19곳) — 딜러별 로고·커버 이미지·보유 매물을 보여 주고, 사업자 인증 딜러에는 [인증] 배지를 붙입니다.
- 매물 상세 — 사진 갤러리, 성능점검·사고 이력, 차량 사양, 딜러 정보, 할부 계산(기간별 월 납입액)을 한 화면에서 봅니다. 별도 할부계산 페이지도 있습니다.
- 찜·최근 본 차 — 관심 매물을 찜하고, 최근에 본 차를 헤더의 찜·최근 메뉴에서 다시 찾습니다.
- 상담 문의 — 상세 하단 고정 바에서 전화 문의·상담 신청을 남기면 해당 딜러에게 문의가 접수되고, 딜러는 MY 화면에서 답변합니다. 문의자는 MY에서 답변을 확인합니다.
- 디자인 시스템 토큰 — 색·글자 크기·간격·모서리·그림자를 CSS 변수(토큰)로 정리했습니다. 색은 무채색·네이비·블루 계열에 경고용 레드 하나로 줄였습니다.
- 모바일 대응 — 모바일 360·390px, PC 1440px 기준으로 검수했습니다. 가로 넘침을 없애고 터치 영역을 40px 이상으로 맞췄습니다.
PC 화면
- PC · 홈 · 히어로·브랜드 검색·지표 — carpick_pc_home_hero.jpg
- PC · 홈 전체 — carpick_pc_home_full.jpg
- PC · 매물 목록 · 필터·정렬 — carpick_pc_list_hero.jpg / carpick_pc_list_full.jpg
- PC · 브랜드 필터 적용(현대) — carpick_pc_filter.jpg
- PC · 매물 상세 · 갤러리·성능점검·딜러 — carpick_pc_detail_hero.jpg / carpick_pc_detail_full.jpg
- PC · 인증 딜러 — carpick_pc_dealers_hero.jpg / carpick_pc_dealers_full.jpg







모바일 화면
- 홈 · 브랜드 검색 — carpick_m_home.jpg (전체: carpick_m_home_full.jpg)
- 매물 목록 · 2열 카드 — carpick_m_list.jpg (전체: carpick_m_list_full.jpg)
- 필터 시트 · 닫기/N대 보기 — carpick_m_filter.jpg
- 매물 상세 · 하단 문의 바 — carpick_m_detail.jpg (전체: carpick_m_detail_full.jpg)
- 인증 딜러 — carpick_m_dealers.jpg (전체: carpick_m_dealers_full.jpg)





사용 기술
- 그누보드5 (PHP · MySQL) — 커스텀 테마 carpick, 별도 메타 테이블(매물·딜러·찜·문의·상단노출·캠페인)
- 디자인 토큰 기반 CSS(cr-tokens.css), 반응형 CSS, Pretendard 폰트
- 바닐라 JS (필터 시트·갤러리·찜·최근 본 차)
- 브랜드 로고는 Wikimedia SVG, 차량·배경 사진은 AI 이미지 생성 도구로 제작
데모
https://carpick.oootool.com/ (샘플 데이터로 운영 중인 데모라 검색엔진 노출은 막아 두었습니다.)
안내 — 데모 사이트와 이 글에 나오는 딜러·매물·가격은 모두 가상의 샘플 데이터이며, 차량·배경 사진은 AI로 생성했습니다. 브랜드명과 로고는 차종 분류를 위해 사용했으며 각 제조사와 관련이 없습니다.
이 개발자의 다른 프로젝트