미디어

미디어의 블록에 대해 알아봅니다.

미디어란?

미디어는 이미지, 동영상 등을 통해 사용자에게 정보를 전달하게 위해 사용이 됩니다.

이미지를 활용하여 단일 이미지를 보여줄 수 있으며 갤러리, 슬라이더를 활용하여 여러 이미지를 한번에 보여주는 방법 등 다양한 디자인 구성이 가능합니다.

블록 설정 방법

1. 사용하려는 블록을 추가합니다.

2. 퀵 메뉴의 상세설정을 클릭합니다.

3. 아래 상세 설정을 참고하여, 설정을 변경합니다.

블록을 더블 클릭하여 상세 설정창을 열 수 있습니다.

1. 이미지 블록

페이지에 이미지를 적용할 수 있습니다. 단일 이미지 사용에 적합하며, 여러 장의 이미지 사용은 갤러리 블록 사용을 권장 드립니다.

이미지 블록_설정 항목

설정 항목
파일선택 PC에 저장 된 파일을 선택하여 업로드 합니다.
이미지 라이브러리 기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다. 새로운 이미지 업로드 가능 라이브러리 내 이미지 선택 사용 가능 폴더 생성을 하여, 이미지 관리 가능 갤러리, 슬라이더 콘텐츠와 연동 가능 갤러리, 슬라이더 요소와 라이브러리 공유 가능
이미지 채우기 프레임에 가득 차도록 이미지를 확대합니다. 프레임 크기에 따라 일부 잘려 보일 수 있음
불투명도 등록 된 이미지의 투명도를 설정합니다.
흐림 이미지를 블러처리하여 흐리게 보이도록 설정을 합니다.
오버레이 이미지에 색상을 덮어씌워 표현을 합니다. %가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.
이미지 대체 텍스트 ( 선택 사항 ) 검색 엔진 최적화 개선을 위해, 이미지에 대한 설명을 작성합니다.

2. 슬라이더 블록

이미지를 슬라이드 형태로 보여줄 수 있습니다. 확장영역을 활용하여, 페이지의 주제에 맞는 정보 또는 이벤트 정보 등을 노출하는 용도로 사용 할 수도 있으며 크기를 조정하여 특정 주제에 대한 이미지를 모아 슬라이드 시킬 수 있습니다.

슬라이더는 그 용도에 따라 이미지 / 색상 의 형태로 추가가 가능합니다.

슬라이더는 섹션 당 하나만 추가가 가능합니다.

슬라이더 블록_설정 항목

내용 설정 항목

설정 항목
파일선택 PC에 저장 된 파일을 선택하여 업로드 합니다.
이미지 라이브러리 기존에 업로드한 이미지를 사용하거나 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다. 새로운 이미지 업로드 가능 라이브러리 내 이미지 선택 사용 가능 폴더 생성을 하여, 이미지 관리 가능 이미지, 갤러리 요소와 연동 가능 이미지, 갤러리 요소와 라이브러리 공유 가능
이미지 채우기 프레임에 가득 차도록 이미지를 확대합니다. 프레임 크기에 따라 일부 잘려 보일 수 있음
불투명도 등록 된 이미지의 투명도를 설정합니다.
클릭 이벤트 클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.

스타일 설정 항목

설정 항목
버튼 표시 좌우화살표 슬라이더 좌우에 이전,다음 페이지로 이동을 위한 버튼을 추가합니다. 색상 좌우 화살표 버튼의 색상 및 투명도를 설정합니다. 페이지네이션 슬라이더 중앙 아래 특정 페이지를 선택할 수 있는 버튼입니다.
동작 자동 넘김 슬라이드가 자동으로 넘어갑니다. 재생 간격 슬라이드가 넘어가는 속도를 설정합니다. 마우스 올릴 시 일지 정지 마우스를 슬라이드 위에 올리면 동작이 일시 정지 됩니다.

3. 갤러리 블록

갤러리 블록은 이미지 와 이미지 설명, 텍스트를 한번에 보여줄 수 있습니다. 이미지 블록을 통해 비슷한 구성을 할 수 있으나, 여러 이미지를 추가할 때는 갤러리 블록 사용을 권장 드립니다.

갤러리 블록_설정 항목

내용 설정 항목

설정 항목
+ 이미지 추가 PC에 저장 된 파일을 선택하여 업로드 합니다.
파일선택 PC에 저장 된 파일을 선택하여 업로드 합니다.
이미지 라이브러리 기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다. 새로운 이미지 업로드 가능 라이브러리 내 이미지 선택 사용 가능 폴더 생성을 하여, 이미지 관리 가능 이미지, 슬라이더 콘텐츠와 연동 가능 이미지, 슬라이더 요소와 라이브러리 공유 가능
이미지 채우기 프레임에 가득차도록 이미지를 확대합니다. 프레임 크기에 따라 일부 잘려 보일 수 있음
불투명도 등록 된 이미지의 투명도를 설정합니다.
텍스트 각각의 이미지 제목과 설명을 작성합니다.
클릭 이벤트 클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.

