사용 안내서 취소

웹 그래픽을 만들기 위한 최상의 조건

  1. Illustrator 사용 안내서
  2. Illustrator 살펴보기
    1. Illustrator 소개
      1. Illustrator의 새로운 기능
      2. 일반 질문
      3. Illustrator 시스템 요구 사항
      4. Apple Silicon용 Illustrator
    2. 작업 영역
      1. 작업 영역 기본 사항
      2. Illustrator 검색 패널을 사용하여 더 빠르게 학습
      3. 문서 만들기
      4. 도구 모음
      5. 초기값 키보드 단축키
      6. 키보드 단축키 사용자 정의
      7. 아트보드 소개
      8. 아트보드 관리
      9. 작업 영역 사용자 정의
      10. 속성 패널
      11. 환경 설정 지정
      12. 터치 작업 영역
      13. Illustrator에서 Microsoft Surface Dial 지원
      14. 편집 실행 취소 및 디자인 내역 관리
      15. 회전 보기
      16. 눈금자, 격자 및 안내선
      17. Illustrator의 접근성
      18. 안전 모드
      19. 아트워크 보기
      20. Illustrator에서 Touch Bar 사용
      21. 파일 및 템플릿
    3. Illustrator에 있는 도구
      1. 도구 소개
      2. 도구 선택
        1. 선택
        2. 직접 선택
        3. 그룹 선택
        4. 자동 선택
        5. 올가미
        6. 아트보드
      3. 탐색 도구
        1. 회전 보기
        2. 확대/축소
      4. 페인트 도구
        1. 그레이디언트
        2. 도형 구성
      5. 텍스트 도구
        1. 문자
        2. 패스에 입력
        3. 세로 문자
      6. 그리기 도구
        1. 고정점 추가
        2. 고정점 삭제
        3. 고정점
        4. 곡선
        5. 선분
        6. 사각형
        7. 모퉁이가 둥근 직사각형
        8. 원형
        9. 다각형
        10. 별모양
        11. 페인트브러시
        12. 물방울 브러시
        13. 연필
        14. 셰이퍼
        15. 분할
      7. 수정 도구
        1. 회전
        2. 반사
        3. 크기 조절
        4. 기울임
        5. 너비
        6. 자유 변형
        7. 스포이드
        8. 블렌드
        9. 지우개
        10. 가위
    4. 빠른 작업
      1. 레트로 텍스트
      2. 네온광 텍스트
      3. 올드 스쿨 텍스트
      4. 색상 변경
      5. 스케치를 벡터로 변환
  3. iPad용 Illustrator
    1. iPad용 Illustrator 소개
      1. iPad용 Illustrator 개요
      2. iPad용 Illustrator FAQ
      3. 시스템 요구 사항 | iPad용 Illustrator
      4. iPad용 Illustrator에서 수행할 수 있는 작업
    2. 작업 영역
      1. iPad 작업 영역의 Illustrator
      2. 터치 단축키 키 및 제스처
      3. iPad용 Illustrator 키보드 단축키
      4. 앱 설정 관리
    3. 문서
      1. iPad용 Illustrator에서 문서로 작업
      2. Photoshop 및 Fresco 문서 가져오기
    4. 오브젝트 선택 및 정렬
      1. 반복 오브젝트 만들기
      2. 오브젝트 혼합
    5. 그리기
      1. 패스 그리기 및 편집
      2. 모양 그리기 및 편집
    6. 문자
      1. 문자 및 글꼴 사용
      2. 패스에 텍스트 디자인 만들기
      3. 나만의 글꼴 추가하기
    7. 이미지로 작업
      1. 래스터 이미지 벡터화
    8. 색상
      1. 색상 및 그레이디언트 적용
  4. 클라우드 문서
    1. 기본 사항
      1. Illustrator 클라우드 문서 작업
      2. Illustrator 클라우드 문서 공유 및 공동 작업
      3. 검토용 문서 공유
      4. Adobe Illustrator용 클라우드 스토리지 업그레이드
      5. Illustrator 클라우드 문서 | 일반적인 질문
    2. 문제 해결
      1. Illustrator 클라우드 문서에 대한 만들기 및 저장 문제 해결
      2. Illustrator 클라우드 문서 문제 해결
  5. 콘텐츠 추가 및 편집
    1. 그리기
      1. 그리기 기본 정보
      2. 패스 편집
      3. 세밀한 아트 그리기
      4. 펜, 곡률 또는 연필 도구로 그리기
      5. 간단한 선 및 모양 그리기
      6. 이미지 추적
      7. 패스 단순화
      8. 원근감 격자 정의
      9. 심볼화 도구 및 심볼 세트
      10. 패스 선분 조정
      11. 간단한 5단계를 통해 꽃 디자인
      12. 원근감 드로잉
      13. 심볼
      14. 웹 작업 과정에 맞도록 픽셀 정렬 패스 그리기
    2. 3D 오브젝트 및 재질
      1. Illustrator의 3D 효과 정보
      2. 3D 그래픽 만들기
      3. 3D 오브젝트에 아트워크 매핑
      4. 3D 텍스트 만들기
    3. 색상
      1. 색상 정보
      2. 색상 선택
      3. 색상 견본 사용 및 만들기
      4. 색상 조정
      5. Adobe Color 테마 패널 사용
      6. 색상 그룹 (조화)
      7. 색상 테마 패널
      8. 아트워크 색상 변경
    4. 페인팅
      1. 페인팅 정보
      2. 칠 및 선을 사용하여 페인팅
      3. 라이브 페인트 그룹
      4. 그레이디언트
      5. 브러시
      6. 투명도 및 혼합 모드
      7. 오브젝트에 획 적용
      8. 패턴 만들기 및 편집
      9. 패턴
    5. 오브젝트 선택 및 정렬
      1. 오브젝트 선택
      2. 레이어
      3. 오브젝트 그룹 만들기 및 오브젝트 확장
      4. 오브젝트 이동, 정렬 및 배포
      5. 오브젝트 누적    
      6. 오브젝트 잠금, 숨기기 및 삭제
      7. 오브젝트 복사 및 복제
      8. 오브젝트 회전 및 반사
      9. 오브젝트 얽힘
    6. 오브젝트 모양 변경
      1. 이미지 자르기
      2. 오브젝트 변형
      3. 오브젝트 결합
      4. 오브젝트 자르기, 나누기 및 트리밍
      5. 퍼펫 뒤틀기
      6. 오브젝트 크기 조절, 기울이기 및 왜곡
      7. 오브젝트 혼합
      8. 둘러싸기를 사용하여 모양 변경
      9. 효과로 오브젝트 모양 변경
      10. Shaper 및 도형 구성 도구로 새 모양 작성
      11. 활성 모퉁이 작업
      12. 손질 지원으로 향상된 모양 변경 작업 과정
      13. 클리핑 마스크 편집
      14. 실시간 모양
      15. 도형 구성 도구를 사용하여 모양 만들기
      16. 전역 편집
    7. 문자
      1. 텍스트 추가 및 문자 오브젝트를 사용하여 작업
      2. 글머리 기호 및 번호 매기기 목록 만들기
      3. 텍스트 영역 관리
      4. 글꼴 및 타이포그래피
      5. 문자의 형식 지정
      6. 텍스트 가져오기 및 내보내기
      7. 단락 서식 지정
      8. 특수 문자
      9. 패스에 문자 입력
      10. 문자 및 단락 스타일
      11. 텍스트 및 유형
      12. 누락된 글꼴 찾기 (Typekit 워크플로)
      13. Illustrator 10의 텍스트 업데이트
      14. 아랍어 및 히브리어 문자
      15. 글꼴 | FAQ 및 문제 해결 팁
      16. 3D 텍스트 효과 만들기
      17. 창의적인 타이포그래피 디자인
      18. 문자 비율 조정 및 회전
      19. 행과 문자 간격
      20. 하이픈 및 줄바꿈
      21. 텍스트 개선 사항
      22. 맞춤법 및 언어 사전
      23. 아시아 문자 서식 지정
      24. 아시아 언어 스크립트용 작성기
      25. 혼합 오브젝트로 텍스트 디자인 생성
      26. 이미지 추적을 사용하여 텍스트 포스터 만들기
    8. 특수 효과 만들기
      1. 효과 사용
      2. 그래픽 스타일
      3. 그림자 만들기
      4. 모양 속성
      5. 스케치 및 모자이크 만들기
      6. 그림자, 광선 및 패더링
      7. 효과 요약
    9. 웹 그래픽
      1. 웹 그래픽을 만들기 위한 최상의 조건
      2. 그래프
      3. SVG
      4. 애니메이션 만들기
      5. 분할 영역과 이미지 맵
  6. 가져오기, 내보내기 및 저장
    1. 가져오기
      1. 여러 파일 가져오기
      2. 연결 및 임베드된 파일 관리
      3. 연결 정보
      4. 이미지 임베드 취소
      5. Photoshop에서 아트워크 가져오기
      6. 비트맵 이미지 불러오기
      7. Adobe PDF 파일 가져오기
      8. EPS, DCS 및 AutoCAD 파일 불러오기
    2. Illustrator의 Creative Cloud Libraries 
      1. Illustrator의 Creative Cloud Libraries
    3. 저장
      1. 아트워크 저장
    4. 내보내기
      1. Photoshop에서 Illustrator 아트워크 사용
      2. 아트워크 내보내기
      3. 에셋 수집 및 일괄 내보내기
      4. 파일 패키지
      5. Adobe PDF 파일 만들기
      6. CSS 추출 | Illustrator CC
      7. Adobe PDF 옵션
      8. 파일 정보와 메타데이터
  7. 인쇄
    1. 인쇄 준비
      1. 인쇄용 문서 설정
      2. 페이지 크기와 방향 변경
      3. 재단 또는 정렬을 위한 자르기 표시 지정
      4. 대형 캔버스 시작하기
    2. 인쇄
      1. 중복 인쇄
      2. 색상 관리를 사용한 인쇄
      3. PostScript 인쇄
      4. 인쇄 사전 설정
      5. 프린터 표시 및 도련
      6. 투명 아트워크 인쇄 및 저장
      7. 트래핑
      8. 색상 분판 인쇄
      9. 그레이디언트, 망 및 색상 혼합 인쇄
      10. 흰색 중복 인쇄
  8. 작업 자동화
    1. [변수] 패널을 사용하여 데이터 병합
    2. 스크립트로 자동화
    3. 액션을 사용하여 자동화
  9. 문제 해결 
    1. 충돌 문제
    2. 충돌 후 파일 복구
    3. 파일 문제
    4. 지원되는 파일 형식
    5. GPU 디바이스 드라이버 문제
    6. Wacom 디바이스 문제
    7. DLL 파일 문제
    8. 메모리 문제
    9. 환경 설정 파일 문제
    10. 글꼴 문제
    11. 프린터 문제
    12. Adobe와 충돌 보고서 공유
    13. Illustrator 성능 개선

