섹션 배경과 일체화된 동영상 올리기

동영상 썸네일 이미지 배경과 섹션 배경색을 똑같은 색으로 지정해, 다음 그림과 같이 동영상이 섹션 배경과 일체화된 디자인으로 꾸밀 수 있습니다.

앞서 완료해야 할 사항

본 튜토리얼을 진행하려면 동영상 썸네일 이미지가 필요합니다. 이미지 제작 시 주의해야 할 점은 다음과 같습니다.

  • 동영상 썸네일의 배경색은 단색이어야 하며, 해당 배경색의 색상값(HEX 또는 RGB값)을 알아야 합니다.
  • 동영상 썸네일은 16:9 비율(1280x720픽셀)로 제작하실 것을 권장해 드립니다. 해당 비율을 벗어나는 경우 썸네일 이미지의 일부가 확대 또는 축소되거나 잘릴 수 있습니다.
  • 동영상 썸네일 이미지가 정상적으로 표시되지 않는 경우 새로고침(F5)을 눌러 주시길 바랍니다.
  • 동영상 썸네일 제작 시 Play(재생) 아이콘은 추가하지 않으셔도 됩니다.

샘플 이미지 다운로드

원활한 튜토리얼 진행을 위해 아래 샘플 이미지(350KB, ZIP파일)를 내려받아 사용하실 수 있습니
참고: 본 샘플 이미지의 저작권은 (주)아임웹에 있습니다.

다운로드

제작방법

1단계: 새로운 메뉴 추가하기

새로운 메뉴를 추가합니다. 기존 메뉴가 있는 경우 해당 메뉴로 이동합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 상단 메뉴 항목에서 ⨁ 아이콘을 클릭합니다.
  4. 메뉴명을 입력하고 확인 버튼을 클릭해 새로운 메뉴를 생성합니다.
2단계: 동영상 위젯 추가하기

배경 위에 동영상 위젯을 추가하고, 동영상을 연결합니다.

  1. 빈 메뉴의 중앙에 위치한 ⨁ 아이콘을 클릭합니다.
  2. 위젯 목록이 나오면 동영상 위젯을 클릭합니다.
  3. 삽입된 동영상 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 동영상 설정 을 클릭합니다.
  5. 동영상 설정 창이 나오면 이미지 업로드 버튼을 클릭해, 내 PC에서 동영상 썸네일 이미지를 올려줍니다.

  6. 동영상 주소 항목에 유튜브 또는 비메오 동영상 URL(주소)를 입력합니다.

  7. 재생설정 항목에서 라이트 박스 옵션을 선택합니다.

  8. 옵션 항목에서 제목 감추기, 플레이어 컨트롤 감추기 옵션을 각각 선택합니다.

  9. 동영상 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
3단계: 섹션 배경색 변경하기

동영상 위젯이 삽입된 섹션의 배경색을, 동영상 위젯 썸네일 이미지의 배경색과 같은 색상으로 지정하는 과정입니다.

  1. 동영상 위젯이 올라간 섹션에 마우스 포인터를 올립니다.
    참고: 동영상 위젯에 마우스 포인터를 올리면 안 됩니다. 위젯이 없는 곳에 마우스 포인터를 올려주세요.

  2. 마우스 오른쪽 버튼을 클릭하면 나타나는 컨텍스트 메뉴에서 섹션 설정 을 클릭합니다.

  3. 배경 항목의 배경색 옵션에 동영상 썸네일 이미지에 사용된 배경색과 같은 색상 값을 입력합니다.

  4. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
(선택 사항) 4단계: 섹션 그리드 제거하기

섹션 그리드란 쉽게 말해 위젯과 위젯 사이의 간격을 의미합니다. 만약 아래와 같이 이미지 일부가 잘린 동영상 썸네일 이미지를 사용하는 경우 섹션 그리드를 제거하면, 여백 없이 섹션에 딱 붙여 배치할 수 있습니다.

  1. 위 3단계 1번~3번 과정에 따라 섹션 설정을 열어줍니다.
  2. 간격 항목에서 기본 그리드 간격을 선택 해제합니다.

  3. 다음으로 그리드 상하 간격0으로 입력합니다.
  4. 동영상 썸네일 이미지 위, 아래로 여백이 제거 되었는지 확인합니다.

  5. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
5단계: 미리보기 및 게시하기
  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 동영상을 재생해보고, 섹션 그리드 간격이 정상적으로 제거 되었는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.
목록으로