주차장 운영의 모든 단계를 담은 스마트 주차 기업 웹사이트
Design Concept
스마트 주차의 시작
여러 제품과 서비스가 나뉘어 있는 주차 솔루션 기업의 정보를 처음 방문한 사람도 쉽게 찾도록 정리하는 것을 디자인의 출발점으로 삼았습니다.
신뢰를 주는 블루를 중심으로 제품 이미지와 시공 현장 사진을 크게 보여주고, 화면이 한 장씩 넘어가는 풀페이지 방식으로 서비스와 인더스트리, 회사소개를 구분했습니다.
또한 설치 장소 유형별 견적 문의와 상담 신청, 카카오톡, 전화 연결을 항상 가까이에 두어 문의까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
풀페이지 방식의 메인 구성
시공사례, 사업 분야, 제품 소개, 회사소개를 한 화면씩 나누어 스크롤할 때마다 하나의 주제가 보이도록 했습니다.
긴 페이지에서도 현재 위치와 다음 내용을 쉽게 파악할 수 있습니다. -
02
장소 유형별 견적 진입
회사/공장, 학교/관공서, 상가/빌딩 세 가지 선택지를 메인에 나란히 두었습니다.
방문자가 자신의 상황에 맞는 문의로 바로 이어갈 수 있습니다. -
03
제품·시공사례 시각화
무인정산기, 통합관제서버, 차량번호인식기, 주차 차단기를 제품 이미지와 함께 소개했습니다.
실제 시공 현장명을 슬라이드로 보여 경험을 한눈에 전달합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#EB5757
- Parking Blue#0C5B9E
- Sky Blue#1CACF4
- Light Gray#E5E5E5
- Mid Gray#7F7F7F
- Ink Black#222222
- White#FFFFFF
Typography
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 GmarketSansBold
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
서비스·인더스트리·회사소개 메뉴를 동일한 규칙으로 구성했습니다.
각 서브 페이지는 상단 타이틀과 설명, 본문 콘텐츠 순서를 같게 하고 게시판형 페이지는 목록 구조를 통일했습니다.
메뉴 구조와 페이지 구성이 일관되어 원하는 정보를 쉽게 찾을 수 있습니다.
- Grid
- 제품과 시공사례를 카드형 목록으로 나누어 비교하며 볼 수 있게 했습니다.
- Header
- 서비스, 인더스트리, 회사소개, 시공사례, 고객지원의 5개 대메뉴와 상담 예약·스마트견적 버튼을 함께 배치했습니다.
- CTA
- 상담 신청 폼과 우측 고정 버튼으로 어느 화면에서든 문의할 수 있게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC5개 대메뉴와 하위 메뉴, 우측 상담 예약·스마트견적 버튼
MO햄버거 버튼으로 여는 전체 화면 메뉴
-
Layout
PC한 화면씩 전환되는 풀페이지 레이아웃
MO화면 폭에 맞춰 섹션을 세로로 재배열
-
Typography
PC큰 영문 타이틀과 한글 설명을 함께 사용한 타이포
MO화면 크기에 비례해 글자 크기를 줄여 가독성 유지
-
Image
PC넓은 화면 비율의 제품·현장 이미지
MO모바일 비율에 맞춘 이미지 정렬과 크기 조정
