사용 안내서 취소

WebGL 문서 만들기 및 제작

  1. Adobe Animate 사용 안내서
  2. Animate 소개
    1. Animate의 새로운 기능
    2. 시각적 용어집
    3. Animate 시스템 요구 사항
    4. Animate 키보드 단축키
    5. Animate에서 여러 파일 유형을 사용하여 작업하기
  3. 애니메이션
    1. Animate의 애니메이션 기본 사항
    2. Animate에서 프레임 및 키프레임을 사용하는 방법
    3. Animate의 프레임별 애니메이션
    4. Animate에서 클래식 트윈 애니메이션으로 작업하는 방법
    5. 브러시 도구
    6. 모션 안내선
    7. 모션 트윈 및 ActionScript 3.0
    8. 모션 트윈 애니메이션 정보
    9. 모션 트윈 애니메이션
    10. 모션 트윈 애니메이션 만들기
    11. 속성 키프레임 사용
    12. 트윈으로 위치에 애니메이션 적용
    13. 모션 편집기를 사용하여 모션 트윈을 편집하는 방법
    14. 트윈 애니메이션의 모션 경로 편집
    15. 모션 트윈 조작
    16. 사용자 정의 속도 추가
    17. 모션 사전 설정 만들기 및 적용
    18. 애니메이션 트윈 범위 설정
    19. XML 파일로 저장한 모션 트윈을 사용한 작업
    20. 모션 트윈과 클래식 트윈의 비교
    21. 모양 트윈 만들기
    22. Animate에서 뼈 도구 애니메이션 사용하기
    23. Animate에서 캐릭터 리깅으로 작업하기
    24. Adobe Animate에서 마스크 레이어를 사용하는 방법
    25. Animate에서 장면으로 작업하는 방법
  4. 대화형 기능
    1. Animate로 버튼을 만드는 방법
    2. Animate 프로젝트를 다른 문서 유형 포맷으로 변환
    3. Animate에서 HTML5 Canvas 문서를 만들고 게시하기
    4. Animate에서 코드 조각을 사용하여 대화형 기능 추가하기
    5. 사용자 정의 HTML5 구성 요소 만들기
    6. HTML5 Canvas의 구성 요소 사용
    7. 사용자 정의 구성 요소 만들기: 예제
    8. 사용자 정의 구성 요소의 코드 조각
    9. 모범 사례 - Animate를 사용한 광고
    10. 가상 현실 제작 및 게시
  5. 작업 영역 및 작업 과정
    1. 칠 브러시 만들기 및 관리
    2. HTML5 Canvas 문서에서 Google Fonts 사용
    3. Creative Cloud 라이브러리와 Adobe Animate 사용
    4. Animate의 스테이지 및 도구 패널 사용
    5. Animate 작업 과정 및 작업 영역
    6. HTML5 Canvas 문서에서 웹 글꼴 사용
    7. 타임라인과 ActionScript
    8. 여러 타임라인을 사용한 작업
    9. 환경 설정
    10. Animate 제작 패널 사용
    11. Animate로 타임라인 레이어 만들기
    12. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    13. 객체 이동 및 복사
    14. 템플릿
    15. Animate의 찾기 및 바꾸기
    16. 실행 취소, 다시 실행 및 작업 내역 패널
    17. 키보드 단축키
    18. Animate에서 타임라인을 사용하는 방법
    19. HTML 확장 만들기
    20. 이미지 및 애니메이션 GIF에 대한 최적화 옵션
    21. 이미지 및 GIF에 대한 내보내기 설정
    22. Animate의 에셋 패널
  6. 멀티미디어 및 비디오
    1. Animate의 그래픽 객체 변형 및 결합
    2. Animate에서 심볼 인스턴스를 만들고 작업하기
    3. 이미지 추적
    4. Adobe Animate에서 사운드를 사용하는 방법
    5. SVG 파일 내보내기
    6. Animate에서 사용할 비디오 파일 만들기
    7. Animate에서 비디오를 추가하는 방법
    8. 비디오 큐 포인트를 사용한 작업
    9. Animate로 객체 그리고 만들기
    10. 선 및 모양 변형
    11. Animate CC의 획, 채우기 및 그래디언트
    12. Adobe Premiere Pro 및 After Effects 작업
    13. Animate CC의 색상 패널
    14. Animate에서 Flash CS6 파일 열기
    15. Animate의 클래식 텍스트 작업
    16. Animate에 아트워크 가져오기
    17. Animate의 가져온 비트맵
    18. 3D 그래픽
    19. Animate의 심볼 작업
    20. Adobe Animate로 선 및 모양 그리기
    21. Animate의 라이브러리 작업
    22. 사운드 내보내기
    23. Animate CC의 객체 선택
    24. Animate의 Illustrator AI 파일 작업
    25. 스프레이 브러시 도구로 패턴 적용하기
    26. 블렌드 모드 적용
    27. 객체 배열
    28. 명령 메뉴를 사용한 작업 자동화
    29. 다국어 텍스트
    30. Animate에서 카메라 사용하기
    31. Animate를 Adobe Scout와 함께 사용하기
    32. Fireworks 파일 작업
    33. 그래픽 필터
    34. 사운드 및 ActionScript
    35. 드로잉 환경 설정
    36. 펜 도구로 그리기
  7. 플랫폼
    1. Animate 프로젝트를 다른 문서 유형 포맷으로 변환
    2. 사용자 정의 플랫폼 지원
    3. Animate에서 HTML5 Canvas 문서 만들고 게시하기
    4. WebGL 문서 만들고 게시하기
    5. iOS용 AIR에 맞추어 애플리케이션을 패키징하는 방법
    6. Android용 AIR 애플리케이션 게시
    7. 데스크톱용 Adobe AIR에 맞춘 게시
    8. ActionScript 게시 설정
    9. 모범 사례 - 애플리케이션에서 ActionScript 구성
    10. Animate에서 ActionScript를 사용하는 방법
    11. 모범 사례 - 액세스 가능성 지침
    12. Animate 작업 영역의 액세스 가능성
    13. 스크립트 작성 및 관리
    14. 사용자 정의 플랫폼에 대한 지원 활성화
    15. 사용자 정의 플랫폼 지원 개요
    16. 액세스 가능한 콘텐츠 만들기
    17. 사용자 정의 플랫폼 지원 플러그인 작업
    18. ActionScript 3.0 디버깅
    19. 사용자 정의 플랫폼에 대한 지원 활성화
  8. 내보내기 및 게시
    1. Animate CC에서 파일을 내보내는 방법
    2. OAM 게시
    3. SVG 파일 내보내기
    4. Animate를 사용하여 그래픽 및 비디오 내보내기
    5. AS3 문서 게시
    6. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    7. 사운드 내보내기
    8. QuickTime 비디오 파일 내보내기
    9. ActionScript로 외부 비디오 재생 제어하기
    10. 모범 사례 - 모바일 장치 콘텐츠 만들기 팁
    11. 모범 사례 - 비디오 규칙
    12. 모범 사례 - SWF 애플리케이션 제작 지침
    13. 모범 사례 - FLA 파일 구조화
    14. Animate용 FLA 파일을 최적화하는 모범 사례
    15. ActionScript 게시 설정
    16. Animate용 게시 설정 지정
    17. 프로젝터 파일 내보내기
    18. 이미지 및 애니메이션 GIF 내보내기
    19. HTML 게시 템플릿
    20. Adobe Premiere Pro 및 After Effects 작업
    21. 애니메이션의 빠른 공유 및 게시

