사용 안내서 취소

Animate를 사용하여 객체 그리기 및 만들기

  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. 애니메이션의 빠른 공유 및 게시

드로잉

Adobe Animate의 드로잉 도구를 사용하여 문서에 있는 아트워크에 대한 선과 모양을 만들고 수정할 수 있습니다. Animate에서 만든 선과 모양은 모두 경량 벡터 그래픽으로, FLA 파일 크기를 작게 유지해 줍니다.

Animate에서 모양을 그리고 채우려면 먼저 Animate에서 아트워크를 만드는 방식과 모양을 그리고 채우고 수정할 때 같은 레이어의 다른 모양에 미치는 영향에 대해 잘 알고 있어야 합니다.

벡터 및 비트맵 그래픽

컴퓨터에서는 그래픽을 벡터 또는 비트맵 형식으로 표시합니다. 이 두 형식 간의 차이를 이해하면 작업을 보다 효율적으로 할 수 있습니다. Animate를 사용하면 간단한 벡터 그래픽을 만들고 애니메이션을 적용할 수 있습니다. 또한 Animate를 사용하여 다른 애플리케이션에서 만든 벡터 및 비트맵 그래픽을 가져오고 조작할 수 있습니다.

벡터 그래픽

벡터 그래픽은 벡터라는 곡선과 선을 사용하여 이미지를 나타내며 여기에는 색상 및 위치 속성도 포함됩니다. 예를 들어, 나뭇잎 이미지는 선으로 연결되는 여러 개의 점으로 나뭇잎의 외곽선을 나타냅니다. 나뭇잎의 색상은 외곽선의 색상과 외곽선 내부 영역의 색상으로 표현됩니다.

벡터 아트의 선.

벡터 그래픽을 편집할 때는 모양을 나타내는 선과 곡선의 속성을 수정하게 됩니다. 모양의 품질에 영향을 주지 않고도 벡터 그래픽을 이동하고, 크기를 조절하고, 모양을 변형하며 그래픽 색상을 변경할 수 있습니다. 벡터 그래픽은 해상도의 영향을 받지 않으므로 품질 손상 없이 다양한 해상도의 출력 장치에 표시할 수 있습니다.

비트맵 그래픽

비트맵 그래픽은 특정 색상의 점(픽셀)의 배열을 사용하여 이미지를 나타냅니다. 예를 들어, 나뭇잎 이미지는 격자 안의 각 픽셀에 위치 및 색상 값을 지정하여 모자이크와 같은 방식으로 이미지를 만들어 나타냅니다.

비트맵 아트의 픽셀.

비트맵 그래픽을 편집할 때는 선과 곡선이 아닌 픽셀을 수정하게 됩니다. 비트맵 그래픽은 이미지를 나타내는 데이터가 특정 크기의 격자에 고정되어 있으므로 해상도에 영향을 받습니다. 따라서 비트맵 그래픽을 편집하면 모양의 품질에 영향을 줍니다. 특히, 비트맵 그래픽의 크기를 조절하면 격자 내에서 픽셀이 다시 분포되기 때문에 이미지의 가장자리가 매끄럽지 않게 될 수 있습니다. 또한 이미지보다 해상도가 낮은 출력 장치에 비트맵 그래픽을 표시하면 품질이 떨어집니다.

패스

Animate에서 선이나 모양을 그릴 때마다 패스라는 선을 만듭니다. 패스는 하나 이상의 직선 또는 곡선 선분으로 구성됩니다. 각 선분의 시작과 끝은 전선을 제 위치에 고정시켜 주는 핀처럼 작동하는 앵커 포인트로 표시됩니다. 경로는 닫힌 경로(예: 원)일 수도 있고 명확한 끝점이 있는 열린 경로(예: 물결선)일 수도 있습니다.

앵커 포인트, 앵커 포인트에 나타나는 방향선 끝의 방향점 또는 패스 선분 자체를 드래그하여 패스의 모양을 변형할 수 있습니다.

패스의 구성 요소

A. 선택한(칠해진) 끝점 B. 선택한 기준점 C. 선택하지 않은 기준점 D. 곡선 패스 선분 E. 방향점 F. 방향선. 

패스에는 꼭지점과 둥근점의 두 가지 앵커 포인트가 있을 수 있습니다. 모퉁이점에서 패스는 갑자기 방향을 바꿉니다. 둥근점에서 패스 선분은 연속적인 곡선으로 연결됩니다. 꼭지점과 둥근점을 함께 사용해서 패스를 그릴 수 있습니다. 잘못된 유형의 점을 그릴 경우 언제든지 변경할 수 있습니다.

패스의 점

A. 네 모퉁이점 B. 네 둥근점 C. 꼭지점과 둥근점의 조합. 

꼭지점은 두 개의 직선이나 곡선 선분을 연결할 수 있지만 둥근점은 항상 두 개의 곡선 선분을 연결합니다.

