사용 안내서 취소

Adobe Captivate 프로젝트에 웹 개체 추가

  1. Captivate 사용자 가이드
  2. Captivate 소개
    1. Adobe Captivate의 새로운 기능
    2. Adobe Captivate 시스템 요구 사항
    3. Adobe Captivate 업데이트
      1. Adobe Captivate(12.5 업데이트) 릴리스 노트
      2. Adobe Captivate(12.4 업데이트) 릴리스 노트
      3. Adobe Captivate(12.3 업데이트) 릴리스 노트
      4. Adobe Captivate(12.2 업데이트) 릴리스 노트
      5. Adobe Captivate(12.1 업데이트) 릴리스 노트
    4. Adobe Captivate 다운로드
    5. 자주 묻는 질문
    6. Adobe Captivate 기능에 대한 URL 액세스 구성
  3. 슬라이드 추가
    1. Adobe Captivate의 슬라이드 탐색기
    2. 대화 슬라이드 추가
    3. Adobe Captivate 프로젝트에 캐릭터 추가
    4. 슬라이드에서 배경 이미지 편집
    5. 콘텐츠 블록 및 구성 요소에 안쪽 여백 추가
    6. 긴 스크롤 프로젝트 만들기
  4. Adobe Captivate의 디자인 옵션
    1. 디자인 옵션이란?
    2. 디자인 옵션의 일부
    3. 사용자 정의 디자인 옵션 생성
    4. 사용자 정의 디자인 옵션 수정
    5. 사용자 정의 디자인 옵션 내보내기
    6. 사용자 정의 디자인 옵션 가져오기
  5. 텍스트 블록 추가
    1. 프로젝트에 텍스트 추가
    2. 프로젝트에 Adobe 글꼴 추가
  6. 미디어 블록 추가
    1. 프로젝트에 이미지 추가
    2. 프로젝트에 동영상 추가
    3. 인용문 추가
    4. 프로젝트에 SVG 추가
    5. 프로젝트에 웹 개체 추가
  7. 대화형 구성 요소
    1. 버튼 추가
    2. 입력 필드 추가
    3. 라디오 버튼 그룹 추가
    4. 드롭다운 추가
    5. 확인란 추가
  8. 브랜딩 블록 추가
    1. 프로젝트에 머리글 추가
    2. 프로젝트에 바닥글 추가
  9. 위젯
    1. 카드 추가
    2. 탭 추가
    3. 인증서 추가
    4. 캐러셀 추가
    5. 핫스팟 추가
    6. 드래그 앤 드롭 추가
    7. 타임라인 추가
    8. 클릭하여 표시하기 추가
    9. 아코디언 추가
  10. 퀴즈 만들기
    1. 객관식 질문 추가
    2. 참 또는 거짓 질문 추가
    3. 열 연결 질문 추가
    4. 단답형 질문 추가
    5. 순서 질문 추가
    6. 문제 은행 및 무작위 질문 슬라이드 추가
    7. 질문을 CSV로 가져오기
  11. 프로젝트에 오디오 추가
    1. 오디오 추가
    2. 폐쇄 캡션 추가
  12. 상호 작용
    1. 프로젝트에 상호 작용 추가
    2. 오버레이를 사용하여 대화형 동영상 만들기
    3. 슬라이드 수준 상호 작용 만들기
    4. 개체 수준 상호 작용 만들기
  13. 애니메이션
    1. 프로젝트에 애니메이션 추가
  14. 접근성
    1. 프로젝트를 액세스 가능하도록 설정
  15. 타임라인 사용자 정의
    1. Adobe Captivate의 타임라인 패널
  16. TOC 및 재생 막대 사용자 정의
    1. Adobe Captivate 목차
  17. 프로젝트 속성 편집
    1. Adobe Captivate의 변수
    2. 환경 설정
    3. 프로젝트 치수
    4. 테마
  18. 시뮬레이션 프로젝트 만들기
    1. 시뮬레이션
  19. 프로젝트 미리 보기
    1. 미리 보기
  20. 검토용으로 프로젝트 공유
    1. 검토용으로 공유
    2. 검토용 프로젝트 공유에 대한 FAQ 및 문제 해결 가이드   
  21. 프로젝트 게시
    1. 프로젝트 게시
  22. Adobe Captivate에서 프로젝트 업그레이드
    1. 프로젝트를 최신 버전으로 업그레이드 

