사용 안내서 취소

Adobe Captivate를 이용한 반응형 프로젝트 디자인

검색

마지막 업데이트 날짜 Nov 28, 2022 11:24:06 AM GMT

반응형 프로젝트 디자인

Adobe Captivate를 사용하여 반응형 프로젝트를 디자인하면 경쟁 업체보다 높은 품질의 프로젝트를 디자인할 수 있습니다. 작성자는 한 번에 태블릿과 모바일 보기에 맞게 컨텐츠를 자동으로 재정렬할 수 있습니다. 빈 캔버스에서 시작하여 iOS 장치를 통해 기록하고, Adobe Captivate Draft를 사용해 스토리보드를 가져올 수도 있습니다. 프로그래밍 없이 다중 화면의 위치별 장치 인식 학습 환경을 제공할 수 있습니다.

학습자를 위한 몰입형 학습 환경을 제작하고 흥미로운 대화형 학습을 만들어 보십시오.

Adobe Captivate의 Fluid Box

Fluid Box 정의

Fluid Box는 슬라이드를 다양한 화면 크기와 장치에 맞출 때 개체가 예상대로 작동하도록 슬라이드에 개체 배열을 제공하는 레이아웃 모드입니다. Fluid Box는 eLearning 디자이너를 위한 사용하기 쉬운 레이아웃 모델입니다. 원하는 방향으로 하위 개체를 배치하고 표시 공간에 맞춰 유연하게 사용할 수 있습니다.

Fluid Box 컨테이너는 사용 가능한 여유 공간을 채우기 위해 개체를 확장하거나 오버플로를 방지하기 위해 개체를 축소합니다. Fluid Box의 요소는 방향과 상관이 없습니다. 개체는 사용 가능한 공간에 맞춰 조정할 수 있습니다.

Captivate에서 Fluid Box 사용

Captivate에서는 반응형 프로젝트에 Fluid Box 레이아웃을 수직 또는 수평으로 삽입할 수 있습니다. 화면 크기에 따라 Fluid Box 컨테이너의 개체를 화면 너비를 손상시키지 않고 확대 및 축소시킬 수 있습니다.

Fluid Box를 큰 단추 표시줄에 추가할 수 있습니다.

가로 Fluid Box 레이아웃
세로 Fluid Box 레이아웃

가로 Fluid Box 레이아웃

이 예제에서 4개의 큐볼을 사용하여 하나의 Fluid Box로 레이아웃을 만듭니다. 다른 장치에서 프로젝트를 미리 볼 때 장치에 맞게 보기가 달라집니다.

단일 가로 레이아웃을 만듭니다. 이 레이아웃은 상위 Fluid Box가 됩니다.
라이브러리에서 Fluid Box에 큐볼을 한 번에 하나씩 배치합니다.
속성 관리자 패널에서 다음 Fluid Box 속성을 활성화합니다.
1. 정적: 이 확인란을 선택하는 경우 Fluid Box 내부의 개체가 겹쳐 Fluid Box 내부의 원하는 곳으로 이동할 수 있습니다.
  
  선택 사항: 이 확인란을 선택하는 경우 개체의 너비에 도달할 때마다 개체가 사라집니다. 선택 사항은 한 종류의 줄 바꿈, 하나의 행으로 내용 표시 또는 하나의 열로 내용 표시에서만 작동합니다.
2. 플로우: Fluid Box에서 개체가 배치되는 방향을 나타냅니다. 가로 플로우에서는 개체가 가로로 배치됩니다. 마찬가지로 세로 플로우에서는 개체가 세로로 배치됩니다.
3. 안쪽 여백: 안쪽 여백은 개체의 모든 면에 공간을 추가합니다. 개체에 안쪽 여백을 수평으로 추가하려면 픽셀에 안쪽 여백 값을 입력합니다. 음수 값은 허용되지 않습니다.
  
  개체를 동일하게 배포: 단추를 클릭하여 Fluid Box의 모든 개체의 크기와 각 개체 사이의 간격을 동일하게 만듭니다. 예:
  
  배포 전 개체
  
  배포 후 개체
