Adobe Muse에서 [전체 화면] 및 [축소판 슬라이드 쇼] 위젯을 추가, 구성 및 테스트하려면 이 문서를 참조하십시오.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

Adobe Muse의 [슬라이드 쇼] 위젯은 이미지에만 사용되는 대화형 위젯입니다. [탭 구분 패널] 위젯과 유사하게, 사용자가 축소판 컨테이너를 클릭하면 해당 메인 이미지 버전이 페이지의 다른 큰 컨테이너에 표시됩니다.

Adobe Muse는 다음과 같은 유형의 [슬라이드 쇼] 위젯을 지원합니다.

  • 기본: 이 위젯은 캡션을 아래에 추가할 수 있는 이미지를 추가할 수 있는 큰 컨테이너로 구성됩니다. 이전 단추, 다음 단추 및 현재 슬라이드 개수도 캡션 영역에서 사용할 수 있습니다.
  • 빈 레이아웃: [기본] 슬라이드 쇼와 유사합니다. 그러나 이 위젯에서 컨테이너는 비어 있습니다.
  • 전체 화면: 이 위젯을 드래그하여 [디자인] 캔버스에 놓으면 전체 화면으로 표시됩니다. 기본적으로 이전 단추, 다음 단추 및 현재 슬라이드 개수가 페이지의 왼쪽 상단에 있는 작은 컨테이너에 있습니다.
  • 라이트박스: 이 위젯을 사용하면 슬라이드 쇼 또는 페이지에 현재 표시된 갤러리 요소를 제외한 페이지의 나머지가 어두워집니다. 라이트박스는 [슬라이드 쇼]에서 일반적으로 사용되는 위젯 중 하나로, 여기서 사용자의 초점은 즉시 활성 갤러리로 이동합니다.
  • 축소판: 이 위젯은 갤러리 영역의 왼쪽에 축소판이 있는 [컴포지션] 위젯과 유사합니다. 사용자가 축소판을 클릭하면 해당 이미지가 갤러리 영역에 표시됩니다.

다음 문서에서는 위쪽에 여러 축소판 이미지를 표시하고 아래에 하나의 큰 이미지가 표시되는 사진 갤러리를 만들 것입니다. [옵션] 패널을 사용하여 사진 갤러리가 동작하고 표시되는 방법을 제어할 수 있습니다. 또한 컨트롤 패널에서 설정을 적용하여 슬라이드 쇼의 모양에 스타일을 지정할 수 있습니다.

100% 폭 슬라이드 쇼 추가: Adobe Muse에서 100% 폭 슬라이드 쇼를 웹 사이트 디자인에 추가하는 방법을 배울 수 있습니다. 100% 폭 전체 화면을 위젯 라이브러리 내에서 사용할 수 있습니다.
Danielle Beaumont

페이지에 축소판 슬라이드 쇼 위젯 추가

슬라이드 쇼는 페이지에 직접 추가할 수 있지만, 이 예에서는 [탭 구분 패널] 위젯의 컨텐트 영역 내부에 [축소판 슬라이드 쇼] 위젯을 중첩시킬 것입니다. 슬라이드 쇼를 직접 추가하려면 다음 단계를 따르세요.

  1. Adobe Muse를 엽니다. [시작] 화면에서 다음 중 하나를 수행합니다.

    • [새로 만들기]를 클릭하여 생성 중인 새 사이트에 슬라이드 쇼 위젯을 추가합니다.
    • [열기]를 클릭하고 위젯을 추가할 기존 .muse 파일을 엽니다. [슬라이드 쇼] 위젯을 추가하려는 페이지를 두 번 클릭하여 엽니다.
  2. [위젯 라이브러리] 패널을 엽니다([창] > [위젯 라이브러리]). 슬라이드 쇼 섹션을 펼칩니다. 이 목록에서 필요한 위젯을 선택합니다. 예를 들어, 목록에서 [축소판 슬라이드 쇼] 위젯을 선택하고 위젯을 [디자인 보기]로 드래그합니다.

    Adobe Muse, 위젯 라이브러리의 축소판 슬라이드 쇼
    [축소판 슬라이드 쇼] 위젯을 페이지로 드래그합니다.

    축소판 컨테이너는 왼쪽에 있고 메인 이미지의 컨테이너 및 캡션 컨테이너는 이미지 아래에 있습니다.

    참고:

    위젯 안에 채워진 기본 컨텐트를 제거하려면 위젯을 마우스 오른쪽 단추로 클릭하고 [위젯 컨텐트 지우기]를 선택합니다.

  3. 축소판을 제거하려면 자리 표시자 컨텐트(컨텐트 영역 내부의 이미지 프레임 및 텍스트 프레임)를 선택하고 삭제합니다.

옵션 패널에서 축소판 슬라이드 쇼 위젯 구성

