재생에너지와 자원순환 가치를 담은 산업기업 웹사이트
Design Concept
산업의 기술을 지속가능한 가치로
에너지·산업 기업이 가져야 할 기술적 신뢰와 친환경 가치를 동시에 전달하는 것을 디자인의 핵심 방향으로 설정했습니다.
대형 생산시설과 산업 현장 이미지를 활용해 사업의 규모와 전문성을 직접적으로 보여주고, 화이트 기반의 정보 영역을 함께 사용해 무겁고 복잡한 산업 이미지를 정돈했습니다.
또한 기업 비전과 제품 정보를 명확하게 분리해 사용자가 비씨에너지의 기업 정체성 → 사업 경쟁력 → 제품 정보를 단계적으로 이해할 수 있도록 구성했습니다.
Design Elements
-
01
산업 현장의 전문성을 시각화
생산시설, 저장탱크, 공장 등 실제 산업 현장 이미지를 적극적으로 활용해 비씨에너지의 사업 규모와 전문성을 직관적으로 전달했습니다.
추상적인 친환경 그래픽보다 실제 생산 환경을 중심으로 기업 신뢰도를 형성했습니다. -
02
자원순환과 친환경 가치 강조
태양광, 자연, 재활용 이미지 등을 활용해 재생에너지와 폐기물 자원화라는 기업 방향성을 시각적으로 표현했습니다.
환경적 메시지가 제품과 사업 설명에서 분리되지 않고 기업 전체의 방향성으로 이어지도록 구성했습니다. -
03
제품 정보를 명확하게 구조화
재생연료유, 윤활유, 박리제 등 제품 성격이 서로 다른 만큼 각 제품을 독립적인 콘텐츠 단위로 구성하고, 설명·이미지·품질 기준을 함께 제공했습니다.
전문적인 산업 제품도 사용자가 제품 특성과 용도를 빠르게 비교하고 이해할 수 있도록 정보 구조를 정리했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#D83A32
- Deep Blue#173D5D
- Industrial Navy#1D2D3B
- Energy Red#D83A32
- Soft Gray#F5F5F3
- Charcoal#252525
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gilroy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
기업·공장·제품 정보를 동일한 규칙 안에서 확장할 수 있도록 설계했습니다.
회사소개, 공장소개, 제품소개 등 콘텐츠 목적은 서로 다르지만 공통된 그리드와 헤더 구조를 적용해 전체 웹사이트의 브랜드 일관성을 유지했습니다.
각 서브페이지는 공통 서브비주얼 → 핵심 메시지 → 상세 정보 → 이미지·데이터 → 관련 정보의 흐름으로 구성해 산업 분야의 복잡한 내용을 체계적으로 전달할 수 있도록 설계했습니다.
- Grid
- 1200px 기준 12컬럼 그리드를 적용해 기업 소개, 제품 이미지, 표와 데이터 등 서로 다른 형태의 콘텐츠를 안정적으로 배치했습니다.
- Header
- 공장, 태양광, 산업시설 등 각 페이지 성격에 맞는 이미지를 활용하면서 동일한 타이틀 구조를 적용해 브랜드 통일성을 유지했습니다.
- CTA
- 제품과 사업 정보를 확인한 고객이 제품 문의나 거래 상담으로 자연스럽게 이어질 수 있도록 주요 서브페이지 하단에 공통 문의 CTA를 배치하는 구조로 설계했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC회사소개, 공장소개, 제품소개, 탱크청소, 공지·홍보 등 전체 메뉴 탐색
MO회사·제품·문의 중심으로 핵심 메뉴를 간결하게 구성
-
Layout
PC기업 정보와 제품 콘텐츠를 대형 이미지와 다단 레이아웃으로 구성
MO한 화면에 하나의 핵심 메시지가 보이도록 세로형 콘텐츠로 재구성
-
Typography
PC대형 제목과 명확한 정보 위계를 통해 산업기업의 전문성 강조
MO제품 설명과 기술 정보가 작은 화면에서도 쉽게 읽히도록 크기와 행간 최적화
-
Image
PC산업시설과 제품 이미지를 크게 활용해 현장성과 기업 규모를 전달
MO핵심 시설과 제품이 명확하게 보이도록 이미지 비율과 크롭을 조정
