장기렌트·리스 견적을 빠르게 받는 자동차 웹사이트

JH(주합)의 장기렌트·리스 서비스를 알리고 전문 매니저를 통해 견적 상담까지 연결하기 위해 구축한 공식 웹사이트입니다. 메인 화면은 빠른 견적 문의 → 즉시출고 특가차량(국산차·수입차) → 고객 만족도 BEST 파트너 → 이용후기 순으로 구성해, 차량과 월 납입 조건을 확인한 뒤 담당자 소개와 후기를 보고 상담으로 이어지도록 했습니다. 특히 선납·보증 30% 조건의 월 금액을 차량별 카드로 정리하고, 딥 그린과 베이지 골드 컬러, 1544-1770 빠른문의 버튼과 카카오톡 상담 연결로 신뢰감 있게 문의할 수 있는 화면을 완성했습니다.

#JH주합
#주합
#JHAutoSolution
#장기렌트
#리스
#자동차견적
#즉시출고
#수입차렌트
#반응형웹
#UIUX

Client: JH(주합)
Category: 기업홈페이지

Design Concept

견적부터 출고까지 한눈에

차량 계약을 앞둔 고객이 가장 궁금해하는 월 납입 금액과 조건을 첫 화면에서 바로 확인하도록 하는 것을 디자인의 출발점으로 삼았습니다.
딥 그린과 샴페인 골드를 기반으로 차분하고 믿음직한 분위기를 만들고, 차량 카드마다 선납·보증 조건과 월 금액을 같은 규칙으로 정리했습니다.
또한 빠른 견적 문의와 전화, 카카오톡 상담 동선을 화면 어디에서나 이어지도록 설계해 비교와 문의가 자연스럽게 연결되도록 했습니다.

Design Elements

01

차량별 월 납입 카드

국산차는 선납 48개월과 보증 60개월 금액을, 수입차는 60개월 월 렌탈료를 카드 한 장에 정리했습니다.
여러 차량의 조건을 스크롤하며 바로 비교할 수 있습니다.
02

국산차·수입차 분리 구성

특가 리스트를 국산차와 수입차로 나누고 각 영역마다 전체 확인 버튼을 두었습니다.
원하는 차종 영역만 골라 볼 수 있어 탐색이 짧아집니다.
03

매니저 소개와 이용후기

담당 매니저의 직급과 인사말, 후기에 달린 담당자 답글을 함께 보여 줍니다.
상담 전에 누구와 이야기하게 되는지 미리 알 수 있도록 했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#003839

Sub Color#DCBA96

Point Color#C5A998
Deep Green#003839
Champagne Gold#DCBA96
Charcoal#222222
Warm Gray#7F7F7F
Light Gray#E6E6E6
White#FFFFFF

Typography

Aa 가나다 Noto Sans KR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

장기렌트·리스 견적을 빠르게 받는 자동차 웹사이트 서브 페이지 1 — Sub Page 국산차 특가 리스트 페이지 01

장기렌트·리스 견적을 빠르게 받는 자동차 웹사이트 서브 페이지 2 — Sub Page 장기렌트/리스란 안내 페이지 02

Note

특가 리스트와 안내 페이지를 같은 구조 안에서 일관되게 운영할 수 있도록 설계했습니다.

모든 서브 페이지는 상단 메뉴와 빠른 견적 문의, 하단 연락처를 동일하게 유지합니다.
게시판형 목록과 안내 페이지 모두 같은 헤더와 문의 영역을 공유합니다.

Grid: 차량 카드를 같은 크기의 그리드로 배치해 조건을 한눈에 비교할 수 있게 했습니다.
Header: 특가차량, 국산차, 수입차, 이벤트, 이용후기, 장기렌트/리스란 메뉴를 상단에 고정했습니다.
CTA: 빠른문의 1544-1770 버튼과 견적 문의 폼, 카카오톡 상담을 화면 곳곳에 연결했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

빠른문의 바로 전화1544-1770 빠른문의 버튼으로 모바일에서 바로 통화 연결

카카오톡 상담 연결카카오톡 채널 채팅으로 부담 없이 견적 문의

Optimization

Menu

PCMenu · 여섯 개 메뉴를 상단에 한 줄로 노출

MOMenu · 햄버거 메뉴로 접어 작은 화면에 맞게 정리
Layout

PCLayout · 한 줄에 여러 장의 차량 카드를 나열

MOLayout · 카드를 슬라이드와 세로 흐름으로 재배치
Typography

PCTypography · Noto Sans KR로 금액과 차종명을 또렷하게 강조

MOTypography · 월 금액이 먼저 읽히도록 크기 위계 조정
Image

PCImage · 차량 이미지를 카드 중심으로 크게 배치

MOImage · 모바일 폭에 맞춘 차량 이미지와 후기 영역