위젯에 연결된 [옵션] 패널을 사용하여 [슬라이드 쇼] 위젯의 설정을 구성할 수 있습니다. 자동 재생, 전환 효과, 터치 장치에 대한 스와이프 등을 활성화하는 방법을 읽어 보십시오.

  1. 위젯을 선택하고 파란색 화살표 아이콘을 클릭하여 [옵션] 패널에 액세스합니다. 이 예에서는 [다음] 및 [이전] 화살표 단추가 필요하지 않습니다. 따라서 [이전] 및 [다음] 옵션의 선택을 해제하여 비활성화합니다. 확인란을 선택 취소하면 단추가 사라집니다.

    [캡션] 및 [카운터] 옵션도 선택 해제하여 축소판 트리거 단추 및 큰 대상 컨테이너만 남도록 합니다. 옵션을 살펴보고 아래에 나열된 설정과 일치하도록 항목을 업데이트합니다.

    • 새 메인 이미지: 비율에 맞게 프레임 채우기
    • 새 축소판: 비율에 맞게 프레임 채우기
    • 전환: 서서히 사라지기
    • 전환 속도: 0.5초
    • 자동 재생: 사용 안 함
    • 다음 이후에 다시 시작: 사용
    • 한 번 재생: 사용 안 함
    • 셔플: 사용 안 함
    • 스와이프 설정: 사용 안 함
    • 라이트박스: 사용
    • 전체 화면: 사용
    • 자동 라이트박스: 사용 안 함
    • 자유 형식 축소판: 사용
    • 처음: 사용 안 함
    • 이전: 사용
    • 다음: 사용
    • 마지막: 사용 안 함
    • 캡션: 사용
    • 카운터: 사용
    • 닫기 단추: 사용 안 함
    • 축소판: 사용
    • 편집 시 라이트박스 파트 표시: 사용
    • 함께 편집: 사용
    슬라이드 쇼 옵션 패널
    [옵션] 패널에서 [축소판 슬라이드 쇼] 위젯에 대한 설정을 업데이트합니다.

  2. 위젯에 따라 사용 가능한 옵션이 서로 다르며 일부 위젯은 다른 위젯보다 더 복잡합니다. [메뉴] 옵션을 검토하여 사용 가능한 설정을 확인하십시오. 다음은 간략한 개요입니다.

    이미지 추가: 폴더 아이콘을 클릭하여 표시할 이미지를 찾아보고 선택합니다.

    새 메인 이미지: 큰 사진 컨텐트가 대상 컨테이너에 어떻게 표시되는지 정의합니다.

    • 비율에 맞게 컨텐트 맞추기: 원본 크기가 대상 컨테이너와 일치하지 않더라도 사진 이미지 파일이 원본 크기로 유지됩니다. 따라서 이미지가 맞지 않을 경우 컨테이너의 일부가 비어 있을 수 있습니다.
    • 비율에 맞게 프레임 채우기: 사진 이미지 파일의 크기를 조정하여 대상 컨테이너의 비율에 맞게 채웁니다. 사진 이미지 중 일부가 잘릴 수 있습니다.

    새 축소판: 작은 축소판 사진 컨텐트가 트리거 컨테이너에 어떻게 표시되는지 정의합니다.

    • 비율에 맞게 컨텐트 맞추기: 원본 크기가 대상 컨테이너와 일치하지 않더라도 사진 이미지 파일이 원본 크기로 유지됩니다. 따라서 이미지가 맞지 않을 경우 컨테이너의 일부가 비어 있을 수 있습니다.
    • 비율에 맞게 프레임 채우기: 사진 이미지 파일의 크기를 조정하여 대상 컨테이너의 비율에 맞게 채웁니다. 사진 이미지 중 일부가 잘릴 수 있습니다.

    전환: 대상 컨테이너의 컨텐트가 다른 대상 컨테이너로 바뀌는 과정에서 사용되는 애니메이션 효과입니다. 이러한 효과는 터치 스크린에도 사용됩니다. 따라서 모바일 장치용 사이트를 만들 경우 방문자가 화면을 쓸어 넘기면 다음 컨텐트 항목이 나타날 때 전환 효과를 볼 수 있습니다.

    • 서서히 사라지기: 기존 컨테이너의 투명도가 낮아지면서 새 컨테이너의 투명도가 높아집니다.
    • 가로: 새 컨테이너가 기존 컨테이너를 없애면서 가로로 펼쳐집니다.
    • 세로: 새 컨테이너가 기존 컨테이너를 없애면서 세로로 펼쳐집니다.

    전환 속도: 애니메이션을 재생하는 데 걸리는 시간(초)입니다.

    자동 재생: 사용으로 설정되면 방문자가 각 트리거를 클릭하여 해당하는 대상을 순서대로 보아야 하는 대화형 경험 대신 슬라이드 쇼를 자동으로 재생합니다. 다음 이미지로 전환되기 전에 각 이미지를 표시할 시간(초)을 설정합니다.

    셔플: 사용으로 설정되면 이미지가 축소판을 따라 순서대로 표시하는 대신 무작위 순서로 표시됩니다.

    라이트박스: 사용으로 설정되면 대상 컨테이너의 컨텐트가 표시될 때 슬라이드 쇼가 오버레이되면서 페이지의 나머지 부분이 어두워집니다.  라이트박스 창이 닫히면 전체 페이지가 다시 나타납니다.

    스와이프 설정: 사용으로 설정되고 사이트가 모바일 장치에 웹 컨텐트를 표시하기 위한 태블릿 또는 스마트폰 레이아웃을 포함할 경우 위젯의 대화형 파트가 터치 스크린 제스처를 지원합니다.

    파트 섹션:

    • 처음: 사용으로 설정되면 [처음] 탐색 단추가 표시됩니다.
    • 이전: 사용으로 설정되면 [이전] 탐색 단추가 표시됩니다.
    • 다음: 사용으로 설정되면 [다음] 탐색 단추가 표시됩니다.
    • 마지막: 사용으로 설정되면 [마지막] 탐색 단추가 표시됩니다.
    • 캡션: 사용으로 설정되면 사진 갤러리 캡션이 표시됩니다.
    • 카운터: 사용으로 설정되면 사진 갤러리 카운터가 표시됩니다.
    • 닫기 단추: 사용으로 설정되면 닫기 단추가 표시됩니다.

    축소판: 사용으로 설정되면 축소판 트리거 단추가 표시됩니다.

    편집 섹션:

    • 편집 시 라이트박스 파트 표시: [라이트박스] 옵션이 사용으로 설정된 경우 해당하는 트리거가 페이지에서 선택되면 기본적으로 각 대상 영역만 표시됩니다. 레이아웃을 디자인할 때 작업하면서 대상을 보기 위해 이 옵션을 사용으로 설정하는 것이 도움이 될 수 있습니다. 이 설정은 페이지를 미리 보거나 브라우저에서 볼 때 슬라이드 쇼의 표시에 영향을 주지 않습니다. [라이트박스] 옵션이 사용으로 설정되지 않은 경우 이 옵션은 회색으로 비활성화됩니다. 

    [편집 시 라이트박스 파트 표시] 옵션은 라이트박스 슬라이드 쇼 위젯을 선택한 경우에만 사용할 수 있습니다.

    • 함께 편집: 이 옵션은 위젯의 빠른 편집을 위해 기본적으로 사용으로 설정됩니다. 각 트리거의 모양을 서로 다르게 설정해야 하는 경우가 아니라면 한 요소에 대한 변경 내용이 나머지 요소에 자동으로 적용되도록 이 옵션을 그대로 사용으로 유지하십시오.

    사용 가능한 설정을 검토했으면 [옵션] 메뉴 바깥쪽 페이지 영역을 클릭하여 이 메뉴를 닫습니다.

    참고:

    [전체 화면 슬라이드 쇼]의 [라이트박스] 및 [전체 화면] 옵션은 비활성화되어 있습니다.

    전체 화면을 제외한 모든 슬라이드 쇼 위젯에 대해 [전체 화면] 옵션을 활성화할 수 없습니다.