WebGL이란?

WebGL은 플러그인을 추가하지 않고도 호환 가능한 모든 브라우저에서 그래픽을 렌더링할 수 있도록 지원하는 개방형 웹 표준입니다.WebGL은 브라우저의 모든 웹 표준에 완벽하게 통합되므로 이미지 처리 및 효과를 웹 페이지 캔버스의 일부로 하여 GPU 가속을 사용할 수 있습니다. WebGL 요소는 다른 HTML 요소에 포함될 수 있으며 페이지의 다른 부분과 합성될 수 있습니다.

대부분의 최신 브라우저에서 WebGL을 지원하지만 지원되는 버전을 정확히 확인하려면 이 링크를 참조하십시오.

일부 브라우저에서는 기본적으로 WebGL이 비활성화되어 있습니다. 브라우저에서 WebGL을 활성화하려면 이 문서를 참조하십시오.

 일부 브라우저에서는 WebGL이 기본적으로 비활성화되어 있으므로 브라우저에서 WebGL이 활성화되어 있는지 확인해야 합니다.

WebGL-glTF(베타) 문서 유형 사용

이제 Animate에는 두 개의 WebGL-glTF 문서 유형이 있습니다. WebGL-glTF 표준 문서 유형을 사용하여 모든 표준 WebGL-glTF 패키지와 통합할 수 있습니다. 완벽하게 표준 규격입니다.

  1. WebGL-glTF 기반 문서를 만들려면 홈 화면의 고급 용도에서 [WebGL-glTF 표준] 또는 [WebGL-glTF 확장]를 선택합니다. 

    WebGL-glTF 문서 유형
    WebGL-glTF 문서 유형

  2. 요구 사항에 따라 폭, 높이 및 단위를 지정하고 만들기를 클릭합니다.

