장치 및 화면 크기 간에 원활하게 크기를 조정할 수 있는 Adobe Captivate 반응형 프로젝트를 만들어 보십시오. 반응형 프로젝트를 사용하면 학습자를 위한 몰입형 학습 환경을 제작하고 흥미로운 대화형 학습을 제작할 수 있습니다. 이 문서에서는 Adobe Captivate에서 프로젝트를 만들고 사용자 정의하는 방법에 대해 알아보겠습니다.

에셋 및 예시

이 문서의 절차에 따르려면 이미지 및 예시 Adobe Captivate 프로젝트 파일과 같은 에셋을 사용해야 합니다. 자신의 에셋과 예시를 사용할 수도 있습니다. 하지만 다음 ZIP 파일을 컴퓨터에 다운로드하여 압축을 푸는 것이 좋습니다.

반응형 프로젝트 만들기

Adobe Captivate에서 반응형 프로젝트를 만들어 시작해 보겠습니다.

  1. Adobe Captivate의 시작 화면의 새로운 탭에서 반응형 프로젝트를 선택하고 만들기를 클릭합니다.

    welcome-screen-responsive

    Adobe Captivate는 하나의 슬라이드로 반응형 프로젝트를 만듭니다.

    Adobe Captivate의 반응형 프로젝트에서 슬라이드 위의 미리 보기 막대는 다양한 화면 크기 또는 장치에서 프로젝트를 빠르게 볼 수 있는 옵션을 제공합니다.

    responsive-slide
  2. 다양한 장치에서 프로젝트를 미리 보려면 드롭다운 목록에서 원하는 미리 보기 옵션을 선택합니다.

  3. 미리 보기 막대 오른쪽의 미리 보기 슬라이더 옵션을 사용하면 현재 슬라이드의 크기를 조정하고 콘텐트를 동적으로 미리 볼 수 있습니다.

    슬라이더를 왼쪽 또는 오른쪽으로 이동하면 슬라이드의 콘텐트가 화면에 맞게 조정됩니다.

    responsive-slide-smaller

 

이 주제에 대한 자세한 내용은 Adobe Captivate를 이용한 반응형 프로젝트 디자인을 참조하십시오.

슬라이드에 Fluid Box 추가

또한 Fluid Box 레이아웃을 사용하여 Adobe Captivate 반응형 프로젝트를 만들 수도 있습니다. Fluid Box는 슬라이드를 다양한 화면 크기와 장치에서 표시할 때 개체가 예상대로 작동하도록 슬라이드의 개체를 배열합니다. Fluid Box는 eLearning 디자이너를 위한 사용하기 쉬운 레이아웃 모델입니다. 원하는 방향으로 하위 개체를 배치하고 표시 장치의 크기에 맞춰 유연하게 적용할 수 있습니다.

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

빈 슬라이드를 프로젝트에 추가한 다음 Fluid Box를 사용해 슬라이드의 반응을 지원해 보겠습니다. 해당 슬라이드는 이 절차의 마지막에 다음과 같이 표시됩니다.

responsive-slide-withboxes

위 슬라이드는 두 개의 가로 Fluid Box를 사용합니다.

  1. 다운로드한 파일 폴더에서 샘플 하위 폴더로 이동하고 엽니다.

    create-responsive-projects.cptx

    참고:

    이 자습서와 함께 제공되는 프로젝트 파일은 다운로드하지 않아도 됩니다. 그래도 계속 이 절차의 단계를 수행할 수 있습니다. 그러나 Adobe Captivate에서 반응형 프로젝트를 만들어야 합니다.

  2. 필름 스트립에서 첫 번째 슬라이드가 선택되어 있으면 도구 모음에서 슬라이드를 클릭하고 빈 슬라이드를 선택합니다.

    먼저 두 개의 가로 Fluid Box를 현재 슬라이드에 추가해 보겠습니다. 

  3. 도구 모음에서 Fluid Box를 클릭하고 가로를 선택합니다.

  4. 하위 메뉴에서 두 번째 상자를 선택하여 두 개의 가로 Fluid Box를 추가합니다.

    horizontal_fluidboxsubmenu

    슬라이드에 Fluid Box를 삽입하면 해당 상자가 슬라이드에 균등한 간격으로 배치됩니다. 두 슬라이드 간에 슬라이더를 사용하여 상자의 크기를 조정할 수 있습니다.

    responsive-slide-fluidbox-horizontal
  5. 슬라이더를 왼쪽으로 이동하여 가로 상자의 크기를 조정합니다.

    그런 다음 두 개의 세로 Fluid Box를 오른쪽 가로 상자에 삽입합니다.

  6. 오른쪽 가로 상자 내부에 개체를 배치하려면 상자를 선택합니다.

  7. 도구 모음에서 Fluid Box를 클릭하고 세로를 선택합니다.

  8. 하위 메뉴에서 두 번째 상자를 선택하여 두 개의 세로 Fluid Box를 추가합니다.

    vertical_fluid_boxsubmenu
  9. 슬라이더를 위로 이동하여 세로 상자의 크기를 조정합니다.

  10. 미리 보기 슬라이더를 왼쪽 및 오른쪽으로 이동하여 이 슬라이드의 반응을 테스트합니다.

    아니면 드롭다운 목록의 미리 보기에서 다른 장치를 선택합니다.

