간편 설정

간편 설정은 코드를 작성하지 않고 대기실 디자인 속성을 수정할 수 있는 직관적인 인터페이스를 제공합니다. 이 문서는 간편 설정의 각 설정이 미리보기에 어떤 영향을 미치는지, 그리고 변경 사항이 실시간으로 어떻게 반영되는지 설명합니다.

빠른 참조

설정	영향받는 요소	사용자 정의 가능한 속성	참고 사항
언어 선택	모든 텍스트 요소	언어 (한국어, 영어, 일본어, 스페인어)	고정 언어, 모든 UI 텍스트에 영향
테마 선택	전체 레이아웃	테마 (공지 강조, 이미지 강조)	구조 및 요소 배치 변경
정렬 설정	주요 UI 요소	그리드 위치 (9-그리드 레이아웃)	기본값: 상단 중앙
색상 사용자 정의 (1차)	레이블, 푸터 텍스트	색상	내 앞의 대기 레이블, 예상 대기 시간 레이블, 접속 가능 시간 레이블, 내 뒤의 대기 레이블, 경고 메시지, 푸터
색상 사용자 정의 (2차)	값, 진행 표시줄	색상	내 앞의 대기 숫자값, 프로그레스바 색상
제목	제목 요소	텍스트, 서체, 글꼴 크기, 글꼴 색상, 가시성	눈 아이콘 토글 사용 가능
라이브 메시지 미리보기	라이브 메시지 표시	서체, 글꼴 크기, 글꼴 색상, 가시성	세그먼트 설정에서 구성된 콘텐츠
내용	내용 텍스트	텍스트, 서체, 글꼴 크기, 글꼴 색상, 가시성	눈 아이콘 토글 사용 가능
파비콘	브라우저 탭 아이콘	이미지 파일 또는 URL	URL 트리거 통합에만 적용
웹 페이지 제목	브라우저 탭 제목	텍스트	URL 트리거 통합에만 적용
이미지 1	이미지 1 영역	이미지 파일/URL, 색상, 불투명도, 가시성	테마에 따른 위치
이미지 2	이미지 2 영역	이미지 파일/URL, 색상, 불투명도, 가시성	테마에 따른 위치
이미지 3	주요 UI 배경	색상, 불투명도, 가시성	주요 UI 요소 내 배경
배경 이미지	화면 배경	이미지 파일/URL, 색상, 불투명도	주요 UI 요소 외부 영역
대기 진행률	프로그레스바	토글 (활성화/비활성화)	활성화 시 프로그레스바에 대기 진행률을 숫자로 표시
진입 처리 상태	진입 처리 상태 표시	토글 (활성화/비활성화)	색상으로 구분되며, 대기 시간에 따라 세 가지 상태로 표시
진입 현황 안내 메시지	안내 메시지 표시	토글 (활성화/비활성화)	대기 진행률과 진입 처리 상태에 따라 안내 메시지 표시
예상 대기 시간	대기 시간 표시	토글 (활성화/비활성화)	활성화 시 "00:00:00" 형식으로 표시
접속 가능 시간	접속 가능 시간 표시	토글 (활성화/비활성화)	대기실에 예상 접속 시간을 노출
내 뒤의 대기	대기열 위치 표시	토글 (활성화/비활성화)	활성화 시 숫자 값 표시
대기실 종료 버튼	대기실 종료 버튼	토글, URL, 텍스트, 글꼴 색상, 글꼴 불투명도, 배경 색상, 배경 불투명도	리디렉션 기능을 위해 URL 필요

개요

간편 설정을 통해 간단한 UI 컨트롤로 대기실 디자인의 다양한 측면을 사용자 정의할 수 있습니다. 모든 변경 사항은 미리보기 영역에 즉시 반영되어 수정 결과를 실시간으로 확인할 수 있습니다.

언어 설정

언어 선택

대기실 인터페이스의 언어를 구성합니다.

