# 비디오 배경

퍼널/웹사이트 빌더에 "비디오 배경"이라는 새롭고 흥미로운 기능이 추가되었습니다. 이 기능을 사용하면 웹사이트 섹션, 행, 컬럼에 매력적인 비디오 배경을 자연스럽게 통합할 수 있습니다. 웹 페이지와 퍼널의 시각적 임팩트, 스토리텔링 효과, 디자인 유연성을 크게 향상시켜 줍니다. 이 기능은 MP4와 WebM을 포함한 HTML5 표준 비디오 포맷을 지원하여 다양한 브라우저와 디바이스에서 호환성을 보장합니다. 섹션, 행, 컬럼에 비디오 배경을 적용할 수 있습니다.

**목차**

* [섹션에서 비디오 배경 활성화하기](#섹션에서-비디오-배경-활성화하기)
* [비디오 옵션](#비디오-옵션)
* [배경 투명도](#배경-투명도)
* [비디오 루프](#비디오-루프)

***

## 섹션에서 비디오 배경 활성화하기

![섹션 비디오 배경 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155010796719/original/oKhDgn9Xr-msZ9CY0BNtV-g4VJ4JNvCTVQ.png?1698056987)

섹션을 선택하세요. 오른쪽 설정 패널에서 BG 미디어 타입을 Video로 변경하고 미디어 라이브러리에서 비디오를 선택하세요. Preview 아이콘을 클릭하면 브라우저에서 페이지가 어떻게 보이는지 확인할 수 있습니다.

## 비디오 옵션

![비디오 옵션 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155010797522/original/XCsYE4Wro6jvXUpG9nteOVd8SGPQldub_A.png?1698057223)

비디오 옵션에는 3가지 설정이 있습니다.

"Fit", "Fill", "Cover"는 섹션, 행, 컬럼 안에서 비디오 배경이 어떻게 표시될지를 제어하는 옵션입니다. 이 옵션들은 비디오가 사용 가능한 공간에 맞게 어떻게 크기 조정되거나 잘려지는지를 결정합니다. 각 옵션에 대한 설명은 다음과 같습니다:

**Fit:**

비디오 배경에 "Fit" 옵션을 선택하면, 비디오가 원본 비율을 유지하면서 지정된 영역에 맞게 크기가 조정됩니다. 이는 전체 비디오가 보이지만, 비디오의 가로세로 비율이 컨테이너의 비율과 맞지 않을 경우 비디오 주변에 빈 공간(레터박스)이 생길 수 있다는 의미입니다. 이 옵션은 전체 비디오를 보여주고 싶고 어떤 부분도 잘리지 않기를 원할 때 이상적입니다.

**Fill:**

"Fill"은 비디오를 늘리거나 잘라내더라도 지정된 전체 영역을 채우도록 크기를 조정하는 옵션입니다. 이는 비디오가 전체 배경 영역을 덮지만, 원본 가로세로 비율을 유지하지 않을 수 있다는 의미입니다. 전체 배경 공간을 덮기 위해 비디오의 일부가 잘려나갈 수 있습니다. 이 옵션은 비디오의 일부가 잘려나가더라도 배경이 완전히 덮이기를 원할 때 유용합니다.

**Cover:**

"Cover" 옵션은 "Fit"과 "Fill" 사이의 균형점입니다. 이 경우 비디오가 원본 가로세로 비율을 유지하면서 지정된 전체 영역을 덮도록 크기가 조정됩니다. 비디오가 배경 공간을 완전히 덮지만 늘어나거나 잘리지 않습니다. 이는 전체 비디오가 보이고 왜곡이 없음을 보장하지만, 가로세로 비율이 컨테이너의 비율과 완벽히 맞지 않을 경우 비디오 주변에 약간의 빈 공간이 생길 수 있습니다. "Cover"는 비디오를 왜곡하지 않으면서 배경 공간의 사용을 최대화하고 싶을 때 좋은 선택입니다.

## 배경 투명도

![배경 투명도 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155010798984/original/WILr-scvSbiZRbg23wEHhb9gngT_qFUeZg.png?1698057749)

**None:**

"None"이 선택되거나 적용되면, 배경 투명도나 투명성이 없음을 의미합니다. 배경이 완전히 불투명하여 뒤쪽의 모든 콘텐츠나 요소를 완전히 차단합니다. 이 옵션은 배경을 단색으로 완전히 보이게 하고 싶고, 뒤쪽 요소가 비치지 않기를 원할 때 유용합니다.

**Light Fade:**

"Light Fade"는 배경에 미묘한 수준의 투명성을 도입합니다. 배경을 약간 투명하게 만들어 뒤쪽의 콘텐츠나 요소가 약간 보이게 하면서도 배경은 여전히 주로 보이는 상태로 유지합니다. 이 효과는 콘텐츠를 압도하지 않으면서 콘텐츠를 보완하는 섬세하고 부드럽거나 절제된 배경을 만들 때 자주 사용됩니다.

**Half Fade:**

"Half Fade"는 배경이 50% 투명도 수준으로 부분적으로 투명함을 의미합니다. 이는 배경 뒤쪽의 콘텐츠나 요소가 명확히 보이지만 여전히 배경에 의해 어느 정도 가려진다는 뜻입니다. "Half Fade"는 눈에 띄는 배경과 콘텐츠 사이의 균형을 맞춰 적당한 수준의 시각적 분리를 제공하는 데 사용될 수 있습니다.

**Heavy Fade:**

"Heavy Fade"는 상당한 수준의 투명성을 포함하여 배경이 거의 투명해지는 것입니다. 배경 뒤쪽의 콘텐츠나 요소가 눈에 띄게 보이며, 배경은 주요 특징이라기보다는 미묘한 배경 역할을 합니다. 이 옵션은 배경을 덜 강조하고 그 위에 있는 콘텐츠나 요소를 우선시하고 싶을 때 자주 선택됩니다.

## 비디오 루프

![비디오 루프 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155010799421/original/GjOCa1_wuI7oKGEifPr3wfbAbQU0lAT3_w.png?1698057906)

비디오 루프 토글이 "켜짐"일 때, 배경의 비디오가 연속적으로 재생되어 끝에 도달하면 자동으로 다시 시작됩니다. 이는 매끄럽고 매력적인 경험을 제공합니다.

비디오 루프 토글이 "꺼짐"일 때, 비디오는 한 번 재생되고 재생이 끝나면 정지합니다. 이는 반복하지 않는 비디오 콘텐츠나 짧은 소개에 적합합니다.

***

*원문 최종 수정: Mon, 25 Mar, 2024 at 10:59 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/miscellaneous/video-background.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.