사용 안내서 취소

사용자 정의 디자인 옵션 만들기

검색

마지막 업데이트 날짜 2025년 1월 28일

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

개요

Adobe Captivate의 디자인 옵션을 사용하면 슬라이드, 콘텐츠 블록, 질문 슬라이드 및 위젯에 대한 콘텐츠 레이아웃 및 스타일 변형을 유연하게 만들 수 있습니다. 콘텐츠 블록이나 블록 내 구성 요소를 선택하여 사용 가능한 디자인 옵션의 주최자를 확인합니다. Adobe Captivate의 디자인 옵션에 대해 자세히 알아보세요.

그러나, 개인 또는 조직의 디자인과 레이아웃을 구현해야 하는 경우 사용자 정의 디자인 옵션을 만들 수 있습니다. 이 문서에서는 Adobe Captivate에서 사용자 정의 디자인 옵션을 만들고, 사용자 정의하고, 재사용하거나 공유하는 방법에 대해 설명합니다. 여기에서는 CSS 격자 속성을 사용한 레이아웃 변경, 다른 뷰포트에 대한 레이아웃 업데이트, 개체 스타일 사용자 정의
를 다룹니다.

JSON 파일의 필수 필드 변경
CSS 스타일 및 속성

팁:

시간을 절약하려면 Captivate에서 기존 기본 디자인 옵션의 복사본을 만들어 별도의 위치(<eLearningAssets>\12.0\)에 저장하세요.

예를 들어 이미지 블록에 대한 사용자 정의 디자인을 만들려면 기본 이미지 블록 디자인 옵션을 복사하여 사용자 정의 기반으로 사용합니다.

C:\Program Files\Adobe\Adobe Captivate\DesignOptions\content_blocks\Image\Single Image Default Design Option 경로에서 사용자 위치 <elearning>에 이 폴더 복사

설치된 디자인 옵션의 위치

설치된 위치:

Windows: C:\Program Files\Adobe\Adobe Captivate\DesignOptions
macOS: /Applications/Adobe Captivate/DesignOptions/

콘텐츠 블록, 레이아웃 슬라이드, 질문 슬라이드, 위젯 및 대화형 구성 요소를 비롯한 다양한 콘텐츠 유형에 대한 설치된 디자인 옵션 폴더를 찾을 수 있습니다. 이러한 폴더에는 자신의 디자인을 만들기 위해 복사하고 사용자 정의할 수 있는 디자인 옵션 파일이 들어 있습니다. 각 폴더를 열어 사용할 수 있는 다양한 유형의 콘텐츠 블록, 레이아웃 슬라이드, 위젯, 질문 슬라이드 및 대화형 구성 요소를 살펴봅니다.

참고:

텍스트/HTML 편집기를 사용하여 JSON 파일을 열고 편집할 수 있습니다. 폴더에 designOption.json, localized.json 및 Thumbnail.png 파일이 들어 있는지 확인합니다.

사용자 정의 디자인 옵션 폴더 만들기

사용자는 여기서 디자인 옵션 JSON 파일을 업로드하여 외부에서 작성된 디자인 옵션을 통합할 수 있습니다. 파일이 추가되면 이후 Captivate 실행 중에 콘텐츠 블록이나 구성 요소를 선택할 때 [시각적 속성] 패널에 디자인 옵션이 나타납니다.

사용자 정의 디자인 옵션을 위해 특별히 eLearning 자산 내에 별도의 폴더를 만듭니다. Captivate는 eLearning Assets 폴더에서 디자인 옵션을 읽을 수 있으므로, 사용자가 여기서 사용자 정의 디자인을 만들어 기본 디자인 옵션과 사용자 정의 디자인 옵션을 구분할 수 있습니다.

아직 폴더가 없으면 <eLearningAssets>\12.0\에 designOptions라는 이름의 폴더를 만듭니다.
- Windows: C:\Users\Public\Documents\Adobe\eLearning Assets\12.0\designOptions
- macOS: /Users/<user>/Documents/Adobe/eLearning Assets/12.0/designOptions/
참고:

사용자 정의 디자인 옵션 폴더 이름은 설치된 디자인 옵션과 구분하기 위해 소문자 'd'로 시작합니다.
eLearning Assets 폴더에서 콘텐츠 블록 또는 슬라이드 레이아웃의 각 유형에 대한 사용자 정의 디자인 옵션 폴더의 이름을 변경합니다.
텍스트 편집기를 열고 eLearning Assets에서 사용자 정의 디자인 옵션을 찾아 선택합니다. 파일이 편집기에 자동으로 로드됩니다.

디자인 옵션 파일의 부분을 이해하는 방법에 대해 자세히 알아보세요.

JSON 파일의 필수 필드 변경

디자인 옵션은 JSON 파일에 있습니다. designOption.json 파일로 이동하여 이 사용자 정의 디자인에 대한 고유 ID를 추가합니다. 예제는 다음과 같습니다.

"designOptionId": "사용자 정의 단락 스타일 1"