WebGL-glTF 파일 게시

  1. [속성 관리자]에서 제작 설정을 클릭합니다.

    WebGL-glTF 파일 제작
    WebGL-glTF 파일 제작

  2. 출력 이름 텍스트 상자에 이름을 입력합니다.

  3. [형식] 옵션에서 GLB 또는 GLTF를 선택합니다.

  4. [이미지 해상도] 텍스트 상자에서 1-3 범위의 10진수를 지정합니다.

  5. JSON 파일에서 흰색 공간 제거를 선택하여 파일 크기를 줄입니다.

  6. 기본적으로 표준 옵션인 타임라인 반복 및 숨겨진 레이어 포함이 선택됩니다. 이를 선택 취소하여 작은 오류를 찾을 수 있습니다.

  7. 제작 버튼을 클릭하여 파일을 제작합니다.

애니메이션을 GLTF 및 GLB 형식으로 변환

WebGL-glTF 및 GLB는 파일 크기와 런타임 처리를 줄여줍니다. Animate에서는 문서를 두 포맷 모두로 사용할 수 있습니다. 비디오를 두 포맷으로 모두 사용하고 싶으세요? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

  1. 속성에서 설정 게시를 클릭합니다.

  2. 출력 이름 텍스트 상자에 이름을 입력합니다.

  3. [형식] 옵션에서 GLB 또는 GLTF를 선택합니다.

  4. 이미지 해상도 텍스트 상자에서 3 범위의 10진수를 지정합니다.

  5. JSON 파일에서 흰색 공간 제거를 선택하여 파일 크기를 줄입니다.

Animate에서 [WebGL GLTF 내보내기]를 사용하여 고급 애니메이션을 만드는 방법

비디오에서 애니메이션이 WebGL GLTF, GLB 포맷으로 어떻게 보이는지 확인합니다.

Animate 18.0 이하 버전

Animate 18.0 이하 버전의 Animate를 사용하는 경우 다음 컨텐츠를 참조할 수 있습니다.

WebGL 문서 유형

Animate에서는 풍부한 대화형 내용을 WebGL(Web Graphics Library) 형식으로 만들고 제작할 수 있습니다. WebGL은 완벽하게 브라우저에 통합되므로 Animate에서 그래픽 처리 및 렌더링을 웹 페이지 캔버스의 일부로 하여 GPU 가속을 사용할 수 있습니다.

이 새 문서 유형을 통해 컨텐츠를 만들고 WebGL 출력으로 빠르게 제작할 수 있습니다. Animate 내의 강력한 도구를 활용하여 풍부한 내용을 만들고 호환 가능한 모든 브라우저에서 실행할 수 있는 WebGL 출력으로 렌더링할 수 있습니다. 즉, 기존 Animate 타임라인, 작업 영역 및 드로잉 도구를 사용하여 WebGL 내용을 기본적으로 제작할 수 있습니다. 가장 널리 사용되는 브라우저에서 모두 WebGL이 지원되므로 Animate를 통해 대부분의 웹 플랫폼에 맞도록 내용을 렌더링할 수 있습니다.