4. 줄 바꿈 지점: 줄 바꿈 지점은 도달할 때 장치 너비가 변경된 개체를 줄 바꿈하거나 재정렬하는 지점입니다. 예를 들어, 줄 바꿈 지점이 80 %인 경우 장치 너비의 80%에서 줄 바꿈 옵션에 정의된 속성에 따라 Fluid Box에서 개체가 재정렬됩니다.
  
  예를 들어, 미리 보기 영역의 너비가 1024픽셀이고 줄 바꿈 지점이 50%로 설정되고 장치 너비가 512픽셀 너비로 설정된 경우 개체가 재정렬됩니다.
5. 줄 바꿈: Fluid Box의 개체가 미리 정의된 임계값에 도달할 때 자동으로 줄 바꿈하거나 재정렬되는 시기와 방법을 정의합니다. 다음 옵션을 사용할 수 있습니다.
  
  다음 행으로 줄 바꿈: 줄 바꿈 지점이 임계값에 도달하면 개체가 다음 행으로 떨어집니다.
  
  하나의 행으로 내용 표시: 줄 바꿈 지점이 임계값에 도달하면 개체의 위치는 변경되지 않습니다. 장치 치수에 따라 개체의 크기를 조정합니다.
  
  하나의 행/열: 줄 바꿈 지점이 임계값에 도달하면 개체는 열에 정렬됩니다.
  
  대칭: 줄 바꿈 지점이 임계값에 도달하면 개체는 Fluid Box의 개체 수에 따라 재정렬됩니다.

세로 Fluid Box 레이아웃

이 예제에서 4개의 큐볼을 사용하여 하나의 Fluid Box로 레이아웃을 만듭니다. 다른 장치에서 프로젝트를 미리 볼 때 장치에 맞게 보기가 달라집니다.

속성 관리자 패널에서 개체의 흐름 및 줄 바꿈 유형을 선택합니다.

개체의 수평 정렬(가운데, 왼쪽 또는 오른쪽)을 선택합니다.

개체의 수직 정렬을 선택합니다.

위쪽 정렬

가운데 정렬

아래쪽 정렬

사이 공간

가장자리 공간

다중 컨테이너 Fluid Box 프로젝트 만들기

반응형 프로젝트를 만듭니다(파일 > 새 프로젝트 > 반응형 프로젝트 또는 Ctrl+H를 누릅니다.)
빈 슬라이드에 Fluid Box 레이아웃을 아래와 같이 삽입:

Fluid Box 레이아웃
세로 레이아웃을 삽입한 후 레이아웃의 아무 부분이나 클릭합니다. FB_ 5는 전체 슬라이드 컨테이너를 나타내는 상위입니다. 속성 관리자 패널에서 개별 Fluid Box 컨테이너의 전체 계층 구조를 볼 수 있습니다.

스테이지에서 Fluid Box를 강조 표시하면 위 계층 구조의 해당 Fluid Box도 강조 표시되므로 작업 중인 Fluid Box를 확인할 수 있습니다.

상위 Fluid Box

개체를 수정하려면 해당 컨테이너를 선택합니다.
Fluid Box 컨테이너에서 파란색 핸들을 드래그하여 하위 컨테이너의 크기를 조정합니다.
아무 곳이나 클릭하면 파란색 핸들이 사라집니다. 다시 표시되게 하려면 다음 중 하나를 수행하십시오.
- 스테이지 영역 바깥의 아무 곳이나 클릭한 다음 스테이지 위로 마우스를 드래그합니다.
- 스테이지 영역에서 아무 곳이나 클릭한 다음 Fluid Box 선택기 섹션에서 상위 Fluid Box를 선택합니다. 핸들이 다시 표시된 것을 확인할 수 있습니다.
컨테이너에 아래와 같이 개체 삽입:

위의 이미지는 데스크톱(1024 x 627)에 대한 레이아웃을 나타냅니다. 다른 장치에서 이 레이아웃이 어떻게 작동하는지 확인하려면 상단의 슬라이더를 이동하여 레이아웃의 변경 사항을 확인하십시오.