알림:

"designOptionID"에 고유한 ID를 할당하여 다른 사용자 정의 디자인 옵션과 구분합니다.
designOption.json 파일에서 "isDefault" 값을 false로 설정해야 합니다. 이 작업을 수행해야 설치된 디자인 옵션과 충돌하지 않습니다. 이것은 필수 단계입니다.
localized.json 파일을 편집하면 이름 및 설명 필드의 값이 업데이트됩니다. 이 이름은 시각적 속성 패널에서 축소판 위로 마우스를 가져가면 Captivate 내에서 해당 사용자 정의 디자인에 대한 도구 설명으로 나타납니다.

"en-US": {

"name": "Paragraph Default Design Option",

"description": "Default design option For Paragraph"

},
사용자 정의 디자인 옵션의 축소판을 업데이트합니다. 이 이미지를 사용자 정의 디자인 옵션 폴더에 저장하고 새 축소판 PNG 파일의 이름을 바꿉니다. 축소판의 크기 제한은 130x78px이어야 합니다.

참고:

텍스트 편집기를 사용하여 designOption.json 파일에서 축소판 이름을 업데이트하세요.

디자인 옵션 JSON 파일에서 축소판 이름 업데이트

CSS 스타일 및 속성

Adobe Captivate는 CSS(Cascading Style Sheet) 속성을 지원하여 디자인 옵션을 사용자 정의하기 위해 미리 정의된 변수를 쉽게 수정할 수 있습니다. 이 기능은 디자인 프로세스를 단순화하고 브랜드 또는 프로젝트 테마에 맞게 전문적이고 시각적으로 매력적인 eLearning 프로젝트를 만들 수 있도록 합니다.

CSS 속성은 HTML 및 XML 요소의 모양과 동작을 제어합니다. 색상, 글꼴, 레이아웃, 간격 등에 대한 정밀한 제어를 제공하여 디자인이 원하는 스타일에 맞게 조정되도록 합니다.

사용자 정의 속성

Captivate에 포함된 기본 CSS 사용자 지정 속성은 행과 열이 있는 격자 기반 레이아웃 시스템을 활용하여 반응형 디자인을 만드는 데 이상적입니다. 이들은 시각적 속성 패널 아래에 나열된 모든 속성입니다. 디자인 옵션 파일에서도 이러한 속성을 수정할 수 있습니다.

사용자 정의 스타일

designOptions.json 파일 내 customStyles 섹션은 CSS 스타일 속성을 정의합니다. 이 섹션에서 고유한 디자인 요소를 만들어 유연하고 자유롭게 eLearning 프로젝트를 개인화할 수 있습니다.

사용자 정의 스타일은 모든 CSS 속성을 지원합니다. 하이픈으로 구분된 CSS 특성 대신 camelCase 서식을 사용합니다.
예: flex-direction 대신 flexDirection을 사용합니다.
CSS 속성도 장치 화면 크기에 따라 적용할 수 있습니다.

제한 사항

디자인 옵션을 사용하여 콘텐츠를 스타일링하고 레이아웃을 지정할 때 다음과 같은 제한이 적용됩니다.

모양 사용자 정의:
- 콘텐츠 요소(예: 색상, 글꼴)의 모양은 테마 사전 설정을 사용해야 수정할 수 있습니다. 하드 코딩된 값은 사용하지 않아야 합니다.
- 시각적 속성이 사용자 정의 속성에서 지원되는 경우 사용자 정의 스타일에 포함하지 마세요. 그렇게 하면 값이 하드 코딩되어 속성 패널을 통해 수정할 수 없게 됩니다.
- 그러나 여백과 같은 속성은 JSON 파일에서 customStyles 키를 사용하여 추가할 수 있습니다.
부모 컨테이너:
- 컨테이너 또는 요소의 부모는 변경할 수 없습니다.
숨겨진 컨테이너:
- Captivate에서 선택할 수 없는 버튼과 같은 숨겨진 컨테이너는 customStyles의 자식 노드로 전달되어야 합니다.
- 이러한 컨테이너는 customProperties를 지원하지 않으므로 object 태그를 키로 사용하여 포함해야 합니다. 지침은 자식 노드 customStyles의 예를 참조하세요.
사용자 인터페이스 구성 요소(UIC):
- 라디오 버튼 및 드롭다운과 같은 UIC의 속성은 향후 버전에서 사용 가능합니다. 현재 UIC에 대해 고정된 디자인 옵션 세트가 지원됩니다.
- 이러한 구성 요소가 콘텐츠 블록의 부분인 경우, 전체 콘텐츠 블록에 스타일을 지정할 수 있습니다. 작성자는 외부 디자인 옵션 파일을 통해 (위에서 설명한 대로) 디자인 옵션의 모듈식 구조를 활용할 수 있습니다.

이러한 제한 사항을 이해하면 플랫폼의 제약 사항을 준수하면서 콘텐츠를 효과적으로 설계하고 스타일을 지정할 수 있습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?