Fluid Box에 개체 추가

이전 섹션에서는 가로 및 세로 Fluid Box를 슬라이드에 추가하는 방법에 대해 알아보았습니다.

슬라이드의 Fluid Box에 개체를 추가해 보겠습니다.

참고:

롤오버 개체는 모바일 장치에서 작동하지 않으므로 Fluid Box에 추가할 수 없습니다.

해당 슬라이드는 이 절차의 마지막에 다음과 같이 표시됩니다.

lunasphere-studios-team
  1. 다운로드한 파일 폴더에서 샘플 하위 폴더로 이동하고 엽니다.

    create-responsive-projects-with-fluid.cptx

    참고:

    이 자습서와 함께 제공되는 프로젝트 파일은 다운로드하지 않아도 됩니다. 그래도 계속 이 절차의 단계를 수행할 수 있습니다. 그러나 위의 슬라이드에 FluidBox 추가 시작 시 표시된 슬라이드와 비슷한 슬라이드를 만드는 것이 좋습니다.

  2. 가로 및 세로 Fluid Box가 포함된 슬라이드로 이동합니다.

  3. 왼쪽 가로 상자에 텍스트 캡션을 추가하려면 슬라이드에서 해당 상자를 선택합니다.

  4. 도구 모음에서 텍스트를 클릭한 다음 텍스트 캡션을 선택합니다.

    텍스트 캡션 상자에 다음 텍스트를 입력합니다.

    LUNARSPHERE STUDIOS

    속성 관리자를 사용하여 텍스트의 서식을 변경할 수 있습니다. 속성 관리자를 보려면 도구 모음의 오른쪽 모서리에서 속성을 클릭합니다.

  5. 오른쪽 하단 세로 상자에 텍스트 캡션을 추가하려면 슬라이드에서 해당 상자를 선택합니다.

  6. 도구 모음에서텍스트 클릭한 다음텍스트 캡션을 선택합니다.

    다음 텍스트를 텍스트 캡션에 복사하여 붙여 넣습니다.

    Madison와 Robert는 Lunarsphere Studio 학습 팀의 일원입니다. 여러분과 마찬가지로 그들에게는 매일 자신의 기술과 가능성의 한계를 테스트할 수 있는 새로운 도전 기회가 주어집니다. 오늘 여러분은 Madison과 Robert처럼 Adobe Captivate를 처음으로 사용하게 됩니다.

  7. 상단 오른쪽 세로 상자에 이미지를 추가하려면 슬라이드에서 해당 상자를 선택합니다.

  8. 도구 모음에서 미디어를 클릭한 다음 이미지를 선택합니다.

    컴퓨터에서 이미지 파일을 선택할 수 있는 대화 상자가 표시됩니다.

  9. 다운로드한 파일 폴더에서 에셋 하위 폴더로 이동합니다.

  10. lunasphere-studios-team.png  파일을 선택하고 엽니다.

    이 이미지는 상단 오른쪽 세로 Fluid Box 상자에 배치됩니다.

    이미지의 크기가 배치되는 Fluid Box에 맞게 어떻게 조정되는지 살펴 보십시오.

  11. 미리 보기 슬라이더를 왼쪽 및 오른쪽으로 이동하여 이 슬라이드의 반응을 테스트합니다.

    아니면 드롭다운 목록의 미리 보기에서 다른 장치를 선택합니다.

이제 콘텐츠가 포함된 슬라이드가 완성되었습니다.개체가 장치에서어떻게 표시되는지 미리 보십시오.

