참고:
Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.
Adobe Muse의 [슬라이드 쇼] 위젯은 이미지에만 사용되는 대화형 위젯입니다. [탭 구분 패널] 위젯과 유사하게, 사용자가 축소판 컨테이너를 클릭하면 해당 메인 이미지 버전이 페이지의 다른 큰 컨테이너에 표시됩니다.
Adobe Muse는 다음과 같은 유형의 [슬라이드 쇼] 위젯을 지원합니다.
- 기본: 이 위젯은 캡션을 아래에 추가할 수 있는 이미지를 추가할 수 있는 큰 컨테이너로 구성됩니다. 이전 단추, 다음 단추 및 현재 슬라이드 개수도 캡션 영역에서 사용할 수 있습니다.
- 빈 레이아웃: [기본] 슬라이드 쇼와 유사합니다. 그러나 이 위젯에서 컨테이너는 비어 있습니다.
- 전체 화면: 이 위젯을 드래그하여 [디자인] 캔버스에 놓으면 전체 화면으로 표시됩니다. 기본적으로 이전 단추, 다음 단추 및 현재 슬라이드 개수가 페이지의 왼쪽 상단에 있는 작은 컨테이너에 있습니다.
- 라이트박스: 이 위젯을 사용하면 슬라이드 쇼 또는 페이지에 현재 표시된 갤러리 요소를 제외한 페이지의 나머지가 어두워집니다. 라이트박스는 [슬라이드 쇼]에서 일반적으로 사용되는 위젯 중 하나로, 여기서 사용자의 초점은 즉시 활성 갤러리로 이동합니다.
- 축소판: 이 위젯은 갤러리 영역의 왼쪽에 축소판이 있는 [컴포지션] 위젯과 유사합니다. 사용자가 축소판을 클릭하면 해당 이미지가 갤러리 영역에 표시됩니다.
다음 문서에서는 위쪽에 여러 축소판 이미지를 표시하고 아래에 하나의 큰 이미지가 표시되는 사진 갤러리를 만들 것입니다. [옵션] 패널을 사용하여 사진 갤러리가 동작하고 표시되는 방법을 제어할 수 있습니다. 또한 컨트롤 패널에서 설정을 적용하여 슬라이드 쇼의 모양에 스타일을 지정할 수 있습니다.
슬라이드 쇼는 페이지에 직접 추가할 수 있지만, 이 예에서는 [탭 구분 패널] 위젯의 컨텐트 영역 내부에 [축소판 슬라이드 쇼] 위젯을 중첩시킬 것입니다. 슬라이드 쇼를 직접 추가하려면 다음 단계를 따르세요.
위젯에 연결된 [옵션] 패널을 사용하여 [슬라이드 쇼] 위젯의 설정을 구성할 수 있습니다. 자동 재생, 전환 효과, 터치 장치에 대한 스와이프 등을 활성화하는 방법을 읽어 보십시오.
-
위젯을 선택하고 파란색 화살표 아이콘을 클릭하여 [옵션] 패널에 액세스합니다. 이 예에서는 [다음] 및 [이전] 화살표 단추가 필요하지 않습니다. 따라서 [이전] 및 [다음] 옵션의 선택을 해제하여 비활성화합니다. 확인란을 선택 취소하면 단추가 사라집니다.
[캡션] 및 [카운터] 옵션도 선택 해제하여 축소판 트리거 단추 및 큰 대상 컨테이너만 남도록 합니다. 옵션을 살펴보고 아래에 나열된 설정과 일치하도록 항목을 업데이트합니다.
- 새 메인 이미지: 비율에 맞게 프레임 채우기
- 새 축소판: 비율에 맞게 프레임 채우기
- 전환: 서서히 사라지기
- 전환 속도: 0.5초
- 자동 재생: 사용 안 함
- 다음 이후에 다시 시작: 사용
- 한 번 재생: 사용 안 함
- 셔플: 사용 안 함
- 스와이프 설정: 사용 안 함
- 라이트박스: 사용
- 전체 화면: 사용
- 자동 라이트박스: 사용 안 함
- 자유 형식 축소판: 사용
- 처음: 사용 안 함
- 이전: 사용
- 다음: 사용
- 마지막: 사용 안 함
- 캡션: 사용
- 카운터: 사용
- 닫기 단추: 사용 안 함
- 축소판: 사용
- 편집 시 라이트박스 파트 표시: 사용
- 함께 편집: 사용
[옵션] 패널에서 [축소판 슬라이드 쇼] 위젯에 대한 설정을 업데이트합니다.
-
위젯에 따라 사용 가능한 옵션이 서로 다르며 일부 위젯은 다른 위젯보다 더 복잡합니다. [메뉴] 옵션을 검토하여 사용 가능한 설정을 확인하십시오. 다음은 간략한 개요입니다.
이미지 추가: 폴더 아이콘을 클릭하여 표시할 이미지를 찾아보고 선택합니다.
새 메인 이미지: 큰 사진 컨텐트가 대상 컨테이너에 어떻게 표시되는지 정의합니다.
- 비율에 맞게 컨텐트 맞추기: 원본 크기가 대상 컨테이너와 일치하지 않더라도 사진 이미지 파일이 원본 크기로 유지됩니다. 따라서 이미지가 맞지 않을 경우 컨테이너의 일부가 비어 있을 수 있습니다.
- 비율에 맞게 프레임 채우기: 사진 이미지 파일의 크기를 조정하여 대상 컨테이너의 비율에 맞게 채웁니다. 사진 이미지 중 일부가 잘릴 수 있습니다.
새 축소판: 작은 축소판 사진 컨텐트가 트리거 컨테이너에 어떻게 표시되는지 정의합니다.
- 비율에 맞게 컨텐트 맞추기: 원본 크기가 대상 컨테이너와 일치하지 않더라도 사진 이미지 파일이 원본 크기로 유지됩니다. 따라서 이미지가 맞지 않을 경우 컨테이너의 일부가 비어 있을 수 있습니다.
- 비율에 맞게 프레임 채우기: 사진 이미지 파일의 크기를 조정하여 대상 컨테이너의 비율에 맞게 채웁니다. 사진 이미지 중 일부가 잘릴 수 있습니다.
전환: 대상 컨테이너의 컨텐트가 다른 대상 컨테이너로 바뀌는 과정에서 사용되는 애니메이션 효과입니다. 이러한 효과는 터치 스크린에도 사용됩니다. 따라서 모바일 장치용 사이트를 만들 경우 방문자가 화면을 쓸어 넘기면 다음 컨텐트 항목이 나타날 때 전환 효과를 볼 수 있습니다.
- 서서히 사라지기: 기존 컨테이너의 투명도가 낮아지면서 새 컨테이너의 투명도가 높아집니다.
- 가로: 새 컨테이너가 기존 컨테이너를 없애면서 가로로 펼쳐집니다.
- 세로: 새 컨테이너가 기존 컨테이너를 없애면서 세로로 펼쳐집니다.
전환 속도: 애니메이션을 재생하는 데 걸리는 시간(초)입니다.
자동 재생: 사용으로 설정되면 방문자가 각 트리거를 클릭하여 해당하는 대상을 순서대로 보아야 하는 대화형 경험 대신 슬라이드 쇼를 자동으로 재생합니다. 다음 이미지로 전환되기 전에 각 이미지를 표시할 시간(초)을 설정합니다.
셔플: 사용으로 설정되면 이미지가 축소판을 따라 순서대로 표시하는 대신 무작위 순서로 표시됩니다.
라이트박스: 사용으로 설정되면 대상 컨테이너의 컨텐트가 표시될 때 슬라이드 쇼가 오버레이되면서 페이지의 나머지 부분이 어두워집니다. 라이트박스 창이 닫히면 전체 페이지가 다시 나타납니다.
스와이프 설정: 사용으로 설정되고 사이트가 모바일 장치에 웹 컨텐트를 표시하기 위한 태블릿 또는 스마트폰 레이아웃을 포함할 경우 위젯의 대화형 파트가 터치 스크린 제스처를 지원합니다.
파트 섹션:
- 처음: 사용으로 설정되면 [처음] 탐색 단추가 표시됩니다.
- 이전: 사용으로 설정되면 [이전] 탐색 단추가 표시됩니다.
- 다음: 사용으로 설정되면 [다음] 탐색 단추가 표시됩니다.
- 마지막: 사용으로 설정되면 [마지막] 탐색 단추가 표시됩니다.
- 캡션: 사용으로 설정되면 사진 갤러리 캡션이 표시됩니다.
- 카운터: 사용으로 설정되면 사진 갤러리 카운터가 표시됩니다.
- 닫기 단추: 사용으로 설정되면 닫기 단추가 표시됩니다.
축소판: 사용으로 설정되면 축소판 트리거 단추가 표시됩니다.
편집 섹션:
- 편집 시 라이트박스 파트 표시: [라이트박스] 옵션이 사용으로 설정된 경우 해당하는 트리거가 페이지에서 선택되면 기본적으로 각 대상 영역만 표시됩니다. 레이아웃을 디자인할 때 작업하면서 대상을 보기 위해 이 옵션을 사용으로 설정하는 것이 도움이 될 수 있습니다. 이 설정은 페이지를 미리 보거나 브라우저에서 볼 때 슬라이드 쇼의 표시에 영향을 주지 않습니다. [라이트박스] 옵션이 사용으로 설정되지 않은 경우 이 옵션은 회색으로 비활성화됩니다.
[편집 시 라이트박스 파트 표시] 옵션은 라이트박스 슬라이드 쇼 위젯을 선택한 경우에만 사용할 수 있습니다.
- 함께 편집: 이 옵션은 위젯의 빠른 편집을 위해 기본적으로 사용으로 설정됩니다. 각 트리거의 모양을 서로 다르게 설정해야 하는 경우가 아니라면 한 요소에 대한 변경 내용이 나머지 요소에 자동으로 적용되도록 이 옵션을 그대로 사용으로 유지하십시오.
사용 가능한 설정을 검토했으면 [옵션] 메뉴 바깥쪽 페이지 영역을 클릭하여 이 메뉴를 닫습니다.
참고:
[전체 화면 슬라이드 쇼]의 [라이트박스] 및 [전체 화면] 옵션은 비활성화되어 있습니다.
전체 화면을 제외한 모든 슬라이드 쇼 위젯에 대해 [전체 화면] 옵션을 활성화할 수 없습니다.
슬라이드 쇼는 기본적으로 반응형이거나 유동입니다. Adobe Muse 웹 사이트에서 반응형 슬라이드 쇼 위젯을 사용하려면 다음 중 하나를 수행하십시오.
- 새 사이트를 만드는 경우 새 사이트를 열고 [위젯 라이브러리] 패널에서 슬라이드 쇼 위젯을 끌어서 놓습니다. 위젯은 기본적으로 반응형입니다.
- 기존 .muse 파일이 있는 경우 최신 버전의 Adobe Muse를 사용하여 이 파일을 엽니다. 위젯을 선택합니다. 위젯을 반응형으로 만들려면 위젯에서 요소를 선택하고 컨텍스트 메뉴의 [크기 조정] 드롭다운 목록에서 [반응형 폭 및 높이] 옵션 또는 [반응형 폭] 옵션을 선택합니다.
![Slideshow_responsive 슬라이드 쇼 위젯을 반응형으로 만들려면 [크기 조정] 옵션 선택](/content/dam/help/ko/muse/using/slideshow-widgets/_jcr_content/main-pars/image/Slideshow_responsive.png)
[슬라이드 쇼] 위젯을 반응형 사이트에 추가하는 경우 모든 중단점에서 위젯의 위치와 크기를 확인합니다. 슬라이드 쇼 위젯에서 개별 요소의 컨텐트와 크기를 수정할 수 있습니다. 또한 [이전] 단추, [다음] 단추, 다른 중단점의 [캡션]과 같은 개별 요소에 대한 [반응형] 설정을 활성화할 수 있습니다.
페이지에 추가할 수 있는 여러 가지 사이트 기능 중에는 슬라이드 쇼 위젯이 있습니다. 방문자가 축소판 이미지를 클릭해야만 더 큰 버전의 이미지가 표시되도록 슬라이드 쇼를 설정하거나, 페이지를 로드할 때 자동으로 재생되는 슬라이드 쇼를 만들 수 있습니다. [자동 재생] 슬라이드 쇼를 사용하면 일련의 사진을 제시하여 사이트의 컨텐트에 대해 강렬한 인상을 줄 수 있습니다. 슬라이드 전환에 사용되는 애니메이션 유형을 설정하여 슬라이드 쇼 재생 방식을 제어할 수 있습니다.
다음 소단원에서는 사이트의 홈 페이지에 [자동 재생] 슬라이드 쇼를 추가해 보겠습니다.
[플랜] 보기에서 Home 축소판을 두 번 클릭하여 [디자인] 보기에서 편집할 수 있도록 [플랜] 보기를 엽니다.
-
파란색 화살표를 클릭하여 [옵션] 메뉴를 엽니다. 옵션을 확인하여 다음과 같이 설정합니다.
- 전환: 서서히 사라지기
- 자동 재생: 느리게
- 새 메인 이미지: 비율에 맞게 프레임 채우기
- 새 축소판: 비율에 맞게 프레임 채우기
- 라이트박스: (선택 취소합니다.)
- 파트: (모든 옵션을 선택 취소하여 캡션, 카운터, "다음" 단추, "이전" 단추를 숨깁니다.)
참고:
이 슬라이드 쇼는 방문자가 따로 조작하지 않아도 페이지를 로드할 때 자동으로 재생됩니다. 방문자가 마우스 단추를 클릭하여 제어할 수 있는 슬라이드 쇼를 만들려면 자동 재생을 없음으로 설정하고 옵션 메뉴의 파트 섹션에 있는 다음 및 이전의 확인 표시를 선택한 채로 두십시오.
-
[A-마스터] 탭의 [X] 아이콘을 클릭하여 탭을 닫습니다. [기본] 위젯을 추가한 페이지를 엽니다. 미리 보기를 클릭하면 이번에는 [자동 재생] 슬라이드 쇼 위에 커피 방울 이미지가 표시되는 것을 확인할 수 있습니다. 슬라이드 쇼를 검토했으면 [디자인 보기]로 이동합니다.
참고:
탐색 모음을 A-마스터 페이지에 만들어 뒀으므로 탐색 기능(및 기타 공통 요소)을 제어하기 위해 임의의 설정을 변경하려면 A-마스터 페이지를 편집할 수 있도록 이를 [디자인] 보기에서 열어야 합니다. 다른 일반 페이지를 편집할 때 마스터 페이지의 요소가 함께 표시되기는 하지만 이와 같은 다른 사이트 페이지에서는 머리글과 바닥글 컨텐트를 편집할 수 없습니다.
[전체 화면 슬라이드 쇼] 위젯에서 전체 화면으로 표시되는 슬라이드 쇼를 설정할 수 있습니다. 방문자가 전체 화면 슬라이드 쇼를 클릭하면 컨텐트가 커지고 일시적으로 사이트의 나머지 컨텐트를 가리면서 컴퓨터나 장치 화면의 전체 브라우저 창을 채웁니다. 원할 경우 페이지가 로드될 때 이미지가 순환하여 표시되도록 슬라이드 쇼가 자동으로 재생되도록 설정할 수 있습니다. 방문자는 Esc 키를 눌러 슬라이드 쇼를 종료할 수 있습니다.
[전체 화면 슬라이드 쇼] 위젯을 사이트에 추가하려면 다음 단계를 수행하십시오.
-
적용할 전환 유형을 선택합니다. [전환] 메뉴를 사용하여 [페이드], [가로] 또는 [세로] 중에서 선택합니다. 기본적으로 [전환 속도]는 0.5초로 설정되지만 원하는 대로 속도를 조정할 수 있습니다.
[자동 재생]이 설정된 경우 페이지가 로드되는 즉시 슬라이드 쇼 재생이 시작되고 설정한 시간(초)에 따라 컨텐트가 주기적으로 바뀝니다. [자동 재생]이 설정된 경우 기본적으로 각 이미지는 3.5초 동안 표시됩니다.
[전체 화면 슬라이드 쇼] 위젯을 구성할 때 축소판이 기본적으로 숨겨지도록 탐색용 다음 및 이전 단추를 설정하는 것이 일반적입니다. 하지만 기본 슬라이드 쇼 이미지의 상단에 축소판이 표시되도록 하려는 경우 [축소판] 옵션을 설정할 수 있습니다.
축소판이 숨겨질 경우 다음 및 이전 단추가 설정되었는지 확인하십시오. [카운터]는 선택 사항이며, 방문자가 모음에서 어떤 이미지가 현재 표시되고 있는지 이해하도록 돕습니다.
[자유 형식 축소판] 옵션은 슬라이드 쇼에서 축소판 표시 방법에 대한 완전한 제어 기능을 제공합니다. 축소판을 단순히 행에 나열하는 대신 각 축소판을 원하는 위치에 둘 수 있습니다.
-
[선택] 도구를 사용하여 하나의 축소판을 선택합니다. 축소판이 선택되면 [선택 표시자]에 [축소판]이라고 표시됩니다. 선택한 축소판을 원하는 위치로 이동합니다. 이 단계를 반복하여 모든 축소판의 위치를 재조정합니다. 브라우저를 스크롤하거나 크기를 조정할 경우에도 각 축소판이 제자리에 그대로 표시되도록 하려는 경우 각 축소판을 고정할 수 있습니다.
참고:
서로 다른 규격이 되도록 축소판 컨테이너의 크기를 조정하려는 경우 [옵션] 메뉴에서 [함께 편집] 옵션을 해제한 다음 [선택] 도구를 사용하여 각 축소판의 모퉁이를 드래그하여 원하는 대로 크기를 조정합니다.
컨텐트가 라이트박스에 표시되는 경우 모달 창에 초점이 맞추어지고 페이지의 나머지가 흐려지면서 해당 컨텐트가 강조 표시됩니다. 방문자는 축소판, 다음 또는 이전 단추를 클릭하여 라이트박스와 상호 작용합니다. 라이트박스를 종료하고 일반 사이트 보기로 돌아가려면 방문자가 닫기 단추를 클릭하거나 Esc 키를 누릅니다.
Adobe Muse의 모든 [슬라이드 쇼] 위젯에서 [라이트박스] 옵션을 제공합니다. 또한 [슬라이드 쇼] 섹션에서 하나의 위젯은 라이트박스 동작을 사용하도록 미리 구성되어 있습니다. [라이트박스 슬라이드 쇼] 위젯은 기본적으로 [라이트박스] 옵션이 설정됩니다.
라이트박스에 이미지를 표시하는 슬라이드 쇼를 만들려면 다음 단계를 수행하십시오.
-
[옵션] 메뉴가 여전히 열려 있는 상태에서 기타 변경 작업을 수행하여 위젯을 원하는 대로 구성합니다. 예를 들면 이전 단추, 다음 단추, 캡션 및 카운터를 표시하거나 숨길 수 있습니다. 라이트박스 표시의 경우 닫기 단추를 설정하는 것이 좋습니다. [닫기 단추] 옵션 옆에 있는 확인란을 선택합니다.
닫기 단추(X)는 슬라이드 쇼의 상단 오른쪽에 나타납니다.
원할 경우 [선택] 도구를 사용하여 닫기 단추를 다른 위치로 이동할 수 있습니다. 방문자가 라이트박스 표시를 종료하고 모달 창을 닫으려는 경우 닫기 단추를 클릭하거나 Esc 키를 누를 수 있습니다.
참고:
라이트박스 창을 둘러싼 테두리의 폭을 변경하려는 경우 [라이트박스 슬라이드 쇼] 위젯을 선택하고 [간격] 패널에서 [안쪽 여백] 설정을 업데이트합니다.