축소판 슬라이드 쇼 위젯의 요소 크기 조정 및 정렬

  1. [슬라이드 쇼] 위젯을 클릭하여 선택합니다. [선택] 도구를 사용하여 핸들을 드래그하여 약 790픽셀 폭 x 490픽셀 높이가 될 때까지 전체 [축소판 슬라이드 쇼] 위젯의 크기를 조정합니다. [변형] 패널 또는 컨트롤 패널의 [변형] 필드에서 규격을 확인할 수 있습니다.

  2. [슬라이드 쇼]가 여전히 선택된 상태에서 [축소판 컨테이너]를 다시 클릭하여 3개의 축소판이 포함된 컨테이너를 선택합니다. 측면 변환 핸들을 사용하여 넓힌 다음 [선택] 도구를 사용하여 축소판이 큰 메인 이미지 컨테이너의 위쪽에 배치되고 가운데에 세로로 정렬될 때까지 축소판 모음을 위로 드래그합니다.

    5개 축소판이 포함된 컨테이너
    축소판 트리거 컨테이너를 선택하고 큰 대상 컨테이너 위쪽에 재배치합니다.

    요소를 드래그할 때 파란색 스마트 안내선이 잠시 표시되므로 [축소판 컨테이너]가 언제 메인 이미지 컨테이너의 가운데에 정렬되는지 알 수 있습니다.

    다음 단계에 따라 해당하는 축소판 및 메인 이미지 컨테이너를 자동으로 생성하면서 그래픽을 사진 갤러리에 추가합니다.

  3. 파란색 화살표 단추를 클릭하여 [옵션] 메뉴를 엽니다. [이미지 추가...] 옆에 있는 폴더 아이콘을 클릭하고 파일을 저장한 폴더로 이동합니다.

  4. 필요한 이미지 파일을 선택합니다. [열기]을 클릭하여 [가져오기] 대화 상자를 닫습니다.

    [가져오기] 대화 상자
    gallery 하위 폴더에 있는 5개의 갤러리 사진을 선택합니다.

    여러 이미지 파일을 선택하면 [축소판 슬라이드 쇼] 위젯을 채우게 됩니다. 이 전략을 통해 여러 이미지 파일을 선택하고 메인 이미지 컨테이너의 각 새로운 큰 이미지 파일에 해당하는 [축소판 컨테이너] 단추를 생성할 수 있습니다.

    새로운 이미지가 기존 축소판 단추에 추가됩니다.

  5. 슬라이드 쇼를 처음 추가할 때 기본적으로 표시되는 축소판 이미지를 두 번 클릭하여 선택합니다. Delete 키(Mac) 또는 백스페이스 키(Windows)를 눌러 새로운 축소판만 남을 때까지 각 축소판을 제거합니다.

    슬라이드 쇼 축소판 및 이미지
    각 기본 흑백 축소판을 선택하고 백스페이스 또는 Delete 키를 눌러 하나씩 제거합니다.

    전체 축소판을 삭제하지 않도록 주의하십시오. 전체 축소판을 삭제한 경우 [편집] > [실행 취소]를 선택하여 마지막 작업을 취소한 다음 백스페이스 또는 Delete 키를 누르기 전에 각 축소판을 클릭했는지 확인합니다(선택 표시기에 축소판이라는 단어가 표시됨).

  6. 5개의 축소판 이미지가 포함된 컨테이너를 선택합니다. 변형 핸들을 사용하여 남아 있는 축소판이 메인 이미지 컨테이너 위쪽 가운데에 오도록 크기를 조정합니다.

    슬라이드 쇼 축소판 및 이미지
    메인 이미지의 가운데로 축소판 컨테이너의 크기를 조정합니다.

