영상 요소: 비디오·재생 설정

소개 영상이나 강의 미리보기 영상을 페이지에 넣었는데, 비율이 어색하거나 열자마자 소리가 나서 당황한 적이 있으신가요? 에디터의 영상 요소는 영상 주소를 넣는 것으로 끝나지 않고, 영상 설정 창에서 비율과 모서리, 자동 재생, 반복, 시작·끝 시점까지 정할 수 있습니다. 이 글에서는 영상 설정 창의 비디오 탭과 재생 탭을 안내합니다. 플레이어와 필터 탭은 별도 글에서 다룹니다.

1. 영상 요소는 어디에 있나요

편집 화면 왼쪽 레일의 요소 추가 아이콘을 누르면 요소 패널이 열립니다. 미디어 묶음에 이미지, 영상, 아이콘이 있고, 섹션을 선택한 상태에서 영상을 누르면 16:9 영상 상자가 들어갑니다. 처음에는 샘플 영상 주소가 들어 있으니 아래 방법으로 본인의 영상 주소로 바꿔 주세요.

2. 영상 설정 창 열기

캔버스에서 영상 상자를 누르면 오른쪽 위 모서리에 ⋮ 단추가 나타납니다. 이 단추를 누르면 아이콘 막대가 펼쳐지고, 그중 톱니바퀴 모양의 요소 설정 열기를 누르면 영상 설정 창이 열립니다. 창 위쪽에 비디오, 재생, 플레이어, 필터 네 개의 탭이 있고, 창 아래의 전체 속성 패널 열기 단추로 효과와 반응형 설정으로 이어갈 수 있습니다. 같은 아이콘 막대에는 레이아웃 / 간격, 요소 복제, 요소 삭제 아이콘도 있어, 영상 상자를 복제해 다른 영상을 넣는 식으로 쓸 수 있습니다.

3. 비디오 탭: 주소와 모양 정하기

• 유형: Youtube, Vimeo, 일반 링크 중에서 고릅니다.
• 링크: 영상 주소를 붙여 넣고 Enter를 누르거나 입력칸 밖을 누르면 적용됩니다. 유형이 Youtube일 때는 일반 시청 주소와 youtu.be 짧은 주소 모두 영상 상자에 맞는 형태로 바뀌어 들어갑니다. Vimeo는 vimeo.com/숫자 형태의 주소를 넣습니다. 일반 링크는 입력한 주소를 바꾸지 않고 그대로 쓰므로 임베드가 허용되는 주소를 넣어야 합니다.
• 비율: 16:9, 4:3, 1:1, 3:2, 9:16이 있습니다. 가로 영상은 16:9, 정사각형 영상은 1:1, 세로 영상은 9:16처럼 영상에 맞춰 고르면 됩니다.
• 모서리 반경: 0~24px 슬라이더로 영상 상자의 모서리를 둥글게 합니다.

유형을 Vimeo로 바꾸고 Vimeo 주소를 넣으면 영상 주소가 Vimeo 플레이어 형태로 바뀝니다.

4. 재생 탭: 시작하는 방식 정하기

재생 탭에는 스위치 세 개와 선택 상자, 입력칸 두 개가 있습니다.

• 자동 재생: 페이지가 열릴 때 영상이 저절로 재생되도록 설정합니다. 켜면 음소거도 함께 켜집니다. 옆의 물음표에 "자동재생은 음소거가 필요합니다"라고 안내되어 있습니다.
• 음소거: 소리를 끈 채로 시작합니다.
• 연속재생: 영상이 끝나면 처음부터 반복합니다.
• 추천 동영상: 모든 채널(기본값) 또는 현재 비디오 채널 중에서 고릅니다.
• 시작 (초), 끝 (초): 영상의 일부 구간만 보여 주고 싶을 때 초 단위로 입력합니다. 0이면 지정하지 않은 것입니다.

이 설정들은 영상 주소에 함께 기록되며, 상단의 저장을 누른 뒤 편집 화면을 다시 열어도 그대로 남아 있습니다. 라이브 미리보기에서도 같은 주소로 영상이 열립니다.

5. 이렇게 활용해 보세요

• 제품 소개 영상은 16:9, 정사각형으로 만든 후기 영상은 1:1처럼 원본 비율에 맞춰 두면 페이지에서 영상 상자의 모양을 영상과 비슷하게 맞출 수 있습니다.
• 긴 영상에서 핵심 장면만 보여 주고 싶다면 시작 (초)와 끝 (초)를 함께 지정해 보세요.
• 분위기 영상처럼 소리 없이 반복되는 화면이 필요하다면 자동 재생, 음소거, 연속재생을 함께 켜서 사용할 수 있습니다.

6. 알아 두실 점

• 편집 화면에서는 영상을 누르면 재생되지 않고 선택됩니다. 재생 설정이 반영된 모습은 상단의 라이브 미리보기로 확인해 보세요.
• 시작·끝 시점과 추천 동영상은 영상 주소에 붙는 설정으로 적용됩니다. 일반 링크 유형은 주소를 변환하지 않으므로, 영상 서비스가 안내하는 임베드용 주소를 넣어 주세요.
• 표지 이미지, 컨트롤 표시, 지연 로드, 개인정보 보호 모드, 영상 색감 보정은 플레이어와 필터 탭에서 다루며 별도 글에서 안내합니다.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.

이미지 요소의 크기와 정렬, 링크는 이미지 요소를 다룬 글에서 이어서 확인해 보세요.