Illustrator는 웹 페이지를 위한 레이아웃을 만들거나 웹 그래픽을 만들고 최적화하는 다양한 도구를 제공합니다. 예를 들어 웹에 적합한 색상 사용, 이미지 품질과 파일 크기의 균형 및 그래픽에 가장 적합한 파일 포맷 선택 등이 있습니다. 웹 그래픽의 경우 분할 영역과 이미지 맵을 활용할 수 있으며, 다양한 최적화 옵션을 사용하여 파일이 웹에서 잘 표시되게 할 수 있습니다.

웹 그래픽 정보

웹용으로 그래픽을 디자인할 때는 인쇄용 그래픽을 디자인할 때와는 다른 문제를 고려해야 합니다. 

웹 그래픽에 대한 디자인 결정을 제대로 하려면 다음 세 가지 지침을 염두에 두어야 합니다.

웹에 적합한 색상 사용

색상은 대개 아트워크의 주요 부분이 됩니다. 그러나 아트보드에서 보는 색상이 다른 사용자의 시스템에 설치된 웹 브라우저에서 반드시 똑같이 나타나는 것은 아닙니다. 웹 그래픽을 만들 때 두 가지 사항에 유의하면 디더링(사용할 수 없는 색상을 시뮬레이트하는 방법)과 기타 색상 문제를 예방할 수 있습니다. 첫째는 항상 RGB 색상 모드에서 작업하는 것이고, 둘째는 웹에 적합한 색상을 사용하는 것입니다.