반응형 슬라이드 쇼 위젯 사용

슬라이드 쇼는 기본적으로 반응형이거나 유동입니다. Adobe Muse 웹 사이트에서 반응형 슬라이드 쇼 위젯을 사용하려면 다음 중 하나를 수행하십시오.

  • 새 사이트를 만드는 경우 새 사이트를 열고 [위젯 라이브러리] 패널에서 슬라이드 쇼 위젯을 끌어서 놓습니다. 위젯은 기본적으로 반응형입니다.
  • 기존 .muse 파일이 있는 경우 최신 버전의 Adobe Muse를 사용하여 이 파일을 엽니다. 위젯을 선택합니다. 위젯을 반응형으로 만들려면 위젯에서 요소를 선택하고 컨텍스트 메뉴의 [크기 조정] 드롭다운 목록에서 [반응형 폭 및 높이] 옵션 또는 [반응형 폭] 옵션을 선택합니다.
슬라이드 쇼 위젯을 반응형으로 만들려면 [크기 조정] 옵션 선택
슬라이드 쇼 위젯을 반응형으로 만들려면 [크기 조정] 옵션 선택

[슬라이드 쇼] 위젯을 반응형 사이트에 추가하는 경우 모든 중단점에서 위젯의 위치와 크기를 확인합니다. 슬라이드 쇼 위젯에서 개별 요소의 컨텐트와 크기를 수정할 수 있습니다. 또한 [이전] 단추, [다음] 단추, 다른 중단점의 [캡션]과 같은 개별 요소에 대한 [반응형] 설정을 활성화할 수 있습니다.

축소판 슬라이드 쇼 위젯 표시 방법 테스트

슬라이드 쇼 요소의 위치를 조정하고 자리 표시자 축소판 이미지를 제거한 후에 슬라이드 쇼를 테스트하여 어떻게 표시되는지 확인할 수 있습니다.

  1. 먼저, 위쪽에 있는 축소판 단추를 클릭하여 [디자인] 보기에서 사진 갤러리를 테스트하고 각 해당하는 메인 이미지가 아래쪽의 큰 컨테이너에 표시되는지 확인합니다.

  2. [미리 보기]를 클릭하여 갤러리가 브라우저에서 어떻게 나타나는지 확인합니다. 슬라이드 쇼와 상호 작용하여 해당하는 축소판을 클릭할 때 큰 이미지가 어떻게 나타나는지 확인합니다.

    축소판 및 슬라이드 쇼 테스트
    [탭 구분 패널] 위젯의 [컨텐트 영역] 컨테이너 내에서 가운데에 오도록 갤러리를 배치합니다.

  3. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 기본 브라우저에 표시된 정보 페이지를 확인합니다.

    브라우저의 크기를 조정하고 다양한 화면 크기로 [슬라이드 쇼] 위젯을 미리 봅니다. [슬라이드 쇼] 위젯은 기본적으로 반응형임을 확인할 수 있습니다. 즉, 화면 크기에 맞춰 크기가 조정됩니다.

    [디자인 보기]의 스크러버를 사용하여 위젯을 미리 볼 수도 있습니다. 언제든지 위젯을 수정하거나 위치를 조정하려면 중단점을 추가하고 위젯을 재정렬합니다.

  4. [탭 구분 패널] 위젯의 기능을 테스트합니다. 탭을 클릭하여 해당하는 컨텐트가 컨텐트 영역 컨테이너에 표시되는지 확인합니다. 그런 다음 축소판 단추를 클릭하고 해당하는 큰 메인 이미지가 표시되는지 확인하여 [갤러리] 탭에서 슬라이드 쇼를 테스트합니다.

슬라이드 쇼 위젯을 사용하여 슬라이드 쇼 프레젠테이션 만들기