도구 모음에서미리 보기 클릭한 다음프로젝트를 선택합니다.

 

Fluid Box에 대한 자세한 내용은 Adobe Captivate의 Fluid Box를 참조하십시오.

프로젝트에 반응형 시뮬레이션 추가

반응형 프로젝트의 시뮬레이션 단계를 다음과 같은 모드로 캡처할 수 있습니다.

  • 데모
  • 평가
  • 교육

PowerPoint 프레젠테이션을 만드는 단계를 레코딩하려면 짧은 소프트웨어 시뮬레이션을 데모 모드로 삽입하십시오.

  1. 다운로드한 파일 폴더에서 샘플 하위 폴더로 이동하고 엽니다.

    create-responsive-projects.cptx

    참고:

    이 자습서와 함께 제공되는 프로젝트 파일은 다운로드하지 않아도 됩니다. 그래도 계속 이 절차의 단계를 수행할 수 있습니다.  그러나 Adobe Captivate에서 반응형 프로젝트를 만들어야 합니다.

  2. 도구 모음에서 슬라이드를 클릭하고 소프트웨어 시뮬레이션을 선택합니다.

  3. 추가 슬라이드 레코딩 대화 상자에서 소프트웨어 시뮬레이션을 삽입하려는 위치 뒤에 있는 슬라이드를 선택하고 확인을 클릭합니다.

  4. 대화 상자에 데모를 레코딩할 수 있는 옵션이 표시됩니다. 다음 옵션을 선택합니다.

    • 드롭다운 목록에서 PowerPoint를 선택합니다.
    • 모드 드롭다운 목록에서 데모 모드가 선택되어 있는지 확인합니다.
    software_simulationinsertstartup
  5. 레코딩을 클릭합니다.

    카운터 수를 1로 줄이면 PowerPoint 응용 프로그램이 전경으로 이동합니다.

  6. PowerPoint에서 다음 단계를 수행합니다.

    1. 파일 메뉴를 선택합니다.
    2. 새로 만들기를 선택합니다.
    3. 테마를 선택합니다.
    4. 대화 상자에서 만들기를 클릭합니다.
  7. 시뮬레이션을 종료하려면:

    • Windows의 경우 키보드의 End 키를 누릅니다.
    • MAC의 경우 상단 막대에서 Adobe Captivate 아이콘을 클릭합니다.

    시뮬레이션을 종료하면 Adobe Captivate가 전경으로 다시 이동합니다.

    데모 슬라이드가 프로젝트에 삽입됩니다.

  8. 레코딩된 슬라이드는 Captivate 프로젝트에 추가됩니다. 각 시뮬레이션 슬라이드에 파란색 사각형이표시됩니다. 파란색 사각형은 각 시뮬레이션의 초점 영역입니다. 편집 영역에서만 볼 수 있으며,프로젝트를 미리 보거나 게시할 때 사라집니다. 이 파란색 사각형의 크기는 Captivate 반응형 프로젝트에 대해 지원되는 최소 장치 크기입니다.

    responsive-simulation-slide

    시뮬레이션의 각 슬라이드에도 파란색 테두리 상자가 포함되어 있습니다. 이 슬라이드의 영역은 최소 크기 장치에 대해 표시됩니다. 기본적으로 Adobe Captivate에 선택되어 있는 영역과 다른 영역을 표시하려면 이 상자를 슬라이드 주변으로 이동합니다.

Adobe Captivate의 소프트웨어 시뮬레이션에 대한 자세한 내용은 소프트웨어 시뮬레이션 만들기를 참조하십시오.

반응형 시뮬레이션을미리 보십시오.

도구 모음에서미리 보기 클릭한 다음프로젝트를 선택합니다.

프로젝트에 반응형 퀴즈 추가

반응형 프로젝트에 퀴즈 슬라이드를 추가하면 Adobe Captivate가 Fluid Box를 추가하여 슬라이드에서 콘텐트의 반응을확인할 수있습니다.