WebGL에 대한 지원은 미리 보기로만 사용할 수 있습니다. 이 Animate 업데이트에는 사운드 및 스크립트를 비롯한 기본 애니메이션에 대한 지원과 대화형 기능 세트가 포함됩니다. Animate의 이후 릴리스에서 WebGL 문서 유형에 대해 더 향상된 기능을 확인하실 수 있습니다. WebGL에 대해 Animate에서 지원하는 기능의 전체 목록은 이 KB 문서를 참조하세요.

WebGL 문서 만들기

Animate에서 WebGL 문서를 사용하면 WebGL 형식의 내용을 빠르게 만들고 제작할 수 있습니다. WebGL 문서를 만들려면 다음을 수행하십시오.

  1. Animate를 실행합니다.
  2. 시작 화면에서 WebGL(미리 보기) 옵션을 클릭합니다. 또는 파일 > 새로 만들기 메뉴 옵션을 선택하여 새 문서 대화 상자를 표시합니다. WebGL(미리 보기) 옵션을 클릭합니다.

브라우저에서 WebGL 내용 미리 보기

Animate의 [동영상 테스트] 기능을 사용하여 내용을 미리 보거나 테스트할 수 있습니다. 미리 보려면 다음을 수행하십시오.

  1. Animate 내에서 Windows의 경우 Ctrl+Enter를, MAC의 경우 CMD+Enter를 누릅니다. 그러면 기본 브라우저가 시작되고 WebGL 내용이 렌더링됩니다.
WebGL 내용을 실행하려면 Animate에 웹 서버가 필요합니다. Animate에는 #8090 포트에서 WebGL 내용을 실행하도록 구성된 웹 서버가 기본 제공됩니다. 다른 서버가 이 포트를 사용하고 있는 경우 Animate에서 이를 자동으로 감지하고 충돌을 해결합니다.

WebGL 형식으로 내용 제작

Animate 내에서 WebGL 내용을 기본으로 만들고 제작할 수 있습니다.

WebGL 문서를 제작하려면 다음을 수행하십시오.

  1. 파일 > 제작 설정을 선택하여 [제작 설정] 대화 상자를 표시합니다. 또는 WebGL에 대한 제작 설정을 이미 지정한 경우 파일 > 제작을 선택합니다.
  2. [제작 설정] 대화 상자에서 다음 값을 지정합니다.

출력 파일

출력 파일에 의미 있는 이름을 지정합니다. 또한 WebGL 출력을 제작할 위치를 찾아 선택하거나 입력합니다.

HTML 덮어쓰기

WebGL 프로젝트를 제작할 때마다 HTML 래퍼를 덮어쓸지 여부를 지정할 수 있습니다. 제작된 HTML 파일을 외부에서 변경했고 Animate의 애니메이션 또는 에셋에 대한 변경 사항을 업데이트하는 동안 해당 외부 변경 사항을 보존하려는 경우 이 옵션의 선택을 취소할 수 있습니다.

숨겨진 레이어 포함

WebGL 출력에 숨겨진 레이어를 모두 포함합니다. [숨겨진 레이어 포함]을 선택 취소하면 숨겨진 것으로 표시된 모든 레이어(동영상 클립 내에 중첩된 레이어 포함)는 결과 WebGL에서 내보내지 않습니다. 이렇게 하면 레이어가 표시되지 않으므로 여러 버전의 WebGL 문서를 쉽게 테스트할 수 있습니다.

타임라인 반복

마지막 프레임에 도달하면 내용을 다시 반복합니다. 이 옵션을 선택 취소하면 마지막 프레임에 도달한 내용이 중지됩니다.

  1. [제작]을 클릭하여 지정한 위치에 WebGL 내용을 제작합니다.

 브라우저에서 실행되는 WebGL 내용에 대해 지정할 수 있는 최대 FPS는 60FPS입니다.

WebGL 출력 이해

제작된 WebGL 출력에는 다음 파일이 포함되어 있습니다.

HTML 래퍼 파일

여기에는 런타임, 에셋에 대한 호출이 포함되어 있으며 이 파일은 WebGL 렌더러를 초기화합니다. 파일 이름은 기본적으로 <FLA_name>.html이 됩니다. [제작 설정] 대화 상자([파일] > [제작 설정])에서 HTML 파일에 다른 이름을 지정할 수 있습니다.

