이 문서에서는 데이터 구동 애니메이션을 사용하여 작업하는 방법을 알아봅니다.

컴포지션에서 애니메이션을 구동하는 다양한 데이터 소스에서 수집한 실시간 데이터를 사용하여 데이터 구동 애니메이션을 만듭니다. 여러 데이터 소스의 데이터를 사용할 수 있습니다. 데이터는 정적일 수도 있고 시간에 따라 변경될 수도 있습니다. After Effects 프로젝트로 데이터를 가져와 그래프와 문자에 애니메이션을 적용하고 시각 효과, 동영상 제목 및 기타 모션 그래픽을 제어하는 데 사용 가능한 입력으로 사용할 수 있습니다.

데이터 구동 애니메이션 예제
데이터 구동 애니메이션 예제

데이터 소스

다음과 같은 사용 가능한 거의 모든 소스의 데이터를 사용할 수 있습니다.

  • 디바이스에서 생성된 데이터 파일 - 센서를 통해 활동을 기록하여 다른 파일 포맷으로 저장하는 피트니스 관리 장치와 같은 디바이스의 데이터입니다. 시간에 따라 변경되는 이 데이터에는 속도, 고도, 거리, 심박수 및 사용자 활동의 기타 여러 매개 변수가 포함됩니다.
  • 사용자가 생성한 정적 데이터 - 그래픽을 구동하기 위해 변경할 수 있는 설문 조사 결과와 같은 전역 정적 데이터입니다. 사용자가 만든 데이터 파일이 전역 데이터용 작업 과정을 제공할 수 있습니다.
  • URL - 웹 페이지를 탐색하는 사용자의 출입 경로와 같은 웹 사이트의 실시간 데이터입니다.
  • 메타데이터 - 비디오 파일 메타데이터에 포함된 데이터입니다.

입력 포맷

데이터 파일을 다음 포맷으로 가져올 수 있습니다.

  • JSON
  • MGJSON
  • CSV
  • TSV

다른 포맷으로 된 데이터 파일이 있는 경우 지원되는 가져오기 파일 포맷으로 변환한 후 After Effects 프로젝트로 가져오십시오. 데이터 파일을 After Effects에서 지원하는 포맷으로 변환하는 데 사용할 수 있는 다양한 변환 툴이 있습니다.

데이터 구동 애니메이션

데이터 구동 애니메이션

표준 JSON(. json) 지원

표준 JSON 파일을 푸티지로 After Effects에 가져오면 데이터 파일이 백그라운드에서 작동합니다. After Effects는 이러한 데이터 파일의 데이터를 직접 참조하여 프로젝트 내의 애니메이션을 구동합니다. JSON 푸티지는 타임라인 패널에서 데이터 스트림으로 표시되지 않습니다. 표현식을 사용하여 데이터를 평가된 JSON 개체로 참조할 수 있습니다.

표현식을 수정하여 데이터가 참조되는 방식을 변경할 수 있습니다. 텍스트 편집기에서 데이터를 작성할 수 있으며, After Effects는 이 데이터를 참조하여 애니메이션을 구동합니다. JSON은 JSON 스키마를 기준으로 지원됩니다. JSON 스키마는 애플리케이션이 JSON 데이터를 사용하고 수정하는 방식을 지정 및 정의합니다.

JSON의 기본 데이터 유형은 다음과 같습니다.

  • 숫자: 부호가 있는 10진수입니다.
  • 문자열: 0개 이상의 유니코드 문자 시퀀스입니다.
  • 부울: true 또는 false 값 중 하나입니다.
  • 배열: 정렬된 0개 이상의 값 목록입니다.
  • 개체: 이름(키)이 문자열인 이름 또는 값 쌍의 정렬되지 않은 모음입니다.
  • Null: 'null'이라는 단어를 사용하는 비어 있는 값입니다.

After Effects에서 JSON 파일을 사용한 작업