이 동작을 시도해 보기 위해 하나의 참 / 거짓 질문으로 간단한 퀴즈를 만들어 보겠습니다.

  1. 다운로드한 파일 폴더에서 샘플 하위 폴더로 이동하고 엽니다.

    create-responsive-projects.cptx

    참고:

    이 자습서와 함께 제공되는 프로젝트 파일은 다운로드하지 않아도 됩니다. 그래도 계속 이 절차의 단계를 수행할 수 있습니다. 그러나 Adobe Captivate에서 반응형 프로젝트를 만들어야 합니다.

  2. 도구 모음에서 슬라이드를 클릭하고 질문 슬라이드를 선택합니다.

  3. 질문 삽입 대화 상자에서 참/거짓확인란을선택한 다음 확인을 클릭합니다.

    요약 슬라이드 뒤에 질문 슬라이드가 삽입됩니다.

    또한 Adobe Captivate가 질문 슬라이드 뒤에 퀴즈 결과 슬라이드를 삽입합니다.

    반응형 프로젝트에 질문 슬라이드를 추가하면 Adobe Captivate가 질문의 모든 개체를 Fluid Box에 추가하여 반응을 확인합니다.

    responsive-question-slide

    또한 슬라이드의 반응을 빠르게 확인할 수 있는 미리 보기 슬라이더 옵션도 제공합니다.

  4. 질문 슬라이드에서 텍스트 영역에 다음 질문을 입력합니다(자리 표시자 텍스트 덮어쓰기).

    Adobe Captivate를 사용해 반응형 프로젝트를 만들 수 없습니다.

  5. 거짓을 선택합니다.

Adobe Captivate의 퀴즈에 대한 자세한 내용은 퀴즈 만들기를 참조하십시오.

퀴즈 질문을 미리 보고 시도해 보겠습니다.

도구 모음에서 미리 보기를 클릭한 다음 프로젝트를 선택합니다.

비반응형 프로젝트를 반응형으로 변환

비반응형 Adobe Captivate 프로젝트가 있는 경우 Adobe Captivate는 프로젝트를 간단하게 반응형 프로젝트로 변환하는 방법을 제공합니다.

비반응형 프로젝트를 가져와 반응형 프로젝트로 변환해 보겠습니다.

프로젝트를 변환하기 전에 이 프로젝트가 어떻게 표시되는지 미리 보십시오.

도구 모음에서 미리 보기를 연 다음 프로젝트를 선택합니다.

  1. 다운로드한 파일 폴더에서 샘플 하위 폴더로 이동하고 엽니다.

    non-responsive-project.cptx

    참고:

    이 자습서와 함께 제공되는 프로젝트 파일은 다운로드하지 않아도 됩니다. 그래도 계속 이 절차의 단계를 수행할 수 있습니다. 그러나 Adobe Captivate에서 반응형 프로젝트를 만들어야 합니다.

    반응형 프로젝트에서 슬라이드 위에 표시되는 미리 보기 슬라이더가 비반응형 프로젝트의 슬라이드 위에는 표시되지 않습니다. 미리 보기 슬라이더는 프로젝트가 반응형인지 여부를 확인할 수 있는 유용한 시각적 표시입니다.

  2. 파일 메뉴에서 반응형으로 저장을 선택합니다.

    모든 Adobe Captivate 개체가 반응형 프로젝트에서 지원되지는 않으므로 다음 대화 상자가 표시됩니다.

    responsive-project-unsupported-objectes
  3. 지원되지 않는 항목 표시를 클릭합니다.

    responsive-project-unsupported-objects-list

    HTML5 트래커 패널에는 지원되지 않는 개체 및 슬라이드 목록이 표시됩니다.

  4. 패널에서 지원되지 않는 개체 열기를 클릭합니다.

    그러면 개체가 포함되어 있는 슬라이드로 이동됩니다. 또한 슬라이드에서 개체가 선택됩니다.

    예를 들어 사용자가 모바일 장치에서 결과물을 볼 경우 프로젝트에 롤오버 개체가 반드시 포함되어 있어야 합니다.

  5. 슬라이드에서 선택된 롤오버 캡션을 제거합니다.

    이제 개체가 HTML5 트래커 패널에 표시되지 않습니다.

  6. 지원되지 않는 개체를 제거한 후 파일 메뉴에서 반응형으로 저장을 선택합니다.

  7. 대화 상자에서 저장을 클릭합니다.

  8. 다른 이름으로 저장 대화 상자에서 컴퓨터의 파일 위치 및 새로 변환된 반응형 프로젝트에 대한 파일 이름을 선택합니다.

    이제 미리 보기 슬라이더가 변환된 프로젝트에서 슬라이드 위에 표시됩니다.

프로젝트를 변환한 후 새롭게 변환된 반응형 프로젝트가 어떻게 표시되는지 미리 보십시오.

도구 모음에서 미리 보기를 클릭한 다음 프로젝트를 선택합니다.

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

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