버전: 4.6.1

코드 에디터

코드 에디터는 차단실 디자인에 대한 완전한 제어가 필요한 사용자를 위한 고급 편집 기능을 제공합니다. 이 문서는 코드 에디터에서 코드 수정이 미리보기에 어떤 영향을 미치는지, 그리고 변경 사항이 실시간으로 어떻게 반영되는지 설명합니다.

빠른 참조

코드 요소	간편 설정 설정	사용자 정의 가능	참고 사항
`.nf-vwr-background`	배경 이미지	✅ 예	배경 색상/이미지, 패딩
`.nf-vwr-image3`	이미지 3 (주요 UI 배경)	✅ 예	배경 색상/이미지, 패딩, 테두리 반경
`.nf-vwr-image1`	이미지 1	✅ 예	배경 이미지, 크기, 위치
`.nf-vwr-image2`	이미지 2	✅ 예	배경 이미지, 크기, 위치
`.nf-vwr-title`	제목	✅ 예	텍스트, 색상, 글꼴 크기, 가시성
`.nf-vwr-description`	내용	✅ 예	텍스트, 색상, 글꼴 크기, 가시성
`#nf-vwr-cancel`	대기실 종료 버튼	✅ 예	텍스트, 색상, 불투명도, URL 속성
요소 ID (예: `nf-vwr-*`)	-	❌ 수정 금지	시스템 기능에 필요
클래스 이름 (예: `nf-vwr-*`)	-	⚠️ 주의	일부 클래스는 시스템에서 사용됨

개요

코드 에디터를 사용하면 코드 형식(HTML/CSS)으로 디자인 속성을 직접 수정하여 사용자 정의에 최대한의 유연성을 제공할 수 있습니다. 모든 코드 변경 사항은 미리보기 영역에 즉시 반영되어 수정 결과를 실시간으로 확인할 수 있습니다.

코드 에디터 접근

에디터 모드로 전환

코드 에디터에 접근하려면:

간편 설정에서 간편 설정에서 에디터 모드로 전환
코드 편집을 위한 코드 에디터가 사용 가능해짐
간편 설정 설정에서 생성된 코드가 자동으로 로드됨

에디터 모드 제한

에디터 모드(코드 에디터)에 들어가면 간편 설정이 비활성화됩니다. 에디터 모드에서 간편 설정 모드로 돌아갈 수 있지만, 간편 설정 모드로 다시 전환하면 에디터 모드에서 입력한 모든 사용자 정의 코드가 자동으로 재설정되고 손실됩니다.

코드 구조 개요

코드 에디터는 간편 설정에서 구성된 설정에 해당하는 HTML/CSS 코드를 로드합니다. 코드 구조를 이해하면 목표로 하는 수정을 할 수 있습니다.

CSS 변수 시스템

차단실 코드는 스타일링을 제어하기 위해 --nf-* 접두사가 붙은 CSS 사용자 정의 속성(변수)을 사용합니다. 이를 통해 :root 선택자를 통한 중앙 집중식 사용자 정의가 가능합니다. 클래스 스타일을 직접 편집하지 않고도 이러한 변수를 수정하여 요소의 모양을 변경할 수 있습니다.

주요 CSS 변수 카테고리:

레이아웃 변수: --nf-grid-template-*, --nf-justify-content, --nf-align-items
글꼴 변수: --nf-main-font-family, --nf-title-font-family 등
색상 변수: --nf-main-text-color, --nf-title-color, --nf-bg-color 등
표시 변수: --nf-title-display, --nf-desc-display, --nf-close-display 등
이미지 변수: --nf-image1-url, --nf-image2-url, --nf-bg-url 등

예제 - CSS 변수를 통한 수정:

:root {
  --nf-title-color: #ff0000;        /* 제목 색상 변경 */
  --nf-title-font-size: 28px;        /* 제목 글꼴 크기 변경 */
  --nf-bg-color: #1a1a1a;           /* 배경 색상 변경 */
  --nf-close-display: none;          /* 대기실 종료 버튼 숨기기 */
}

예제 - 직접 CSS 재정의:

.nf-vwr-title {
  color: #ff0000;                     /* 직접 재정의 */
  font-size: 28px;
}

CSS 변수 vs 직접 CSS