모퉁이점은 직선 선분과 곡선 선분을 모두 연결할 수 있습니다.

 꼭지점 및 둥근점을 직선 선분 및 곡선 선분과 혼동하지 마십시오.

패스의 외곽선을 이라고 합니다. 또한 열린 패스의 내부 영역이나 닫힌 패스의 내부 영역에 적용된 색상 또는 그래디언트를 채우기라고 합니다. 획에는 두께, 색상 및 필세 패턴이 있습니다. 패스나 모양을 만든 후 해당 획 및 채우기 특성을 변경할 수 있습니다.

방향선 및 방향점

곡선 선분을 연결하는 앵커 포인트를 선택하거나 선분 자체를 선택하면 연결 선분의 앵커 포인트에 방향점으로 끝나는 방향선으로 구성된 방향 핸들이 표시됩니다. 방향선의 각도와 길이에 따라 곡선 선분의 모양과 크기가 결정됩니다. 방향점을 이동하면 곡선의 모양이 변형됩니다. 방향선은 최종 출력에 표시되지 않습니다.

둥근점은 항상 하나의 직선 단위로 함께 이동하는 두 개의 방향선을 포함합니다. 둥근점의 방향선을 이동하면 둥근점의 양쪽에 있는 곡선 선분이 동시에 조정되어 해당 앵커 포인트에서 연속적인 곡선이 유지됩니다.

이와는 달리 모퉁이점에는 하나의 곡선 선분을 연결하는지, 두 개의 곡선 선분을 연결하는지 또는 곡선 선분을 연결하지 않는지에 따라 각각 방향선이 하나 또는 두 개가 있거나 없을 수 있습니다. 모퉁이점의 방향선은 서로 다른 각도를 사용하여 각을 유지합니다. 비대칭 점 상의 방향선을 이동하면 해당 점과 같은 쪽에 있는 곡선만 방향선을 따라 조정됩니다.

고정점을 선택한 후에는(왼쪽) 해당 고정점으로 연결된 곡선 선분에 방향선이 나타납니다(오른쪽).

둥근점(왼쪽)과 모퉁이점(오른쪽)의 방향선 조정

방향선은 항상 앵커 포인트의 곡선에 접합니다(곡선 반경에 수직). 각 방향선의 각도는 곡선의 경사를 결정하며, 각 방향선의 길이는 곡선의 높이나 깊이를 결정합니다.

방향선을 이동하고 크기를 조절하면 곡선의 경사가 달라집니다.

드로잉 모드 및 그래픽 객체

Animate에서 다양한 드로잉 모드와 드로잉 도구를 사용하여 여러 종류의 그래픽 객체를 만들 수 있습니다. 각 그래픽 객체마다 고유한 장점과 단점이 있습니다. 다양한 그래픽 객체 형식의 기능을 이해하면 작업에 사용할 객체 형식을 결정하는 데 도움이 될 수 있습니다.

 Animate에서 그래픽 객체란 스테이지에 있는 항목입니다. Animate에서는 그래픽 객체를 이동, 복사, 삭제, 변형, 쌓기, 정렬 및 그룹화할 수 있습니다. Animate의 "그래픽 개체"는 ActionScript® 프로그래밍 언어의 일부인 "ActionScript 개체"와 다릅니다. [개체]라는 단어의 이 두 사용 사례를 혼동하지 마세요. 프로그래밍 언어의 개체에 대한 자세한 내용은 Adobe Animate의 ActionScript 2.0 알아보기 데이터 유형 정보 또는 ActionScript 3.0 개발자 안내서데이터 유형을 참조하세요.

병합 드로잉 모드

그리는 모양이 서로 겹치는 경우 기본 드로잉 모드에서는 자동으로 모양을 병합합니다. 같은 레이어에서 서로 겹치는 모양을 그리면 맨 위에 있는 모양이 겹치는 부분 아래에 있는 모양의 일부를 잘라냅니다. 모양 그리기는 이와 같은 파괴적 드로잉 모드로 수행됩니다. 예를 들어, 원을 그리고 그 위에 그보다 작은 원을 겹쳐 놓은 다음 작은 원을 선택하여 이동하면 첫 번째 원과 겹쳐진 두 번째 원의 부분이 없어집니다.

모양에 획과 채우기가 모두 있는 경우 이러한 항목은 개별적으로 선택하고 이동할 수 있는 별도의 그래픽 요소로 간주됩니다.

병합 드로잉 모드로 만든 모양이 서로 겹치면 병합됩니다. 모양을 선택하여 이동하면 겹친 모양이 변경됩니다.

병합 드로잉 모드 들어가기

  1. [도구] 패널에서 [병합 드로잉] 옵션을 선택합니다.

  2. [도구] 패널에서 드로잉 도구를 선택하고 스테이지에서 그립니다.

 기본적으로 Animate는 병합 드로잉 모드를 사용합니다.