표준 JSON 파일을 사용하여 작업하려면 다음 단계를 수행합니다.

  1. 파일 > 가져오기를 선택합니다.

  2. 가져오려면.JSON파일을 선택하고 열기를 클릭합니다.

  3. 파일이 프로젝트 창에 추가됩니다. 푸티지를 사용하여 컴포지션을 만듭니다.

  4. 컴포지션에 단색을 추가합니다. 단색을 추가하려면 레이어 > 단색을 선택합니다.

  5. 타임라인 패널에서 단색 레이어의 속성을 돌려서 열고 Alt 키를 누른 상태로 불투명도 매개 변수를 클릭합니다.

  6. 표현식의 데이터를 변경하여 애니메이션을 수정합니다. JSON 데이터를 제어할 수 있으며, 해당 데이터는 모든 정보가 저장된 데이터 파일에서 참조됩니다.

  7. JSON 파일을 다른 JSON 파일로 바꿔 참조 대상 데이터를 변경할 수도 있습니다. 파일을 바꾸려면 푸티지 바꾸기 > 파일을 선택하고 컴퓨터에서 새 파일을 엽니다.

데이터를 사용하려는 경우 데이터가 구동하도록 할 속성에 대해 표현식을 적용한 후에 다음을 수행하면 됩니다.

  1. sourceData 특성을 사용하여 .JSON 파일의 데이터를 읽습니다. 예를 들면 다음과 같습니다.

    var sampleData = footage("sample.json").sourceData;
  2. 해당 값을 반환하려면 JSON 데이터 내에서 특정 속성을 참조합니다. 예를 들면 다음과 같습니다.

    myData.engineData.RPM or myData.latitude.value.

모션 그래픽 JSON(.mgjson) 지원

MGJSON 데이터 파일을 프로젝트에 푸티지로 가져올 수 있습니다. 데이터 푸티지를 컴포지션에 추가하면 데이터 속성 스트림이 최상위 레벨 그룹 "데이터"로 그룹화됩니다. 데이터 그룹에는 푸티지 데이터가 속성으로 표시됩니다. 데이터 그룹의 각 속성은 footage("foo.mgjson").dataValue(N) 표현식을 사용하여 데이터 파일 값에 액세스하는 푸티지 파일에 다시 연결되는 표현식입니다. 여기서 N은 파일의 데이터 스트림 경로입니다. MGJSON은 스키마를 기반으로 작동하므로 After Effects에서 데이터 스트림을 손쉽게 참조하고 가져올 수 있습니다.

각 개별 데이터 속성에는 해당 속성을 MGJSON 파일의 데이터에 연결하는 표현식이 적용되어 있습니다. 소스 MGJSON 파일이 변경되면 데이터 속성 값이 자동으로 업데이트됩니다.

타임라인 패널에서 [데이터] 레이어를 돌려서 연 다음 뚝딱 툴을 사용하여 매개 변수를 다른 매개 변수에 연결할 수 있습니다. 변경 내용은 자동으로 입력됩니다.

After Effects에서 MGJSON 푸티지를 사용한 작업

MGJSON 파일을 사용하여 작업하려면 다음 단계를 수행합니다.

  1. 파일 > 가져오기를 선택합니다.

  2. 가져오려면MGJSON파일을 선택하고 열기를 클릭합니다.

  3. 파일이 프로젝트 창에 추가됩니다. 푸티지를 사용하여 컴포지션을 만듭니다.

  4. 에셋을 프로젝트로 가져와 컴포지션에 추가합니다.

  5. 타임라인 패널에서 푸티지의 속성을 돌려서 엽니다.

  6. 뚝딱 툴을 사용하여 회전과 같은 에셋의 속성 중 하나를 데이터 레이어의 데이터 스트림 중 하나에서 엽니다. 이제 에셋 속성이 해당 데이터 레이어의 데이터를 참조합니다. 반영된 각 데이터 스트림에는 푸티지 파일에서 값을 가져오는 표현식이 있습니다.

  7. 푸티지를 미리 볼 때는 데이터 레이어의 데이터 스트림을 기준으로 에셋에 애니메이션이 적용됩니다.

데이터 파일의 데이터 샘플을 키프레임으로 변환할 수도 있습니다. 키프레임으로 변환하려면 다음 단계를 수행합니다.

  1. MGJSON 파일을 프로젝트로 가져온 다음 타임라인 패널로 드래그합니다.

  2. 데이터 레이어를 마우스 오른쪽 버튼으로 클릭하고 레이어 및 키프레임 도우미 메뉴에서 키프레임 도우미 > 데이터에서 키프레임 만들기를 선택합니다.

  3. 키프레임을 보려면 데이터 레이어를 돌려서 엽니다.

참고:

키프레임 변환 이후에는 데이터가 더 이상 실시간 상태가 아니며 데이터 파일에서 참조되지 않습니다.