CSS 변수: 중앙 집중식 제어와 일관성을 위해 :root에서 수정
직접 CSS: 특정 변경을 위해 특정 클래스 재정의
직접 CSS 재정의가 CSS 변수보다 우선순위가 높습니다

HTML 구조 매핑

HTML 구조는 다음과 같이 간편 설정 설정에 매핑됩니다:

배경 레이어

<div class="nf-vwr-background">

간편 설정 설정: 배경 이미지
사용자 정의 가능: 배경 색상 (background-color), 배경 이미지 (background-image), 패딩
위치: 전체 화면 배경 (주요 UI 요소 외부)

주요 UI 컨테이너

<div class="nf-vwr-image3">

간편 설정 설정: 이미지 3 (주요 UI 요소 배경)
사용자 정의 가능: 배경 색상/이미지, 패딩, 테두리 반경, 너비, 최대 너비
위치: 주요 차단실 UI 컨테이너

이미지

<div class="nf-vwr-image1"></div>
<div class="nf-vwr-image2"></div>

간편 설정 설정: 이미지 1, 이미지 2
사용자 정의 가능: 배경 이미지 URL, 크기, 위치, 가시성 (display: none 사용)
위치: 주요 UI 컨테이너 내부

제목

<div class="nf-vwr-title">Please enter the title</div>

간편 설정 설정: 제목
사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 글꼴 두께, 가시성
위치: 주요 UI 컨테이너 내부

내용

<div class="nf-vwr-description nf-vwr-pause-hidden">Please enter the content</div>

간편 설정 설정: 내용
사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 가시성
위치: 주요 UI 컨테이너 내부
참고: nf-vwr-pause-hidden 클래스는 시스템에서 일시정지 상태 관리에 사용됩니다

대기실 종료 버튼

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="">
  <span>닫기</span>
</button>

간편 설정 설정: 대기실 종료 버튼
사용자 정의 가능:
- 버튼 텍스트 (<span> 태그 내부)
- 색상 (background-color, color, border-color)
- 표시 가시성
- URL 속성 (data-nf-cancel-url="")
⚠️ 중요:
- 요소 ID (id="nf-vwr-cancel")를 수정하지 마세요
- data-nf-cancel-url 속성을 제거하지 마세요 (리디렉션 기능에 필요)
- <span> 태그 구조는 시스템에서 사용됩니다

푸터 정보

<div class="nf-vwr-copyright">Powered by <strong>NetFUNNEL</strong> | © STCLab Inc.</div>

간편 설정 설정: 푸터 텍스트 (색상 사용자 정의를 통해)
사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 가시성
위치: 주요 UI 컨테이너 내부
참고: .nf-vwr-info 클래스는 CSS에 정의되어 있지만 구성에 따라 HTML 구조에 나타나지 않을 수 있습니다

안전한 사용자 정의 영역

✅ 수정 가능

CSS 속성:

색상 (color, background-color)
글꼴 속성 (font-size, font-weight, font-family)
간격 (padding, margin, gap)
레이아웃 (display, flex-direction, align-items, justify-content)
크기 조정 (width, max-width, min-width, height)
시각 효과 (border-radius, opacity, box-shadow)
배경 이미지 (background-image, background-size, background-position)

HTML 콘텐츠:

ID가 없는 요소의 텍스트 콘텐츠 (예: .nf-vwr-title, .nf-vwr-description)
버튼 텍스트 (예: "Close")
푸터 텍스트

HTML 속성:

data-nf-cancel-url 속성 값 (리디렉션 URL용)
<html> 태그의 lang 속성 (언어용)
<title> 태그 콘텐츠
<link rel="icon"> href 속성 (파비콘용)

⚠️ 주의하여 수정

요소 ID:

id="nf-vwr-*"가 있는 모든 요소는 시스템에서 사용됩니다
ID를 수정하면 기능이 손상됩니다
규칙: 요소 ID를 변경하거나 제거하지 마세요

클래스 이름:

일부 클래스는 시스템에서 참조될 수 있습니다
규칙: 확실하지 않으면 저장하기 전에 미리보기에서 변경 사항을 테스트하세요

애니메이션:

@keyframes marquee - 마키 애니메이션
@keyframes entering - 진입 애니메이션
규칙: 필요한 경우에만 애니메이션 타이밍을 수정하세요 - 애니메이션 구조를 제거하거나 크게 변경하지 마세요

❌ 수정 금지

중요한 요소 ID:

id="nf-vwr-cancel"

중요한 속성:

data-nf-cancel-url 속성 이름 (버튼 기능에 필요)
동적 콘텐츠 컨테이너의 요소 구조

일반적인 사용자 정의 예제

제목 텍스트 및 스타일 변경

방법 1: CSS 변수 사용 (권장)

:root {
  --nf-title-color: #ff0000;        /* 제목 색상 변경 */
  --nf-title-font-size: 28px;        /* 글꼴 크기 증가 */
}

방법 2: 직접 CSS 재정의

.nf-vwr-title {
  color: #ff0000;           /* 제목 색상 변경 */
  font-size: 28px;          /* 글꼴 크기 증가 */
  font-weight: 700;         /* 더 굵게 */
}

<div class="nf-vwr-title">Access Denied</div>

요소 숨기기

방법 1: CSS 변수 사용

:root {
  --nf-desc-display: none;          /* 내용 숨기기 */
  --nf-title-display: none;         /* 제목 숨기기 */
  --nf-close-display: none;          /* 대기실 종료 버튼 숨기기 */
}

방법 2: 직접 CSS Display

.nf-vwr-description {
  display: none;            /* 내용 숨기기 */
}

방법 3: HTML 주석

<!-- <div class="nf-vwr-description">Please enter the content</div> -->

색상 변경

CSS 변수 사용 (권장):

:root {
  --nf-bg-color: #1a1a1a;           /* 어두운 배경 */
  --nf-image3-bg-color: #ffffff;    /* 흰색 주요 UI 배경 */
  --nf-title-color: #ff0000;        /* 빨간색 제목 */
  --nf-desc-color: #666666;         /* 회색 내용 */
  --nf-info-color: #99999980;       /* 밝은 회색 경고 메시지 */
  --nf-copyright-color: #99999980;   /* 밝은 회색 푸터 */
  --nf-close-bg-color: #ffffffff;   /* 흰색 버튼 배경 */
  --nf-close-text-color: #4B4C4Fff;  /* 버튼 텍스트 색상 */
  --nf-close-border-color: #D4D5D8ff; /* 버튼 테두리 색상 */
}

직접 CSS 재정의:

.nf-vwr-background {
  background-color: #1a1a1a;  /* 어두운 배경 */
}

.nf-vwr-image3 {
  background-color: #ffffff;  /* 흰색 배경 */
}

.nf-vwr-title {
  color: #ff0000;            /* 빨간색 제목 */
}

.nf-vwr-description {
  color: #666666;            /* 회색 내용 */
}

.nf-vwr-copyright {
  color: #999999;            /* 밝은 회색 푸터 */
}

대기실 종료 버튼 수정

버튼 텍스트:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">
  <span>돌아가기</span>
</button>

CSS 변수를 통한 버튼 스타일링:

:root {
  --nf-close-bg-color: #ff0000;      /* 빨간색 배경 */
  --nf-close-text-color: #ffffff;    /* 흰색 텍스트 */
  --nf-close-border-color: #ff0000;   /* 빨간색 테두리 */
}

직접 CSS를 통한 버튼 스타일링:

.nf-vwr-cancel {
  background-color: #ff0000;  /* 빨간색 배경 */
  color: #ffffff;              /* 흰색 텍스트 */
  border-color: #ff0000;       /* 빨간색 테두리 */
  border-radius: 12px;         /* 더 둥글게 */
}

버튼 URL:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://yoursite.com/home">
  <span>닫기</span>
</button>

배경 이미지 추가

CSS 변수 사용 (권장):

:root {
  --nf-bg-url: url('https://example.com/background.jpg');
  --nf-image1-url: url('https://example.com/image1.png');
  --nf-image2-url: url('https://example.com/image2.png');
  --nf-image3-url: url('https://example.com/image3.png');
}

직접 CSS 재정의:

.nf-vwr-background {
  background-image: url('https://example.com/background.jpg');
  background-size: cover;
  background-position: center;
}

.nf-vwr-image1 {
  background-image: url('https://example.com/image1.png');
  background-size: contain;
}