• 사용 가능한 언어: 네 가지 언어가 지원됩니다: 한국어, 영어, 일본어, 스페인어
• 고정 언어: 고정된 편집 불가능한 언어로, 대기실 인터페이스의 텍스트 요소를 변경합니다

테마 및 레이아웃

테마 선택

사용 가능한 대기실 테마 중에서 선택합니다.

• 사용 가능한 테마: 공지 강조, 이미지 강조
• 테마별 기능: 각 테마는 요소가 표시되는 방식에 영향을 미치는 고유한 특성을 가집니다

각 테마에 대한 자세한 내용(특성, 사용 사례 및 예제 포함)은 테마 문서를 참조하세요.

정렬 설정

화면에서 주요 UI 요소의 위치를 구성합니다.

• 9-그리드 레이아웃: 화면이 9-그리드 레이아웃(3x3)으로 나뉩니다
• 위치 옵션: 주요 UI 요소를 배치할 그리드 위치를 선택합니다

색상 사용자 정의

두 개의 색상 선택기를 사용하여 다양한 대기실 요소의 색상을 수정합니다.

첫 번째 색상 선택기

첫 번째 색상 선택기는 다음 요소에 영향을 미칩니다:

• 내 앞의 대기 (텍스트 레이블)
• 예상 대기 시간 (텍스트 레이블, 예: "예상 대기 시간 1 ~ 5분")
• 접속 가능 시간 (텍스트 레이블, 예: "접속 가능 시간 13:34 ~ 13:38")
• 내 뒤의 대기 (텍스트 레이블, 예: "내 뒤의 대기 241")
• 경고 메시지: "새로고침, 뒤로가기, 또는 팝업창을 닫은 뒤 재접속할 경우 대기 시간이 초기화될 수 있습니다."
• 푸터 텍스트: "Powered by NetFUNNEL | © STCLab Inc."

두 번째 색상 선택기

두 번째 색상 선택기는 다음 요소에 영향을 미칩니다:

• 내 앞의 대기 숫자값: 숫자 값 (예: "10,642")
• 프로그레스바 색상: 프로그레스바의 색상

타이포그래피 설정

제목

대기실 제목을 구성합니다.

• 텍스트 입력: 제목 텍스트 입력 (예: "제목을 입력하세요")
• 서체 선택: 사용할 서체(폰트) 선택
• 글꼴 크기: 픽셀 단위로 글꼴 크기 조정 (예: 20px)
• 글꼴 색상: 색상 선택기를 사용하여 글꼴 색상 선택
• 가시성 토글: 눈 아이콘 (👁️) 버튼을 사용하여 UI에서 제목 요소 표시/숨김

라이브 메시지 미리보기

라이브 메시지 미리보기 섹션 표시 설정을 구성합니다.

• 서체 선택: 사용할 서체(폰트) 선택
• 글꼴 크기: 픽셀 단위로 글꼴 크기 조정 (예: 14px)
• 글꼴 색상: 라이브 메시지 표시 영역의 글꼴 색상 선택
• 가시성 토글: 눈 아이콘 (👁️) 버튼을 사용하여 UI에서 라이브 메시지 미리보기 요소 표시/숨김

라이브 메시지 콘텐츠 구성

실제 라이브 메시지 콘텐츠는 대기실 디자인이 아닌 세그먼트의 대기실 적용 설정에서 구성됩니다. 기본 제어 세그먼트의 경우 대기실 적용 - 기본 제어 세그먼트를 참조하세요. 구간 제어 세그먼트의 경우 대기실 적용 - 구간 제어 세그먼트를 참조하세요.

내용

대기실 내용을 구성합니다.

• 텍스트 입력: 내용 텍스트 입력 (예: "내용을 입력하세요")
• 서체 선택: 사용할 서체(폰트) 선택
• 글꼴 크기: 픽셀 단위로 글꼴 크기 조정 (예: 16px)
• 글꼴 색상: 색상 선택기를 사용하여 글꼴 색상 선택
• 가시성 토글: 눈 아이콘 (👁️) 버튼을 사용하여 UI에서 내용 요소 표시/숨김

