성과를 자료로 증명하는 퍼포먼스 마케팅 대행사 웹사이트

GNG커뮤니케이션의 청주 기반 퍼포먼스 마케팅 서비스와 클라이언트와의 1:1 소통 방식을 효과적으로 전달하기 위해 구축한 공식 웹사이트입니다. 메인 화면은 “SUCCESSFUL MARKETING” 영상 비주얼 → 그동안 답답하셨죠? → 퍼포먼스 마케팅 5단계 → 1:1 소통과 성과보고 → 포트폴리오 → 문의하기 순서로 구성했습니다. 특히 오렌지와 블랙의 강한 대비, 흐르는 “GET START” 문구 슬라이드와 단계별 아이콘으로 마케팅 과정을 눈에 보이게 정리했으며, 서비스는 N사 서비스·가맹광고·인스타그램·전문촬영본으로 나눠 필요한 정보를 바로 찾도록 했습니다.

#GNG커뮤니케이션
#마케팅대행사
#퍼포먼스마케팅
#청주마케팅
#플레이스상위노출
#블로그마케팅
#인스타그램마케팅
#가맹광고
#반응형웹
#UIUX

Client: GNG커뮤니케이션
Category: 기업홈페이지

Design Concept

보이지 않던 마케팅을 보이게

마케팅은 결과가 눈에 보이지 않아 불안하다는 고객의 고민을 디자인의 출발점으로 삼았습니다.
오렌지와 블랙을 중심으로 한 강한 컬러 대비와 큰 영문 타이틀로 에너지를 만들고, 마케팅 진행 단계를 STEP 01~05 아이콘으로 정리해 어떤 과정으로 성과가 만들어지는지 한눈에 이해하도록 했습니다.
또한 서비스, 성공사례, 문의가 같은 구조로 이어지도록 설계해 사용자가 자신에게 필요한 마케팅을 확인하고 곧바로 상담을 신청할 수 있도록 했습니다.

Design Elements

01

영상 배경의 첫 화면

“SUCCESSFUL MARKETING” 문구 뒤로 영상 배경을 깔아 브랜드의 활력을 먼저 보여줍니다.
문구 옆 스위치 아이콘으로 “GET START NOW”의 의미를 직관적으로 전달합니다.
02

5단계 마케팅 프로세스 아이콘

상권 분석, 가설 설정, 집행, 오류 분석, 추가 제안의 흐름을 STEP 01~05 아이콘으로 정리했습니다.
눈에 보이지 않는 마케팅 과정을 단계별로 이해할 수 있습니다.
03

흐르는 GET START 슬라이드

“GET START GNG COMMUNICATION” 문구가 띠 형태로 흐르며 섹션을 이어줍니다.
긴 페이지에서도 브랜드 메시지가 반복 노출되어 리듬을 만듭니다.

Responsive

디바이스 대응

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

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

Design System

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

Colors

Main Color#FF5900

Sub Color#222222

Point Color#040000
Signal Orange#FF5900
Charcoal#222222
Deep Black#040000
Graphite#383838
Cloud Gray#F5F5F6
White#FFFFFF

Typography

Aa 가나다 Pretendard

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

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

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

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

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

02 Pages

성과를 자료로 증명하는 퍼포먼스 마케팅 대행사 웹사이트 서브 페이지 1 — Sub Page N사 서비스 페이지 01

성과를 자료로 증명하는 퍼포먼스 마케팅 대행사 웹사이트 서브 페이지 2 — Sub Page 성공사례 페이지 02

Note

서비스 소개 페이지를 동일한 규칙으로 확장할 수 있도록 설계했습니다.

서비스 소개, 제공서비스 상세, 성공사례가 같은 헤더와 하단 띠 문구를 공유하도록 구성했습니다.
새로운 서비스를 추가해도 같은 형식으로 정리할 수 있습니다.

Grid: 제목, 설명, 제공서비스 순서로 쌓이는 단일 컬럼 구조를 기본으로 했습니다.
Header: 상단 고정 헤더에 Introduce, Product, Success story, Contact 메뉴와 SNS 링크를 두었습니다.
CTA: 페이지 하단 문의하기 폼에서 매체명, 업체명, 연락처를 접수하도록 구성했습니다.

Mobile

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

Bottom Bar

햄버거 슬라이드 메뉴모바일에서 우측에서 열리는 메뉴로 전체 메뉴와 SNS를 제공

카카오톡·인스타그램 바로가기헤더의 SNS 아이콘으로 카카오톡 채널과 인스타그램에 바로 연결

Optimization

Menu

PCMenu · 상단 고정 메뉴와 하위 메뉴 드롭다운

MOMenu · 우측 슬라이드 메뉴로 전환해 한 손으로도 이동
Layout

PCLayout · 섹션별 중앙 정렬 타이틀과 단계 아이콘 가로 배치

MOLayout · 단계 아이콘과 문장을 세로로 쌓고 줄바꿈을 모바일용으로 정리
Typography

PCTypography · Pretendard와 큰 영문 타이틀, 오렌지 강조

MOTypography · 타이틀 크기를 줄이고 문구가 끊기지 않도록 줄바꿈 조정
Image

PCImage · 영상 배경과 단계별 아이콘, 클라이언트 로고 사용

MOImage · 아이콘과 로고 크기를 줄여 한 화면에 들어오도록 배치