매경골프의 네 가지 프로그램을 안내하는 통합 소개 웹사이트

매경골프가 운영하는 스킬업 캠프, 최고위 과정, 골프 페스타, 알찬 투어를 한곳에서 소개하고 각 프로그램 홈페이지로 안내하기 위해 구축한 통합 웹사이트입니다. 접속하면 프로그램별 패널을 먼저 보여주고, 버튼을 누르면 소개 팝업이 열린 뒤 “자세히 보기”로 각 프로그램 상세 페이지로 이동하도록 구성했습니다. 특히 프로그램마다 전용 배경 이미지를 적용하고, 다크 블랙 위에 오렌지 포인트 컬러와 GmarketSans 서체를 더해 힘 있고 선명한 스포츠 브랜드 분위기를 만들었습니다.

#매경골프
#골프프로그램
#스킬업캠프
#골프최고위과정
#골프투어
#골프페스타
#통합사이트
#기업홈페이지
#반응형웹
#UIUX

Client: 매경골프
Category: 기타

Design Concept

필드로 이어지는 첫 화면

여러 개로 나뉜 골프 프로그램을 처음 방문한 사용자가 헤매지 않고 자신에게 맞는 프로그램을 고르도록 하는 것을 디자인의 출발점으로 삼았습니다.
어두운 배경 위에 오렌지 포인트와 큰 타이틀을 얹고 프로그램마다 전용 이미지를 배치해, 스포츠 브랜드다운 힘 있는 인상을 주었습니다.
또한 모든 프로그램을 같은 패널 구조로 정리해 이름, 한 줄 소개, 이동 버튼의 순서가 동일하게 읽히도록 설계했습니다.

Design Elements

01

프로그램별 패널 구조

스킬업 캠프, 최고위 과정, 알찬 투어를 로고·프로그램명·소개 문구·버튼 순서의 같은 패널로 정리했습니다.
처음 방문해도 각 프로그램의 성격을 한눈에 비교할 수 있습니다.
02

오렌지 포인트 타이포그래피

프로그램명의 핵심 단어에 오렌지 컬러와 굵은 GmarketSans 서체를 적용했습니다.
어두운 배경에서도 이름이 먼저 눈에 들어오도록 했습니다.
03

팝업형 프로그램 안내

패널 버튼을 누르면 프로그램 소개 팝업이 열리고 “자세히 보기”로 이동하도록 했습니다.
선택 전 내용을 확인하고 필요한 홈페이지로만 넘어가게 했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#ED6D00

Sub Color#222222

Point Color#383838
Signal Orange#ED6D00
Deep Black#222222
Graphite#383838
Steel Gray#7F7F7F
Light Gray#E6E6E6
White#FFFFFF

Typography

Aa 가나다 GmarketSans

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Noto Sans KR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

매경골프의 네 가지 프로그램을 안내하는 통합 소개 웹사이트 서브 페이지 1 — Sub Page 매경골프 최고위 과정 페이지 01

매경골프의 네 가지 프로그램을 안내하는 통합 소개 웹사이트 서브 페이지 2 — Sub Page 매경 스킬업 캠프 페이지 02

Note

프로그램이 늘어나도 같은 규칙으로 확장할 수 있도록 설계했습니다.

프로그램마다 로고, 프로그램명, 소개 문구, 이동 버튼의 순서를 같게 두었습니다.
서브 페이지도 같은 오렌지 컬러와 헤더 구조를 유지해 첫 화면에서 본 인상이 이어지도록 했습니다.

Grid: PC에서는 두 칸 단위의 큰 패널로, 모바일에서는 한 칸으로 쌓이도록 구성했습니다.
Header: 서브 페이지는 상단에 오렌지 라인이 있는 고정 헤더와 신청문의 전화번호를 두었습니다.
CTA: “홈페이지 바로가기”와 “자세히 보기” 버튼을 각 프로그램에 같은 형태로 배치했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

세로 패널 스택프로그램 패널이 화면 폭에 맞춰 한 칸씩 위아래로 이어지는 구성

햄버거 메뉴서브 페이지에서 우측 슬라이드 메뉴로 항목 이동

Optimization

Menu

PCMenu · 프로그램 패널과 팝업으로 이동하는 단순한 진입 구조

MOMenu · 서브 페이지는 햄버거 버튼으로 여는 우측 슬라이드 메뉴
Layout

PCLayout · 큰 패널이 화면 높이를 가득 채우도록 구성

MOLayout · 1000px 이하에서 패널이 한 열로 쌓이도록 재배치
Typography

PCTypography · 큰 프로그램명과 짧은 소개 문구 중심

MOTypography · 글자 크기를 고정 단위로 바꿔 작은 화면에서도 읽기 쉽게 조정
Image

PCImage · 프로그램별 전용 배경 이미지 적용

MOImage · 배경 이미지를 화면 상단 기준으로 맞춰 노출