제조 현장의 AX 전환을 담은 AI 자율제조 기업 웹사이트
Design Concept
제조 현장을 잇는 AX 구조
제품과 산업이 많은 기업일수록 방문자가 길을 잃지 않는 구조가 먼저라고 보고, 디자인의 출발점을 정보의 분류에 두었습니다.
블랙과 화이트를 기본으로 오렌지 포인트를 절제해 사용하고, 배경 영상과 산업 이미지로 제조 현장의 분위기를 전달하되 문구와 메뉴는 단정하게 정리했습니다.
제품 및 서비스, 산업별 솔루션, AX 인사이트, 뉴스&이벤트, 회사소개로 이어지는 메뉴를 같은 규칙으로 맞춰 어떤 페이지에서든 다음에 볼 정보가 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
제품군별 솔루션 메뉴 구조
다섯 가지 솔루션과 하위 제품을 계층 메뉴로 정리해 원하는 제품까지 짧은 동선으로 이동하도록 했습니다.
제품 수가 많아도 한 번에 전체 구성을 파악할 수 있습니다. -
02
산업군 키워드 인터랙션
자동차, 전자, 이차전지 등 산업군을 메인 첫 화면에 키워드로 노출해 업종별 관심사를 바로 연결했습니다.
방문자가 자신의 업종 페이지로 곧장 이동할 수 있습니다. -
03
사례·뉴스 카드형 콘텐츠
AX 인사이트 사례와 IX 뉴스·이벤트·Stories를 썸네일 카드로 구성해 최신 소식을 한 화면에서 확인하도록 했습니다.
구독 폼까지 이어져 지속적인 소통이 가능합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FF8000
- Black#000000
- Dark Gray#666666
- Light Gray#DDDDDD
- Sky Blue#3A7BEE
- 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
제품·산업·사례 페이지를 같은 규칙 안에서 일관되게 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 소개 문구와 해시태그, 제품 메뉴 탭, 개요·Problem·Value·Capability·Demo·Use case 순서의 본문으로 구성했습니다.
제품이 추가되어도 같은 틀에 내용만 채우면 되도록 정리했습니다.
- Grid
- 좌우 여백을 일정하게 두고 카드와 본문을 같은 폭 안에 맞춰 배치했습니다.
- Header
- 화면 상단에 고정된 헤더에 5개 대메뉴와 KR·EN·JP 언어 전환을 함께 두었습니다.
- CTA
- 각 영역 하단의 더보기 버튼과 뉴스레터 구독, Contact Us 메뉴로 문의 동선을 이었습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC5개 대메뉴와 하위 제품 메뉴를 펼쳐 한 번에 노출
MO햄버거 버튼으로 전체 메뉴를 열어 하위 항목까지 확인
-
Layout
PC솔루션과 사례 카드를 가로로 나란히 배치
MO카드를 세로 한 열로 쌓아 한 손으로 읽기 편하게 구성
-
Typography
PC큰 영문 슬로건과 한글 본문의 위계를 분명하게 구성
MO슬로건과 본문 크기를 화면 폭에 맞춰 줄여 가독성 확보
-
Image
PC배경 영상과 산업·제품 이미지를 넓게 사용
MO이미지 비율을 화면 폭에 맞춰 줄이고 썸네일 크기 최적화