HTML 파일은 기본적으로 FLA 파일과 동일한 디렉토리에 위치합니다. [제작 설정] 대화 상자에서 다른 위치를 지정할 수 있습니다.

JavaScript 파일(WebGL 런타임)

제작된 WebGL의 내용을 렌더링합니다. 이 파일은 WebGL 문서의 libs/ 폴더에 제작됩니다. 파일은 flwebgl-<버전>.min.js와 같이 이름이 지정됩니다.

HTML 래퍼는 이 JS 파일을 사용하여 WebGL 내용을 렌더링합니다.

텍스처 아틀라스

스테이지의 비트맵 인스턴스를 포함하여 모든 (모양의) 색상 값을 저장합니다.

WebGL 문서에 오디오 추가

WebGL 문서에 오디오를 가져와 포함하고, 동기화 설정(이벤트, 시작 및 중지)을 사용하여 재생을 제어하며, 런타임에 타임라인 오디오를 재생할 수 있습니다. WebGL은 현재 .wav 및 .mp3 형식만 지원합니다.

오디오에 대한 자세한 내용은 Animate에서 오디오 사용을 참조하십시오.

기존 내용을 WebGL 문서로 마이그레이션

Animate 내의 기존 내용을 WebGL 문서로 마이그레이션할 수 있습니다. 또한 Animate에서 내용을 수동으로 복사 또는 가져오는 방식을 통해 마이그레이션할 수도 있습니다. Animate에서 여러 문서로 작업하는 경우 내용을 라이브러리의 레이어나 에셋으로 여러 문서 간에 복사하는 것이 일반적인 관례입니다. 대부분의 Animate 기능이 지원되지만 일부 내용 유형은 WebGL 형식에 더 잘 맞게 수정됩니다.

Animate에는 풍부한 내용을 시각적으로 제작하는 데 도움이 되는 강력한 여러 기능이 포함되어 있습니다. 하지만 이러한 기능 중 일부는 Animate 전용이므로 WebGL 문서를 지원하지 않습니다. Animate는 그러한 내용을 지원되는 형식으로 수정하도록 설계되었으며, 도구 또는 기능이 지원되지 않는 경우 이를 시각적으로 나타냅니다.

복사

기존 Animate 문서 유형(예: ActionScript 3.0, AIR for Android, AIR for Desktop 등)의 내용(예: 레이어 또는 라이브러리 심볼)을 WebGL 문서로 복사하는 경우. 이 경우 지원되지 않는 내용 유형이 삭제되거나 지원되는 기본값으로 변환됩니다.

예를 들어 3D 애니메이션을 복사하면 스테이지의 객체에 적용된 모든 3D 변형이 제거됩니다.

가져오기

지원되지 않는 내용을 포함한 PSD 또는 AI 파일을 가져올 경우. 이 경우 내용이 삭제되거나 지원되는 기본값으로 변환됩니다.

예를 들어 흐림 효과가 적용된 PSD 파일을 가져올 수 있습니다. Animate가 효과를 제거합니다.

작업

ActionScript 3.0 및 WebGL과 같이 여러 문서 유형으로 동시에 작업하는 경우. 문서를 지원되지 않는 도구나 선택한 옵션으로 전환합니다. 이 경우 Animate에서 이 기능을 지원하지 않음을 시각적으로 나타냅니다.

예를 들어 ActionScript 3.0 문서에 점선을 만들고 선 도구를 선택한 상태로 WebGL로 전환합니다. 포인터와 속성 관리자를 통해 점선은 WebGL 내에서 지원되지 않는다는 것을 시각적으로 확인할 수 있습니다.

스크립트

[액션] 패널에서 JavaScript 코드를 작성하여 플레이어가 프레임에 진입한 후 실행되도록 할 수 있습니다. 프레임 스크립트 컨텍스트에서 '이' 변수는 해당 변수가 속하는 MovieClip의 인스턴스를 참조합니다. 또한 프레임 스크립트는 컨테이너 HTML 파일에서 선언된 JavaScript 함수 및 변수에 액세스할 수 있습니다. ActionScript 문서에서 프레임 또는 레이어를 복사하여 WebGL 문서에 붙여 넣으면 스크립트가 있는 경우 주석 처리됩니다.