페이지에 추가할 수 있는 여러 가지 사이트 기능 중에는 슬라이드 쇼 위젯이 있습니다. 방문자가 축소판 이미지를 클릭해야만 더 큰 버전의 이미지가 표시되도록 슬라이드 쇼를 설정하거나, 페이지를 로드할 때 자동으로 재생되는 슬라이드 쇼를 만들 수 있습니다. [자동 재생] 슬라이드 쇼를 사용하면 일련의 사진을 제시하여 사이트의 컨텐트에 대해 강렬한 인상을 줄 수 있습니다. 슬라이드 전환에 사용되는 애니메이션 유형을 설정하여 슬라이드 쇼 재생 방식을 제어할 수 있습니다.

다음 소단원에서는 사이트의 홈 페이지에 [자동 재생] 슬라이드 쇼를 추가해 보겠습니다.

[플랜] 보기에서 Home 축소판을 두 번 클릭하여 [디자인] 보기에서 편집할 수 있도록 [플랜] 보기를 엽니다.

[슬라이드 쇼] 위젯을 [자동 재생]으로 구성

일련의 이미지를 순환하며 보여 주는 프레젠테이션을 만드는 단계별 작업 과정은 다음과 같습니다.

  1. 위젯 라이브러리에서 슬라이드 쇼를 클릭합니다.

  2. 기본 위젯을 선택하여 페이지 위로 드래그합니다.

  3. 기본 슬라이드 쇼 위젯에는 짙은 회색 사각형(이미지 자리 표시자) 한 개, 자리 표시자 캡션, 이미지 번호(1 - 1), 방문자가 일련의 이미지를 앞뒤로 오가며 탐색하는 데 사용할 수 있는 화살표 단추 두 개가 기본적으로 포함되어 있습니다.

  4. 파란색 화살표를 클릭하여 [옵션] 메뉴를 엽니다. 옵션을 확인하여 다음과 같이 설정합니다.

    • 전환: 서서히 사라지기
    • 자동 재생: 느리게
    • 새 메인 이미지: 비율에 맞게 프레임 채우기
    • 새 축소판: 비율에 맞게 프레임 채우기
    • 라이트박스: (선택 취소합니다.)
    • 파트: (모든 옵션을 선택 취소하여 캡션, 카운터, "다음" 단추, "이전" 단추를 숨깁니다.)

    참고:

    이 슬라이드 쇼는 방문자가 따로 조작하지 않아도 페이지를 로드할 때 자동으로 재생됩니다. 방문자가 마우스 단추를 클릭하여 제어할 수 있는 슬라이드 쇼를 만들려면 자동 재생없음으로 설정하고 옵션 메뉴의 파트 섹션에 있는 다음이전의 확인 표시를 선택한 채로 두십시오.

  5. [옵션] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다. 이렇게 변경을 마치고 나면 짙은 회색 사각형만 표시된 채로 남습니다. 언제든지 [옵션] 메뉴에서 설정을 수정하여 위젯의 구성을 변경할 수 있습니다.

  6. 이미지 프레임(짙은 회색 사각형)을 두 번 클릭하여 선택하고 측면 핸들을 드래그하여 슬라이드 쇼를 페이지의 전체 폭으로 확장합니다.

    슬라이드 쇼 이미지 프레임
    슬라이드 쇼 이미지 프레임의 측면 핸들을 드래그하여 페이지 크기에 맞춥니다.

  7. 위쪽과 아래쪽 화살표를 사용하여 Home 페이지의 전체 크기를 채울 만큼 이미지 프레임의 높이를 확장합니다. 아래쪽으로는 바닥글 상단에 바둑판식으로 배열된 지그재그 이미지 바로 위까지 오도록 이미지 프레임을 확장합니다. 지금은 탐색 모음의 오른쪽에 있는 갈색 커피 방울 이미지가 짙은 회색 자리 표시자에 덮여도 괜찮습니다.

  8. 파란색 화살표를 클릭하여 [옵션] 메뉴를 다시 엽니다. 이번에는 상단에 있는 [이미지 추가]라는 텍스트 옆의 폴더 아이콘을 클릭합니다.

  9. 가져오기 대화 상자에서 에셋 폴더를 찾은 다음 에셋 파일을 엽니다. [선택]을 클릭하여 이미지들을 슬라이드 쇼에 추가합니다.

  10. [미리 보기]를 클릭하여 슬라이드 쇼를 재생해 봅니다. 현재는 [자동 재생] 속도가 느리게 설정되어 있습니다. 이미지가 좀 더 빨리 전환되게 하고 싶으면 옵션 메뉴에서 해당 설정을 변경하면 됩니다. 마지막 이미지를 표시하고 나면 슬라이드 쇼가 맨 처음으로 돌아가 다시 첫 이미지부터 재생을 시작합니다. 자동 재생을 설정한 상태에서는 슬라이드 쇼가 무한 반복됩니다.

