Illustrator CC의 2014 릴리스는 웹 디자이너가 디자인 작업 시간을 단축하고 원래 디자인 모형을 웹에 가져올 수 있는 다양한 새로운 방법을 제공합니다.
Illustrator CC에서는 디자인을 자동으로 분석하여 CSS 속성을 추출할 수 있습니다.
이러한 기능을 사용하면 Illustrator에서 만든 디자인의 스타일을 HTML 편집기로 바로 가져오거나 개발자에게 전달할 수 있습니다.
CSS 속성 패널에 있는 컨트롤을 사용하여 선택한 오브젝트 또는 페이지 전체 모형의 코드를 내보낼 수 있습니다.
예를 들어, 문자 스타일을 정의하고 문자 스타일을 CSS로 변환할 수 있습니다.
Illustrator에서 문자 스타일을 만들 때 문자 스타일의 이름을 기존의 웹 요소를 기반으로 h1, h2, h3, body와 같이 지정할 수 있습니다.
그런 다음 문자 스타일에서 CSS를 추출하려면 CSS 속성 패널을 연 상태에서 텍스트 프레임을 선택하면 CSS 코드가 이 패널에 표시됩니다.
그러면 이 CSS 코드를 복사해 HTML 파일에 붙여넣어 웹용 텍스트로 스타일을 적용할 수 있습니다.
이 HTML 파일은 기본적인 콘텐츠와 구조로 되어 있고 텍스트 또는 다른 콘텐츠의 스타일에 대한 정보는 없습니다.
현재 기본 상태이지만 CSS 속성 패널에서 CSS 스타일을 선택하고 이 CSS 스타일을 HTML 파일에 복사하면 텍스트가 바뀌고 Illustrator 파일과 같은 스타일이 적용됩니다.
배경색을 비롯한 다른 디자인 속성의 CSS 코드도 내보낼 수 있습니다.
예를 들어 패턴, 그라디언트, 획, 그림자 등을 말이죠.
앞서 문자 스타일에서 살펴보았듯이 개별적으로 스타일을 지정할 요소만 선택할 수도 있습니다.
이때 CSS 코드는 별도의 외부 CSS 파일로 저장되므로 여러 페이지의 모양을 한 번에 간편하게 변경할 수 있습니다.
이제 페이지의 모든 오브젝트에 해당하는 CSS 코드를 내보내고 개별적인 CSS 파일로 저장하여 HTML 파일에서 참조용으로 사용해 보겠습니다.
복잡한 아트웍은 CSS 코드로 생성되지 않는데요.
이러한 복잡한 그래픽의 경우 Illustrator는 SVG라는 확장 가능한 벡터 그래픽을 출력합니다.
대부분의 최신 웹 브라우저는 이 SVG를 지원하므로 그래픽 비율을 확대하거나 크기를 변경하더라도 품질은 훼손되지 않습니다.
아트웍을 선택한 다음 생성된 SVG 코드를 HTML 파일에 붙여넣습니다.
이제 Illustrator에서 만든 원본 웹 모형을 웹에서도 확인할 수 있습니다.
이때 모든 디자인 세부 사항이 그대로 유지됩니다.
Illustrator에서는 SVG를 저장하여 반응형으로 만들어 모바일 디바이스 또는 비율이 조정되는 브라우저 창과 같이 다양한 크기의 환경에 따라 비율이 조정되도록 할 수 있습니다.
반응형 SVG를 만들려면 선택한 아트웍을 SVG로 저장하고 반응형 옵션이 선택되어 있는지 확인합니다.
이제 로고 아트웍을 반응형 SVG로 저장한 결과를 확인해 보죠.
첫 번째 버전은 웹 브라우저의 크기에 따라 변경되지 않습니다.
아트웍이 반응형 SVG로 저장되어 있는 두 번째 버전은 비율이 조정됩니다.
Illustrator에서 반응형 SVG를 만들면 아트웍이 다양한 브라우저와 디바이스 환경에 맞게 비율이 조정되면서 표시됩니다.
지금까지 Illustrator CC의 2014 릴리스에서 새롭게 제공되는 기능 중 벡터 디자인을 웹에 가져오는 새로운 옵션과 유연한 컨트롤 기능을 살펴보았습니다.
모두 Creative Cloud에서만 제공됩니다.