시각적 요소

파비콘

파비콘(브라우저 탭 아이콘)을 업로드하고 구성합니다.

• 파일 업로드 옵션:
  • 로컬 파일 업로드: 로컬 장치에서 파비콘 이미지 파일을 직접 업로드
  • URL 입력: 이미지 URL(http:// 또는 https://)을 입력하여 웹에서 이미지를 실시간으로 로드
• 적용 시점: 대기실이 브라우저에서 별도 페이지로 열릴 때 파비콘이 표시됩니다 (즉, URL 트리거 통합 사용 시)

파일 업로드 규칙

로컬 파일 업로드:

• 이미지를 드래그 앤 드롭하거나 파일 업로드
• 최대 업로드 크기: 2MB
• 업로드 가능한 파일 유형: .jpeg, .jpg, .png, .gif, .svg, .webp

URL 입력:

• http:// 또는 https://로 시작하는 이미지 URL 입력
• 로드를 클릭하여 URL에서 이미지 로드
• 지원 형식: .jpeg, .jpg, .png, .gif, .svg, .webp
• 지원 형식이 아니면 이미지를 로드할 수 없습니다
• 취소를 사용하여 URL 입력 취소
• 확인을 클릭하여 이미지 적용

URL 트리거 통합

URL 트리거 통합에 대한 정보는 통합 방법 개요 및 URL 트리거 통합 문서를 참조하세요.

웹 페이지 제목

브라우저 탭에 표시되는 웹 페이지 제목을 구성합니다.

• 텍스트 입력: 웹 페이지 제목 입력 (예: "대기실")
• 설명: 웹 브라우저 탭에 표시되는 제목
• 적용 시점: 대기실이 브라우저에서 별도 페이지로 열릴 때 웹 페이지 제목이 표시됩니다 (즉, URL 트리거 통합 사용 시)

URL 트리거 통합

URL 트리거 통합에 대한 정보는 통합 방법 개요 및 URL 트리거 통합 문서를 참조하세요.

이미지 (이미지 1, 2, 3)

대기실용 이미지를 업로드하고 구성합니다.

• 이미지 위치: 이미지 1, 이미지 2, 이미지 3의 의미는 선택한 테마에 따라 다릅니다. 미리보기 영역을 참조하여 이미지 1과 이미지 2가 표시되는 위치를 확인하세요. 이미지 3은 대기실의 주요 UI 요소 내 배경 색상을 나타냅니다.
• 가시성 토글: 눈 아이콘 (👁️) 버튼을 사용하여 UI에서 각 이미지 요소 표시/숨김
• 색상 대체: 이미지가 업로드되지 않은 경우 색상 선택기를 사용하여 단일 색상을 지정할 수 있습니다
• 불투명도: 모든 이미지와 색상에는 투명도를 조정하는 불투명도 옵션이 있습니다 (예: 0%, 100%)
• 파일 업로드 옵션:
  • 로컬 파일 업로드: 로컬 장치에서 이미지 파일을 직접 업로드
  • URL 입력: 이미지 URL(http:// 또는 https://)을 입력하여 웹에서 이미지를 실시간으로 로드

파일 업로드 규칙

로컬 파일 업로드:

• 이미지를 드래그 앤 드롭하거나 파일 업로드
• 최대 업로드 크기: 2MB
• 업로드 가능한 파일 유형: .jpeg, .jpg, .png, .gif, .svg, .webp

URL 입력:

• http:// 또는 https://로 시작하는 이미지 URL 입력
• 로드를 클릭하여 URL에서 이미지 로드
• 지원 형식: .jpeg, .jpg, .png, .gif, .svg, .webp
• 지원 형식이 아니면 이미지를 로드할 수 없습니다
• 취소를 사용하여 URL 입력 취소
• 확인을 클릭하여 이미지 적용

배경 이미지

대기실 배경을 구성합니다.

• 배경 영역: 배경 이미지는 주요 UI 요소 외부 영역(전체 화면 배경)에 적용됩니다
• 파일 업로드: 배경 이미지 파일 업로드
• 색상 대체: 이미지가 업로드되지 않은 경우 배경 색상 설정 (예: #2f3033)
• 불투명도: 불투명도 백분율 조정 (예: 60%)

기능 옵션

대기 진행률

프로그레스바에 대기 진행률을 숫자로 노출합니다.

• 토글: 대기 진행률 표시 활성화/비활성화
• 설명: 프로그레스바에 대기 진행률을 숫자로 표시

진입 처리 상태

진입 처리 상태는 색상으로 구분되며, 대기 시간에 따라 세 가지 상태로 노출합니다.

• 토글: 진입 처리 상태 표시 활성화/비활성화
• 설명: 색상으로 구분되며, 대기 시간에 따라 세 가지 상태로 표시

진입 현황 안내 메시지

대기 진행률과 진입 처리 상태에 따라 안내 메시지가 표시되며, 선택한 메시지는 해당 상황에 맞춰 출력됩니다.

• 토글: 진입 현황 안내 메시지 표시 활성화/비활성화
• 설명: 대기 진행률과 진입 처리 상태에 따라 안내 메시지가 표시됩니다

진입 현황 안내 메시지 상세

진입 현황 안내 메시지는 대기 진행률에 따라 다음의 안내 메시지 중 하나가 표출됩니다.

대기 진행률 90% 이상일 때:

• "곧 입장하실 차례입니다. 자동으로 화면이 전환됩니다."
• "진입 준비가 완료되었습니다. 서비스를 곧 이용하실 수 있어요."
• "잠시 후 입장합니다. 페이지를 닫지 마세요!"
• "잠시 후 연결됩니다. 서비스 시작까지 얼마 남지 않았습니다."

대기열 처리가 원활할 때:

• "진입 처리 속도가 회복되었습니다. 예상보다 빠른 입장이 가능할 수 있습니다."
• "현재 시스템 상태가 매우 양호합니다. 대기열이 빠르게 줄고 있습니다."
• "이용자들의 빠른 이동으로 대기 순번이 빠르게 줄고 있습니다."
• "{n}명이 대기열을 종료했습니다. 곧 순번이 앞당겨질 수 있습니다."

대기열 처리가 보통 수준일 때:

• "현재 순서에 따라 안정적으로 진입이 진행되고 있습니다."
• "현재 대기열이 순차적으로 처리되고 있습니다. 조금만 더 기다려 주세요."
• "대기자가 일정하게 줄어들고 있습니다. 곧 차례가 다가옵니다."
• "접속 흐름이 안정적으로 유지되고 있습니다."

대기열 처리가 지연될 때:

• "현재 접속자가 급증하여 대기 속도가 다소 느려지고 있습니다. 양해 부탁드립니다."
• "서버 처리 속도가 감소하고 있어, 예상보다 진입까지 시간이 더 소요될 수 있습니다."
• "진입한 사용자의 평균 이용 시간이 길어지면서 대기 시간이 함께 늘어나고 있습니다."
• "접속자가 많아 일시적으로 진입 속도가 저하되고 있습니다."
• "일시적인 트래픽 증가로 처리 속도가 다소 느려질 수 있습니다."

예상 대기 시간

예상 대기 시간 표시를 구성합니다.

• 토글: 예상 대기 시간 표시 활성화/비활성화
• 설명: 대기 창에 예상 대기 시간 표시

접속 가능 시간

대기실에 예상 접속 시간을 노출합니다.

• 토글: 접속 가능 시간 표시 활성화/비활성화
• 설명: 대기실에 예상 접속 시간을 노출

내 뒤의 대기

대기열 위치 표시를 구성합니다.

• 토글: 내 뒤의 대기 표시 활성화/비활성화
• 설명: 뒤에서 대기 중인 사용자 수 표시

대기실 종료 버튼

대기실 종료 버튼의 스타일링 및 동작을 구성합니다.

• 토글: 대기실 종료 버튼 활성화/비활성화
• URL 구성: 리디렉션 URL 설정 (http:// 또는 https://로 시작해야 함)
  • URL이 입력된 경우: 대기실 종료 버튼을 클릭하면 지정된 URL로 리디렉션됩니다
  • URL이 입력되지 않은 경우: 에이전트 유형에 따라 버튼이 표시되지 않거나 지정된 작업을 수행합니다
• 버튼 텍스트: 버튼 텍스트 입력 (예: "닫기")
• 글꼴 색상: 색상 선택기를 사용하여 글꼴 색상 선택 (예: #7f8083)
• 글꼴 불투명도: 글꼴 불투명도 백분율 조정 (예: 100%)
• 버튼 배경 색상: 색상 선택기를 사용하여 버튼 배경 색상 선택 (예: #edeef1)
• 버튼 불투명도: 버튼 배경 불투명도 백분율 조정 (예: 100%)

베스트 프랙티스

언어 설정

• 타겟 고객 정렬: 주요 사용자 기반과 일치하는 언어를 선택하세요. 국제 사용자를 대상으로 하는 경우 다양한 언어에 대해 여러 대기실 디자인을 만드는 것을 고려하세요.
• 일관성: 선택한 언어가 메인 웹사이트 또는 애플리케이션에서 사용되는 언어와 일치하여 원활한 사용자 경험을 제공하도록 하세요.

다국어 서비스

서비스가 다국어 지원을 제공하고 사용자 기본 설정에 따라 다른 언어로 대기실을 표시해야 하는 경우, 간편 설정 모드는 단일 언어 설정만 지원합니다. 사용자 로케일에 따라 동적 언어 전환을 구현하려면 코드 에디터 모드를 사용하여 프로그래밍 방식으로 로케일 변경 로직을 구현해야 합니다. 구현 세부 사항은 코드 에디터를 참조하세요.

레이아웃

• 정렬 설정: 기본 정렬은 상단 중앙입니다. 정렬 선택에 대한 특정 베스트 프랙티스는 없습니다. 미리보기를 확인하여 레이아웃이 어떻게 나타나는지 확인하고 디자인 기본 설정에 따라 정렬을 조정하세요.

색상 사용자 정의

대비 및 가독성:

• 접근성을 위해 텍스트 색상과 배경 색상 간에 충분한 대비를 확보하세요 (WCAG AA 표준: 일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1)
• 다양한 조명 조건에서 모든 텍스트가 읽을 수 있도록 미리보기에서 색상 조합을 테스트하세요

브랜드 일관성:

• 브랜드 아이덴티티를 유지하기 위해 첫 번째 색상 선택기(레이블 및 푸터에 영향)에 브랜드의 주요 색상을 사용하세요
• 시각적 계층을 만들기 위해 두 번째 색상 선택기(값 및 진행 표시줄에 영향)에 보완 색상 또는 강조 색상을 사용하세요

시각적 계층:

• 중요한 정보(대기 번호, 예상 시간)에 더 어두운 색상 또는 더 채도가 높은 색상을 사용하세요
• 보조 정보(레이블, 푸터 텍스트)에 더 밝은 색상 또는 덜 채도가 높은 색상을 사용하세요

타이포그래피 설정

제목:

권장 메시지:

• "잠시만 기다려 주세요"
• "대기열에 있습니다"
• "거의 다 왔습니다"
• "기다려 주셔서 감사합니다"
• "경험을 준비하고 있습니다"

베스트 프랙티스:

• 모든 화면 크기에서 잘 표시되도록 제목을 간결하게 유지하세요 (이상적으로 5-10단어)
• 최적의 가독성을 위해 20px-32px 사이의 글꼴 크기를 사용하세요 (강조의 경우 28px+, 컴팩트 디자인의 경우 20-24px)
• 제목 색상이 배경 이미지 또는 색상과 잘 대비되도록 하세요

내용:

권장 메시지:

• "요청을 처리하는 동안 잠시만 기다려 주세요. 자동으로 리디렉션됩니다."
• "현재 트래픽이 많습니다. 기다려 주셔서 감사합니다."
• "대기열에서의 위치를 확보하고 있습니다. 이 페이지에 머물러 주세요."
• "특별한 것을 준비하고 있습니다. 잠시만 기다려 주세요."
• "거의 다 왔습니다! 경험을 설정하고 있습니다."

베스트 프랙티스:

• 사용자를 압도하지 않도록 내용을 1-2문장으로 유지하세요
• 본문 텍스트 가독성을 위해 14px-18px 사이의 글꼴 크기를 사용하세요

라이브 메시지 미리보기:

• 세그먼트의 라이브 메시지 콘텐츠와 글꼴 크기 및 색상을 조정하여 일관성을 확보하세요
• 배경에 대해 눈에 띄지만 읽을 수 있는 색상을 사용하세요

시각적 요소

이미지 (이미지 1, 2, 3):

• 파일 크기 최적화: 로드 시간을 줄이기 위해 업로드 전에 이미지를 압축하세요 (500KB 미만 목표)
• 이미지 크기: 선택한 테마에 적합한 종횡비를 가진 이미지를 사용하세요. 올바른 표시를 확인하기 위해 미리보기에서 테스트하세요
• 색상 대체: 항상 디자인을 보완하는 색상 대체를 설정하세요 (이미지 로딩 중 또는 이미지 로드 실패 시 표시됨)
• 불투명도 설정: 텍스트 콘텐츠를 압도하지 않는 미묘한 오버레이를 만들기 위해 불투명도(60-80%)를 사용하세요

배경 이미지:

• 주요 UI 요소와 주의를 끌지 않는 미묘한 배경 이미지를 선택하세요
• 텍스트 가독성을 위해 배경 이미지에 더 낮은 불투명도(40-60%)를 사용하세요
• 성능 향상을 위해 복잡한 이미지 대신 그라데이션 또는 패턴 배경을 사용하는 것을 고려하세요
• 충분한 대비를 확보하기 위해 주요 UI 요소와 함께 배경 이미지를 항상 테스트하세요

파비콘 및 웹 페이지 제목:

• 대기실이 새 탭에서 열릴 때 즉시 인식할 수 있도록 브랜드의 파비콘을 사용하세요
• 브라우저 탭에서 잘림을 방지하기 위해 웹 페이지 제목을 간결하게 유지하세요 (60자 미만)
• 일관성을 위해 제목에 브랜드 이름을 포함하세요

기능 옵션

예상 대기 시간:

• 대기 시간이 예측 가능하고 상대적으로 짧은 경우(< 5분) 활성화하세요. 사용자는 대기 기간에 대한 투명성을 높이 평가합니다
• 매우 긴 대기 시간이나 예측 불가능한 시나리오의 경우 잘못된 기대를 설정하지 않도록 비활성화하는 것을 고려하세요

내 뒤의 대기:

• 사용자가 대기열에서의 위치를 아는 것이 도움이 되는 경우 활성화하세요 (예: 제한된 용량 이벤트, 제품 출시)
• 대기열 위치가 불안을 유발할 수 있는 일반적인 트래픽 제어 시나리오의 경우 비활성화하는 것을 고려하세요

대기실 종료 버튼:

버튼 텍스트 권장 사항:

• "대기열 나가기"
• "돌아가기"
• "대기 취소"
• "대기열 종료"
• "홈으로 돌아가기"

베스트 프랙티스:

• URL 구성: 사용자에게 종료 옵션을 제공하기 위해 항상 의미 있는 리디렉션 URL(예: 홈페이지로 돌아가기, 대체 페이지 또는 지원 페이지)을 제공하세요
• 스타일링: 버튼이 쉽게 보이지만 인터페이스를 지배하지 않도록 하세요. 보조 작업임을 나타내는 색상(예: 회색 톤)을 사용하세요
• 접근성: 가독성을 위해 버튼 텍스트와 배경 간에 충분한 대비를 유지하세요

---