이렇게 해서 슬라이드 쇼가 완성되었습니다. 그런데 탐색 모음의 오른쪽에 있는 흘러내리는 커피 방울 이미지를 수정하려면 한 가지 작업을 더 수행해야 합니다.

  1. [플랜] 보기에서 A-마스터 축소판을 두 번 클릭하여 [디자인] 보기로 엽니다.

  2. 선택 도구를 사용하여 탐색 그래픽의 오른쪽 상단에 있는 갈색 커피 방울 이미지를 선택합니다.

  3. 흘러내리는 커피 방울 이미지를 마우스 오른쪽 단추로 클릭하여 컨텍스트 메뉴를 열고 [정돈] > [맨 앞으로 가져오기]를 선택합니다.

  4. [A-마스터] 탭의 [X] 아이콘을 클릭하여 탭을 닫습니다. [기본] 위젯을 추가한 페이지를 엽니다. 미리 보기를 클릭하면 이번에는 [자동 재생] 슬라이드 쇼 위에 커피 방울 이미지가 표시되는 것을 확인할 수 있습니다. 슬라이드 쇼를 검토했으면 [디자인 보기]로 이동합니다.

    참고:

    탐색 모음을 A-마스터 페이지에 만들어 뒀으므로 탐색 기능(및 기타 공통 요소)을 제어하기 위해 임의의 설정을 변경하려면 A-마스터 페이지를 편집할 수 있도록 이를 [디자인] 보기에서 열어야 합니다. 다른 일반 페이지를 편집할 때 마스터 페이지의 요소가 함께 표시되기는 하지만 이와 같은 다른 사이트 페이지에서는 머리글과 바닥글 컨텐트를 편집할 수 없습니다.

전체 화면 슬라이드 쇼 위젯 추가

[전체 화면 슬라이드 쇼] 위젯에서 전체 화면으로 표시되는 슬라이드 쇼를 설정할 수 있습니다. 방문자가 전체 화면 슬라이드 쇼를 클릭하면 컨텐트가 커지고 일시적으로 사이트의 나머지 컨텐트를 가리면서 컴퓨터나 장치 화면의 전체 브라우저 창을 채웁니다. 원할 경우 페이지가 로드될 때 이미지가 순환하여 표시되도록 슬라이드 쇼가 자동으로 재생되도록 설정할 수 있습니다. 방문자는 Esc 키를 눌러 슬라이드 쇼를 종료할 수 있습니다.

[전체 화면 슬라이드 쇼] 위젯을 사이트에 추가하려면 다음 단계를 수행하십시오.

  1. Adobe Muse를 실행합니다. 페이지를 두 번 클릭하여 페이지를 [디자인 보기]에서 엽니다.

  2. [창] > [위젯 라이브러리]를 선택하여 [위젯 라이브러리]에 액세스하거나 패널 모음에서 [위젯 라이브러리] 탭을 클릭하여 활성화합니다.

  3. 위젯 목록에서 [슬라이드 쇼] 섹션을 확장합니다. [슬라이드 쇼] 섹션에서 [전체 화면] 위젯을 선택합니다.

    위젯 라이브러리
    [위젯 라이브러리]에서 [전체 화면 슬라이드 쇼] 위젯을 찾아 선택합니다.

전체 화면 슬라이드 쇼 위젯 구성

[전체 화면 슬라이드 쇼] 위젯은 Adobe Muse의 다른 위젯과 다르게 동작합니다. 어떻게 동작하는지 살펴보십시오.

  1. [전체 화면 슬라이드 쇼] 위젯을 [위젯 라이브러리]에서 페이지로 드래그합니다.

    기본 컨텐트가 전체 브라우저 창의 높이와 폭에 맞게 커집니다.

    전체 화면 슬라이드 쇼 위젯
    [전체 화면 슬라이드 쇼] 위젯이 확대되어 사이트의 표시 영역을 덮고 브라우저 창을 채웁니다.

    기본적으로 [전체 화면 슬라이드 쇼] 위젯을 추가하면 오른쪽 상단에 이전 단추, 다음 단추 및 카운터 필드가 표시됩니다.

  2. 파란색 화살표를 클릭하여 [옵션] 패널에서 설정을 검토합니다.

    슬라이드 쇼 옵션 패널
    [옵션] 패널은 [전체 화면 슬라이드 쇼] 위젯에 적용되는 기본 설정을 표시합니다.

    [비율에 맞게 프레임 채우기] 옵션은 새 메인 이미지(큰 이미지) 및 새 축소판 이미지에 자동으로 적용되어 전체 화면 보기를 용이하게 합니다.

  3. 적용할 전환 유형을 선택합니다. [전환] 메뉴를 사용하여 [페이드], [가로] 또는 [세로] 중에서 선택합니다. 기본적으로 [전환 속도]는 0.5초로 설정되지만 원하는 대로 속도를 조정할 수 있습니다.

    [자동 재생]이 설정된 경우 페이지가 로드되는 즉시 슬라이드 쇼 재생이 시작되고 설정한 시간(초)에 따라 컨텐트가 주기적으로 바뀝니다. [자동 재생]이 설정된 경우 기본적으로 각 이미지는 3.5초 동안 표시됩니다.

    [전체 화면 슬라이드 쇼] 위젯을 구성할 때 축소판이 기본적으로 숨겨지도록 탐색용 다음 및 이전 단추를 설정하는 것이 일반적입니다. 하지만 기본 슬라이드 쇼 이미지의 상단에 축소판이 표시되도록 하려는 경우 [축소판] 옵션을 설정할 수 있습니다.

    축소판이 숨겨질 경우 다음 및 이전 단추가 설정되었는지 확인하십시오. [카운터]는 선택 사항이며, 방문자가 모음에서 어떤 이미지가 현재 표시되고 있는지 이해하도록 돕습니다.

  4. 다음, 이전 및 카운터 인터페이스가 페이지의 특정 부분에 표시되도록 하려는 경우 [선택] 도구를 사용하여 원하는 위치로 이동한 다음 컨트롤을 고정합니다. 또한 축소판이 페이지의 동일 위치에 남아 있도록 하려는 경우 축소판 모음의 위치를 정하고 고정합니다. 다음, 이전 및 카운터 인터페이스가 페이지의 특정 부분에 표시되도록 하려는 경우 [선택] 도구를 사용하여 원하는 위치로 이동한 다음 컨트롤을 고정합니다. 또한 축소판이 페이지의 동일 위치에 남아 있도록 하려는 경우 축소판 모음의 위치를 정하고 고정합니다.

    반응형 사이트에서 이 위젯을 추가하는 경우 여러 중단점에서 고정 및 크기 조정 설정을 수정할 수 있습니다.