고급 프로그래밍 사례

사례 1: 동적 언어 전환

시나리오: 사용자 로케일에 따라 다른 언어로 차단실 표시.

구현:

사용자 로케일 감지 (브라우저 언어, URL 매개변수 등)
JavaScript를 사용하여 텍스트 콘텐츠를 동적으로 수정
필요한 경우 언어별 글꼴에 대한 CSS 업데이트

예제:

// 로케일 감지 및 텍스트 업데이트
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Access Denied', description: 'You do not have permission to access this page.' },
  'ko': { title: '접근 거부', description: '이 페이지에 접근할 권한이 없습니다.' },
  'ja': { title: 'アクセス拒否', description: 'このページにアクセスする権限がありません。' }
};

const title = document.querySelector('.nf-vwr-title');
const description = document.querySelector('.nf-vwr-description');
title.textContent = translations[locale]?.title || translations['en'].title;
description.textContent = translations[locale]?.description || translations['en'].description;

규칙:

✅ ID가 없는 요소의 텍스트 콘텐츠 수정 가능
✅ 동적 콘텐츠를 위한 JavaScript 추가 가능
❌ 요소 ID 수정 금지
⚠️ 다양한 로케일에서 철저히 테스트

사례 2: 사용자 정의 자산 추가

시나리오: 사용자 정의 글꼴, 이미지 또는 기타 자산 로드.

구현:

외부 리소스에 대해 <head>에 <link> 태그 추가
이미지에 대해 CSS에서 url() 사용
자산이 접근 가능한지 확인 (CORS, HTTPS)

예제 - 사용자 정의 글꼴:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

.nf-vwr-title {
  font-family: 'Roboto', sans-serif;
}

예제 - 사용자 정의 이미지:

.nf-vwr-image1 {
  background-image: url('https://cdn.example.com/custom-image.png');
}

규칙:

✅ <head>에 <link> 태그 추가 가능
✅ CSS url()에서 외부 URL 사용 가능
⚠️ 자산이 접근 가능한지 확인 (CORS 활성화, HTTPS)
⚠️ 로딩 성능 고려

사례 3: 사용자 정의 로직 추가

시나리오: 향상된 기능을 위한 사용자 정의 JavaScript 추가.

구현:

</body> 태그 앞에 <script> 태그 추가
기존 요소 ID를 사용하여 대기실 요소와 상호 작용
NetFUNNEL의 핵심 기능을 재정의하지 마세요

예제 - 사용자 정의 분석:

<body>
  <!-- ... 기존 코드 ... -->
  
  <script>
    // 사용자 정의 분석 추적
    document.getElementById('nf-vwr-cancel').addEventListener('click', function() {
      // 대기실 종료 버튼 클릭 추적
      console.log('Exit waiting room button clicked');
      // 분석 서비스로 전송
    });
  </script>
</body>

규칙:

✅ 사용자 정의 <script> 태그 추가 가능
✅ 기존 요소에 이벤트 리스너 추가 가능
❌ 필수 요소 ID 제거 또는 수정 금지
⚠️ 호환성을 보장하기 위해 철저히 테스트

사례 4: 조건부 스타일링

시나리오: 조건(시간대, 사용자 유형 등)에 따라 다른 스타일 적용.

구현:

JavaScript를 사용하여 조건 감지
CSS 클래스 추가/제거 또는 인라인 스타일 수정
직접 스타일 수정이 아닌 CSS 클래스를 사용하여 스타일링

예제 - 시간 기반 스타일링:

<script>
  const hour = new Date().getHours();
  const background = document.querySelector('.nf-vwr-background');
  
  if (hour >= 6 && hour < 18) {
    background.style.backgroundColor = '#f0f0f0'; // 라이트 모드
  } else {
    background.style.backgroundColor = '#1a1a1a'; // 다크 모드
  }
</script>

규칙:

✅ JavaScript를 통해 CSS 클래스 및 인라인 스타일 수정 가능
✅ 조건부 로직 추가 가능
⚠️ 변경 사항이 핵심 기능을 손상시키지 않는지 확인
⚠️ 다양한 조건에서 테스트

사례 5: 사용자 정의 애니메이션

시나리오: 사용자 정의 애니메이션 또는 전환 추가.

구현:

