K-FOOD 세계화를 이끄는 푸드 그룹사 기업 웹사이트
Design Concept
K-FOOD를 키우는 그린 플랫폼
여러 계열사와 브랜드를 가진 그룹사의 사업 구조를 처음 방문한 투자자와 협력사도 쉽게 이해할 수 있도록 만드는 것을 디자인의 출발점으로 삼았습니다.
식품 기업의 신선함을 떠올리게 하는 그린 컬러를 중심으로, 연매출·M&A·자사 브랜드·파트너 수치를 큰 숫자로 보여주고 명조 서체 제목으로 기업의 무게감을 더했습니다.
또한 사업영역, 계열사, 브랜드 그룹, 경영진을 같은 구조로 정리해 방문자가 원하는 정보를 빠르게 찾고 제휴문의까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
큰 숫자로 보는 핵심 지표
연매출, M&A, 자사 브랜드, 생산 가능 제품, 파트너, 누적 투자 금액을 큰 숫자로 나란히 배치했습니다.
그룹의 규모를 스크롤 한 번으로 파악할 수 있습니다. -
02
계열사와 브랜드 그룹 정리
유통, 농산물 전처리, 농산물 IT 등 계열사와 대표 브랜드를 카드 형태로 구분해 보여줍니다.
사업의 구조가 그룹 단위로 한눈에 읽힙니다. -
03
사업영역 네 가지 아이콘
수출망 확보, 브랜드 라이센스, 금융 서비스, 시스템화를 아이콘 메뉴로 요약했습니다.
‘내용 확인하기’ 버튼으로 상세 페이지까지 바로 이어집니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FEA541
- Fresh Green#23AC38
- Forest Green#0B622B
- Teal Green#137C6E
- Amber#FEA541
- Mint White#F3F9F7
- Warm Gray#7F7F7F
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Serif KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
사업 소개, 지표, 경영진, 소식을 같은 레이아웃 규칙으로 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 메뉴와 영문 타이틀, 한 줄 설명으로 시작해 같은 간격과 서체 규칙을 따릅니다. 국문과 영문 사이트를 같은 구조로 운영해 해외 협력사도 같은 흐름으로 정보를 확인할 수 있습니다.
- Grid
- 계열사와 브랜드, 경영진을 카드형 그리드로 정리해 정보를 비교하기 쉽게 했습니다.
- Header
- Our Business, Key Stats, Member, Latest News 메뉴와 KR/EN 전환, Contact US 버튼을 상단에 함께 두었습니다.
- CTA
- Contact US 버튼과 제휴문의 링크로 협력 제안 동선을 항상 열어 두었습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 가로 메뉴와 KR/EN, Contact US 버튼
MOMenu · 모바일 전용 메뉴와 Contact US 버튼 배치
-
Layout
PCLayout · 지표와 계열사를 가로 그리드로 배치
MOLayout · 카드를 세로 한 열로 쌓아 읽기 쉽게 재배치
-
Typography
PCTypography · 명조 제목과 Pretendard 본문의 대비
MOTypography · 화면 폭에 맞춰 제목과 숫자 크기 조정
-
Image
PCImage · 브랜드 제품 이미지와 그린 톤 배경
MOImage · 이미지를 모바일 비율로 재구성