Captivate 프로젝트에 웹 개체를 추가하는 방법을 알아봅니다.

개요

웹 개체를 사용하면 HTML5 미디어, 동영상, 웹 페이지, 스트리밍 링크 및 PDF와 같은 외부 콘텐츠를 슬라이드에 직접 포함할 수 있습니다. 이 기능을 통해 상호 작용이 개선되고 타사 리소스의 통합이 가능합니다. URL, 포함 코드 또는 업로드된 PDF를 사용하여 웹 개체를 추가할 수 있으므로 콘텐츠를 유연하게 포함할 수 있습니다. 모양을 완전히 사용자 정의할 수 있으며 자막, 부제 및 인터랙티브 버튼을 포함하는 옵션으로 일관되고 매력적인 사용자 환경을 보장합니다.

이 페이지의 주제는 다음과 같습니다.

슬라이드에 웹 개체 추가

Adobe Captivate에서 웹 개체를 추가할 경우, 세 가지 방법이 있습니다. 웹 페이지의 URL을 추가하거나, 동영상 또는 스트리밍 링크에 대한 포함 코드를 삽입하거나, 시스템에서 PDF를 업로드할 수 있습니다.

  1. 왼쪽 도구 모음에서 미디어 블록 추가를 선택합니다.

  2. 웹 개체를 선택합니다.

    슬라이드에 웹 개체 추가

  3. 시각적 속성 패널에서 콘텐츠 블록에 포함할 웹 개체 수를 선택합니다(슬라이드당 최대 2개).

  4. 구성 요소 섹션을 통해 자막, 부제, 카드 또는 버튼과 같은 구성 요소를 추가합니다.

    • 자막/부제: 콘텐츠 블록 안에 텍스트 자리 표시자를 추가합니다. 
    • 카드: 웹 개체 주위에 카드를 추가하고 컨테이너 역할을 합니다. 
    • 버튼: 웹 개체를 숨기거나 표시하고 상호 작용과 애니메이션을 추가하는 데 사용할 수 있습니다. 
    웹 개체에 구성 요소 추가

웹 개체 소스 추가

슬라이드에서 웹 개체 자리 표시자를 선택하여 콘텐츠 섹션의 소스 옵션을 보고 웹 개체를 추가합니다.

웹 개체 소스

 URL을 웹 개체로 추가

콘텐츠 섹션에서 URL 옵션을 선택하여 슬라이드에 웹 페이지나 온라인 동영상을 표시한 다음 URL을 복사하여 주소 필드에 붙여 넣습니다.

웹 개체의 URL 추가

 웹 개체의 미리 보기가 콘텐츠 블록 내에 나타납니다. 

웹 개체로 포함 코드 추가

포함 코드는 동영상, 인터랙티브 요소 또는 위젯과 같은 멀티미디어 콘텐츠를 프로젝트에 통합할 수 있도록 외부 플랫폼에서 제공하는 HTML 또는 JavaScript의 스니펫입니다.

포함 코드를 사용하면 스트리밍 서버의 동영상을 포함할 수 있으며, 개체의 크기, 레이아웃 및 모양을 보다 효과적으로 제어할 수 있습니다.

  1. 포함 코드 옵션을 선택합니다.

  2. YouTube, Vimeo 또는 동영상 스트리밍 플랫폼에서 포함 코드를 복사하여 붙여 넣습니다.

    다음은 YouTube 동영상에서 가져온 포함 코드의 예입니다.

    <iframe width="560" height="315" src="https://www.youtube.com/embed/pydJXGFsQ3A?si=Xn7kPDoNG9UduYX8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

    포함 코드를 붙여 넣으면 미리 보기가 슬라이드에 나타납니다.

    YouTube에서 가져온 포함 코드

    웹 개체 콘텐츠 블록의 전체 영역을 활용하려면 iframe의 포함 코드를 편집합니다. 코드를 조정하여 widthheight 특성을 '100%'로 설정합니다. 예: width="100%" height="100%". 이렇게 하면 웹 개체가 사용 가능한 공간 전체를 차지합니다.

    포함 코드

웹 개체로 PDF 추가