그래프 편집기에서 실시간 데이터를 그래프로 확인할 수도 있습니다. 이와 같이 데이터를 확인하려면 타임라인 패널에서 그래프 편집기 아이콘을 클릭합니다.

데이터 구동 애니메이션은 표현식 참조를 사용합니다. 자세한 내용은 데이터 구동 애니메이션(표현식 참조)을 참조하십시오.

비디오 시작 시간을 mgJSON 데이터에 정렬

레이어 > 시간 > 비디오를 데이터에 정렬 명령은 mgJSON 파일에 지정된 대로 다양한 프레임을 기준으로 비디오 레이어를 오프셋합니다. 이 명령을 사용하면 비디오 시작 시간을 일치하는 mgJSON 파일에 저장된 데이터 샘플에 정렬할 수 있습니다. 예를 들어 레이스 중 데이터를 캡처했지만 비디오 시작 시간이 캡처한 데이터의 시작 시간과 일치하지 않을 경우 오프셋을 지정하여 데이터가 자동으로 정렬되도록 할 수 있습니다.

비디오 시작 시간을 mgJSON 데이터에 정렬하려면 다음 단계를 수행합니다.

  1. 대상 레이어가 포함된 컴포지션에 .mgJSON 파일을 추가합니다.
  2. .mgJSON 레이어와 대상 레이어를 둘 다 선택합니다.
  3. 레이어 > 시간 > 비디오를 데이터에 정렬을 선택합니다.

이 기능이 작동하려면 mgJSON 파일에 다음 정보가 포함된 videoSyncTimeList 그룹이 있어야 합니다.

  • 하나 이상의 대상 레이어의 이름(fileName)
  • 데이터 레이어의 시작 부분에서 해당 레이어를 오프셋할 프레임의 수(frameNumber)

예를 들면 다음과 같습니다.

