간편 설정
간편 설정은 코드를 작성하지 않고 사후 대기실 디자인 속성을 수정할 수 있는 직관적인 인터페이스를 제공합니다. 이 문서는 간편 설정의 각 설정이 미리보기에 어떤 영향을 미치는지, 그리고 변경 사항이 실시간으로 어떻게 반영되는지 설명합니다.
빠른 참조
| 설정 | 영향받는 요소 | 사용자 정의 가능한 속성 | 참고 사항 |
|---|---|---|---|
| 언어 선택 | 모든 텍스트 요소 | 언어 (한국어, 영어, 일본어, 스페인어) | 고정 언어, 모든 UI 텍스트에 영향 |
| 테마 선택 | 전체 레이아웃 | 테마 | 구조 및 요소 배치 변경 |
| 정렬 설정 | 주요 UI 요소 | 그리드 위치 (9-그리드 레이아웃) | 기본값: 상단 중앙 |
| 색상 사용자 정의 | 푸터 텍스트 | 색상 | 푸터 |
| 제목 | 제목 요소 | 텍스트, 서체, 글꼴 크기, 글꼴 색상, 가시성 | 눈 아이콘 토글 사용 가능 |
| 내용 | 내용 텍스트 | 텍스트, 서체, 글꼴 크기, 글꼴 색상, 가시성 | 눈 아이콘 토글 사용 가능 |
| 파비콘 | 브라우저 탭 아이콘 | 이미지 파일 또는 URL | URL 트리거 통합에만 적용 |
| 웹 페이지 제목 | 브라우저 탭 제목 | 텍스트 | URL 트리거 통합에만 적용 |
| 이미지 1 | 이미지 1 영역 | 이미지 파일/URL, 색상, 불투명도, 가시성 | 테마에 따른 위치 |
| 이미지 2 | 이미지 2 영역 | 이미지 파일/URL, 색상, 불투명도, 가시성 | 테마에 따른 위치 |
| 이미지 3 | 주요 UI 배경 | 색상, 불투명도, 가시성 | 주요 UI 요소 내 배경 |
| 배경 이미지 | 화면 배경 | 이미지 파일/URL, 색상, 불투명도 | 주요 UI 요소 외부 영역 |
| 대기실 종료 버튼 | 대기실 종료 버튼 | 토글, URL, 텍스트, 글꼴 색상, 글꼴 불투명도, 배경 색상, 배경 불투명도 | 리디렉션 기능을 위해 URL 필요 |
개요
간편 설정을 통해 간단한 UI 컨트롤로 사후 대기실 디자인의 다양한 측면을 사용자 정의할 수 있습니다. 모든 변경 사항은 미리보기 영역에 즉시 반영되어 수정 결과를 실시간으로 확인할 수 있습니다.
언어 설정
언어 선택
사후 대기실 인터페이스의 언어를 구성합니다.
- 사용 가능한 언어: 네 가지 언어가 지원됩니다: 한국어, 영어, 일본어, 스페인어
- 고정 언어: 고정된 편집 불가능한 언어로, 사후 대기실 인터페이스의 텍스트 요소를 변경합니다
테마 및 레이아웃
테마 선택
사용 가능한 사후 대기실 테마 중에서 선택합니다.
- 사용 가능한 테마: 다양한 테마가 제공됩니다
- 테마별 기능: 각 테마는 요소가 표시되는 방식에 영향을 미치는 고유한 특성을 가집니다
정렬 설정
화면에서 주요 UI 요소의 위치를 구성합니다.
- 9-그리드 레이아웃: 화면이 9-그리드 레이아웃(3x3)으로 나뉩니다
- 위치 옵션: 주요 UI 요소를 배치할 그리드 위치를 선택합니다
색상 사용자 정의
색상 선택기를 사용하여 다양한 사후 대기실 요소의 색상을 수정합니다.
색상 선택기는 다음 요소에 영향을 미칩니다:
- 푸터 텍스트: "Powered by NetFUNNEL | © STCLab Inc."
타이포그래피 설정
제목
사후 대기실 제목을 구성합니다.
- 텍스트 입력: 제목 텍스트 입력 (예: "제목을 입력하세요")
- 서체 선택: 사용할 글꼴 선택
- 글꼴 크기: 픽셀 단위로 글꼴 크기 조정 (예: 20px)
- 글꼴 색상: 색상 선택기를 사용하여 글꼴 색상 선택
- 가시성 토글: 눈 아이콘 (👁️) 버튼을 사용하여 UI에서 제목 요소 표시/숨김
내용
사후 대기실 내용을 구성합니다.
- 텍스트 입력: 내용 텍스트 입력 (예: "내용을 입력하세요")
- 서체 선택: 사용할 글꼴 선택
- 글꼴 크기: 픽셀 단위로 글꼴 크기 조정 (예: 16px)
- 글꼴 색상: 색상 선택기를 사용하여 글꼴 색상 선택
- 가시성 토글: 눈 아이콘 (👁️) 버튼을 사용하여 UI에서 내용 요소 표시/숨김
시각적 요소
파비콘
파비콘(브라우저 탭 아이콘)을 업로드하고 구성합니다.
- 파일 업로드 옵션:
- 로컬 파일 업로드: 로컬 장치에서 파비콘 이미지 파일을 직접 업로드
- URL 입력: 이미지 URL(http:// 또는 https://)을 입력하여 웹에서 이미지를 실시간으로 로드
- 적용 시점: 대기실이 브라우저에서 별도 페이지로 열릴 때 파비콘이 표시됩니다 (즉, URL 트리거 통합 사용 시)
파일 업로드 규칙
로컬 파일 업로드:
- 이미지를 드래그 앤 드롭하거나 파일 업로드
- 최대 업로드 크기: 2MB
- 업로드 가능한 파일 유형: .jpeg, .jpg, .png, .gif, .svg, .ico
URL 입력:
http://또는https://로 시작하는 이미지 URL 입력- 로드를 클릭하여 URL에서 이미지 로드
- 지원 형식: .jpeg, .jpg, .png, .gif, .svg, .ico
- 지원 형식이 아니면 이미지를 로드할 수 없습니다
- 취소를 사용하여 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%)
기능 옵션
대기실 종료 버튼
대기실 종료 버튼의 스타일링 및 동작을 구성합니다.
- 토글: 대기실 종료 버튼 활성화/비활성화
- 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자 미만)
- 일관성을 위해 제목에 브랜드 이름을 포함하세요
기능 옵션
대기실 종료 버튼:
버튼 텍스트 권장 사항:
- "닫기"
- "완료"
- "계속"
- "종료"
- "돌아가기"
베스트 프랙티스:
- URL 구성: 사용자에게 종료 옵션을 제공하기 위해 항상 의미 있는 리디렉션 URL(예: 홈페이지로 돌아가기, 주요 이벤트 페이지 또는 지원 페이지)을 제공하세요
- 스타일링: 버튼이 쉽게 보이지만 인터페이스를 지배하지 않도록 하세요. 보조 작업임을 나타내는 색상(예: 회색 톤)을 사용하세요
- 접근성: 가독성을 위해 버튼 텍스트와 배경 간에 충분한 대비를 유지하세요