사이트 콘텐츠 뒤에서 자동으로 재생되는 비디오로 흥미로운 시각 효과를 추가하세요.

사이트 배경에 스타일을 주는 한 가지 방법은 비디오를 사용하여 역동적인 시각 효과를 내는 것입니다. 예를 들어, 배경 비디오 위에 텍스트와 이미지를 추가하여 페이지에 입체감을 더할 수 있습니다. 스타일화된 필터를 적용하고 색상을 오버레이하여 맞춤형 외관과 느낌을 만들 수도 있습니다. 이러한 비디오는 반복 재생되며 무음입니다. 배경 비디오의 경우, 다음을 수행할 수 있습니다.

• 7.1 버전에서는 본인이 소유한 비디오를 섹션 배경에 업로드하세요.
• 사이트 버전에 따라 페이지 섹션, 배너 및 기타 영역에서 YouTube 및 Vimeo 비디오를 사용하세요.

팁: 이미지 효과와 독특한 배경 아트를 사용하여 애니메이션 배경을 추가할 수도 있습니다. 자세히 알아보려면 섹션 배경 이미지 및 섹션 배경 아트를 방문하세요. 사이트 배경 스타일링에서 모든 배경 스타일링 옵션에 대해 알아보세요.

비디오 시청하기

시작하기 전에

일반적인 조언

• 비디오 호스팅 서비스는 스트리밍 비디오의 품질과 해상도를 책임집니다. 스트리밍 품질은 Squarespace의 통제 범위를 벗어납니다. 비디오의 품질이 낮아 보인다면, 디자인 팁을 따르세요.
• Squarespace에 업로드된 비디오는 기기, 브라우저, 인터넷 연결에 따라 1080p 또는 360p로 표시될 수 있습니다. 어떤 해상도가 표시될지를 수동으로 선택할 방법은 없습니다.
• Squarespace의 디자인 팁을 따르는 배경 비디오는 컴퓨터에 표시되어야 하지만, 방문자의 연결 속도와 브라우저 버전에 따라 모바일 기기에서 비디오가 표시되지 않는 경우도 있습니다. 배경 비디오를 로드할 수 없는 경우 모바일 폴백 이미지가 나타나도록 설정하세요.
• 비디오가 버퍼링되는 동안 페이지 배경 또는 배너 오버레이 색상이 표시됩니다. 비디오가 로드되는 데 몇 초가 걸리면 모바일 폴백 이미지가 표시될 수 있습니다. 로드 시간은 인터넷 연결 속도에 따라 달라집니다.
• 배경 비디오는 YouTube 및 Vimeo URL을 지원하지만 임베드 코드 추가는 지원하지 않습니다.
• 저전력 또는 절전 모드의 장치에서는 배경 비디오가 표시되지 않습니다. 모바일 폴백 이미지를 추가하면 모바일 폴백 이미지가 표시됩니다. 폴백 이미지를 추가하지 않으면, 비디오의 섬네일과 응답하지 않는 재생 버튼이 대신 표시됩니다.

YouTube

• 오버레이 광고를 비활성화하지 않으면 배경 비디오 위에 표시됩니다.
• 동영상이 로드될 때 방문자에게 YouTube 로고, 비디오 제목, 시청 아이콘 또는 공유 아이콘이 잠시 나타날 수 있습니다. 이것은 레이아웃과 기기에 따라 달라집니다.
• 비디오 광고는 비디오보다 먼저 재생되며, 프리롤 광고라고도 합니다. 이러한 광고는 배경 비디오에서는 재생되지 않습니다.

Vimeo

• Vimeo에서 배경 비디오를 추가하려면 유료 Vimeo 플랜이 필요합니다.
• HD Vimeo 비디오는 커버 페이지 또는 배너에 추가할 수 없습니다.

디자인 팁

배경 비디오는 사이트에 시각적 흥미를 더하는 훌륭한 방법이지만, 다른 사이트 콘텐츠에 방해가 되어서는 안 됩니다. 다음은 배경 비디오가 멋지게 보이도록 돕는 몇 가지 모범 사례입니다. 배경 비디오를 업로드하는 경우, Squarespace의 비디오 요구 사항에 대해 알아보세요.

어떤 비디오를 배경으로 사용할지 고민 중인 경우 다음 팁을 따르세요.

1단계 - 비디오 파일 또는 URL 준비

배경 비디오를 추가하려면 7.1 버전의 섹션 배경에 비디오 파일을 업로드하세요. YouTube 또는 Vimeo에 비디오를 업로드하고 해당 URL로 삽입할 수도 있습니다.

참고: URL에 특정 비디오 섹션에 대한 타임스탬프가 포함되지 않았는지 확인하세요. 이는 비디오 로드를 방해할 수 있습니다.

비디오 업로드

비디오 파일을 업로드하기 전에, 비디오가 비디오 업로드 요구 사항을 충족하는지 확인하세요. 업로드된 배경 비디오의 길이 제한은 60초라는 점을 명심하세요.