프로젝트를 다른 장치에서 미리 보는 경우 Fluid Box 컨테이너가 장치 너비에 따라 지능적으로 정렬됩니다.

너비가 작은 장치의 경우:

텍스트 상자에서 지정한 텍스트가 장치의 너비 변화를 수용하지 못하고 잘리는 경우 텍스트 컨테이너의 하단에 단추가 표시됩니다. 전체 텍스트를 보려면 단추를 클릭합니다. 예를 들어, 이 경우는 텍스트가 다음과 같이 나타납니다.

참고:

Fluid Box에 개체가 있는 슬라이드를 복사하여 빈 프로젝트 또는 반응형 프로젝트에 붙여 넣을 수 없습니다. 이 문제를 해결하려면 Fluid Box를 마우스 오른쪽 단추로 클릭하고 모두 선택을 선택한 다음 개체를 빈 슬라이드 또는 반응형 슬라이드에 붙여 넣습니다.

참고:

Fluid Box에 개체가 하나밖에 없으면 개체의 크기를 조정할 수 없습니다. 개체 주변에 빨간색 핸들이 표시되며, 이는 개체의 크기를 조정할 수 없음을 의미합니다.

Fluid Box 너비 수정

속성 관리자에서 위치 패널의 값을 변경하여 Fluid Box의 너비를 수정할 수 있습니다.

예를 들어 하위 Fluid Box의 너비가 상위 Fluid Box(341픽셀)의 33.3%인 경우 원하는 값으로 변경하고 해당 스테이지에서 적용할 수 있습니다.

참고:

위치 패널에서 최대 허용 값보다 큰 값을 입력하면 해당 값이 원래 값으로 재설정됩니다.

자동 장치 미리 보기

재생 단추를 누르면 콘텐트가 다양한 크기의 장치에서 모양과 폼 팩터로 자동으로 변경되는 것을 확인할 수 있습니다. 콘텐트가 모든 화면 크기에서 어떻게 반응하는지 살펴 보십시오.

레이아웃 미리 보기 단추를 클릭하면 콘텐트가 장치 크기에 맞게 자동으로 줄 바꿈, 크기 조정 및 정렬되는 것을 볼 수 있습니다.

줄 바꿈 속성에서 동일한 옵션을 사용할 수도 있습니다. Fluid Box에 대한 줄 바꿈 속성을 변경하고 레이아웃 미리 보기 단추를 클릭하면 새로운 줄 바꿈 동작을 확인할 수 있습니다.

Fluid Box에서 줄 바꿈 지점 활성화

이전 섹션에서 설명한 것과 같이 줄 바꿈 지점은 도달할 때 장치 너비가 변경된 개체를 줄 바꿈하거나 재정렬하는 수준을 말합니다.

예를 들어, 줄 바꿈 지점이 80%인 경우 장치 너비의 80%에서 줄 바꿈 옵션에 정의된 속성에 따라 Fluid Box에서 개체가 재정렬됩니다.

장치에서 eLearning 프로젝트를 볼 때 개체를 하나 이상의 Fluid Box에서 줄 바꿈하려는 경우가 있습니다. 하나의 Fluid Box에서는 줄 바꿈 지점을 손쉽게 설정할 수 있습니다. 하지만 여러 Fluid Box에서 줄 바꿈 지점을 설정하는 기능을 사용하면 eLearning 프로젝트 제작 시 보다 손쉽게 줄 바꿈 지점을 설정할 수 있습니다.

Fluid Box에서 줄 바꿈 지점을 설정하려면 [편집] > [환경 설정]을 클릭하거나 Shift+F8을 눌러 환경 설정 상자를 실행합니다.

[줄 바꿈 지점 활성화] 확인란을 선택하고 [확인]을 클릭합니다. Captivate를 다시 시작합니다.

프로젝트에서 여러 Fluid Box를 추가하고 각 Fluid Box 내에 개체를 추가하는 경우, 각 Fluid Box에서 줄 바꿈 지점을 활성화할 수 있습니다.

