Adobe Captivate에서 반응형 텍스트를 사용하여 작업하기

반응형 텍스트는 중요한 반응형 기능입니다.

[편집] > [개체 스타일 관리자] > [텍스트 형식]을 사용하여 모든 중단점에서 텍스트 크기를 설정할 수 있습니다. 샘플 텍스트는 보기마다 서로 다른 변경사항을 표시합니다.

반응형 프로젝트에서 텍스트를 한 중단점에서 다른 중단점으로 이동하여 동적 변경사항을 볼 수도 있습니다. 또한 각 중단점 보기에서 동적으로 텍스트를 편집할 수도 있습니다.  

보기에서 텍스트 줄바꿈

Captivate에서는 데스크톱 - 태블릿 보기 및 태블릿 - 모바일 보기 각각에서 중단점 간의 관계에 있어 부모-자식 관계가 유지됩니다. 중단점에 대해 수행한 설정은 특정 보기에 대한 설정을 수정하고 링크를 해제하지 않으면 모든 하단 중단점 보기에 존재하게 됩니다.

링크가 해제되는 방식을 설명하는 그림

예를 들어, 반응형 프로젝트의 텍스트 캡션을 데스크톱 보기에서 만든 후에 태블릿 보기 및 모바일 보기에서 차례로 만든다고 가정해 봅니다. 이 경우, 모바일 중단점 보기로 이동하면 이 보기에서 사용할 수 있는 세 개의 텍스트 캡션을 볼 수 있습니다. 각 텍스트 캡션을 클릭하면 해당하는 중단점 보기 색상을 나타내는 텍스트 캡션 테두리를 볼 수 있습니다. 이 내용은 아래 그림에 나와 있습니다.

현재 첫 번째 텍스트 캡션에 있는 링크가 데스크톱 보기에 연결되어 있습니다. 두 번째 텍스트 캡션에 있는 링크는 태블릿 보기에 연결되어 있습니다. 이 링크는 색상 코딩을 기반으로 하여 이해할 수 있습니다. 모바일 보기에서 텍스트를 두 번째 텍스트 캡션에서 수정했다고 가정해 봅니다(즉, 위 그림과 같이 태블릿 보기에서 이전에 만든 텍스트). 그러면 태블릿 보기에서 이 텍스트 캡션에 대한 기존 링크가 끊어지고 모바일 보기에 대해 기본 텍스트 캡션으로 간주됩니다. 이 끊어진 링크는 두 번째 텍스트에 대한 텍스트 캡션 테두리 색상을 기반으로 이해할 수 있습니다. 이제, 이 경우 두 번째 텍스트 캡션에도 주황색이 표시되지만 파란색은 표시되지 않습니다.

마찬가지로, 첫 번째 텍스트 캡션에서 텍스트를 수정하면 데스크톱 보기가 있는 첫 번째 텍스트 캡션 링크도 끊어지고 모바일 보기의 기본 텍스트 캡션으로 간주됩니다. 이 내용은 아래 그림에 나와 있습니다.

보기에서 링크 복원

모바일과 태블릿 중단점 간에 또는 태블릿과 기본 중단점 간에 링크가 끊어지면 모든 보기에서 위치, 텍스트 및 텍스트 속성을 적용하여 링크를 복원할 수 있습니다.

모든 보기에 속성 적용

위치 속성

이제 모든 보기에서 개체의 위치 속성을 업데이트하여 현재 선택한 텍스트 요소의 속성을 일치시킬 수 있습니다. 모든 보기에서 개체 위치 속성을 적용하기 위해 마우스 오른쪽 단추를 클릭하면 컨텍스트 메뉴가 포함됩니다. 이 설정은 반응형 프로젝트에서 개체를 여러 보기에 다시 연결합니다. 

기본 보기에서 두 가지 텍스트 캡션을 만들었지만, 프로젝트에서 작업하는 동안 태블릿 보기와 모바일 보기에서 텍스트 캡션의 위치를 실수로 이동했다고 가정해 봅니다. 나중에, 이 변경사항을 깨닫고 기본 보기에서 사용 중인 원래 위치를 다른 모든 보기에서도 유지하려고 합니다. 이 경우, 기본 보기에서 텍스트 캡션을 선택하고 마우스 오른쪽 단추를 클릭한 후 모든 보기에 대해 [위치 속성 적용]을 클릭합니다.

텍스트 및 텍스트 속성

각 텍스트 요소의 속성을 재설정하거나 모든 보기를 업데이트하여 현재 선택한 텍스트 요소의 속성을 일치시킵니다. 모든 보기에서 텍스트 및 텍스트 속성을 적용하기 위해 마우스 오른쪽 단추를 클릭하면 컨텍스트 메뉴가 포함됩니다. 이 설정은 반응형 프로젝트에서 개체를 여러 보기에 다시 연결합니다. 

예를 들어, 기본 보기에서 두 가지 텍스트 캡션을 만들었지만, 태블릿 보기와 모바일 보기에서 텍스트 및 텍스트 속성(예: 문자, 스타일 등)을 수정했다고 가정해 봅니다. 이후 단계에서 다른 모든 보기에 대한 기본 보기 텍스트 및 텍스트 속성을 유지하려면, 기본 보기에서 텍스트 캡션을 마우스 오른쪽 단추로 클릭하고 모든 보기에 텍스트 및 텍스트 속성을 적용하면 됩니다. 

각 단어에 색상 또는 글꼴 스타일과 같은 여러 텍스트 형식을 적용하더라도 텍스트가 모두 반응형 프로젝트 보기에서 형식을 유지합니다. 항목의 계층적 순차 목록 또는 비순차 목록(예: 글머리 기호 텍스트)는 모든 보기에서 흐름이 유지됩니다.

개체 스타일 관리자(OSM)에서 각 중단점에 이미 텍스트 속성을 설정한 경우 OSM 설정이 유지됩니다. 이후 모든 중단점에서의 변경 사항은 OSM 설정을 무시하지 않습니다.

자동 확장

Adobe Captivate 은 중간 보기를 포함하여 기본, 태블릿 및 모바일 보기의 텍스트 캡션에서 텍스트를 맞추기 위해 텍스트 글꼴 크기를 조정할 수 있도록 지원합니다. 그러나, 텍스트 잘림 문제가 지속되는 경우 텍스트 캡션 높이에 대해 [자동] 또는 [% 상대적 크기] 옵션을 사용하면 캡션의 모든 텍스트에 맞게 캡션이 자동 확장됩니다.

색상 코딩

반응형 프로젝트의 보기에 따라 텍스트 개체의 색상 코딩이 달라집니다. 서로 다른 색상 코딩은 속성 창의 텍스트 영역 경계에서 볼 수 있습니다. 이전에는 위치 속성에만 적용되었습니다.

반응형 프로젝트에서 각 중단점 보기는 서로 다른 색상을 가집니다. 이 색상은 중단점 보기의 맨 위에서 확인할 수 있습니다. 예를 들어, 아래 이미지의 자주색은 데스크톱 보기를 나타냅니다.

이제, 데스크톱 보기에서 만든 텍스트는 속성 창의 텍스트 캡션 테두리 주위의 파란색 색상 코드를 나타냅니다. 마찬가지로, 태블릿 보기에서 만든 텍스트는 녹색을 나타내고 모바일 보기의 텍스트는 주황색 색상 코드를 나타냅니다.