전체 화면 슬라이드 쇼에 이미지 추가

이제 [전체 화면 슬라이드 쇼] 위젯에 이미지를 추가합니다. 다음 단계를 따르십시오.

  1. [파일] > [배치]를 선택합니다.

  2. 나타나는 [가져오기] 창에서 Shift 키를 누른 상태로 컴퓨터에 있는 여러 연속된 이미지를 선택합니다. 또는 원할 경우 Command(Mac) 또는 Ctrl(Windows) 키를 누른 상태로 에셋 폴더에서 여러 비연속 이미지를 선택합니다.

  3. [열기]를 클릭하여 선택한 파일을 Place Gun에 로드합니다.

    참고:

    선택한 이미지의 규격 및 가로/세로 비율이 서로 다르더라도 [비율에 맞게 프레임 채우기] 옵션은 이미지의 크기를 조정하여 페이지의 규격 내에 완벽하게 맞춥니다.

  4. 슬라이드 쇼를 한 번 클릭하여 선택한 이미지 파일을 추가합니다. 슬라이드 쇼의 기본 이미지는 새 이미지를 추가하는 즉시 자동으로 제거됩니다.

  5. [파일] > [브라우저에서 페이지 미리 보기]를 선택합니다. 브라우저 창 크기를 조정하고 슬라이드 쇼 컨텐트가 어떻게 확대되고 잘리면서 전체 브라우저 창을 채우는지 확인합니다. 다음 및 이전 단추를 클릭하여 이미지를 하나씩 넘기거나 자동 재생이 설정된 경우 이미지가 재생되도록 그대로 둡니다.

  6. 브라우저 창을 닫고 Adobe Muse로 돌아옵니다. 

슬라이드 쇼 위젯에서 자유 형식 축소판 구성

[자유 형식 축소판] 옵션은 슬라이드 쇼에서 축소판 표시 방법에 대한 완전한 제어 기능을 제공합니다. 축소판을 단순히 행에 나열하는 대신 각 축소판을 원하는 위치에 둘 수 있습니다.

  1. [디자인] 보기에서 [위젯 라이브러리]를 열고 [슬라이드 쇼] 섹션을 확장합니다. 슬라이드 쇼 위젯을 페이지로 드래그합니다.

  2. 전체 페이지를 선택한 경우 축소판 이미지를 두 번 클릭하여 선택합니다. [컨트롤] 패널의 왼쪽 상단에 있는 [선택 표시기]를 검토하여 어떤 요소가 선택되었는지 확인할 수 있습니다.

    축소판 컨테이너
    [축소판 컨테이너]가 선택되면 테두리 상자가 주위에 나타납니다.

    기본적으로 [슬라이드 쇼] 위젯에 표시되는 축소판은 [축소판 컨테이너]라는 컨테이너 내부에 저장됩니다. 이 외부 컨테이너는 외부 컨테이너 크기 조정 방법에 따라 축소판이 일렬 또는 여러 행으로 나열되도록 합니다. 축소판 이미지 모음은 [자유 형식 축소판] 옵션을 설정할 때까지 축소판이 설정된 모든 슬라이드 쇼에 대해 [축소판 컨테이너] 내부에 중첩됩니다.

자유 형식 축소판의 표시 설정 구성

