사용 안내서 취소

이미지 및 애니메이션 처리된 GIF 내보내기

  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. Animate로 객체 그리고 만들기
    9. 선 및 모양 변형
    10. Animate CC의 획, 채우기 및 그래디언트
    11. Adobe Premiere Pro 및 After Effects 작업
    12. Animate CC의 색상 패널
    13. Animate에서 Flash CS6 파일 열기
    14. Animate의 클래식 텍스트 작업
    15. Animate에 아트워크 가져오기
    16. Animate의 가져온 비트맵
    17. 3D 그래픽
    18. Animate의 심볼 작업
    19. Adobe Animate로 선 및 모양 그리기
    20. Animate의 라이브러리 작업
    21. 사운드 내보내기
    22. Animate CC의 객체 선택
    23. Animate의 Illustrator AI 파일 작업
    24. 블렌드 모드 적용
    25. 객체 배열
    26. 명령 메뉴를 사용한 작업 자동화
    27. 다국어 텍스트
    28. Animate에서 카메라 사용하기
    29. 그래픽 필터
    30. 사운드 및 ActionScript
    31. 드로잉 환경 설정
    32. 펜 도구로 그리기
  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. Animate 작업 영역의 액세스 가능성
    12. 스크립트 작성 및 관리
    13. 사용자 정의 플랫폼에 대한 지원 활성화
    14. 사용자 정의 플랫폼 지원 개요
    15. 사용자 정의 플랫폼 지원 플러그인 작업
    16. ActionScript 3.0 디버깅
    17. 사용자 정의 플랫폼에 대한 지원 활성화
  8. 내보내기 및 게시
    1. Animate CC에서 파일을 내보내는 방법
    2. OAM 게시
    3. SVG 파일 내보내기
    4. Animate를 사용하여 그래픽 및 비디오 내보내기
    5. AS3 문서 게시
    6. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    7. 사운드 내보내기
    8. 모범 사례 - 모바일 장치 콘텐츠 만들기 팁
    9. 모범 사례 - 비디오 규칙
    10. 모범 사례 - SWF 애플리케이션 제작 지침
    11. 모범 사례 - FLA 파일 구조화
    12. Animate용 FLA 파일을 최적화하는 모범 사례
    13. ActionScript 게시 설정
    14. Animate용 게시 설정 지정
    15. 프로젝터 파일 내보내기
    16. 이미지 및 애니메이션 GIF 내보내기
    17. HTML 게시 템플릿
    18. Adobe Premiere Pro 및 After Effects 작업
    19. 애니메이션의 빠른 공유 및 게시
  9. 문제 해결
    1. 해결된 문제
    2. 알려진 문제

 

이 문서를 통해 이미지 및 애니메이션 처리된 GIF를 내보내는 방법을 알아보십시오.

Animate는 에셋을 사용자 친화적이고 인터랙티브한 방식으로 .png, jpeg, 정적 및 애니메이션 처리된 GIF 포맷으로 내보낼 수 있게 [이미지 내보내기] 및 [애니메이션 처리된 GIF 내보내기] 기능을 도입합니다.

웹 및 기타 온라인 미디어에서 사용할 이미지를 준비할 때는 이미지 화질과 파일 크기를 절충해야 하는 경우가 많습니다.

[이미지 내보내기] 대화 상자의 최적화 기능을 사용하여 다양한 파일 포맷과 파일 특성으로 최적화된 이미지를 미리 볼 수 있습니다. 이미지의 여러 버전을 동시에 표시하고 미리 보면서 최적화 설정을 수정하여 필요에 맞는 최상의 설정을 결합하여 선택할 수 있습니다. 또한 투명도와 매트를 지정하고, 디더링 조절 옵션을 선택하고, 지정된 픽셀 치수나 원본 크기의 비율로 이미지 크기를 조정하는 등의 작업을 수행할 수도 있습니다.

[이미지 내보내기] 명령을 사용하여 최적화된 파일을 저장할 때 해당 이미지에 대한 HTML 파일을 생성하도록 선택할 수 있습니다. 이 파일에는 이미지를 웹 브라우저에 표시하는 데 필요한 모든 정보가 포함됩니다.

