미디어

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

미디어란?

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

이미지 블록을 활용하여 단일 이미지를 보여주거나, 갤러리, 슬라이더 블록을 활용하여 여러 이미지를 한번에 보여주는 방법 등 다양한 디자인 구성이 가능합니다.

또한 동영상 블록을 통해 사이트 내 동영상을 재생 시킬 수 있습니다.

이미지는 직접 업로드를 하거나, 큐샵 AI 기능을 활용하여 이미지를 생성 할 수 있으며, 설정 방법에 따라 다양한 디자인 구성을 할 수 있습니다.

이미지를 등록하고, 설정하는 자세한 방법은 아래 가이드를 참고 부탁드립니다.

이미지 등록하기

이미지를 사용하는 섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록 등 다양한 요소에 AI를 통한 이미지 생성 및 직접 이미지 업로드를 하는 방법을 알아 봅니다.

아래 가이드는 이미지 블록을 예시로 안내하고 있으며, 블록 및 섹션 배경 등 요소에 따라 일부 차이가 있을 수 있습니다.

1. AI 활용하기

섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록과 같이 이미지를 사용하는 요소는 AI를 통해 이미지를 생성 할 수 있습니다.

AI를 통해 생성 된 이미지는 이미지 라이브러리를 통해 저장 되어, 여러 블록에서 동일하게 사용이 가능합니다. AI를 활용하여 이미지를 생성하는 방법은 아래 내용을 참고 부탁드립니다.

AI를 통해 텍스트 생성 시 아래 내용을 주의해주세요

• AI 이미지 생성 시 1회 당 5 크레딧이 사용 됩니다.

• 이미지 라이브러를 통해 삭제 된 이미지는 복구가 불가능합니다.

AI 이미지 생성하기

1-1. AI 이미지를 생성 할 블록을 추가합니다. (블록 추가하기)

섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록 등 다양한 요소에서 사용이 가능합니다.

1-2. 블록의 상세 설정을 클릭합니다. (블록 설정하기)

1-3. 상세 설정의 [AI 이미지] 버튼을 클릭합니다.

이미지 블록은 퀵 메뉴의 [AI로 생성하기] 아이콘을 통해 생성 할 수 있습니다. 섹션 및 블록의 배경은 오른쪽 속성 패널의 [배경 > 이미지] 항목을 통해 생성 할 수 있습니다.

1-4. 이미지로 만들고 싶은 내용을 입력한 뒤 [이미지 생성하기] 버튼을 클릭합니다.

1-5. 생성 된 이미지를 확인한 뒤 [이미지 적용하기]를 클릭하여 적용합니다.

[다시 생성하기] 버튼을 클릭하여, 이미지 재 생성이 가능하며, 재 생성 시 5크레딧이 차감 됩니다.

생성 된 이미지는 이미지 보관함에 자동으로 저장 됩니다.

2. 이미지 업로드하기

상품 이미지, 기업 이미지 등 직접 가지고 있는 이미지를 등록하여 사용할 수 있습니다.

등록 한 이미지는 블록의 크기에 따라 자동으로 리사이징이 되기때문에 이미지 등록 후 블록의 크기를 사이트의 디자인에 알맞게 조절 해야합니다.

권장 이미지 사이즈는[사이트 이미지 최적 해상도] 가이드를 참고 해주세요.

이미지 업로드하기

2-1. 이미지를 업로드 할 블록을 추가합니다. (블록 추가하기)

섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록 등 다양한 요소에서 사용이 가능합니다.

2-2. 블록의 상세 설정을 클릭합니다. (블록 설정하기)

2-3. 상세 설정의 [이미지 업로드] 버튼을 클릭합니다.

섹션 및 블록의 배경은 오른쪽 속성 패널의 [배경 > 이미지] 항목을 통해 업로드 할 수 있습니다.

2-4. PC에 저장 된 이미지를 선택하여 등록합니다.

2-5. 이미지 비율에 맞춰 블록 크기 조절 및 이미지 채우기 설정을 합니다. (블록 배치하기)

블록 설정 방법은 아래 [블록 설정하기] 가이드를 참고해주세요.

블록 설정하기

각 블록은 설정에 따라 다양한 방식으로 사용이 가능합니다.

아래 콘텐츠 설정 방법 및 각 블록의 상세 설정을 참고하여 원하는 형태로 블록을 설정하여 디자인을 할 수 있습니다.

블록 설정 방법

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

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

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

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

1. 이미지 블록

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

이미지 블록_설정 항목

이미지 설정

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

클릭 이벤트

2. 슬라이더 블록

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

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

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

슬라이더 블록_설정 항목

내용 설정 항목

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

클릭 이벤트

스타일 설정 항목

3. 갤러리 블록

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

갤러리 블록_설정 항목

내용 설정 항목

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

클릭이벤트

스타일 설정 항목

4. 동영상 블록

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

동영상 블록_설정 항목

동영상 요소_설정 항목

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