웹 팝업 설정

팝업 설정 패널을 사용하여 웹 팝업 콘텐츠 레이아웃의 스타일을 지정하고 배치합니다. 페이지 탭과 + 페이지 추가는 패널 상단에 있습니다. 여러 페이지 작업하기를 참조하세요.

일반 설정은 팝업 전체의 모양과 배치를 다룹니다. 현재 페이지는 편집 중인 페이지의 미디어와 크기를 다룹니다.

이미지 및 비디오

레이아웃에 하나 이상의 미디어 블록이 포함된 경우 현재 페이지를 엽니다. 각 미디어 블록에는 미리보기와 컨트롤이 있습니다.

이미지 변경을 클릭하여 프로젝트의 미디어 스토리지에서 파일을 선택하거나 이미지 URL을 직접 붙여넣거나 편집합니다.
맞춤(자연스럽게, 채우기 또는 포함)으로 이미지가 프레임을 채우는 방식을 설정합니다. 맞춤은 항상 해당 영역을 덮는 배경 이미지에는 표시되지 않습니다.
선택적으로 블러(0~20px)로 이미지를 부드럽게 만듭니다.
배경 미디어의 경우에만 흐리게(0~100%)를 사용하여 어두운 스크림을 추가하여 이미지 위의 텍스트가 읽기 쉽게 유지되도록 합니다.

다크 테마 이미지

다크 테마가 활성화되면 각 이미지 블록에 다크 테마 이미지 행이 추가됩니다.

이미지 변경을 클릭하거나 **이미지 URL(다크 테마)**을 설정하여 다크 모드에 다른 이미지(예: 어두운 잉크의 로고)를 선택합니다.
비워두면 두 구성표 모두에서 밝은 이미지 URL이 계속 표시됩니다.

다크 테마 이미지는 배경 이미지나 비디오 포스터를 포함하여 해당 블록의 이미지가 그려지는 모든 곳에 적용됩니다.

비디오

미디어를 비디오로 설정합니다.
비디오 URL을 입력합니다: 비디오 파일에 대한 직접 링크입니다. 비디오는 외부 URL만 허용합니다. 미디어 스토리지에 비디오를 업로드할 수 없습니다. “빠른 시작”(때로는 “웹 최적화”라고도 함)이 활성화된 MP4(H.264 비디오, AAC 오디오)로 내보내면 브라우저가 전체 파일을 다운로드하기 전에 재생을 시작할 수 있습니다. URL 로드에 실패하면 방문자는 포스터만 보게 됩니다.
반복은 기본적으로 켜져 있어 비디오가 계속해서 재생됩니다. 한 번 재생 후 중지하려면 끕니다.
컨트롤 표시를 켜면 브라우저의 내장 재생, 일시 중지 및 볼륨 컨트롤이 표시됩니다. 비디오는 항상 음소거 상태로 시작됩니다. 이 옵션이 없으면 방문자는 소리를 켤 방법이 없습니다.
선택적으로 포스터 URL을 설정합니다: 비디오가 로드되는 동안 표시되는 이미지입니다. 권장됩니다. 비디오를 지원하지 않는 이전 팝업 스크립트에서는 포스터만 표시됩니다. 비워두면 해당 방문자는 비디오가 있어야 할 위치에 아무것도 보지 못합니다.

미디어 레이아웃

일부 레이아웃에는 미디어 블록의 배치 설정이 있는 템플릿 변수 섹션도 추가됩니다. 레이아웃에 텍스트 옆에 미디어가 있는 경우 이미지 너비(팝업 너비의 비율, 백분율)와 이미지 위치(왼쪽 또는 오른쪽)를 설정합니다.

템플릿 변수 섹션은 현재 레이아웃에 이와 같은 설정이 있는 경우에만 나타납니다. 하단 바 레이아웃에서는 이미지 컨트롤 대신 버튼 너비를 제공합니다.

팝업 크기 및 스타일

현재 페이지 → 크기에서 너비와 높이를 비워두면 콘텐츠에 맞게 크기가 조절되는 팝업이 되거나, 픽셀 단위로 고정 크기를 설정합니다. 여러 페이지가 있는 팝업에서는 각 페이지마다 고유한 크기를 가집니다.
페이지가 사용 가능한 높이를 채워야 할 때 전체 높이를 켭니다.
일반 설정에서 팝업의 모서리 둥글기 및 그림자에 대해 모서리 반경과 그림자를 설정합니다.
애니메이션을 선택합니다: 팝업이 나타나는 방식(기본값, 없음, 페이드 또는 슬라이드).

