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 파일의 압축을 해제할 수 있는지 확인합니다.

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

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