공장·창고의 건강을 관리하는 유지보수 올인원 웹사이트
Design Concept
현장의 설비를 건강하게
눈에 잘 보이지 않는 유지보수 업무를 고객사가 이해하기 쉬운 서비스 메뉴처럼 보여주는 것을 디자인의 출발점으로 삼았습니다.
어두운 헤더와 화이트 본문 위에 블루 포인트 컬러를 사용해 산업 현장의 신뢰감과 정돈된 인상을 만들고, 예지보전·정기점검·긴급대응·데이터관리를 같은 구조의 섹션으로 반복해 서비스 차이를 쉽게 비교하도록 했습니다.
또한 어느 섹션에서든 문의하기로 이어지는 버튼과 하단 빠른 문의 바를 배치해 서비스 이해에서 상담까지 자연스럽게 연결되도록 설계했습니다.
Design Elements
-
01
4가지 솔루션 요약 카드
예지보전, 정기점검, 긴급대응, 데이터 관리를 번호가 붙은 카드로 먼저 보여주고 자세히보기로 이어지게 했습니다.
방문자가 전체 서비스 범위를 먼저 파악한 뒤 필요한 섹션으로 이동할 수 있습니다. -
02
서비스별 풀스크린 섹션
각 서비스를 한 화면씩 풀스크린으로 구성하고 서비스 내용과 구독 방식을 같은 순서로 배치했습니다.
스크롤하며 서비스별 차이를 일관된 구조로 비교할 수 있습니다. -
03
하단 빠른 문의 바
스크롤하면 나타나는 하단 바에 유지보수 빠른 문의하기를 고정해 어느 위치에서도 상담으로 이동하게 했습니다.
문의 폼에서는 서비스 종류를 선택해 접수할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#6D8CF1
- Royal Blue#3E67EE
- Charcoal#222222
- Light Blue#74B6FF
- Bright Blue#3759FC
- Green#00AD7E
- Gray#7F7F7F
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
서브 페이지도 메인과 같은 헤더와 섹션 구조 안에서 일관되게 확장할 수 있도록 설계했습니다.
회사소개, 스페셜 업무협업, 팩토리닥터 페이지는 같은 상단 메뉴와 제목 영역, 문의하기 버튼 규칙을 공유합니다.
서비스 항목이 늘어나도 같은 카드와 목록 형식으로 추가할 수 있습니다.
- Grid
- 서비스 설명은 번호가 붙은 카드와 목록 단위로 나누어 정보 위계를 일정하게 유지했습니다.
- Header
- 상단에 고정된 다크 헤더에서 모든 서비스 메뉴와 문의하기로 바로 이동할 수 있도록 했습니다.
- CTA
- 각 서비스 섹션과 서브 페이지 하단에 문의하기 버튼을 두어 상담 접수로 이어지게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC서비스 메뉴 7개와 문의하기를 상단 한 줄에 배치
MO햄버거 버튼으로 열리는 측면 메뉴 패널로 전환
-
Layout
PC풀스크린 섹션에 좌우 분할 배치로 설명과 이미지를 함께 노출
MO한 열로 재배치해 설명과 서비스 카드를 순서대로 확인
-
Typography
PC큰 제목과 보조 문구를 분리해 서비스명을 강조
MO제목 크기를 줄이고 줄바꿈을 조정해 가독성 유지
-
Image
PC서비스 이미지를 섹션 배경과 카드에 크게 사용
MO이미지를 화면 폭에 맞춰 비율 조정
