전국 한우 전문 매장을 쉽게 찾는 농협 한우프라자 웹사이트
Design Concept
믿고 찾는 한우를 가까이
전국에 흩어진 한우프라자를 하나의 브랜드로 묶어 보여주고, 방문자가 가까운 매장까지 최소한의 단계로 도달하도록 하는 것을 디자인의 출발점으로 삼았습니다.
한우 사진을 크게 쓰는 메인 슬라이드와 명조 계열의 서체로 정통성과 신뢰감을 전하고, 골드 브라운과 밝은 회색 톤으로 정육식당의 따뜻하고 단정한 분위기를 만들었습니다.
여기에 매장 검색, 매장소식, 행사·이벤트, SNS·미디어를 같은 카드 규칙으로 정리해 어느 메뉴에서도 일관되게 정보를 찾을 수 있도록 설계했습니다.
Design Elements
-
01
시·도 기반 매장 검색 구조
시/도와 시/군/구를 차례로 선택하거나 지역·매장명으로 검색하고, 지도의 매장을 눌러 확인하도록 구성했습니다.
전국 91여 개 매장 중 가까운 곳을 빠르게 찾을 수 있습니다. -
02
매장소식 카드와 대표 메뉴
지역, 매장명, 운영 조합, 대표 메뉴를 한 장의 카드에 담아 매장마다의 특징을 한눈에 비교할 수 있게 했습니다.
매장 담당자가 로그인해 매장 정보를 관리하는 구조와 연결됩니다. -
03
브랜드 아이덴티티 소개
소개 페이지에서 캘리그라피 워드마크와 일러스트 엠블럼의 의미를 함께 보여줍니다.
농협 마크를 확인하면 믿고 이용할 수 있다는 메시지를 시각적으로 전달합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#3A8AFD
- Gold Brown#A07B3F
- Stone Gray#D7D4D2
- Mist Gray#E9EBEC
- Slate Gray#666666
- Soft White#FAFAFA
- Black#000000
- White#FFFFFF
Typography
Aa 가나다 KoPubWorld Batang
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Serif KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
소개, 매장, 소식, 이벤트, 미디어 페이지가 같은 틀 안에서 이어지도록 설계했습니다.
모든 서브 페이지는 큰 비주얼 영역과 핵심 문구로 시작하고, 이후 카드나 목록으로 콘텐츠가 이어지는 같은 구조를 따릅니다.
매장 담당자 로그인과 마이페이지를 같은 헤더에 두어 운영 기능도 한 사이트 안에서 이용할 수 있습니다.
- Grid
- 매장소식·행사·미디어 콘텐츠를 동일한 카드 규격으로 정렬했습니다.
- Header
- 소개, 매장찾기, 매장소식, 행사·이벤트, SNS·미디어의 5개 메뉴를 한 줄로 정리했습니다.
- CTA
- 메인 슬라이드마다 “한우프라자 매장찾기” 버튼을 두어 핵심 목적으로 바로 연결합니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 가로 메뉴와 로그인 영역
MOMenu · 모바일 메뉴로 전환
-
Layout
PCLayout · 지도와 매장 목록을 함께 보여주는 구성
MOLayout · 검색, 목록, 지도를 세로로 재배열
-
Typography
PCTypography · 명조 계열 제목과 고딕 본문
MOTypography · 제목 크기를 줄여 줄바꿈 최적화
-
Image
PCImage · 와이드 한우 비주얼 슬라이드
MOImage · 화면 비율에 맞춰 크롭해 노출