이미지 품질과 파일 크기 간의 균형 유지

웹에 이미지를 배포하기 위해서는 그래픽 파일을 작게 만들어야 합니다. 파일 크기가 작을수록 웹 서버에서는 이미지를 보다 효율적으로 저장하고 전송할 수 있으며 뷰어에서도 이미지를 보다 빠르게 다운로드할 수 있습니다. [ 및 디바이스용으로 저장] 대화 상자에서 웹 그래픽의 크기와 다운로드 예상 시간을 볼 수 있습니다.

그래픽에 가장 적합한 파일 포맷 선택

그래픽을 최상의 상태로 표시하고 웹에 적합한 파일 크기를 만들기 위해서는 여러 유형의 그래픽을 다른 파일 포맷으로 저장해야 합니다. 특정 포맷에 대한 자세한 내용은 웹 그래픽 최적화 옵션을 참조하십시오.

참고:

웹 페이지와 배너를 비롯하여, 웹에 적합하게 만들어진 Illustrator 템플릿이 많이 있습니다. 템플릿을 선택하려면 [파일] > [템플릿으로 새로 만들기]를 선택합니다.

픽셀 미리보기 모드 정보

웹 디자이너를 활성화하여 픽셀 단위의 정확한 디자인을 만들기 위해 픽셀 정렬 속성을 Illustrator에 추가했습니다. 오브젝트에 대해 픽셀 정렬 속성이 활성화되면 오브젝트의 모든 수평 및 수직 선분이 픽셀 격자에 정렬되어 선들이 뚜렷한 모양을 갖게 됩니다. 모든 변형에서 오브젝트에 대해 이 속성이 설정되어 있는 한 새 좌표에 따라 픽셀 격자에 다시 정렬됩니다. [변형] 패널에서 [픽셀 격자에 정렬] 옵션을 선택하여 이 속성을 활성화할 수 있습니다. Illustrator 에서는 웹 문서에 대해 기본적으로 활성화된 문서 수준의 [새 오브젝트를 픽셀 격자에 정렬] 옵션도 제공합니다. 이 설정이 활성화되어 있으면 그리는 모든 새 오브젝트가 기본적으로 픽셀 정렬 속성을 갖습니다.