축소판을 임의로 또는 정렬되지 않은 위치에 표시하려는 경우 외부 컨테이너를 제거하고 각 축소판 이미지를 페이지의 원하는 위치에 배치할 수 있습니다. 다음 단계를 따르십시오.

  1. [슬라이드 쇼] 위젯이 선택된 상태에서 파란색 화살표를 클릭하여 [옵션] 메뉴에 액세스합니다.

  2. [자유 형식 축소판] 옵션 옆에 있는 확인란을 선택합니다. [디자인] 보기의 [축소판 컨테이너]를 둘러싼 테두리 상자가 즉시 사라지고 [선택 표시자]에 [슬라이드 쇼]라고 표시됩니다.

    축소판 컨테이너 옵션 패널
    [자유 형식 축소판] 옵션을 설정하면 축소판을 둘러싼 컨테이너가 제거됩니다.

  3. 페이지의 다른 곳을 클릭하여 [옵션] 메뉴를 닫습니다.

    이제 축소판에 대한 외부 컨테이너를 제거했으므로 페이지 디자인에 알맞게 각 축소판 이미지의 위치를 재조정할 수 있습니다.

  4. [선택] 도구를 사용하여 하나의 축소판을 선택합니다. 축소판이 선택되면 [선택 표시자]에 [축소판]이라고 표시됩니다. 선택한 축소판을 원하는 위치로 이동합니다. 이 단계를 반복하여 모든 축소판의 위치를 재조정합니다. 브라우저를 스크롤하거나 크기를 조정할 경우에도 각 축소판이 제자리에 그대로 표시되도록 하려는 경우 각 축소판을 고정할 수 있습니다.

    참고:

    서로 다른 규격이 되도록 축소판 컨테이너의 크기를 조정하려는 경우 [옵션] 메뉴에서 [함께 편집] 옵션을 해제한 다음 [선택] 도구를 사용하여 각 축소판의 모퉁이를 드래그하여 원하는 대로 크기를 조정합니다.

    반응형 사이트에서 축소판의 고정 옵션을 재정렬, 크기 조정 및 구성할 수도 있습니다.

  5. [파일] > [브라우저에서 페이지 미리 보기]를 선택합니다. 슬라이드 쇼의 축소판이 페이지에 배치됩니다. 축소판을 클릭하여 슬라이드 쇼에 표시된 해당 이미지를 확인합니다.

  6. 브라우저를 닫고 Adobe Muse로 돌아옵니다.

슬라이드 쇼 위젯에 대한 라이트박스 표시 옵션 설정

컨텐트가 라이트박스에 표시되는 경우 모달 창에 초점이 맞추어지고 페이지의 나머지가 흐려지면서 해당 컨텐트가 강조 표시됩니다. 방문자는 축소판, 다음 또는 이전 단추를 클릭하여 라이트박스와 상호 작용합니다. 라이트박스를 종료하고 일반 사이트 보기로 돌아가려면 방문자가 닫기 단추를 클릭하거나 Esc 키를 누릅니다.

Adobe Muse의 모든 [슬라이드 쇼] 위젯에서 [라이트박스] 옵션을 제공합니다. 또한 [슬라이드 쇼] 섹션에서 하나의 위젯은 라이트박스 동작을 사용하도록 미리 구성되어 있습니다. [라이트박스 슬라이드 쇼] 위젯은 기본적으로 [라이트박스] 옵션이 설정됩니다.

라이트박스에 이미지를 표시하는 슬라이드 쇼를 만들려면 다음 단계를 수행하십시오.

  1. [디자인] 보기의 [위젯 라이브러리]에서 [슬라이드 쇼] 섹션을 확장합니다. 슬라이드 쇼 위젯을 페이지로 드래그합니다.

  2. [옵션] 메뉴의 [레이아웃] 섹션에서 [라이트박스] 옵션을 찾고 선택되어 있는지 확인합니다.

    [라이트박스] 옵션
    아직 선택되지 않은 경우 [라이트박스] 옵션 옆에 있는 확인란을 선택합니다.

  3. [옵션] 메뉴가 여전히 열려 있는 상태에서 기타 변경 작업을 수행하여 위젯을 원하는 대로 구성합니다. 예를 들면 이전 단추, 다음 단추, 캡션 및 카운터를 표시하거나 숨길 수 있습니다. 라이트박스 표시의 경우 닫기 단추를 설정하는 것이 좋습니다. [닫기 단추] 옵션 옆에 있는 확인란을 선택합니다.

    닫기 단추
    닫기 단추(X)는 슬라이드 쇼의 상단 오른쪽에 나타납니다.

    원할 경우 [선택] 도구를 사용하여 닫기 단추를 다른 위치로 이동할 수 있습니다. 방문자가 라이트박스 표시를 종료하고 모달 창을 닫으려는 경우 닫기 단추를 클릭하거나 Esc 키를 누를 수 있습니다.

    참고:

    라이트박스 창을 둘러싼 테두리의 폭을 변경하려는 경우 [라이트박스 슬라이드 쇼] 위젯을 선택하고 [간격] 패널에서 [안쪽 여백] 설정을 업데이트합니다.

  4. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 [슬라이드 쇼] 위젯을 테스트합니다. 축소판 이미지를 클릭하여 라이트박스 효과를 호출하고 페이지의 나머지가 흐려지면서 해당하는 메인 이미지가 모달 창에 표시되는지 확인합니다.

  5. 다음 및 이전 단추를 클릭하여 슬라이드 쇼의 이미지를 전환합니다.

  6. 슬라이드 쇼 테스트를 마쳤으면 [닫기] 단추를 클릭하여 라이트박스 보기를 종료합니다. 라이트박스가 닫히고 나머지 페이지 컨텐트가 나타납니다.

  7. 브라우저를 닫고 Adobe Muse로 돌아옵니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책