CSS에서 @keyframes 정의
요소에 애니메이션 적용
기존 애니메이션과 간섭하지 않는지 확인

예제:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nf-vwr-title {
  animation: fadeIn 1s ease-in;
}

규칙:

✅ 사용자 정의 @keyframes 추가 가능
✅ CSS 애니메이션 추가 가능
⚠️ 기존 @keyframes 수정 금지 (있는 경우 marquee, entering)
⚠️ 애니메이션 성능 테스트

프로그래밍 규칙 요약

✅ 허용된 작업

CSS 수정: 모든 CSS 속성 수정 가능 (색상, 글꼴, 간격, 레이아웃 등)
HTML 콘텐츠: ID가 없는 요소의 텍스트 콘텐츠 수정 가능
HTML 속성: 안전한 속성 수정 가능 (data-nf-cancel-url, lang, title, href)
리소스 추가: 글꼴, 스타일시트 등을 위한 <link> 태그 추가 가능
스크립트 추가: 추가 기능을 위한 사용자 정의 <script> 태그 추가 가능
요소 추가: 새로운 HTML 요소 추가 가능 (주의 - 레이아웃에 영향을 줄 수 있음)

⚠️ 제한된 작업

요소 ID: nf-vwr-*로 시작하는 ID를 수정하거나 제거하지 마세요
필수 속성: data-nf-cancel-url 속성 이름 제거 금지
핵심 애니메이션: 기존 @keyframes 수정 금지 (있는 경우 marquee, entering)
요소 구조: 동적 콘텐츠 컨테이너의 구조 수정 시 주의

❌ 금지된 작업

필수 요소 제거: ID가 있는 요소 제거 금지
기능 손상: 대기실 기능을 손상시키는 변경 금지
보안 위험: 보안 위험을 초래하는 스크립트 추가 금지

베스트 프랙티스

코드 구성

주석 사용: 사용자 정의 섹션을 식별하기 위한 주석 추가
구조 유지: 코드를 체계적이고 읽기 쉽게 유지
점진적 테스트: 작은 변경을 하고 자주 테스트

미리보기 모니터링

각 변경 후 확인: 각 수정 후 미리보기에서 변경 사항 확인
다양한 시나리오 테스트: 미리보기 컨트롤을 사용하여 다양한 해상도에서 테스트
기능 검증: 모든 대화형 요소가 올바르게 작동하는지 확인

안전 가이드라인

코드 백업: 주요 변경 전에 코드 백업 저장
철저한 테스트: 수정 후 모든 기능 테스트
변경 사항 문서화: 수정된 내용과 이유에 대한 메모 유지

중요

주요 변경을 하기 전에 항상 코드를 백업하세요. 간편 설정 모드로 재설정한 후에는 코드 변경 사항을 복구할 수 없습니다.

차단실 사용자 정의

차단실은 접근이 제한되었을 때 사용자에게 알리도록 설계되었습니다. 핵심 기능을 유지하면서 모든 시각적 요소를 사용자 정의할 수 있습니다. 디자인이 차단 상태를 명확하게 전달하면서 사용자에게 적절한 다음 단계를 제공하도록 하세요.

빠른 참조​

개요​

코드 에디터 접근​

에디터 모드로 전환​

코드 구조 개요​

CSS 변수 시스템​

HTML 구조 매핑​

배경 레이어​

주요 UI 컨테이너​

이미지​

제목​

내용​

대기실 종료 버튼​

푸터 정보​

안전한 사용자 정의 영역​

✅ 수정 가능​

⚠️ 주의하여 수정​

❌ 수정 금지​

일반적인 사용자 정의 예제​

제목 텍스트 및 스타일 변경​

요소 숨기기​

색상 변경​

대기실 종료 버튼 수정​

배경 이미지 추가​

고급 프로그래밍 사례​

사례 1: 동적 언어 전환​

사례 2: 사용자 정의 자산 추가​

사례 3: 사용자 정의 로직 추가​

사례 4: 조건부 스타일링​

사례 5: 사용자 정의 애니메이션​

프로그래밍 규칙 요약​

✅ 허용된 작업​

⚠️ 제한된 작업​

❌ 금지된 작업​

베스트 프랙티스​

코드 구성​

미리보기 모니터링​

안전 가이드라인​