본문으로 건너뛰기
버전: 4.6.1

코드 에디터

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

빠른 참조​

코드 요소간편 설정 설정사용자 정의 가능참고 사항
.nf-vwr-background배경 이미지✅ 예배경 색상/이미지, 패딩
.nf-vwr-image3이미지 3 (주요 UI 배경)✅ 예배경 색상/이미지, 패딩, 테두리 반경
.nf-vwr-image1이미지 1✅ 예배경 이미지, 크기, 위치
.nf-vwr-image2이미지 2✅ 예배경 이미지, 크기, 위치
.nf-vwr-title제목✅ 예텍스트, 색상, 글꼴 크기, 가시성
#nf-vwr-live-message라이브 메시지 미리보기✅ 예글꼴 크기, 색상, 가시성
#nf-vwr-metrics-event-time이벤트 시간 (색상 사용자 정의 2차)✅ 예텍스트, 색상, 글꼴 크기, 가시성
#nf-vwr-metrics-essential메트릭스 컨테이너⚠️ 제한적레이아웃만 (ID 수정 금지)
.nf-vwr-metrics-timer-container타이머 컨테이너✅ 예레이아웃, 표시, 가시성
#nf-vwr-timer-day-value타이머 - 일⚠️ 제한적색상만 (값은 동적)
#nf-vwr-timer-hour-value타이머 - 시간⚠️ 제한적색상만 (값은 동적)
#nf-vwr-timer-minute-value타이머 - 분⚠️ 제한적색상만 (값은 동적)
#nf-vwr-timer-second-value타이머 - 초⚠️ 제한적색상만 (값은 동적)
.nf-vwr-timer-unit-wrapper타이머 래퍼✅ 예타이머 단위의 레이아웃, 간격
.nf-vwr-timer-unit-dots타이머 점 구분자✅ 예색상, 가시성
:root CSS 변수모든 디자인 속성✅ 예변수 값 (이름은 변경하지 마세요)
#nf-vwr-entering-message진입 메시지✅ 예텍스트, 색상, 글꼴 크기, 가시성
.nf-vwr-description내용✅ 예텍스트, 색상, 글꼴 크기, 가시성
#nf-vwr-cancel대기실 종료 버튼✅ 예텍스트, 색상, 불투명도, URL 속성
요소 ID (예: nf-vwr-*)-❌ 수정 금지시스템 기능에 필요
클래스 이름 (예: nf-vwr-*)-⚠️ 주의일부 클래스는 시스템에서 사용됨

개요​

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

코드 에디터 접근​

에디터 모드로 전환​

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

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

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

코드 구조 개요​

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

CSS 변수 시스템​

코드는 다양한 디자인 속성을 제어하기 위해 :root에 정의된 CSS 사용자 정의 속성(변수)을 사용합니다. 이러한 변수를 수정하여 외관을 사용자 정의할 수 있습니다:

  • 레이아웃 변수: --nf-grid-template-areas, --nf-justify-content, --nf-align-items
  • 타이포그래피 변수: --nf-title-*, --nf-desc-*, --nf-live-message-*
  • 색상 변수: --nf-main-text-color, --nf-main-point-color, --nf-*-color
  • 이미지 변수: --nf-image1-*, --nf-image2-*, --nf-image3-*, --nf-bg-*
  • 표시 변수: --nf-*-display (display 속성을 통해 가시성 제어)

사용자 정의: :root 선택자에서 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 id="nf-vwr-live-message" class="nf-vwr-live-message"></div>
  • 간편 설정 설정: 라이브 메시지 미리보기
  • 사용자 정의 가능: 글꼴 크기, 색상, 가시성 (display: none 또는 display: flex 사용)
  • ⚠️ 중요: 콘텐츠는 동적으로 채워집니다 - ID를 수정하지 마세요
  • 위치: 주요 UI 컨테이너 내부

이벤트 시간​

<div id="nf-vwr-metrics-essential" class="nf-vwr-metrics-essential">
  <p id="nf-vwr-metrics-event-time" class="nf-vwr-metrics-event-time">2025년 12월 01일</p>
  <div class="nf-vwr-metrics-timer-container">
    <!-- 타이머 단위 -->
  </div>