Adobe Captivate에서 PDF를 웹 개체로 포함하면 슬라이드 내에서 직접 안내서나 워크시트와 같은 보조 자료를 제공하여 eLearning 기능이 향상됩니다. 

  1. 시스템 옵션을 선택한 다음 아이콘을 선택하여 시스템에서 PDF 파일을 찾아봅니다. 프로젝트를 게시하면 PDF가 프로젝트 파일에 복사됩니다.

    PDF를 웹 개체로

  2. 오른쪽 상단 모서리에서 미리 보기를 선택하여 런타임에 다양한 장치 보기에서 PDF가 어떻게 나타나는지 확인합니다. 미리 보기 중 검색, 스크롤링, 주석 및 파일 저장과 같은 주요 기능을 테스트합니다.

    미리 보기 시 PDF

웹 개체 사용자 정의

  1. 모양 섹션에서 웹 개체 콘텐츠 블록의 모양을 사용자 정의합니다. 배경색을 조정하고, 테두리를 추가하고, 그림자를 적용하여 시각적 효과를 개선합니다.

    웹 개체 모양 사용자 정의

  2. 맞춤 및 간격 섹션에서 슬라이더를 사용하여 콘텐츠 너비를 조정하거나 콘텐츠와 콘텐츠 테두리 사이에 안쪽 여백을 추가할 수 있습니다. Adobe Captivate의 안쪽 여백 및 자동 레이아웃에 대해 자세히 알아보세요.

    웹 개체에 맞춤 및 간격 추가

  3. 웹 개체 주위에 카드를 추가합니다. 구성 요소에서 카드 옵션을 선택하고 카드 섹션을 확장하여 카드의 모양을 변경합니다.

    웹 개체 카드

  4. 자막 또는 부제 텍스트 구성 요소를 선택하여 모양을 사용자 정의합니다. 텍스트 색상을 조정하고, 강조 표시 또는 그림자를 적용하고, 글머리 기호 또는 번호 매기기를 추가하고 사전 설정 패널에서 스타일을 선택할 수 있습니다.

    웹 개체의 텍스트 사용자 정의

  5. 버튼 구성 요소를 선택하여 디자인을 사용자 정의하거나 안쪽 여백을 추가합니다. 모양, 텍스트, 아이콘, 색상, 테두리를 수정하거나 개인화된 모양의 그림자를 추가할 수 있습니다.

    웹 개체의 버튼 사용자 정의

eLearning 프로젝트에서 웹 개체를 사용하기 위한 모범 사례 

동영상과 외부 미디어 링크 등의 포함된 콘텐츠가 eLearning 프로젝트 내에서 원활하고 안전하게 실행되도록 하려면 다음 모범 사례를 권장합니다. 

  • HTTPS 사용: 사용자 데이터를 보호하고 최신 브라우저와의 호환성을 보장하기 위해 보안 암호화 연결에 항상 HTTPS를 사용합니다.  
  • 클릭잭킹 확인: 클릭잭킹은 보안 위협 요소이며 Captivate는 다른 웹 사이트로의 리디렉션을 지원하지 않습니다. 
  • 브라우저 호환성 확인: 다른 브라우저에서 포함된 콘텐츠를 테스트하여 모든 사용자에게 제대로 표시되고 작동하는지 확인합니다. 
  • 법적 효력이 있고 차단되지 않은 콘텐츠 확인: 포함된 미디어에 대해 신뢰할 수 있는 법적 자료를 사용하고 링크가 해당 지역에서 계속 작동하고 액세스할 수 있는지 정기적으로 확인합니다. 
  • CORS 준수 확인: 다른 출처의 포함된 콘텐츠에 대한 브라우저 제한을 방지하기 위해 외부 리소스가 CORS(교차 출처 리소스 공유)를 지원하는지 확인합니다. 
  • 장치 호환성 테스트: 포함된 콘텐츠가 태블릿 및 모바일 장치에서 반응하는지 확인하여 화면 크기에서 원활한 환경을 만듭니다. 
  • 스크립트 차단 확인: 스크립트 차단이 활성화된 콘텐츠를 테스트하고 중요한 콘텐츠가 차단되는 경우 팀과 함께 작업하여 대안을 마련합니다. 

쉽고 빠르게 지원 받기

신규 사용자이신가요?