간편 설정

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

빠른 참조

설정	영향받는 요소	사용자 정의 가능한 속성	참고 사항
언어 선택	모든 텍스트 요소	언어 (한국어, 영어, 일본어, 스페인어)	고정 언어, 모든 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(예: 홈페이지로 돌아가기, 지원 페이지 또는 로그인 페이지)을 제공하세요
• 스타일링: 버튼이 쉽게 보이지만 인터페이스를 지배하지 않도록 하세요. 보조 작업임을 나타내는 색상(예: 회색 톤)을 사용하세요
• 접근성: 가독성을 위해 버튼 텍스트와 배경 간에 충분한 대비를 유지하세요
• 사용자 경험: 합법적인 접근 요구가 있을 수 있는 사용자를 위한 명확한 경로를 제공하세요 (예: 지원 또는 로그인 페이지로 리디렉션)

---