</div>
  • 간편 설정 설정: 이벤트 시간 (색상 사용자 정의 2차)
  • 사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 글꼴 두께, 가시성
  • 위치: 주요 UI 컨테이너 내부, 타이머가 포함된 nf-vwr-metrics-essential 컨테이너 내부
  • ⚠️ 중요:
    • id="nf-vwr-metrics-essential" 또는 id="nf-vwr-metrics-event-time"을 수정하지 마세요
    • 이벤트 시간은 타이머가 포함된 메트릭스 컨테이너로 감싸져 있습니다

타이머 (일, 시간, 분, 초)​

<div class="nf-vwr-timer-unit-wrapper">
  <div id="nf-vwr-timer-card-day" class="nf-vwr-timer-unit">
    <div id="nf-vwr-timer-day-value" class="nf-vwr-timer-unit-number"></div>
    <div class="nf-vwr-timer-unit-bottom"></div>
  </div>
  <span>일</span>
</div>
<span class="nf-vwr-timer-unit-dots">
  <svg>...</svg>
</span>
  • 간편 설정 설정: 타이머 토글
  • 사용자 정의 가능:
    • 타이머 단위 스타일링 (배경, 테두리, 색상)
    • 값 색상 (#nf-vwr-timer-day-value, #nf-vwr-timer-hour-value, #nf-vwr-timer-minute-value, #nf-vwr-timer-second-value - 색상만)
    • 레이블 텍스트 (일, 시, 분, 초) - wrapper 내부의 <span> 텍스트
    • 타이머 단위 사이의 점 SVG 스타일링
    • 가시성 (컨테이너에 display: none 사용)
  • ⚠️ 중요:
    • 요소 ID (id="nf-vwr-timer-*")를 수정하지 마세요
    • 값 텍스트는 동적으로 업데이트됩니다
    • 타이머 값은 자동으로 계산되고 업데이트됩니다
    • 타이머 단위는 레이블 span이 있는 nf-vwr-timer-unit-wrapper로 감싸져 있습니다
    • 타이머 단위 사이의 점은 nf-vwr-timer-unit-dots 클래스를 사용합니다

진입 메시지​

<div id="nf-vwr-entering-message" class="nf-vwr-entering-message">You will enter the site shortly.</div>
  • 간편 설정 설정: 진입 메시지
  • 사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 가시성
  • 위치: 주요 UI 컨테이너 내부

진입 애니메이션​

<div id="nf-vwr-entering" class="nf-vwr-entering">
  <div class="nf-vwr-entering-dot1"></div>
  <div class="nf-vwr-entering-dot2"></div>
  <div class="nf-vwr-entering-dot3"></div>
</div>
  • 간편 설정 설정: 진입 애니메이션
  • 사용자 정의 가능:
    • 점 색상 (background-color)
    • 애니메이션 타이밍 (CSS animation 속성을 통해)
    • 가시성 (display: none 사용)
  • ⚠️ 중요:
    • 요소 ID (id="nf-vwr-entering")를 수정하지 마세요
    • @keyframes entering 애니메이션을 수정하지 마세요

마키 애니메이션​

<div id="nf-vwr-marquee" class="nf-vwr-marquee-background">
  <div class="nf-vwr-marquee-object"></div>
</div>
  • 간편 설정 설정: 마키 애니메이션
  • 사용자 정의 가능:
    • 배경 색상
    • 객체 색상 (background-color)
    • 애니메이션 타이밍 (CSS animation 속성을 통해)
    • 가시성 (display: none 사용)
  • ⚠️ 중요:
    • 요소 ID (id="nf-vwr-marquee")를 수정하지 마세요
    • @keyframes marquee 애니메이션을 수정하지 마세요

내용​

<div class="nf-vwr-description">Please enter the content</div>
  • 간편 설정 설정: 내용
  • 사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 가시성
  • 위치: 주요 UI 컨테이너 내부

대기실 종료 버튼​

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="">
  <span>닫기</span>
</button>
  • 간편 설정 설정: 대기실 종료 버튼
  • 사용자 정의 가능:
    • 버튼 텍스트 (<span> 태그 내부)
    • 색상 (background-color, color)
    • 불투명도
    • URL 속성 (data-nf-cancel-url="")
  • ⚠️ 중요:
    • 요소 ID (id="nf-vwr-cancel")를 수정하지 마세요
    • data-nf-cancel-url 속성을 제거하지 마세요 (리디렉션 기능에 필요)
    • 버튼 텍스트는 <span> 요소로 감싸져 있습니다

푸터 정보​

<div class="nf-vwr-info">Refreshing the page, going back, or closing the popup and reconnecting may reset your waiting time.</div>
<div class="nf-vwr-copyright">Powered by <strong>NetFUNNEL</strong> | © STCLab Inc.</div>
  • 간편 설정 설정: 푸터 텍스트 (색상 사용자 정의를 통해)
  • 사용자 정의 가능: 텍스트 콘텐츠, 색상, 글꼴 크기, 가시성
  • 위치: 주요 UI 컨테이너 내부

안전한 사용자 정의 영역​

✅ 수정 가능​

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)
  • 이벤트 시간 텍스트 (#nf-vwr-metrics-event-time)
  • 레이블 텍스트 (예: "Day", "Hour", "Minute", "Sec")
  • 버튼 텍스트 (예: "Close")
  • 진입 메시지 텍스트 (#nf-vwr-entering-message)

HTML 속성:

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

CSS 변수:

  • :root의 모든 CSS 사용자 정의 속성 (예: --nf-title-color, --nf-bg-color)
  • 변수 값을 수정하여 디자인 속성을 전역적으로 사용자 정의할 수 있습니다

⚠️ 주의하여 수정​

요소 ID:

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

동적 콘텐츠:

  • 동적 값을 표시하는 ID가 있는 요소:
    • #nf-vwr-timer-day-value (일 카운트다운)
    • #nf-vwr-timer-hour-value (시간 카운트다운)
    • #nf-vwr-timer-minute-value (분 카운트다운)
    • #nf-vwr-timer-second-value (초 카운트다운)
    • #nf-vwr-live-message (라이브 메시지 콘텐츠)
  • 규칙: CSS 스타일링(색상, 글꼴 크기 등)만 수정하세요 - 요소 구조 또는 ID를 수정하지 마세요

애니메이션:

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

클래스 이름:

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

❌ 수정 금지​

중요한 요소 ID:

  • id="nf-vwr-live-message"
  • id="nf-vwr-entering-message"
  • id="nf-vwr-entering"
  • id="nf-vwr-marquee"
  • id="nf-vwr-metrics-essential"
  • id="nf-vwr-metrics-event-time"
  • id="nf-vwr-timer-card-day"
  • id="nf-vwr-timer-card-hour"
  • id="nf-vwr-timer-card-minute"
  • id="nf-vwr-timer-card-second"
  • id="nf-vwr-timer-day-value"
  • id="nf-vwr-timer-hour-value"
  • id="nf-vwr-timer-minute-value"
  • id="nf-vwr-timer-second-value"
  • id="nf-vwr-cancel"

중요한 속성:

  • data-nf-cancel-url 속성 이름 (버튼 기능에 필요)
  • 타이머 컨테이너의 요소 구조
  • 동적 콘텐츠 컨테이너의 요소 구조
  • 타이머 계산 로직
  • :root의 CSS 변수 이름 (변수 값은 수정 가능하지만 이름은 변경하지 마세요)

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

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

.nf-vwr-title {
  color: #ff0000;           /* 제목 색상 변경 */
  font-size: 28px;          /* 글꼴 크기 증가 */
  font-weight: 700;         /* 더 굵게 */
}
<div class="nf-vwr-title">Event Starting Soon</div>

타이머 스타일링 사용자 정의​

타이머 단위 배경:

.nf-vwr-timer-unit {
  background: #1a1a1a;      /* 어두운 배경 */
  border: 2px solid #3354ff; /* 파란색 테두리 */
}

타이머 값 색상:

#nf-vwr-timer-day-value,
#nf-vwr-timer-hour-value,
#nf-vwr-timer-minute-value,
#nf-vwr-timer-second-value {
  color: #ff0000;           /* 빨간색 타이머 값 */
}

활성 타이머 단위:

.unit-active {
  background: #00ff00;      /* 활성 시 녹색 */
  border: 2px solid #00ff00;
}

타이머 단위 래퍼:

.nf-vwr-timer-unit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

타이머 단위 점:

.nf-vwr-timer-unit-dots {
  color: #4c4c4c;           /* 점 색상 사용자 정의 */
}

요소 숨기기​

방법 1: CSS Display

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

#nf-vwr-entering {
  display: none;            /* 진입 애니메이션 숨기기 */
}

