2026마케팅 에이전시 — 웹사이트 리뉴얼
GGL
설명
마케팅 에이전시 — 웹사이트 리뉴얼
기간
Dec 2025 - Jan 2026
역할
- 정보 위계 재정립 및 신뢰감을 주는 클린 톤앤매너 디자인.
- Next.js 기반 SSR 적용으로 SEO 최적화 및 로딩 속도 개선.
- Framer Motion을 활용한 스크롤 트리거 애니메이션 및 페이지 전환 효과 구현.
- Supabase 백엔드 로직 설계와 운영진 전용 대시보드·CRUD 개발.
- 라이트하우스 기반 성능 측정·개선 및 테크니컬 SEO 세팅.
기술
Frontend
Next.js · React · Tailwind CSS
Motion
Framer Motion · CSS Keyframes
Backend
Sanity CMS (Headless) · Supabase
Ops
Lighthouse CI · Google Search Console · Naver Search Advisor
프로젝트 목적
"성장을 끌어올리는 시작점." 끌올애드는 광고 대행사가 아니라 비즈니스 파트너로 읽히기를 원했습니다. 마케팅 대행사 사이트는 대개 소음으로 흐릅니다 — 모든 서비스를 나열하고 모든 주장을 쌓아올리죠. 그래서 잠재 고객이 검증할 수 있는 두 가지, 명확한 프로세스와 실제 성과만 남기고 나머지를 덜어냈습니다.
범위
- · 웹사이트 리뉴얼, UI/UX 디자인
- · 인터랙션 개발 (Next.js · Framer Motion)
- · 헤드리스 CMS 및 관리자 대시보드
- · 성능 및 크로스 플랫폼 SEO
주요 기술 특징
데이터 기반 관리자 대시보드
- · 일일·월간 방문자 수와 유입 경로를 애널리틱스 콘솔에 묻어두지 않고 대시보드 UI로 끌어올렸습니다.
- · 마케팅 포트폴리오와 문의 내역을 개발자 개입 없이 운영진이 직접 수정·삭제합니다.
성능 및 SEO 최적화
- · WebP 변환, 코드 스플리팅, 렌더링 최적화로 Core Web Vitals를 90점 이상 그린존에 유지했습니다.
- · sitemap.xml·robots.txt 동적 생성과 Open Graph·JSON-LD 정교화, Google Search Console과 네이버 서치어드바이저 등록까지 완료했습니다.
보안 아키텍처
- · Supabase RLS로 관리자 권한이 없는 데이터 접근을 DB 계층에서 원천 차단했습니다.
- · Next.js 미들웨어로 관리자 라우팅을 보호하고 비인가 접근을 리다이렉트 처리했습니다.
디자인 포인트
몰입형 히어로 비디오
진입 시 풀스크린 비디오 인터랙션으로, 카피 한 줄 읽히기 전에 에이전시의 에너지와 실행력을 전달합니다.
구조화된 서비스 그리드
블로그·인스타그램·인플루언서 마케팅을 `_01`, `_02` 넘버링과 함께 그리드로 정리하고, 호버 마이크로 인터랙션으로 디테일을 노출했습니다. 정보 밀도는 통제하면서 탐색의 재미는 남겼습니다.
단계별 프로세스 시각화
상담·전략 기획·실행·보고로 이어지는 6단계를 타임라인으로 시각화해, 추상적인 업무 진행을 클라이언트가 손으로 가리킬 수 있는 것으로 바꿨습니다.
반응형 상담 인터페이스
견적 문의 폼을 페이지 이동 없이 접근하게 하고, 예산·희망 서비스를 직관적으로 고르는 컴포넌트로 문의 장벽을 낮췄습니다.
프로젝트 보기웹사이트 방문 →