자세한 내용은 웹 작업흐름을 위한 픽셀 정렬 패스 그리기를 참조하십시오.

JPEG, GIF 또는 PNG와 같은 이미지 포맷으로 아트워크를 저장하는 경우 Illustrator는 인치당 72픽셀로 아트워크를 래스터화합니다. [보기] > [픽셀 미리보기]를 선택하여 래스터화하면 오브젝트가 어떻게 나타날 것인지 미리볼 수 있습니다. 이 기능은 래스터화된 그래픽에서 오브젝트의 정확한 위치, 크기 및 앤티 앨리어싱을 제어하려는 경우 특히 유용합니다 .

Illustrator에서 오브젝트를 픽셀로 분할하는 방법을 이해하려면 벡터 오브젝트를 포함하는 파일을 열고 [보기] > [픽셀 미리보기]를 선택한 다음 개별 픽셀을 볼 수 있도록 아트워크를 확대합니다. 픽셀 배치는 아트보드를 1포인트(1/72 인치) 증가분으로 나누는 픽셀 격자에 의해 결정됩니다. 600% 보기로 확대하는 경우에는 픽셀 격자를 볼 수 있습니다. 오브젝트를 이동하거나 추가 또는 변형하면 오브젝트가 픽셀 격자에 물립니다. 결과적으로 오브젝트의 "물린" 가장자리(대개는 왼쪽 위 가장자리)를 따라 앤티 앨리어싱이 사라집니다. 이제 [보기] > [픽셀에 물리기] 명령을 선택 취소하고 오브젝트를 이동합니다. 이번에는 격자선 사이에 오브젝트를 배치할 수 있습니다. 오브젝트의 앤티 앨리어싱에 어떤 영향이 있는지 유의합니다. 보시다시피 아주 조금씩 조정하면 오브젝트의 래스터화 방식에 영향을 줄 수 있습니다.

