PENNY PAGE
CASE 66우성렌터카2026.05

차종·날짜 고르면
견적까지

1999년부터 경주에서 영업해 온 렌터카 업체의 KTX 신경주역 픽업 중심 홈페이지 목업입니다.

업종
렌터카 (경북 경주 · KTX 신경주역)
형태
홈페이지 목업 + 5단계 예약 문의폼
구성
타이포 히어로 · 빠른 견적 카드 · 강점 벤토
차량 라인업 · 예약 문의폼
기술 스택
Vanilla JS 5단계 폼 · flatpickr 달력 · JSON 차량 데이터 · 반응형 HTML/CSS
우성렌터카 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 66

01과제

무엇을 받았고, 무엇을 했나

렌터카 문의는 차종과 날짜가 정해져야 요금이 나옵니다. 그래서 cars.json·options.json 데이터를 바탕으로 차종 선택 → flatpickr 달력 일정 → 옵션 → 평일·주말 요금 합계까지 이어지는 5단계 문의폼을 Vanilla JS로 만들었습니다.

히어로의 빠른 견적 카드에서 차종·픽업일·반납일을 고르면 바로 문의폼으로 이어지고, 신경주역 픽업·차량 라인업·24시간 상담·자차 보험 안내를 한 흐름에 담았습니다. 기존 로고는 그대로 살리고 Bebas Neue·Black Han Sans 타이포로 WOOSUNG 히어로를 구성했습니다.

핵심 — 차종과 날짜가 곧 견적차종과 일정을 고르는 순간 평일·주말 요금 합계까지 계산되도록 문의 흐름을 짰습니다.

02화면

히어로가 아니라 실제로 일하는 구간

차량 라인업 — 차급 필터 탭
01차량 라인업 — 차급 필터 탭
경주 렌터카 강점 벤토
02경주 렌터카 강점 벤토

03구성

이 사이트에 들어간 것

  • 01
    WOOSUNG 타이포 히어로Bebas Neue·Black Han Sans
  • 02
    빠른 견적 카드차종·픽업일·반납일 → 문의폼 연결
  • 03
    경주 렌터카 강점 벤토신경주역 픽업·24시간 상담·자차 보험
  • 04
    차량 라인업cars.json 렌더, 차급 필터
  • 05
    5단계 예약 문의폼Vanilla JS
  • 06
    flatpickr 일정 선택픽업·반납 달력
  • 07
    평일·주말 요금 자동 계산options.json 옵션 합산
  • 08
    SVG 아이콘 스프라이트아이콘 일괄 관리
우성렌터카 모바일 전체 화면

모바일 · 스크롤해서 보기

제작 당시 화면을 보존했습니다.

미러본은 납품 시점 화면을 그대로 보존한 사본입니다.