# 자주 묻는 질문 및 기본 해결 방법 - 퍼널, 웹사이트, 웨비나

## 개요

이 문서는 퍼널, 웹사이트, 웨비나 기능 사용 중 발생하는 일반적인 문제들에 대한 해결 방법을 제공합니다. 트래킹 코드, 커스텀 필드, 이미지, 렌더링 문제 등과 관련된 문제들을 해결하는 데 도움이 됩니다.

***

**목차**

* [개요](#개요)
* [일반적인 문제 및 해결 방법](#일반적인-문제-및-해결-방법)
  * [1. 헤드 트래킹 코드가 태그에 포함되지 않는 문제](#1-헤드-트래킹-코드가-head-태그에-포함되지-않는-문제)
  * [2. 업데이트된 커스텀 필드가 미리보기/사이트에 렌더링되지 않는 문제](#2-업데이트된-커스텀-필드가-미리보기사이트에-렌더링되지-않는-문제)
  * [3. 흐릿하거나 느리게 로딩되는 이미지](#3-흐릿하거나-느리게-로딩되는-이미지)
  * [4. 커스텀 값이 깨지거나 미리보기에서 렌더링되지 않는 문제](#4-커스텀-값이-깨지거나-미리보기에서-렌더링되지-않는-문제)
  * [5. 실제 사이트의 퍼널, 페이지, 또는 위치 식별하기](#5-실제-사이트의-퍼널-페이지-또는-위치-식별하기)
  * [6. 사이트가 올바르게 렌더링되지 않는 문제 (정렬 문제, 새로고침 루프 등)](#6-사이트가-올바르게-렌더링되지-않는-문제-정렬-문제-새로고침-루프-등)
  * [7. 페이지 속도 점수가 낮거나 속도가 너무 느린 문제](#7-페이지-속도-점수가-낮거나-속도가-너무-느린-문제)
  * [8. 보안 헤더가 사이트 자산을 차단하는 문제](#8-보안-헤더가-사이트-자산을-차단하는-문제)

***

## 일반적인 문제 및 해결 방법

### 1. 헤드 트래킹 코드가 태그에 포함되지 않는 문제

**문제** 헤드 및 본문 트래킹 코드는 클라이언트 측(브라우저)에서 주입되기 때문에 소스 코드의 태그 내부에 나타나지 않습니다. 페이지 소스에서 보는 것은 페이지 렌더링에 사용되는 초기 HTML 데이터입니다. 저희 플랫폼은 클라이언트 측에서 트래킹 코드를 동적으로 주입하므로, 정적 소스 보기에서는 표시되지 않습니다.

사용자가 Google Tag Manager(GTM)와 같은 커스텀 트래킹 솔루션을 구현하더라도, 클라이언트 측 주입은 GTM 및 유사한 도구와 호환되므로 해당 스크립트들은 예상대로 작동할 것입니다.

**설명** 소스 코드에서 보는 것은 페이지 렌더링에 사용되는 페이지 데이터이지, 동적으로 주입된 트래킹 코드가 아닙니다.

**해결 방법** GoHighLevel이 헤드 및 본문 트래킹 코드를 주입하는 방법에 대한 동영상 설명을 참조하세요: *Video Link*

***

### 2. 업데이트된 커스텀 필드가 미리보기/사이트에 렌더링되지 않는 문제

**문제** 백엔드(예: 자동화, 워크플로우)를 통해 업데이트된 커스텀 필드 값이 사이트에 표시되지 않습니다.

**설명**

* 커스텀 필드는 연락처 데이터베이스에 저장되지만, 사이트는 다음 페이지에 렌더링하기 위해 로컬 스토리지 또는 쿠키에서 필드 데이터를 가져옵니다.
* 연락처가 폼, 설문, 또는 주문 양식을 작성하면, 입력된 값들이 로컬 스토리지에 저장됩니다.
* 커스텀 필드 값(예: 점수나 예상 비용)이 자동화, 워크플로우, 또는 기타 백엔드 프로세스를 통해 업데이트되면, 이는 로컬 스토리지에 저장되지 않습니다.
* 결과적으로, 프론트엔드 표시는 브라우저에 로컬로 저장된 데이터에 의존하므로, 이러한 필드들은 퍼널 페이지에서 렌더링되지 않습니다.
* 이 동작은 의도적인 것으로, 사용자가 직접 제출한 데이터에 대해 더 빠른 페이지 렌더링과 개인화를 보장합니다.

#### **해결 방법**

* 영향을 받는 커스텀 필드가 폼/설문을 통해 채워지는지 아니면 백엔드 자동화를 통해 채워지는지 확인하세요.
* 백엔드에서 업데이트된 경우, 해당하는 로컬 스토리지 항목이 없기 때문에 퍼널 페이지에 나타나지 않습니다.
* 이러한 필드가 렌더링되도록 하려면:
  * 사용자 입력이 로컬 데이터에 저장되도록 트리거하기 위해 관련 필드를 폼 또는 설문에 추가하세요.
  * 또는 렌더링 전에 백엔드 업데이트된 필드 값을 로컬 스토리지에 푸시하는 커스텀 스크립트나 로직을 사용하세요.

**⚠ 참고** - 직접적인 사용자 입력(예: 폼 또는 설문 제출)을 통해 업데이트된 커스텀 필드만 로컬 스토리지에 저장되고 퍼널 페이지에 렌더링됩니다. 백엔드 자동화(점수나 CRM 업데이트 등)를 통해 업데이트된 필드는 사이트에 표시되지 않습니다.

***

### 3. 흐릿하거나 느리게 로딩되는 이미지

**문제** 이미지 최적화 설정으로 인해 일부 이미지가 흐릿하게 보이거나 느리게 로딩됩니다.

**설명** 이미지 최적화는 페이지 속도를 개선하지만 전체적인 품질 설정을 적용합니다. 최적화가 너무 공격적이면 일부 이미지의 선명도가 떨어질 수 있습니다.

**해결 방법**

* 빌더에서 특정 이미지에 대한 이미지 최적화를 비활성화하세요.
* 배경 이미지의 경우, 퍼널 설정에서 최적화를 비활성화하세요.
* 최적화 후에도 선명도를 유지하기 위해 더 높은 해상도의 이미지를 업로드하세요.

***

### 4. 커스텀 값이 깨지거나 미리보기에서 렌더링되지 않는 문제

**문제** 커스텀 값이 퍼널에서 올바르게 렌더링되지 않습니다.

**가능한 원인 및 해결 방법**

**하이퍼링크 문제:**

* 텍스트 요소의 커스텀 값이 하이퍼링크로 변환되었는지 확인하세요.
* 영향을 받은 요소에서 하이퍼링크를 제거하세요. 하이퍼링크는 렌더링을 방해합니다.

**ChatGPT 응답 포맷 문제:**

* ChatGPT 생성 콘텐츠에는 퍼널 페이지를 망가뜨리는 특수 문자(예: \n)가 포함될 수 있습니다.
* HTML 형식의 콘텐츠를 반환하도록 ChatGPT 프롬프트를 업데이트하세요.
* 또는 **"text formatter"** 액션을 사용하여 \n을\
  로 교체하세요.

***

### 5. 실제 사이트의 퍼널, 페이지, 또는 위치 식별하기

**식별 단계**

* 브라우저에서 **네트워크(Network) 탭**을 여세요.
* 콘솔을 지우고 **XHR 필터**를 활성화하세요.
* 페이지를 새로고침하세요.
* 네트워크 로그에서 이벤트 호출을 확인하세요.
* 페이로드(payload) 섹션을 열어서 필요한 세부 정보를 찾으세요.

***

### 6. 사이트가 올바르게 렌더링되지 않는 문제 (정렬 문제, 새로고침 루프 등)

**문제** 사이트가 올바르게 표시되지 않으며, 요소들이 잘못 정렬되거나 페이지가 계속 새로고침됩니다.

**해결 방법**

* 코드 요소, 헤드/푸터 트래킹 코드, 커스텀 CSS의 모든 커스텀 코드를 제거하세요.

**커스텀 코드 요소를 찾는 방법:**

* 빌더를 열어주세요.
* 페이지 미리보기를 검사하세요.
* **Ctrl + F (Windows)** 또는 \*\*Cmd + F (Mac)\*\*을 사용하여 c-custom-code를 검색하세요.
* 발견되면 커스텀 코드 요소를 제거하고 문제가 지속되는지 확인하세요.

**특정 문제 확인:**

* 섹션, 칼럼, 또는 요소에서 **sticky** 옵션이 활성화되어 있지 않은지 확인하세요 (sticky CSS는 미리보기 모드에서만 작동).
* 만료된 타이머 요소를 제거하세요. 이는 표시 문제를 일으킬 수 있습니다.
* 브라우저 콘솔을 열고 오류를 확인하세요.
* **hydration error**가 나타나면, 이를 지원 티켓으로 에스컬레이션하세요.

***

### 7. 페이지 속도 점수가 낮거나 속도가 너무 느린 문제

**문제** 페이지가 느리게 로딩되거나, 속도 분석 도구에서 낮은 성능 점수를 반환합니다.

**참고** 개발팀은 페이지 속도 개선을 위한 직접적인 디버깅 지원을 제공하지 않습니다.

**권장 도구**

* [PageSpeed Insights](https://pagespeed.web.dev/)
* [GTMetrix](https://gtmetrix.com/)

이러한 도구들은 페이지 성능을 분석하고 개선 사항을 제안하는 데 도움이 됩니다.

**해결 및 최적화 단계**

* 트래킹 코드나 커스텀 코드 요소를 통해 로딩되는 외부 스크립트나 CSS를 확인하세요.
* 페이지의 길이와 콘텐츠 밀도를 평가하세요.
* GoHighLevel의 **이미지 최적화(Image Optimization)** 토글을 사용하거나 수동으로 압축하여 이미지를 최적화하세요.
* **모범 사례:** 폴드 위에 로딩되는 이미지는 모바일에서 좋은 LCP 점수를 달성하기 위해 **200kb 미만**이어야 합니다.
* \*\*JavaScript 최적화(Optimize JavaScript)\*\*를 활성화하여 필수적이지 않은 JS 및 트래킹 코드의 하이드레이션을 지연시키세요 — 이는 \*\*TBT (Total Blocking Time)\*\*를 개선합니다.
* 서드파티 위젯이나 JavaScript를 주입하는 커스텀 코드 요소를 찾아보세요.
* 무거운 요소들(폼, 캘린더, 리뷰 위젯, 지도 등)을 폴드 아래로 이동하세요.

**벤치마크** 잘 최적화된 GoHighLevel 페이지는 일반적으로 다음 점수를 기록합니다:

* **모바일에서 80점 이상**
* **데스크톱에서 95점 이상**

이는 트래킹 코드와 고해상도 이미지가 있는 시나리오를 포함합니다.

***

### 8. 보안 헤더가 사이트 자산을 차단하는 문제

**문제** `Sites(사이트) → Funnels(퍼널) → 문제가 있는 특정 퍼널`의 **Security(보안)** 탭에서 제한적이거나 잘못된 보안 헤더가 구성되었을 때 페이지나 퍼널 단계에서 스크립트, 이미지, 또는 스타일이 로딩되지 않습니다.

**일반적인 원인**

* 잘못 구성되었거나 지나치게 제한적인 Content-Security-Policy 값.
* 헤더 값에 줄바꿈이나 잘못된 문자가 포함됨.
* GoHighLevel의 CDN이나 서드파티 통합에서 자산을 차단하는 제한적인 지시어.
* 헤더 편집 후 잘못된 URL 구성.

**해결 방법**

* `Sites(사이트) → Settings(설정) → Security(보안) 탭`으로 이동하세요.
* 커스텀 헤더(예: Content-Security-Policy, Strict-Transport-Security, X-Content-Type-Options, X-Frame-Options)를 검토하세요.
* 모든 커스텀 헤더를 임시로 제거하거나 지우고 페이지를 새로고침하세요.

  페이지가 올바르게 로딩되면, 문제는 헤더 구성 중 하나에 의해 발생한 것입니다.
* 헤더 값에 **줄바꿈**이나 **개행**이 **없는지** 확인하세요.

  헤더 값은 **단일 연속 줄**로 입력되어야 합니다.
* 완전히 이해하지 못하는 제한적이거나 지원되지 않는 규칙의 사용을 피하세요.

**올바른 형식의 예:**

`default-src 'self'; img-src *; script-src 'self' https://example.com;`

* 홈페이지가 계속 실패하면, 임시로 **다른 URL 경로**를 할당해 보세요.
* 조정 후에는 캐시를 지우거나 **시크릿 모드**에서 테스트하여 해결을 확인하세요.

**해결 팁**

* 각 헤더의 구문을 확인하고 잘못되거나 지원되지 않는 지시어가 사용되지 않았는지 확인하세요.
* 고객이 잘못된 값을 다시 도입하면, 이를 제거하거나 단순화하도록 요청하세요.

**벤치마크** 올바르게 구성된 페이지와 유효한 보안 헤더는 다음과 같아야 합니다:

* 모든 GoHighLevel 자산을 차단 없이 로딩.
* 브라우저 콘솔에서 "Refused to load" 또는 "Blocked by CSP" 오류가 표시되지 않음.

**유효성 검사 팁** 구성된 Content-Security-Policy가 유효하고 안전한지 확인하려면 [Google의 CSP Evaluator](https://csp-evaluator.withgoogle.com/)를 사용하세요.

***

***

*원문 최종 수정: Tue, 28 Oct, 2025 at 12:40 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-sites/faqs-basic-troubleshooting-funnels-websites-webinars.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.