픽셀 미리보기 비활성화(위쪽) 및 활성화(아래쪽) 비교
픽셀 미리보기 비활성화(위쪽) 및 활성화(아래쪽) 비교

참고:

픽셀 격자는 눈금자 원점(0,0)의 영향을 받기 쉽습니다. 눈금자의 원점을 이동하면 Illustrator에서 아트워크를 래스터화하는 방법이 달라집니다.

모바일 디바이스용 Illustrator 이미지 만들기에 대한 팁

그래픽 콘텐츠를 모바일 디바이스용으로 최적화하려면 Illustrator에서 만든 아트워크를 모바일 디바이스용으로 특별히 고안된 SVG 형식(SVG-t 포함)으로 저장합니다.

Illustrator에서 만든 이미지가 모바일 디바이스에서 제대로 표시되도록 하려면 다음 팁을 참조합니다.

  • SVG 표준을 사용하여 콘텐츠를 만듭니다. SVG를 사용하여 모바일 디바이스에 벡터 그래픽을 게시하면 파일 크기가 작아지고, 표시에 영향을 받지 않으며, 색상 제어력이 강해지며, 확대/축소 기능을 사용할 수 있고, 소스 코드 내에서 텍스트 편집이 가능해집니다. 또한 SVG는 XML 기반이므로 강조, 도구 팁, 특수 효과, 오디오, 애니메이션과 같은 대화형 기능을 이미지에 통합할 수 있습니다.

  • 처음부터 대상 모바일 디바이스의 최종 크기로 작업합니다. SVG는 크기 조절이 가능하지만, 정확한 크기로 작업을 하면 최종 그래픽의 품질과 크기가 대상 디바이스에 맞게 최적화됩니다.

  • Illustrator 색상 모드를 RGB로 설정합니다. SVG는 모니터와 같은 RGB 래스터 디스플레이 디바이스에서 표시됩니다.

  • 파일 크기를 줄이려면 오브젝트(그룹 포함) 수를 줄이거나 오브젝트를 덜 복잡하게(포인트 수를 더 적게) 만듭니다. 포인트 수를 줄이면 SVG 파일에서 아트워크를 설명하는 데 필요한 텍스트 정보의 양이 크게 줄어듭니다. 포인트 수를 줄이려면 [오브젝트] > [패스] > [단순화]를 선택하고 다양한 조합을 시도하여 품질과 포인트 수 간의 적절한 균형을 찾습니다.

  • 가능하면 심볼을 사용합니다. 심볼은 오브젝트를 설명하는 벡터를 한 번만 정의합니다. 따라서 재사용되는 버튼 배경과 같은 오브젝트가 아트워크에 포함된 경우에 유용합니다.

  • 그래픽에 애니메이션을 적용할 때는 사용되는 오브젝트 수를 제한하고 가능하면 오브젝트를 다시 사용하여 파일 크기를 줄입니다. 개별 오브젝트가 아닌 오브젝트 그룹에 애니메이션을 적용하여 코드 반복을 피합니다.

  • SVG의 gzip 압축 버전인 SVGZ를 사용합니다. 압축을 하면 콘텐츠에 따라 파일 크기가 크게 줄어듭니다. 텍스트는 일반적으로 압축률이 크지만 임베드된 래스터(JPEG, PNG 또는 GIF 파일)와 같이 이진으로 인코딩된 콘텐츠는 많이 압축되지 않습니다. SVGZ 파일은 gzip으로 압축된 파일을 확장하는 애플리케이션을 사용하여 압축을 해제할 수 있습니다. SGVZ를 성공적으로 사용하려면 대상 모바일 디바이스에서 gzip 파일의 압축을 해제할 수 있는지 확인합니다.

Adobe 로고

내 계정 로그인