"videoSyncTimeList": [
  {
    "fileName": "sample1.mp4",
    "frameNumber": 1000
  },

  {
    "fileName": "sample2.mp4",
    "frameNumber": -1000
  }

fileName 값은 레이어의 소스 이름이 아니라 선택한 레이어의 레이어 이름이어야 합니다. 레이어 이름을 컴포지션에 있는 소스로 변경할 경우(예: 레이어 "sample1.mp4"의 이름을 "Race Camera 1"로 바꿈) mgJSON 파일의 fileName 값도 이와 일치하도록 변경해야 합니다. fileName이 참조하는 레이어는 소스 파일이 있는 푸티지 항목일 필요는 없으며 단색 레이어, 중첩된 컴포지션 또는 다른 레이어 유형이어도 됩니다.

양수 frameNumber 값은 대상 레이어를 왼쪽(데이터 레이어의 앞)에 오프셋합니다. 음수 frameNumber 값은 대상 레이어를 오른쪽(데이터 레이어의 뒤)에 오프셋합니다. frameNumber 값이 0이면 대상 레이어의 시작 부분을 데이터 레이어의 시작 부분에 정렬합니다.

CSV(.csv) 및 TSV(.tsv 또는 .txt) 지원

쉼표로 구분된 값(.csv) 및 탭으로 구분된 값(.tsv 또는 .txt) 파일을 After Effects에 푸티지로 가져와 데이터 소스로 사용할 수 있습니다. CSV 및 TSV 파일은 표 형식 데이터를 일반 텍스트 포맷(값을 쉼표나 탭으로 구분함)으로 저장합니다. CSV 및 TSV 데이터 파일의 작동 방식은 JSON 파일의 작동 방식과 유사합니다.

After Effects에서 CSV 또는 TSV 데이터 파일을 사용하려면 다음 단계를 따르십시오.

  1. 비디오, 오디오 또는 기타 파일을 가져올 때와 같은 방법으로 CSV 또는 TSV 파일을 프로젝트에 푸티지로 가져옵니다.
    다음 방법을 사용하여 파일을 푸티지로 가져옵니다.
    • 파일 > 가져오기를 선택합니다.
    • 프로젝트 패널을 마우스 오른쪽 버튼으로 클릭하고 가져오기 > 파일 형식을 선택합니다.
    • 프로젝트 패널을 두 번 클릭합니다.
  2. 파일이 프로젝트 창에 추가됩니다. 파일을 사용하여 컴포지션을 만듭니다.

  3. 타임라인 패널에서 푸티지의 속성을 돌려서 엽니다. 표현식 뚝딱 툴 또는 속성 링크 뚝딱 툴을 사용하여 컴포지션에 있는 레이어의 데이터 속성을 다른 레이어에 연결합니다. 표현식 텍스트 필드를 열려면 Shift 키를 누른 채 레이어 이름에 대해 타이머 아이콘을 클릭합니다. 편집 > 속성 링크와 함께 복사 명령을 통해 데이터 속성을 연결할 수도 있습니다.

    [타임라인]의 레이어 데이터 속성에 대한 자세한 내용은 데이터 속성 기본 사항을 참조하십시오.

  4.  데이터 푸티지 파일을 참조하려면 데이터가 구동하도록 할 속성에 대해 표현식을 사용합니다. dataValue() 푸티지 특성을 사용하여 지정한 행과 열에서 데이터를 읽습니다. 행과 열은 0에서 시작합니다. 예를 들어 footage("sample.tsv").dataValue([15,1])는 두 번째 열의 16행에 있는 값을 반환합니다.

데이터 속성 기본 사항

컴포지션에 JSON, CSV 또는 TSV 파일을 추가하고 속성을 열면 변형 속성 그룹 대신 데이터 속성 그룹만 포함됩니다. 데이터 속성 그룹에는 파일에 정의된 데이터 계층 구조가 포함됩니다.

타임라인 패널의 JSON 데이터 속성 그룹
타임라인 패널의 JSON 데이터 속성 그룹
타임라인 패널의 CSV 및 TSV 데이터 속성 그룹
타임라인 패널의 CSV 및 TSV 데이터 속성 그룹

이 데이터 그룹은 After Effects에서 모션 그래픽 JSON(.mgJSON) 파일을 처리하는 방식과 유사합니다. JSON, CSV 및 TSV에는 정적 데이터 값만 포함할 수 있고 mgJSON에는 동적 데이터(시간에 따라 변경되는 데이터)를 포함할 수 있다는 점이 다릅니다.

각 개별 데이터 속성에는 해당 속성을 JSON, CSV 또는 TSV 파일의 데이터에 연결하는 표현식이 적용되어 있습니다. 소스 데이터 파일을 변경하면 데이터 속성 값에 변경 사항이 반영됩니다.

속성 링크 뚝딱 툴을 사용하여 속성 연결

복잡한 표현식을 작성하고 싶지 않은 경우 속성 링크 뚝딱 툴 또는 편집 > 속성 링크와 함께 복사 명령을 사용하여 데이터 속성을 다른 레이어의 속성에 연결할 수 있습니다. 레이어를 연결할 때 속성 링크 뚝딱 툴이 자동으로 표현식을 작성합니다.

사용자 정의 표현식 함수 라이브러리 - JSX

After Effects 15.0에서는 사용자 정의 JavaScript 함수가 정의되어 있는 JSON 파일을 가져와 사용자 정의 표현식 함수의 라이브러리로 사용할 수 있었습니다. After Effects 15.1에서는 JavaScrpt 개체를 JSON 구문에 사용할 수 없습니다. After Effects 15.1에서는 다른 JSON 구문 분석기를 사용합니다. 이 구문 분석기는 더 엄격하며 잘못된 구문이 포함된 JSON 파일의 가져오기를 허용하지 않습니다.

After Effects 15.1에서 JavaScript 함수가 정의되어 있는 JSON 파일을 가져오려고 하거나 이러한 파일이 포함된 프로젝트를 열려고 하면 오류가 표시됩니다.

이러한 문제를 방지하려는 경우 After Effects 15.1에 JavaScript 구문 확장 파일(.jsx)을 가져오면 됩니다. JSX 파일의 컨텐츠는 After Effects 15.0에 가져온 JSON 파일과 동일할 수 있으므로 파일 확장명만 .jsx로 변경하면 됩니다. 작동하지 않는 JSON 파일이 포함된 기존 프로젝트를 열 경우 파일 > 푸티지 바꾸기를 사용하여 JSON 파일을 JSX 파일로 바꿀 수 있습니다. 이렇게 하면 JSON 파일에 대한 표현식 참조가 JSX 파일에 대한 참조로 바뀝니다.

데이터 구동 애니메이션의 알려진 문제

After Effects에서 데이터 구동 애니메이션을 사용한 작업을 수행하는 동안 몇 가지 문제가 발생할 수 있습니다. 전체 목록을 확인하려면 데이터 구동 애니메이션의 알려진 문제를 참조하십시오.

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

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