GoHighLevel 랜딩 페이지 가이드
개요
이 가이드는 GoHighLevel 배포를 위한 단일 HTML 파일로 전환율 높은 랜딩 페이지를 만드는 방법을 다루며, 아키텍처, CSS/JS 패턴, 성능 함정 및 일반적인 GHL 문제에 대한 해결책을 제공합니다.
주요 기술 스택
- 단일 HTML 파일 (빌드 도구 없음 — GHL이 프레임워크를 지원하지 않음)
- Tailwind CDN (
https://cdn.tailwindcss.com) - Google Fonts (CDN)
- 외부 CDN 에셋 (filesafe.space 또는 유사)
GHL 핵심 해결책
전체 너비 돌출: width: 100vw; left: 50%; transform: translateX(-50%)와 함께 .ghl-wrapper 사용
고정 위치 해결 방법: transform이 고정 위치 동작을 방해하므로 JavaScript를 사용하여 고정 요소를 document.body로 이동합니다.
페이지 구조 (전환 순서)
Problem-Agitation-Solution(PAS) 프레임워크를 섹션별로 따릅니다:
히어로 → 사회적 증명 → 설명 → 사례 연구 → 문제/자극 → 작동 방식 → 기능 → 혜택 → 가격 → 팀 → FAQ → 최종 CTA → 푸터
필수 CSS 애니메이션
IntersectionObserver를 사용한 페이드 업, 지연 효과, CTA 펄스, 카드 그리드의 호버 블러 효과, 글래스모피즘, 애니메이션 그라데이션 배지가 권장 패턴입니다.
중요한 동영상 규칙
사용: <video autoplay loop muted playsinline> (간단한 방식)
피해야 할 것: preload 속성, loading="lazy", 또는 지연 로딩 스크립트 — 이들은 자동 재생을 차단합니다.
압축 목표: 동영상 5MB 미만, 720p H.264, 1-2Mbps 비트레이트, 루프 최대 30초.
가격 섹션 모범 사례
세 가지 카드 레이아웃: 월간 | 연간 (중앙 정렬, 1.10 배율, 어두운 배경, 인기 배지, 펄스 CTA) | 반기. 취소선 가격 및 절감액 계산 포함.
이미지 최적화
업로드 전 크기 조정: 아바타 ≤100×100px, 카드 ≤400×400px, 히어로 ≤1200px 너비. WebP/AVIF 형식 선호. width와 height 속성 추가; 접힌 부분 아래에는 loading="lazy" 사용.
PageSpeed 목표
| 지표 | 목표 |
|---|---|
| LCP | < 2.5s |
| TBT | < 300ms (Tailwind CDN은 ~1.3s+ 추가) |
| CLS | < 0.1 |
| FCP | < 1.8s |
동영상과 이미지를 압축하고, preconnect 링크를 포함하며, 비동기 디코딩을 사용하세요.
필수 성능 게이트 (로컬 Lighthouse)
이 테스트를 통과하기 전에는 페이지를 완성했다고 하지 마십시오. 느린 페이지 = 리드가 로딩 전에 이탈 = 트래픽 대비 낮은 연결 전환율. 광고비를 쓰기 전에 검증합니다.
테스트는 모바일 에뮬레이션 + 느린 4G 환경에서 실행됩니다 — 광고에서 유입되는 실제 리드의 시나리오입니다.
실행 방법 (index.html이 있는 폴더에서):
bash ~/.claude/skills/ghl-landing-page/lh-check.sh .
스크립트가 로컬 페이지를 실행하고(npx serve), Lighthouse를 실행하며(npx lighthouse — 별도 설치 없음, 이미 캐시됨), 점수 + Core Web Vitals + 주요 기회를 출력하고 서버를 자동으로 종료한 후 다음을 반환합니다:
- exit 0 → 통과 (점수 ≥90, LCP <2.5s, TBT <300ms, CLS <0.1) → 게시 가능
- exit 1 → 실패 → 출력된 "주요 기회"를 읽고 수정한 후 다시 실행합니다. 통과할 때까지 반복합니다.
실패 시, 다음 순서로 공략하세요 (효과 큰 순서):
- Tailwind CDN이 TBT의 1순위 원인입니다. 프로덕션의 경우 Tailwind CLI를 컴파일하여(미사용 클래스 제거 → CSS ~5-15KB)
cdn.tailwindcss.com대신<head>에 인라인하십시오. 이것만으로도 점수를 크게 개선할 수 있습니다. - 배경 동영상 — 첫 페인트에서는 정적 포스터를 사용하고, 로드된 후에만 동영상으로 교체하세요. 5MB 미만, 720p 유지.
- 이미지 — WebP/AVIF,
width/height포함 (CLS 방지).
온라인 상태가 된 후에는 GHL의 실제 URL로 PageSpeed Insights를 통해 최종 점검하세요 (GHL의 래퍼/CDN이 로컬 테스트에서 감지되지 않는 추가 무게를 추가합니다).
일반적인 함정 및 해결책
| 문제 | 해결책 |
|---|---|
| GHL에서 가장자리 테두리 발생 | ghl-wrapper 전체 폭 해결 방법 적용 |
| 동영상 자동 재생 실패 | preload 제거, muted 속성 유지 |
| 모바일에서 가격 레이아웃 깨짐 | 취소선 가격을 별도 줄로 분리, 글꼴 크기 축소 |
| 아바타 사진 너무 큼 | 업로드 전 100×100px로 크기 조정 |