객체 드로잉 모드

드로잉 객체라고 하는 모양을 만듭니다. 드로잉 객체는 모양이 서로 겹치더라도 자동으로 병합되지 않는 별도의 그래픽 객체입니다. 이 모드에서는 모양을 분리하거나 다시 정렬하더라도 원래 모양이 변경되지 않고 겹쳐지도록 할 수 있습니다. Animate에서는 각 모양을 개별적으로 조작할 수 있는 별도의 객체로 만듭니다.

드로잉 도구가 객체 드로잉 모드인 경우 해당 도구를 사용하여 만든 모양은 독립성을 갖습니다. 이때 모양의 획 및 채우기는 별도의 요소로 간주되지 않으며 겹치는 모양으로 인해 다른 모양이 변경되지 않습니다. 객체 드로잉 모드를 사용하여 만든 모양을 선택하면 Animate는 자신을 식별하는 사각형 경계 상자로 모양을 둘러쌉니다.

 객체 드로잉 모드를 사용하여 만든 모양을 선택하는 경우 연결 감지를 위한 환경을 설정하십시오.

객체 드로잉 모드를 사용하여 만든 모양은 개별적으로 조작할 수 있는 별도의 객체로 유지됩니다.

객체 드로잉 모드 들어가기

객체 드로잉 모드를 사용하여 모양을 그리려면 명시적으로 해당 모드를 활성화해야 합니다.

  1. 객체 드로잉 모드를 지원하는 드로잉 도구([연필 도구], [선 도구], [펜 도구], [브러시 도구], [타원형 도구], [사각형 도구] 및 [다각형 도구])를 선택합니다.

  2. [도구] 패널의 [옵션] 범주에서 [객체 드로잉] 버튼 을 선택하거나 J 키를 눌러 병합 드로잉 모드와 객체 드로잉 모드 사이를 전환할 수 있습니다. [객체 드로잉] 버튼을 사용하면 병합 드로잉 모드와 객체 드로잉 모드 사이를 전환할 수 있습니다. 객체 드로잉 모드를 사용하여 만든 모양을 선택하는 경우 연결 감지를 위한 환경을 설정할 수 있습니다.

  3. 스테이지에서 그립니다.

병합 드로잉 모드를 사용하여 만든 모양을 객체 드로잉 모드 모양으로 변환

  1. 스테이지에서 모양을 선택합니다.

  2. 모양을 [객체 드로잉] 모드 모양으로 변환하려면 [수정] > [객체 결합] > [합치기]를 선택합니다. 변환 후 모양은 다른 모양과 상호 작용하여 모양이 변경되지 않는 벡터 기반 드로잉 객체와 같이 처리됩니다.

 둘 이상의 모양을 단일 객체 기반 모양으로 결합하려면 [합치기] 명령을 사용하십시오.

프리미티브 객체

프리미티브 객체는 속성 관리자에서 해당 특성을 조정할 수 있도록 하는 모양입니다. 모양을 만든 후 처음부터 그리지 않고도 언제든지 해당 모양의 크기, 모서리 반경 및 기타 속성을 정확하게 제어할 수 있습니다.

프리미티브 객체에는 프리미티브 사각형과 프리미티브 타원이라는 두 가지 유형이 있습니다.

  1. [도구] 패널에서 [프리미티브 사각형 도구] 또는 [프리미티브 타원 도구] 를 선택합니다.

  2. 스테이지에서 그립니다.

겹치는 모양

병합 드로잉 모드에서 다른 선이나 칠해진 모양을 지나는 선을 그리면 교차점에서 겹치는 선이 여러 개의 선분으로 나뉩니다. 각 선분을 개별적으로 선택하고, 이동하고, 변형하려면 [선택 도구]를 사용하십시오.

한 개의 채우기, 선이 통과하는 채우기, 분할하여 만든 세 개의 선분.

모양과 선 위에 칠하면 바로 밑의 부분이 위에 있는 색상으로 바뀝니다. 같은 색상의 페인트는 서로 병합되고 다른 색상의 페인트는 그대로 있습니다. 마스크, 컷아웃 및 기타 네거티브 이미지를 만들려면 이러한 기능을 사용하십시오. 예를 들어, 다음 컷아웃은 그룹화되지 않은 연의 이미지를 녹색 모양 위로 이동한 뒤 연을 선택 취소한 다음 연에서 채워진 부분을 녹색 모양에서 분리하여 만든 것입니다.

연의 이미지로 컷아웃 만들기.

모양을 그룹화하거나 레이어를 사용하여 모양을 분리하면 모양과 선이 겹칠 때 모양과 선이 실수로 변경되는 일이 생기지 않습니다.

Adobe 로고

내 계정 로그인