슬라이더를 이동하면 줄 바꿈 임계값을 지정한 정확한 지점에서 개체의 줄 바꿈이 수행됩니다.

반응형 캡처

반응형 재생 막대

재생 막대 컨트롤을 반응형으로 만듭니다. Windows>스킨 편집기에서 재생 막대 컨트롤을 변경하고 변경 사항을 테마로 저장하여 사용자 정의 스킨을 만들 수 있습니다. 이제 기본, 태블릿 및 모바일 보기에서 재생 막대 컨트롤이 다르게 표시되도록 할 수 있습니다.

기본, 태블릿 및 모바일 보기 출력에서 재생 막대 컨트롤을 다르게 보려면 cpMobilePlaybar 변수를 사용자 정의합니다.

재생 막대 위치로 이동:

C:\Program Files\Adobe\Adobe Captivate 8 x64\ko_KR\Gallery\Playbars\HTML\cpPlaybarMobileStep text

참고:

사용자 PC의 설치 디렉토리 위치는 달라질 수 있습니다.
변경하려는 재생 막대의 백업을 만듭니다.

playbarScript.js 파일을 엽니다.

cp.responsiveButtons = { //&quot;ButtonName&quot; : [Primary,Tablet,Mobile], &quot;Rewind&quot; : [true,true,false], &quot;Backward&quot; : [true,true,true], &quot;Play&quot; : [true,true,true], &quot;Slider&quot; : [true,true,false], &quot;Forward&quot; : [true,true,true], &quot;CC&quot; : [true,true,true], &quot;AudioOn&quot; : [true,false,false], &quot;Exit&quot; : [true,true,true], &quot;FastForward&quot; : [true,true,false], &quot;TOC&quot; : [true,true,false]
};

재생 막대 컨트롤 단추가 기본, 태블릿 및 모바일 보기에서 표시되도록 하려면 모든 단추에서 위의 코드를 [true,true,true]로 변경합니다. 파일을 저장하고 닫습니다.

예를 들어 태블릿과 모바일 보기에서만 "슬라이더"가 표시되도록 하려면 다음과 같이 코드를 편집합니다.

"슬라이더" : [false, true, true]

참고:

다른 재생 막대를 반응형으로 설정하려는 경우 위에 언급한 것과 동일한 절차를 따릅니다. 하지만 먼저 js 파일에서 반응형 기능을 복사해야 합니다.

첫 번째 기본 설정이 스킨 편집기의 확인란에 제공됩니다. 확인란을 선택하지 않으면 ture인지 false인지 여부에 상관없이 해당 단추가 재생 막대에 표시되지 않습니다.
Captivate를 다시 시작하면 재생 막대가 업데이트됩니다.

반응형 캡처(반응형 시뮬레이션)

다중 화면 및 장치에서 사용할 수 있는 단일 화면 캡처를 만듭니다. Adobe Captivate를 사용하여 작은 화면에 표시하려는 화면 캡처의 일부를 선택할 수 있습니다.

Captivate 반응형 프로젝트 열기
[슬라이드] > [소프트웨어 시뮬레이션] 클릭

추가 슬라이드 기록 창이 나타납니다.
기록한 슬라이드를 삽입하려는 위치 앞의 슬라이드를 선택하고 [확인]을 클릭합니다.

화면 캡처 화면 창이 나타납니다.
기록 유형을 [자동], [비디오 데모] 또는 [수동] 중에서 선택한 다음 [기록]을 클릭하여 화면을 캡처합니다.

참고:

기록 프로세스 동안 몇 가지 스크린 샷을 선택하려면 수동 기록을 사용합니다.

자동 기록을 사용하여 기록하는 경우 Adobe Captivate가 자동으로 스크린 샷을 캡처하여 개별 슬라이드에 배치합니다. 자동 기록은 Adobe Captivate에서 가장 일반적으로 사용되는 기록 방법입니다.
반응형 프로젝트에서, [모바일] 보기를 클릭합니다.