Animate에서는 [다른 이름으로 저장] 명령을 사용하여 이미지를 GIF, JPEG 또는 PNG 파일로 저장할 수 있습니다. 파일 포맷에 따라 이미지 품질, 배경 투명도나 매트, 색상 표시 및 다운로드 방법을 지정할 수 있습니다. 그러나 파일에 추가한 링크, 애니메이션 등의 웹 기능은 유지되지 않습니다.

또한 Animate 이미지 프로세서를 사용하여 이미지 폴더의 복사본을 JPEG 형식으로 저장할 수 있습니다. 이미지 프로세서를 사용하여 이미지의 크기를 조절하거나 이미지의 색상 프로파일을 웹 표준 sRGB로 변환할 수 있습니다.

이미지 내보내기

[이미지 내보내기] 대화 상자([파일] > > [내보내기] > [이미지 내보내기] 및 [파일] > [내보내기] > [애니메이션 처리된 GIF 내보내기])를 사용하여 최적화 옵션을 선택하고 최적화된 아트워크를 미리 봅니다.

A. 표시 옵션 B. 최적화 팝업 메뉴 C. 프리셋 옵션 D. 이미지 크기 옵션 E. 애니메이션 옵션 F. 미리 보기 G. 툴 모음 

대화 상자에서 이미지 미리 보기

이미지 영역 위쪽의 탭을 클릭하여 표시 옵션을 선택합니다.

원본

최적화되지 않은 이미지를 표시합니다.

최적화

현재 최적화 설정이 적용된 이미지를 표시합니다.

2장

이미지의 두 가지 버전을 나란히 표시합니다.

[이미지 내보내기] 대화 상자에서 아트워크가 일부만 보이면 [손 툴]로 드래그하여 다른 영역을 볼 수 있습니다. [돋보기 도구]를 사용하여 보기를 확대하거나 축소할 수도 있습니다.

  • [손 도구]를 선택하거나 스페이스바를 누른 상태에서 보기 영역에서 드래그하면 이미지 전체를 이동하면서 볼 수 있습니다.
  • [돋보기 도구]  를 선택하고 보기 영역 내부를 클릭하여 확대합니다. Alt(Windows) 또는 Option(MacOS) 키를 누른 상태로 보기 영역 내부를 클릭하여 축소합니다.

    배율을 직접 입력하거나 대화 상자 아래쪽에서 선택할 수도 있습니다.

최적화된 이미지 정보 및 다운로드 시간 보기

[이미지 내보내기] 대화 상자의 각 이미지 아래에 있는 주석 영역에는 최적화 정보가 표시됩니다. 원본 이미지에 대한 주석에서는 파일 이름과 파일 크기를 보여 줍니다. 최적화된 이미지에 대한 주석에서는 현재 최적화 옵션, 최적화된 파일 크기 및 선택한 모뎀 속도에 따른 예상 다운로드 시간을 보여 줍니다. [미리 보기] 팝업 메뉴에서 모뎀 속도를 선택할 수 있습니다.

이미지 감마를 다른 값으로 미리 보기

컴퓨터 모니터의 감마 값 설정에 따라 웹 브라우저에서 전체 이미지가 더 밝게 보이거나 더 어둡게 보입니다. 다른 감마 값을 적용할 때 시스템에 표시되는 이미지의 모양을 미리 보고 감마를 조정하여 이미지를 보정할 수 있습니다. 미리 보기 옵션을 활성화해도 최종 이미지 출력에는 영향을 주지 않습니다.

  • [이미지 내보내기] 대화 상자의 [미리 보기] 팝업 메뉴를 사용하여 다음 옵션 중 하나를 선택합니다.

모니터 색상

이미지 감마를 조정하지 않습니다. [모니터 색상]이 기본 설정입니다.

레거시 Macintosh(색상 관리 없음)

Mac OS 10.5 이전 버전에서 사용되는 기본 감마 1.8을 시뮬레이션합니다.

Windows(색상 관리 없음)

Windows 및 Mac OS 10.6 이상 버전에서 사용되는 기본 감마 2.2를 시뮬레이션합니다.

문서 프로필 사용

색상 관리 문서에 첨부된 문서 색상 프로파일과 일치하도록 감마를 조정합니다.