YouTube

1. YouTube 계정을 만들거나 로그인합니다.
2. 비디오를 업로드하거나 이미 업로드한 비디오를 찾습니다.
3. 비디오가 목록 비공개 또는 전체 공개로 설정되어 있고 임베딩을 허용하는지 확인하세요.
4. 비디오의 URL을 복사합니다.

Vimeo

1. Vimeo 계정을 생성하거나 로그인합니다.
2. 비디오를 업로드하거나 이미 업로드한 비디오를 찾습니다.
3. 비디오의 개인정보 보호 설정이 공개 또는 Vimeo에서 숨기기로 설정되어 있는지 확인합니다. 어디서나 또는 특정 도메인에서 임베딩을 허용합니다. 특정 도메인에서만 임베딩을 허용하도록 선택한 경우, 표시되는 텍스트 필드에 본인의 웹사이트 도메인을 추가합니다.
4. 비디오의 URL을 복사합니다.

2단계 - 비디오 추가

비디오를 추가하는 단계는 사이트 버전과 비디오를 추가하는 위치에 따라 달라집니다.

팁: URL을 추가하기 전까지 짧은 바다 비디오가 데모 플레이스홀더로 나타날 수 있습니다.

잠금 화면

잠금 화면에 이미지나 슬라이드쇼 대신 배경 비디오를 추가할 수 있습니다. 모든 사이트는 잠금 화면을 지원합니다.

잠금 화면에 비디오를 추가하는 방법:

1. 잠금 화면 패널을 엽니다.
2. 미디어를 클릭합니다.
3. 비디오 탭을 클릭합니다.
4. 비디오 URL을 비디오 URL 필드에 붙여 넣습니다.

3단계 - 배경 너비 선택

섹션 배경 비디오는 여백 없음으로 표시되거나 섹션 가장자리에서 인셋으로 나타날 수 있습니다.

• 여백 없음은 브라우저 창의 한쪽 가장자리에서 다른 쪽 가장자리까지 이미지를 확장하여 사이트의 전체 너비를 포괄합니다.
• 인셋은 이미지를 약간 들여 쓰고 이미지 주위에 테두리를 만듭니다.

이미지가 인셋으로 설정되면 테두리 색상을 설정할 수 있습니다.

4단계 - 필터 추가

필터는 비디오의 외관을 스타일화된 모습으로 변경합니다. 필터는 비디오의 모바일 폴백 이미지에도 영향을 미칩니다. 필터의 효과는 비디오의 색상과 이미지에 따라 달라지므로 적절한 효과를 찾으려면 실험해 보는 것이 좋습니다.

필터를 추가하려면 비디오 탭에서 필터 드롭다운 메뉴를 클릭하세요. 반전을 제외한 모든 필터의 경우 슬라이더를 사용하여 강도를 조정할 수 있습니다. 필터 효과는 브라우저마다 다르게 렌더링될 수 있습니다.

불투명도 필터를 사용하여 오버레이 색상을 추가할 수 있습니다. 7.1 버전에서 색상 탭을 클릭하여 오버레이 및 추가된 콘텐츠의 색상 구성표를 선택하세요. 자세한 내용을 알아보려면 색상 변경을 방문하세요. 비디오를 제거하는 경우 오버레이가 섹션의 배경색이 됩니다.

5단계 - 재생 속도 변경

YouTube 또는 Vimeo URL 링크를 사용하는 경우 재생 속도에서 설정을 변경하여 비디오의 속도를 높이거나 낮출 수 있습니다. 기본 속도는 1배속으로, 비디오가 정상 속도로 재생된다는 의미입니다.

6단계 - 모바일 폴백 이미지 추가

모바일 브라우저는 배경 비디오를 지원하지만, 연결 속도와 브라우저 버전에 따라 방문자에게 배경 비디오가 로드되지 않는 경우가 있을 수 있습니다. 배경 비디오가 로드되지 않을 때 표시되도록 모바일 폴백 이미지를 설정할 수 있습니다. 필터는 모바일 폴백 이미지에도 적용됩니다. 최상의 결과를 얻으려면 업로드하기 전에 웹 디스플레이용으로 이미지 형식을 지정하세요.

모바일 폴백 이미지를 추가하는 방법은 사이트 버전에 따라 다릅니다. 모바일 폴백 이미지를 추가하는 방법은 다음과 같습니다.

팁: 동영상과 유사한 효과를 내려면 애니메이션 .gif을 모바일 폴백 이미지로 추가하세요.

배경 비디오 비활성화 또는 삭제

기존 배경 비디오를 제거하려면 배경 비디오를 비활성화하거나 삭제하세요. 배경 비디오를 비활성화하려면 배경 이미지로 전환하세요. 이렇게 하면 설정된 이미지가 배경 비디오를 대체합니다.

비디오를 시청하세요(버전 7.0)

이 비디오는 Squarespace 7.0 버전에 적용됩니다.