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

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

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

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

웹에 적합한 색상 사용

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

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

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

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

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

픽셀 미리보기 모드 정보

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

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

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

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

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