방법 2: HTML 주석

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

색상 변경​

배경 색상:

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

주요 UI 배경:

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

텍스트 색상:

.nf-vwr-title {
  color: #3354ff;            /* 파란색 제목 */
}

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

#nf-vwr-metrics-event-time {
  color: #ff6600;            /* 주황색 이벤트 시간 */
}

버튼 수정​

버튼 텍스트:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">
  <span>Leave Event</span>
</button>

버튼 스타일링:

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

버튼 URL:

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

배경 이미지 추가​

배경 이미지:

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

이미지 1:

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

CSS 변수 사용​

CSS 변수 값 수정:

:root {
  --nf-title-color: #ff0000;        /* 제목 색상 변경 */
  --nf-title-font-size: 28px;        /* 제목 글꼴 크기 변경 */
  --nf-bg-color: #1a1a1a;            /* 배경 색상 변경 */
  --nf-main-point-color: #00ff00;    /* 포인트 색상 변경 */
}

참고: CSS 변수는 :root에 정의되어 있으며, 값을 수정하여 디자인 속성을 전역적으로 변경할 수 있습니다. 변수 이름은 변경하지 마세요. 값만 사용자 정의할 수 있습니다.

고급 프로그래밍 사례​

사례 1: 사용자 정의 타이머 스타일링​