스크린 캡처가 스스로 다시 정렬되고 여기 표시된 것처럼 보여집니다.
배경이 기울어졌는지 확인할 수 있습니다.

모바일 보기 배경 이미지의 일부를 사용할 수 있습니다.
[속성 관리자]에서 배경 이미지 일부 사용을 클릭합니다. 슬라이드 캡처를 선택한 배경의 일부로 이동할 수 있습니다.

이제 이전과 다르게 보이는 것을 알 수 있습니다.

빈 프로젝트를 반응형 프로젝트로 변환

아래와 같이 일부 개체가 포함된 빈 프로젝트를 만듭니다.

새로운 빈 프로젝트
해당 프로젝트를 반응형으로 변환하려면 파일 > 반응형으로 저장을 클릭합니다. 반응형 프로젝트에서 지원되지 않는 개체에 대한 경고 메시지를 확인할 수 있습니다. 자세한 내용은 HTML5에서 지원되지 않는 개체를 참조하십시오.

저장을 클릭하고 프로젝트를 반응형 프로젝트로 저장합니다. 아래와 같이 새로운 반응형 프로젝트가 작성되었습니다.

새로운 반응형 프로젝트

슬라이드를 드래그하여 다양한 보기에서 프로젝트를 볼 수 있습니다.
텍스트 상자에서 지정한 텍스트가 장치의 너비 변화를 수용하지 못하고 잘리는 경우 텍스트 컨테이너의 하단에 확장 단추가 표시됩니다. 전체 텍스트를 보려면 단추를 클릭합니다.

확장 단추
반응형 슬라이드에서 자신이 지정한 FluidBox 레이아웃을 삽입하거나(FluidBox > 세로 또는 가로) FluidBoxe 제안을 클릭하여 개체를 신중하게 반응형 컨테이너에 배치합니다. 제안 FluidBox를 클릭하면 아래와 같이 변경된 프로젝트 레이아웃을 볼 수 있습니다.

FluidBox 레이아웃
개체를 이동하여 원하는 위치에 배치한 다음 반응형 프로젝트를 미리 보거나 게시합니다.

사용자 정의 미리 보기 장치 만들기

어떤 반응형 프로젝트에서도 Captivate를 사용하면 데스크톱, iPhone, iPad 등의 다양한 장치에서 프로젝트를 미리 볼 수 있습니다.

이미 기본 제공된 장치 외에 사용자 정의 미리 보기 장치를 만들 수 있습니다.

사용자 정의 미리 보기 장치 만들기:

먼저, 관리자로 Captivate를 실행합니다.

그런 다음 아래와 같이 필수 치수를 입력합니다.

사용자 정의 미리 보기 치수
미리 보기 모드 목록에 미리 보기를 추가하려면 치수 필드 근처의 +를 클릭합니다. 다음 대화 상자가 표시됩니다.

새 사용자 정의 미리 보기 장치

이름(예: Galaxy S8)을 입력하면 이제 사용자 정의 미리 보기 장치가 미리 보기 장치의 목록에 표시됩니다.

사용자 정의 미리 보기 장치를 삭제하려면 장치를 선택하고 치수 필드 근처의 -를 클릭합니다.

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
<devicelist>
   <device name=&quot;Desktop&quot; width=&quot;1024&quot; height=&quot;627&quot; candelete=&quot;0&quot;/>
   <device name=&quot;iPhone6&quot; width=&quot;375&quot; height=&quot;667&quot; candelete=&quot;0&quot;/>
   <device name=&quot;iPad&quot; width=&quot;768&quot; height=&quot;1024&quot; candelete=&quot;0&quot;/>
   <device name=&quot;Galaxy S7&quot; width=&quot;360&quot; height=&quot;640&quot; candelete=&quot;0&quot;/>
   <device name=&quot;Nexus 5x&quot; width=&quot;412&quot; height=&quot;732&quot; candelete=&quot;0&quot;/>
   <device name=&quot;Galaxy S8&quot; width=&quot;1000&quot; height=&quot;1000&quot; candelete=&quot;1&quot;/>
</devicelist>