마이그레이션 후 컨텐츠에 적용되는 변경 사항

다음은 기존 내용을 WebGL 문서로 마이그레이션할 때 적용되는 변경 유형입니다.

내용이 제거됨

HTML5 Canvas에서 지원되지 않는 내용 유형은 제거됩니다. 예를 들면 다음과 같습니다.

필터

지원되지 않습니다. 효과는 제거되고 대신, 모양은 단색으로 채우기로 간주됩니다.

흐림 필터 효과가 제거되고 단색으로 채우기로 바뀌었습니다.

내용이 지원되는 기본값으로 수정됨

내용 유형 또는 기능이 지원되지만 기능의 속성이 지원되지 않습니다. 예를 들면 다음과 같습니다.

 

방사형 그래디언트

기본 색상을 사용한 단색으로 채우기로 간주되어 수정됩니다.

방사형 그래디언트가 기본 색상을 사용한 단색으로 채우기로 수정됩니다.

비트맵 캐싱을 사용하여 렌더링 성능 향상

런타임 비트맵 캐싱을 사용하면 정적 동영상 클립(예: 배경 이미지)이나 버튼 심볼이 런타임에 비트맵으로 캐싱되도록 지정하여 렌더링 성능을 최적화할 수 있습니다. 기본적으로 벡터 항목은 모든 프레임에서 다시 그려집니다. 동영상 클립 또는 버튼 심볼을 비트맵으로 캐싱하면 이미지는 비트맵이 되고 위치가 변경되지 않으므로 브라우저가 해당 항목을 계속해서 다시 그릴 필요가 없습니다. 따라서 WebGL 내용 렌더링 성능이 크게 향상됩니다.

예를 들어 복잡한 배경이 있는 애니메이션을 만들 때 배경에 포함된 모든 항목이 들어 있는 동영상 클립을 만듭니다. 속성 관리자에서 배경 동영상 클립에 대해 [비트맵으로 캐시]를 선택합니다. 재생 중 배경은 현재 화면 깊이로 저장된 비트맵으로 렌더링됩니다. 브라우저는 스테이지에서 비트맵을 빠르게 한 번만 그려서 애니메이션이 더욱 빠르고 자연스럽게 재생되도록 합니다.

비트맵 캐싱을 사용하면 동영상 클립을 사용하고 그 자리에 자동으로 고정할 수 있습니다. 영역이 변경되면 벡터 데이터로 비트맵 캐시가 업데이트됩니다. 이 프로세스에서는 브라우저가 다시 그려야 하는 횟수를 최소화하여 더욱 자연스럽고 빠르게 렌더링할 수 있습니다.

MovieClip 심볼에 대해 [비트맵으로 캐시] 속성을 활성화하려면 MovieClip 인스턴스를 선택하고 속성 관리자([윈도우] > [속성])의 [렌더링] 드롭다운에서 [비트맵으로 캐시]를 선택합니다.

비트맵으로 캐시 사용 시 고려 사항

WebGL 내용에 대해 [비트맵으로 캐시] 속성을 사용하는 경우 다음을 고려하십시오.

  • MovieClip 심볼의 최대 크기는 2048x2048로 제한됩니다. 캐싱될 수 있는 동영상 클립 인스턴스의 실제 범위가 2048x2048 미만인 경우 WebGL에서 일부 픽셀이 유보됩니다.
  • 동일한 MovieClip의 인스턴스가 둘 이상 있는 경우 Animate에서 발견한 첫 번째 인스턴스의 크기로 캐시가 생성됩니다. 그러나 동영상 클립의 변형이 크게 변경되는 경우에도 캐시는 다시 생성되지 않으며 [비트맵으로 캐시] 속성이 무시되지 않습니다. 따라서 애니메이션이 진행되는 동안 MovieClip 심볼의 크기가 크게 변경되는 경우 애니메이션이 모자이크 형태로 표시될 수 있습니다.
Adobe 로고

내 계정 로그인