사람과 자연이 공존하는 추종형 운반 로봇 기업 웹사이트
Design Concept
기술을 현장의 언어로
복잡한 로봇 기술을 농업·물류 현장에서 일하는 분들이 바로 이해할 수 있도록 보여주는 것을 디자인의 출발점으로 삼았습니다.
로봇 이미지를 크게 보여주는 메인 배너와 현장 장면을 순서대로 넘겨보는 섹션, 그린 계열 포인트 컬러로 “사람과 자연이 공존하는 로봇”이라는 메시지를 시각적으로 전달했습니다.
또한 제품, 소식, 문의로 이어지는 단순한 메뉴 구조와 렌탈 안내, 고객 사례, 제품 상세정보를 한 페이지에 담아 관심에서 문의까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
영상 배경의 메인 배너
유튜브 영상을 배경으로 한 메인 배너에 브랜드 메시지와 로고를 겹쳐 첫 화면에서 로봇이 일하는 모습을 보여주도록 했습니다.
PC와 모바일 배경 이미지를 따로 준비해 화면 크기에 맞는 구도를 유지했습니다. -
02
모델·플랫폼으로 나눈 제품 구조
제품 메뉴를 봇박스, 봇박스 +, 뷰립, 아이파이의 모델과 추종/자율주행 모듈의 플랫폼으로 나누어 정리했습니다.
방문자가 완제품과 적용 기술을 구분해 필요한 정보를 찾을 수 있습니다. -
03
현장 활용 장면 슬라이드
물류 창고, 도로, 사람이 작업하기 힘든 특정환경의 세 장면을 배경 모션과 함께 순서대로 보여주도록 구성했습니다.
로봇이 어디에서 쓰이는지 문장보다 먼저 장면으로 이해하게 됩니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#004099
- Charcoal#222222
- Gray#7F7F7F
- Light Gray#E4E4E4
- 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
- 회사소개·제품·소식·문의 4개 메뉴와 KR/EN 전환을 상단에 두었습니다.
- CTA
- 페이지 하단 “문의하기”와 봇박스 페이지의 “렌탈하기” 버튼으로 문의를 이어가도록 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 가로 메뉴에 하위 메뉴가 펼쳐지는 구조
MO우측 사이드 메뉴에서 항목별로 접고 펼치는 구조
-
Layout
PC로봇 이미지와 문구를 좌우로 배치한 넓은 레이아웃
MO이미지와 문구를 세로로 쌓아 한 열로 정리
-
Typography
PC큰 제목과 짧은 설명 중심의 타이포그래피
MO제목과 본문 크기를 줄여 줄바꿈 가독성 확보
-
Image
PC로봇 제품 이미지를 크게 노출
MO모바일용 배경과 로봇 이미지를 별도로 적용
