미디어

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

미디어란?

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

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

블록 설정 방법

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

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

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

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

1. 이미지 블록

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

이미지 블록_설정 항목

설정 항목

파일선택 PC에 저장 된 파일을 선택하여 업로드 합니다.

이미지 라이브러리 기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다.

  • 새로운 이미지 업로드 가능

  • 라이브러리 내 이미지 선택 사용 가능

  • 폴더 생성을 하여, 이미지 관리 가능

  • 갤러리, 슬라이더 콘텐츠와 연동 가능

  • 갤러리, 슬라이더 요소와 라이브러리 공유 가능

이미지 채우기 프레임에 가득 차도록 이미지를 확대합니다.

  • 프레임 크기에 따라 일부 잘려 보일 수 있음

불투명도 등록 된 이미지의 투명도를 설정합니다.

흐림 이미지를 블러처리하여 흐리게 보이도록 설정을 합니다.

오버레이 이미지에 색상을 덮어씌워 표현을 합니다.

  • %가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.

이미지 대체 텍스트 ( 선택 사항 ) 검색 엔진 최적화 개선을 위해, 이미지에 대한 설명을 작성합니다.

2. 슬라이더 블록

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

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

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

슬라이더 블록_설정 항목

설정 항목

파일선택 PC에 저장 된 파일을 선택하여 업로드 합니다.

이미지 라이브러리 기존에 업로드한 이미지를 사용하거나 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다.

  • 새로운 이미지 업로드 가능

  • 라이브러리 내 이미지 선택 사용 가능

  • 폴더 생성을 하여, 이미지 관리 가능

  • 이미지, 갤러리 요소와 연동 가능

  • 이미지, 갤러리 요소와 라이브러리 공유 가능

이미지 채우기 프레임에 가득 차도록 이미지를 확대합니다.

  • 프레임 크기에 따라 일부 잘려 보일 수 있음

불투명도 등록 된 이미지의 투명도를 설정합니다.

클릭 이벤트 클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.

3. 갤러리 블록

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

갤러리 블록_설정 항목

설정 항목

+ 이미지 추가 PC에 저장 된 파일을 선택하여 업로드 합니다.

파일선택 PC에 저장 된 파일을 선택하여 업로드 합니다.

이미지 라이브러리 기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다.

  • 새로운 이미지 업로드 가능

  • 라이브러리 내 이미지 선택 사용 가능

  • 폴더 생성을 하여, 이미지 관리 가능

  • 이미지, 슬라이더 콘텐츠와 연동 가능

  • 이미지, 슬라이더 요소와 라이브러리 공유 가능

이미지 채우기 프레임에 가득차도록 이미지를 확대합니다.

  • 프레임 크기에 따라 일부 잘려 보일 수 있음

불투명도 등록 된 이미지의 투명도를 설정합니다.

텍스트 각각의 이미지 제목과 설명을 작성합니다.

클릭 이벤트 클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.

4. 동영상 블록

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

동영상 블록_설정 항목

동영상 요소_설정 항목

설정 항목

링크 유튜브(YouTube) 또는 비메오(Vimeo)의 영상 주소를 입력합니다.

스타일 재생 시 동영상 채우기

동영상을 프레임의 크기에 맞추거나 원본 비율을 유지합니다.

  • 채우기 사용 시 프레임 크기에 따라 일부 잘려 보일 수 있음

자동 재생

동영상이 자동으로 재생이 됩니다.

  • 음소거 상태로만 재생 가능

반복 재생 동영상이 반복 재생 됩니다.

클릭 허용 동영상 플레이어에 대한 조작을 할 수 있습니다.

동영상 컨트롤 표시 재생, 일시정지, 넘기기 등의 컨트롤 바를 표시합니다.

  • 유트브 영상만 적용 가능, 비메오 영상 적용 불가

5. 로티블록

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

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

설정 항목

애니메이션 선택 파일 업로드 또는 URL 링크 연결을 통해 로티의 애니메이션을 적용할 수 있습니다.

파일찾기 키워드 검색을 통해 로티에서 원하는 애니메이션을 찾아 볼 수 있습니다.

  • 영문으로 검색 시 더 정확한 검색 결과를 얻을 수 있습니다.

미리보기 등록한 애니메이션을 재생합니다.

썸네일 위치 설정 등록한 애니메이션의 썸네일이 적용이 될 위치를 선택합니다.

  • 프레임 단위로 애니메이션 위치 지정

1

Previous텍스트Next로티 활용하기

Last updated