스타일 설정 항목

설정 항목
리스트 간격 이미지와 이미지 사이 간격을 설정합니다. 열 개수 하나의 열에 보여지는 이미지 갯수를 설정합니다.
글자 이미지의 제목과 설명의 글자 설정을합니다. 제목과 설명 개별 설정 가능
마우스 오버 시 효과 마우스 오버 시 보여지는 효과를 설정합니다. 애메이션 효과 없음 설정 시 텍스트 노출 불가

4. 동영상 블록

유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하여 페이지에 동영상을 재생할 수 있습니다.

동영상 블록_설정 항목

동영상 요소_설정 항목

설정 항목
링크 유튜브(YouTube) 또는 비메오(Vimeo)의 영상 주소를 입력합니다.
스타일 재생 시 동영상 채우기 동영상을 프레임의 크기에 맞추거나 원본 비율을 유지합니다. 채우기 사용 시 프레임 크기에 따라 일부 잘려 보일 수 있음 자동 재생 동영상이 자동으로 재생이 됩니다. 음소거 상태로만 재생 가능 반복 재생 동영상이 반복 재생 됩니다. 클릭 허용 동영상 플레이어에 대한 조작을 할 수 있습니다. 동영상 컨트롤 표시 재생, 일시정지, 넘기기 등의 컨트롤 바를 표시합니다. 유트브 영상만 적용 가능, 비메오 영상 적용 불가

4-1. 쇼츠 영상 업로드하기

유튜브에 등록 된 쇼츠 영상은 동영상 블록, 코드 블록을 통해 재생이 가능합니다. 등록 방법은 아래 내용을 참고 부탁드립니다.

1. 동영상 블록 사용하기

동영상 블록은 유튜브에 업로드한 동영상 주소(URL)를 입력하여 페이지에 동영상을 재생할 수 있습니다. 이때 쇼츠 영상의 주소는 적용이 되지않기 때문에 일반 영상 주소 형식으로 변경하여 입력을 해주셔야합니다.

1. 쇼츠 영상의 브라우저 주소를 복사합니다.

   

1. 복사한 주소의 형을 아래 내용을 참고하여 변경을 합니다.

• 쇼츠 링크 : www.youtube.com/shorts/URL

• 일반 영상 링크: www.youtube.com/watch?v=URL

1. 위 방법으로 수정한 주소를 동영상 블록에 적용합니다.

   

1. 영상의 크기에 맞춰 블록의 크기를 조정합니다.

   

2. 코드 블록 사용하기

동영상 URL이 아닌 쇼츠 영상의 소스코드를 복사하여 코드 블록을 활용하여 영상을 재생 할 수 있습니다.

코드 블록에서는 자동 재생, 반복 재생 등 재생 스타일 설정이 불가능합니다. 재생 스타일 설정을 원하신다면 동영상 블록을 사용을 권장 드립니다.

1. 재생하려는 쇼츠 영상을 우클릭 합니다.

1. 소스 코드 복사를 클릭합니다.

   
2. 에디터 코드 블록을 추가하여 위에서 복사한 소스 코드를 붙여넣습니다.

   

1. 영상의 크기에 맞춰 블록의 크기를 조절 합니다.

   

5. 로티블록

로티(Lottie)에서 제공하는 파일 업로드 또는 링크 연결을 통 사이트에 다양한 애니메이션을 적용할 수 있습니다.

로티(Lottie)의 자세한 사용방법은 [로티 활용하기] 가이드를 참고 부탁드립니다.

애니메이션 설정 항목

설정 항목
애니메이션 선택 파일 업로드 또는 URL 링크 연결을 통해 로티의 애니메이션을 적용할 수 있습니다.
파일찾기 키워드 검색을 통해 로티에서 원하는 애니메이션을 찾아 볼 수 있습니다. 영문으로 검색 시 더 정확한 검색 결과를 얻을 수 있습니다.
미리보기 등록한 애니메이션을 재생합니다.
썸네일 위치 설정 등록한 애니메이션의 썸네일이 적용이 될 위치를 선택합니다. 프레임 단위로 애니메이션 위치 지정

상세설정 설정항목

설정 항목
반복 애니메이션의 반복 재생을 선택합니다.
재생 방향 애니메이션이 재상이 되는 방향을 선택합니다.
재생 속도 애니메이션이 재생 되는 속도를 설정합니다.
재생 조건 자동 또는 수동 재생으로 선택이 가능합니다. 수동 재생_마우스오버 시작 애니메이션에 마우스를 올릴 때 재생이 시작 됩니다. 마우스를 뗀 후에도 재생이 계속 됩니다. 수동 재생_마우스오버 유지 애니메이션에 마우스가 올라가 있을 경우 재생이 됩니다. 마우스를 떼면 재생이 중지 됩니다. 수동 재생_스크롤 페이지를 스크롤 하여 해당 위치에 도달했을 때 재생이 됩니다.

1