다크 테마가 활성화되면 그림자는 해/달 구성표 스위치를 따릅니다. 스위치를 다크로 설정하여 밝은 팔레트의 그림자와 별도로 다크 팔레트의 그림자를 편집합니다. 밝은 페이지에 맞춰진 그림자는 어두운 페이지에서는 종종 보이지 않으므로 두 가지는 보통 다른 값이 필요합니다. 다크 그림자를 건드리지 않으면 두 구성표 모두에서 밝은 그림자 값을 계속 사용합니다.

색상

색상을 클릭하여 팝업의 색상 팔레트를 확장합니다.
팝업 배경과 버튼에 적용되는 강조 색상에 대해 배경과 **강조(버튼)**를 설정합니다.
본문 텍스트와 캡션 및 아이브로우와 같은 보조 텍스트에 대해 텍스트와 보조 텍스트를 설정합니다.
레이아웃에 배경 이미지 위에 텍스트가 있는 경우 해당 텍스트에 대해 이미지 위 텍스트를 설정합니다.

다크 모드

색상에서 다크 테마 활성화를 켜면 기기가 어두운 색상 구성표로 설정된 방문자를 위해 팝업에 두 번째 팔레트를 제공합니다. 이 옵션을 끄면 팝업은 모든 방문자에게 항상 위의 밝은 팔레트로 렌더링됩니다.
색상 필드 위의 해/달 스위치를 사용하여 편집할 팔레트를 선택합니다. 캔버스는 해당 구성표로 다시 그려집니다.
밝은 색상에서 자동 생성을 클릭하여 현재 밝은 색상에서 다크 팔레트를 (재)생성합니다. 배경과 표면은 어두워지고 텍스트는 밝아집니다. 강조와 이미지 위 텍스트는 변경되지 않고 그대로 유지됩니다. 나중에 다섯 개 필드 중 하나를 편집하여 미세 조정할 수 있습니다.

다크 테마 활성화를 다시 끄면 다크 팔레트가 유지됩니다. 다시 켜면 처음부터 다시 생성하는 대신 편집 내용이 복원됩니다.

다크 테마가 활성화된 팝업에서 미리보기를 열면 미리보기 닫기(Esc) 옆에 동일한 해/달 스위치가 나타납니다. 전체 크기 미리보기에서도 두 팔레트를 모두 확인할 수 있습니다.

방문자의 브라우저는 OS 수준의 다크 모드 설정에 따라 어떤 팔레트를 볼지 결정합니다. 팝업 자체에는 다크/라이트 토글이 없습니다. 사이트는 OS 설정에 관계없이 모든 사람에게 하나의 구성표를 강제할 수 있습니다. 웹 SDK 문서의 webPopups.colorScheme를 참조하세요.

다크 테마는 이 패널의 이미지, 그림자 및 오버레이에도 영향을 줍니다. 각 항목은 활성화되면 동일한 해/달 구성표 스위치를 따릅니다.

배치 및 오버레이

배치에서 위치 3×3 그리드를 사용하여 팝업이 페이지에 고정될 위치를 선택합니다.
가장자리 오프셋을 선택한 가장자리로부터의 거리(픽셀 단위)로 설정합니다.
오버레이에서 뒷 페이지 흐리게 하기를 켜면 팝업이 표시되는 동안 페이지의 나머지 부분이 두 구성표 모두에서 어두워집니다. 이 옵션을 끄면 아래에 설정된 다크 구성표 값을 포함하여 흐리게 하는 효과가 완전히 제거됩니다.
오버레이에 대해 색상과 불투명도(0에서 1까지)를 설정합니다.

다크 테마가 활성화되면 색상과 불투명도도 해/달 구성표 스위치를 따릅니다. 스위치를 다크로 설정하여 다크 팔레트에 대해 흐리게 하는 효과에 고유한 색상과 강도를 부여합니다. 거기서 편집하기 전까지는 다크 구성표는 밝은 구성표와 동일한 색상과 불투명도를 표시합니다.

다크
라이트