웹용으로 이미지 최적화

  1. [파일] > [이미지 내보내기] 또는 [파일] > [애니메이션 처리된 GIF 내보내기]를 선택합니다.

  2. 대화 상자 위쪽의 탭을 클릭하여 표시 옵션([최적화] 또는 [2장])을 선택합니다.

  3. (선택 사항) 이미지에 여러 개의 분할 영역이 포함되어 있으면 최적화할 분할 영역을 하나 이상 선택합니다.

  4. [사전 설정] 메뉴에서 사전 설정된 최적화 설정을 선택하거나 개별 최적화 옵션을 설정합니다. 선택한 파일 형식에 따라 사용 가능한 옵션이 다릅니다.

  5. 이미지 품질과 파일 크기 간의 균형에 만족할 때까지 최적화 설정을 세밀하게 조정합니다. 이미지에 여러 개의 분할 영역이 포함되어 있으면 모든 분할 영역을 최적화해야 합니다.

    참고:

    최적화된 미리 보기를 원본으로 복원하려면 해당 미리 보기를 선택한 다음 [사전 설정] 메뉴에서 [원본]을 선택합니다.

  6. 최적화된 이미지에서 보는 색상이 다른 브라우저에서도 똑같이 보이도록 이미지 색상을 sRGB로 변환합니다.

  7. 다음 옵션을 선택합니다.

    없음

    저장된 메타데이터가 없습니다(JPEG 파일의 EXIF 저작권 고지 사항 제외). 가장 작은 크기의 파일이 생성됩니다.

    저작권

    저작권 고지 사항, 권한 사용 조건, 저작권 상태 및 저작권 정보 URL을 저장합니다.

    저작권 및 문의 정보

    모든 저작권 정보뿐 아니라 작성자, 작성자 직함, 전자 우편, 주소, 구/군/시, 시/도, 우편 번호, 국가, 전화 번호, 웹 사이트 등을 저장합니다.

    카메라 정보를 제외한 모두

    셔터 속도, 날짜 및 시간, 초점 거리, 노출 보정, 미터링 패턴, 플래시 사용 등과 같은 카메라 설정에 대한 EXIF 데이터를 제외한 모든 메타데이터를 저장합니다.

    모두

    모든 메타데이터를 파일에 저장합니다.

  8. [저장]을 클릭합니다..

  9. [최적화 다른 이름으로 저장] 대화 상자에서 다음을 수행하고 [저장]을 클릭합니다.

    1. 파일 이름을 입력하고 결과 파일을 저장할 위치를 선택합니다.

    2. [형식] 옵션을 선택하여 저장할 파일의 종류를 HTML 및 이미지, 이미지 전용, HTML 전용 중에서 지정합니다.

    3. (선택 사항) HTML 및 이미지 파일의 출력 설정을 지정합니다.

    4. 이미지에 여러 개의 분할 영역이 포함되어 있으면 [분할 영역] 메뉴에서 분할 영역을 저장하는 옵션([모든 분할 영역] 또는 [선택 분할 영역])을 선택합니다.

      참고:

      최적화 설정을 마지막으로 저장된 버전으로 되돌리려면 Alt 키(Windows) 또는 Option 키(Mac OS)를 누르고 [재설정]을 클릭합니다. 다음에 [웹 및 저장] 대화 상자를 열 때 같은 설정이 유지되도록 하려면 Alt/Option 키를 누른 채 [기억]을 클릭합니다.

    5. Illustrator에서 파일을 웹용으로 저장하는 방법에 대한 비디오는 www.adobe.com/go/vid0063_kr을 참조하십시오.

최적화 사전 설정 저장 또는 삭제