이름, 너비 및 높이 속성을 사용하는 사용자 미리 보기를 추가 또는 삭제합니다.
Captivate를 다시 시작하면 다음에서 미리 보기 드롭다운 목록에서 원하는 장치를 선택합니다.

미리 보기 드롭다운 목록

반응형 프로젝트의 중단점

다섯 개의 중단점을 가지는 컨텐츠 만들기:

데스크톱 1024x627 뷰 포트
태블릿 가로 모드 896x627 뷰 포트
태블릿 세로 모드 768x627 뷰 포트
모바일 가로 모드 667x410 뷰 포트
모바일 세로 모드 360x460 뷰 포트

각 장치 레이아웃에서 슬라이드 재생을 사용하여 출력을 미리 봅니다. HTML5로 내용을 게시합니다.

Adobe Captivate 은 개체의 드래그 앤 드롭을 지원하여 반응형 프로젝트에 있는 3개의 중단점 전체에 유연한 경험을 제공합니다.

반응형 프로젝트 보기별 속성에 대한 정보는 보기별 속성을 참고하십시오.

[창] > [정렬]을 클릭하면 정렬 패널을 볼 수 있습니다.

반응형 프로젝트 만들기

Adobe Captivate를 실행하고, 홈 화면에서 첫 번째 축소판인 반응형 프로젝트를 클릭한 다음 만들기를 클릭합니다.

아니면 파일 > 새 프로젝트 > 반응형 프로젝트를 선택해도 됩니다.
반응형 프로젝트 레이아웃에서 서로 다른 중단점을 탐색하려면 데스크톱, 태블릿 및 모바일 아이콘을 클릭하십시오.

아래의 스크린 샷과 같은 6개의 고유 중단점으로 분할된 반응형 프로젝트 영역을 볼 수 있습니다. 각 중단점 영역은 고유한 제작 공간입니다.

사용 가능한 중단점

적응형 디자인(스마트 배치)

각 중단점의 시작과 끝에는 슬라이더가 표시되어 있습니다.

기본적으로 컨텐츠 작성에 다섯 개의 중단점을 사용할 수 있습니다.

모바일 레이아웃의 뷰 포트보다 큰 장치의 컨텐츠를 만드는 경우 슬라이더를 드래그하여 크기를 확대할 수 있습니다.

참고:

기본적으로 제공되는 뷰 포트보다 큰 크기는 다음 크기의 뷰 포트 레이아웃을 사용합니다.
예를 들어, 기본값 대신 450x450의 모바일 뷰 포트를 사용해야 할 수 있습니다. 이 경우 모바일보다 크고 태블릿보다 작으므로 태블릿 레이아웃을 사용합니다.

중단점 사이에 스마트 배치가 허용됩니다. Adobe Captivate는 프로젝트의 미리 보기를 지원하여 중단점 간의 원활한 작업 환경을 제공합니다. 즉, 사용자가 하나의 보기에서 다른 중단점의 보기로 전환할 때 결과물 미리 보기에 지연이 발생하지 않습니다.

테마 색상 사용자 정의

사전 설정 테마 색상을 선택하거나 테마 색상을 사용자 정의하여 사용자만의 색상 스키마를 만들 수 있습니다.

도구 모음에서 [테마] > [테마 색상]을 클릭합니다.
[테마 색상 선택] 드롭다운에서 [사전 설정 테마 색상] 중 하나를 선택하고 [사용자 정의]를 클릭합니다. [테마 색상 사용자 정의] 창이 아래와 같이 나타납니다.
색상을 변경할 구성 요소를 선택합니다.
제목, 스킨, 부제, 슬라이드 배경과 같은 각 슬라이드 구성 요소의 색상을 변경할 수 있습니다.
음영, 색상 견본, 색상 피커 또는 스포이드 도구 등을 사용하여 색상을 선택할 수 있습니다.
사전 설정 테마의 제목을 클릭하고 원하는 제목의 이름을 입력합니다.
[저장]을 클릭합니다.
이제 사용자 정의한 테마 색상을 드롭다운 목록에서 볼 수 있습니다.