시나리오: 남은 시간에 따라 타이머 단위에 다른 스타일 적용.

구현:

  1. CSS를 사용하여 타이머 단위 스타일링
  2. JavaScript가 타이머 상태에 따라 클래스를 추가/제거할 수 있음
  3. 활성 타이머 단위에 .unit-active 클래스 사용

예제:

.nf-vwr-timer-unit {
  background: #4c4c4c;
  transition: all 0.3s ease;
}

.unit-active {
  background: #3354ff;
  border: 1px solid #EEE;
  transform: scale(1.05);
}

규칙:

  • ✅ 타이머 단위에 대한 CSS 수정 가능
  • ✅ 전환 및 효과 추가 가능
  • ❌ 타이머 값 ID 수정 금지
  • ⚠️ 스타일링 변경 후 타이머 기능 테스트

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

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

구현:

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

예제 - 사용자 정의 페이드 인:

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

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

규칙:

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

사례 3: 동적 언어 전환​

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

구현:

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

예제:

// 로케일 감지 및 텍스트 업데이트
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Event Starting Soon', description: 'Please wait' },
  '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 수정 금지
  • ⚠️ 다양한 로케일에서 철저히 테스트

프로그래밍 규칙 요약​

✅ 허용된 작업​

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

⚠️ 제한된 작업​

  1. 요소 ID: nf-vwr-*로 시작하는 ID를 수정하거나 제거하지 마세요
  2. 타이머 값: 타이머 값 요소 ID 또는 구조를 수정하지 마세요
  3. 필수 속성: data-nf-cancel-url 속성 이름 제거 금지
  4. 핵심 애니메이션: 기존 @keyframes 수정 금지 (marquee, entering)
  5. 요소 구조: 타이머 또는 동적 콘텐츠 컨테이너의 구조 수정 시 주의
  6. CSS 변수 이름: :root의 CSS 변수 이름을 변경하지 마세요 (값은 수정 가능)

❌ 금지된 작업​

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

베스트 프랙티스​

코드 구성​

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

미리보기 모니터링​

  • 각 변경 후 확인: 각 수정 후 미리보기에서 변경 사항 확인
  • 타이머 기능 테스트: 타이머가 올바르게 표시되고 업데이트되는지 확인
  • 기능 검증: 모든 대화형 요소가 올바르게 작동하는지 확인

안전 가이드라인​

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

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

타이머 사용자 정의

타이머는 사전 대기실의 핵심 기능입니다. 타이머 스타일링(색상, 테두리, 배경)을 사용자 정의할 수 있지만, 올바른 기능을 위해 타이머 값 요소 ID를 보존해야 합니다.