최적화 설정을 이름이 지정된 세트로 저장한 다음 다른 이미지에 적용할 수 있습니다. 저장한 설정은 이름이 지정되어 미리 정의된 설정과 함께 [사전 설정] 팝업 메뉴에 나타납니다. 이름이 지정된 세트나 미리 정의된 세트를 편집하면 [사전 설정] 메뉴에 [이름 없음]으로 표시됩니다.

  1. 최적화 옵션을 설정하고 [최적화] 팔레트 메뉴에서 [설정 저장]을 선택합니다.

  2. 설정에 이름을 지정하고 적절한 폴더에 저장합니다.

    Photoshop

    (Windows XP) Document and Settings\[사용자 이름]\Application Data\Adobe\Adobe Photoshop CS5\최적화 설정

    (Windows Vista) Users\[사용자 이름]\AppData\Roaming\Adobe\Adobe Photoshop CS5\최적화 설정

    (Mac OS) User/[사용자 이름]/Library/Preferences/Adobe Photoshop CS5 Settings/최적화 설정

    Illustrator

    (Windows XP) Document and Settings\[사용자 이름]\Application Data\Adobe\Adobe Illustrator CS5 Settings\[언어]\웹 설정용으로 저장\최적화

    (Windows Vista) Users\[사용자 이름]\AppData\Roaming\Adobe\Adobe Illustrator CS5 Settings\[언어]\웹 설정용으로 저장\최적화

    (Mac OS) Users/[사용자 이름]/Library/ApplicationSupport/Adobe/Adobe Illustrator CS5/[언어]/웹 설정용으로 저장/최적화

    참고:

    다른 위치에 저장한 설정은 [사전 설정] 팝업 메뉴에 표시되지 않습니다.

  3. 사전 설정을 삭제하려면 [사전 설정] 메뉴에서 사전 설정을 선택하고 [최적화] 메뉴에서 [설정 삭제]를 선택합니다.

웹 그래픽을 특정 파일 크기로 압축

  1. [파일] > [내보내기] > [이미지 내보내기] 또는 [파일] > [내보내기] > [애니메이션 처리된 GIF 내보내기]를 선택합니다.

  2. [이미지 내보내기] 또는 [애니메이션 처리된 GIF 내보내기] 대화 상자 위쪽의 탭을 클릭하여 표시 옵션([최적화] 또는 [2장])을 선택합니다. 

  3. (선택 사항) 최적화할 분할 영역과 사용할 파일 형식을 선택합니다.

  4. [사전 설정] 메뉴의 오른쪽에 있는 [최적화] 메뉴에서 [파일 크기에 맞게 최적화]를 선택합니다.

  5. 원하는 파일 크기를 입력합니다.

  6. [시작] 옵션을 선택합니다.

    현재 설정

    현재 파일 형식을 사용합니다.

    GIF/JPEG 자동 선택

    이미지 내용에 따라 최적의 형식이 자동으로 선택됩니다.

  7. [사용] 옵션을 선택하여 지정된 파일 크기를 현재 분할 영역에만 적용할지, 이미지의 각 분할 영역에 적용할지, 모든 분할 영역에 적용할지를 지정합니다. [확인]을 클릭합니다.

최적화 중 아트워크 크기 조정

[이미지 내보내기] 대화 상자에서 이미지 크기를 지정된 픽셀 치수나 원본 크기의 특정 비율로 조정할 수 있습니다.

  1. [이미지 내보내기] 대화 상자에서 [이미지 크기] 탭을 클릭합니다.

  2. 추가 옵션을 설정합니다.

    비율 제한

    픽셀 너비와 픽셀 높이의 현재 비율을 유지합니다.

    참고:

    SWF 및 SVG 파일 형식의 경우 [대지에 클립]을 제외한 [이미지 크기] 팔레트의 모든 기능을 사용할 수 없습니다.

  3. 새 픽셀 치수를 입력하거나 이미지 크기를 조정할 백분율을 지정하고 [적용]을 클릭합니다.

웹 브라우저에서 최적화된 이미지 미리 보기

[이미지 내보내기] 대화 상자([파일] > [내보내기] > [이미지 내보내기] 또는 [파일] > [내보내기] > [애니메이션 처리된 GIF 내보내기])를 사용하여 시스템에 설치된 모든 웹 브라우저에서 최적화된 이미지를 미리 볼 수 있습니다. 브라우저 미리 보기에는 이미지와 함께 이미지의 파일 형식, 픽셀 치수, 파일 크기, 압축율 및 기타 HTML 정보가 나열된 캡션이 표시됩니다.

  • 기본 웹 브라우저에서 이미지를 미리 보려면 [이미지 내보내기] 대화 상자의 아래쪽에 있는 브라우저 아이콘을 클릭합니다.
  • [브라우저] 대화 상자에서 컴퓨터에 있는 모든 브라우저를 찾을 수 있고, 이미지를 미리 볼 기본 브라우저를 설정할 수 있습니다.

기타 도움말 항목

쉽고 빠르게 지원 받기

신규 사용자이신가요?