설정 휠 아이콘을 사용하여 테마 색상을 관리하고 삭제 및 이름 바꾸기를 할 수 있습니다.

장치 높이

개체의 포함/제외를 통해 보기마다 서로 다른 배경을 설정합니다.

속성 관리자에서 장치 높이 확인란을 선택하여 각 레이아웃에 대한 장치 높이를 설정할 수도 있습니다. 장치 높이를 선택한 경우 아래의 모바일 레이아웃 스크린 샷과 같이 각 레이아웃을 둘러싼 노란색 테두리를 볼 수 있습니다.

아래 스크린 샷과 같이 [슬라이드 높이]는 [속성] 창의 [슬라이드 높이] 옆에 있는 링크 아이콘을 클릭하여 [장치 높이]에 연결할 수 있습니다. 특정 보기 또는 모든 보기의 슬라이드 높이를 변경합니다.

슬라이드 높이

Adobe Captivate는 장치 높이에 따른 뷰 포트 높이의 사용자 정의를 지원합니다.

뷰 포트 높이는 기본(데스크탑), 태블릿 및 모바일에 대한 페이지 레이아웃 높이입니다. 속성의 슬라이드 높이 옵션을 사용하면 특정 장치 높이에 맞게 이 높이를 조정할 수 있습니다.

참고:

장치 높이에서 슬라이드 높이의 연결을 해제하여 수정합니다.

슬라이드 높이 사용자 정의

모바일 레이아웃에 대한 뷰 포트 높이 및 장치 높이가 415라고 가정해 보겠습니다. 장치 높이가 500인 경우 수직 장치 높이 슬라이더를 이동하여 뷰 포트 높이가 500이 되도록 조정할 수 있습니다. 기본적으로 장치 높이는 슬라이드 높이와 연결되어 있습니다. 속성 관리자의 슬라이드 높이 값 옆에 있는 링크 아이콘을 클릭하여 이 연결을 해제할 수 있습니다.

이 경우, 기본적으로 뷰 포트 높이 내의 모든 내용을 모바일 장치에서 볼 수 있습니다. 따라서 이 기능을 사용하면 장치 높이에 맞는 레이아웃 내에서 정확하게 내용을 개발할 수 있습니다.

뷰 포트의 높이가 장치 높이보다 큰 경우, 장치 높이를 벗어나는 내용은 최종 사용자가 장치의 스크롤 막대를 사용하여 볼 수 있습니다.

이제 반응형 프로젝트의 모든 중단점에서 어떤 개체라도 슬라이더의 중앙에 정렬할 수 있습니다. 수평 및 수직 가운데 정렬 옵션은 Captivate 9에서 소개되었습니다.

기본 중단점 슬라이드에 스마트 모양을 삽입합니다.
스마트 모양을 클릭하고 속성 관리자에서 위치 탭을 확인합니다.
[고급]을 클릭합니다. 스냅샷에 나타난 것과 같이 수평 및 수직 가운데 정렬 옵션을 볼 수 있습니다.

개체 맞춤

이제 Captivate가 제공하는 수평 및 수직 가운데 정렬 옵션을 이용하여 반응형 프로젝트의 모든 중단점에서 개체를 슬라이드 중앙에 정렬할 수 있습니다.

기본 중단점 슬라이드에 모양 또는 개체를 삽입합니다.
삽입한 항목을 선택하고 속성 관리자의 위치 패널을 확인합니다. [고급]을 클릭합니다.
[고급]을 클릭합니다.

수직 및 수평 이미지 정렬 옵션

스냅샷에 나타난 것과 같이 수평 및 수직 가운데 정렬 옵션을 볼 수 있습니다.

정렬 옵션
여기 표시된 대로 개체를 마우스 오른쪽 단추로 클릭하고 정렬을 선택하여 수평 및 수직 가운데 정렬 옵션을 선택할 수 있습니다.
또는 여기 표시된 대로 창 정렬 패널의 아이콘을 사용할 수도 있습니다.

참고:

[창] > [정렬]을 클릭하여 정렬 패널을 활성화합니다.

수평 가운데 정렬 - 이 정렬을 적용하면 슬라이드에서 수직 방향으로만 개체를 이동할 수 있습니다. 수평 이동은 제한됩니다.

수직 가운데 정렬 - 이 정렬을 적용하면 슬라이드에서 수평 방향으로만 모양을 이동할 수 있습니다. 수직 이동은 제한됩니다.

수평 및 수직 가운데 정렬 - 두 정렬을 모두 적용하면 양 방향 모두 이동이 제한됩니다.

가운데 및 수직 정렬 옵션에는 색상 코드가 지원됩니다. 2개의 확인란 옵션의 테두리 색상은 정렬 옵션이 선택된 중단점의 색상 구성표를 따릅니다.

참고:

모양이 여러 개인 경우 하나의 개체를 슬라이드 중앙에 정렬한 다음, 가운데 정렬된 해당 개체에 다른 나머지 개체들을 연결함으로써 모든 중단점에서 슬라이드가 가운데 정렬된 플로우차트를 구성할 수 있습니다.

수직 또는 수평 가운데 옵션의 정렬을 해제하는 경우 개체가 원래 위치로 되돌아가지 않습니다.

기본 캡션 색상 설정

중단점 보기에 대해 서로 다른 기본 캡션 텍스트 색상을 설정할 수 있습니다.

[편집] > [개체 스타일 관리자]를 선택합니다.
[기본 캡션 스타일]을 선택합니다.
텍스트 형식에서 중단점 옆의 드롭다운 상자를 클릭하고 데스크톱, 태블릿 세로 모드 또는 모바일 세로 모드를 선택합니다.
각 중단점의 색상을 선택합니다.

상호 작용을 위한 캡처 지원

모든 보기에서 상호 작용을 캡처하고 보기 내 특정 상호 작용 영역에 대한 자동 초점을 설정할 수 있습니다. 스마트 모양을 반응형 프로젝트의 배경 이미지로 설정하고 보기에 따라 배경 이미지의 자르기 영역을 설정할 수 있습니다.

반응형 프로젝트의 모든 보기에서는 마스터 슬라이드뿐만 아니라 질문 및 결과 슬라이드도 완벽하게 지원됩니다.

질문 슬라이드에는 반응형 속성 및 테마가 적용됩니다.

별표 기호는 속성 관리자의 샘플 텍스트 영역에 재정의된 스타일을 나타냅니다.

드래그 앤 드롭 상호 작용

Adobe Captivate는 반응형 프로젝트에 대한 드래그 앤 드롭 상호 작용을 지원합니다.

드래그 앤 드롭 상호 작용은 재미있고 유익한 사용자 지식 평가 방법입니다. 이 상호 작용을 통해 사용자들은 지정된 영역이나 개체에 개체를 끌어서 놓아 질문에 답변을 할 수 있습니다.

드래그 앤 드롭 상호 작용은 드래그 소스와 드롭 대상으로 구성됩니다. 사용자는 드래그 소스를 끌어 드롭 대상에 놓습니다.

반응형 프로젝트에서 [삽입] > [드래그 앤 드롭 상호 작용 마법사 실행]을 선택하여 드래그 앤 드롭 상호 작용 마법사를 실행할 수 있습니다. 또한 아래의 스냅샷과 같이 [상호 작용] > [드래그 앤 드롭]을 선택할 수도 있습니다.

반응형 프로젝트에서 드래그 앤 드롭 상호 작용의 모든 기능은 빈 프로젝트와 비슷합니다. 드래그 앤 드롭 상호 작용 만들기, 상호 작용의 다양한 기능 및 모범 사례에 대한 자세한 내용은 드래그 앤 드롭 상호 작용을 참조하십시오.

전문가의 관점: 반응형 드래그 앤 드롭 상호 작용

Allen Partridge

샘플 프로젝트 다운로드

Captivate 및 참여 학습 콘텐트 생성 방법에 대해 자세히 알아보려면 다음 프로젝트를 다운로드하십시오.