편집 화면
대기실 편집 화면은 대기실의 디자인과 외관을 사용자 정의하기 위한 포괄적인 인터페이스를 제공합니다. 이 화면은 여러 주요 영역으로 나뉘어 함께 작동하여 대기실 디자인을 생성하고 수정하는 데 도움이 됩니다.
화면 구조
편집 화면은 네 가지 주요 영역으로 구성됩니다:
- 미리보기 컨트롤 - 미리보기 표시 옵션을 위한 컨트롤
- 미리보기 영역 - 디자인 변경 사항의 실시간 미리보기
- 간편 설정 - 간단한 UI 기반 디자인 속성 편집
- 코드 에디터 - 고급 코드 기반 편집
미리보기 컨트롤
미리보기 컨트롤에는 미리보기 표시 자체를 관리하기 위한 버튼과 컨트롤이 포함되어 있습니다. 이 영역은 편집 및 보기 설정 옵션을 제공하여 해상도 설정 조정(예: 751x1117), 전체 보기 모드 전환을 허용합니다.
이 영역을 사용하면 다양한 조건에서 대기실 디자인을 미리보기하고 다양한 시나리오에서 디자인이 제대로 작동하는지 확인할 수 있습니다.
자세한 내용은 미리보기 컨트롤 문서를 참조하세요.
미리보기 영역
미리보기 영역은 대기실 디자인의 실시간 미리보기를 표시합니다. 간편 설정 또는 코드 에디터에서 속성을 수정하면 변경 사항이 이 미리보기에 즉시 반영되어 사용자에게 대기실이 어떻게 표시될지 정확히 볼 수 있습니다.
미리보기는 제목, 설명, 이미지 및 버튼과 같은 대화형 요소를 포함한 모든 대기실 요소를 표시합니다. 표시되는 특정 요소는 대기실 유형(기본 대기실, 사전 대기실, 사후 대기실 또는 차단실)에 따라 다릅니다. 모든 디자인 변경 사항이 실제 사용자 경험에 어떤 영향을 미치는지 실시간으로 볼 수 있습니다.
간편 설정
간편 설정은 코드를 작성하지 않고 디자인 속성을 수정하기 위한 직관적인 인터페이스를 제공합니다. 간편 설정 및 에디터 모드 간 전환할 수 있으며(자세한 내용은 모드 선택 참조), 언어, 테마 (해당하는 대기실 유형의 경우), 정렬 및 색상을 포함한 다양한 설정을 구성할 수 있습니다.
이 영역에는 제목, 설명 (px 단위의 글꼴 크기 컨트롤 포함), 파비콘 및 웹 페이지 제목, 이미지 1/2/3 및 배경 이미지 (색상 및 불투명도 설정 포함), 그리고 대기실 유형에 따라 다양한 기능 옵션이 포함됩니다. 모든 변경 사항은 미리보기 영역에 즉시 반영됩니다.
간편 설정에 대한 자세한 내용은 특정 대기실 유형에 대한 간편 설정 문서를 참조하세요:
코드 에디터
코드 에디터는 대기실 디자인에 대한 완전한 제어가 필요한 사용자를 위한 고급 편집 기능을 제공합니다. 이 영역을 사용하면 코드 형식으로 디자인 속성을 직접 수정하여 사용자 정의에 최대한의 유연성을 제공할 수 있습니다.
주요 기능
- 직접 코드 편집: 코드 형식으로 디자인 속성 수정
- 완전한 제어: HTML/CSS 코드에 대한 완전한 액세스
- 고급 사용자 정의: 사용자 정의 디자인 및 동작 구현
- 코드 검증: 구문 확인 및 검증
사용 시기
코드 에디터는 다음에 이상적입니다:
- 고급 사용자 정의: 간편 설정에서 사용할 수 없는 기능이 필요한 경우
- 사용자 정의 브랜딩: 특정 브랜드 요구사항 구현
- 복잡한 레이아웃: 복잡하거나 고유한 레이아웃 생성
- 코드 기반 워크플로: 기존 코드 또는 템플릿으로 작업하는 경우
에디터 모드(코드 에디터)에 들어가면 간편 설정이 비활성화됩니다. 에디터 모드에서 간편 설정 모드로 돌아갈 수 있지만, 간편 설정 모드로 다시 전환하면 에디터 모드에서 입력한 모든 사용자 정의 코드가 자동으로 재설정되고 손실됩니다.
코드 에디터에 대한 자세한 내용은 특정 대기실 유형에 대한 코드 에디터 문서를 참조하세요:
워크플로
일반적인 편집 워크플로
- 간편 설정으로 시작: 간편 설정을 사용하여 초기 디자인 변경 수행
- 변경 사항 미리보기: 미리보기 영역을 모니터링하여 실시간으로 변경 사항 확인
- 미리보기 조정: 미리보기 컨트롤을 사용하여 다른 해상도에서 보기
- 고급 편집 (필요한 경우): 고급 사용자 정의를 위해 코드 에디터로 전환
- 변경 사항 확인: 디자인에 만족하면 변경 사항 저장
베스트 프랙티스
- 자주 미리보기 사용: 변경 사항이 예상대로 보이는지 정기적으로 미리보기 확인
- 다양한 해상도 테스트: 미리보기 컨트롤을 사용하여 다양한 장치에서 디자인이 어떻게 표시되는지 테스트
- 간단하게 시작: 코드 에디터로 이동하기 전에 간편 설정으로 시작
- 정기적으로 저장: 작업 손실을 방지하기 위해 주기적으로 변경 사항 확인
편집 화면 구조는 모든 대기실 유형에서 일관되지만 특정 기능 및 설정은 다릅니다. 사용 가능한 설정 및 옵션에 대한 자세한 내용은 특정 대기실 유형에 대한 문서를 참조하세요.