분할 영역과 이미지 맵

웹 페이지에는 HTML 텍스트, 비트맵 이미지, 벡터 그래픽 등의 여러 요소가 포함될 수 있습니다. Illustrator에서 분할 영역을 사용하여 아트웍에서 서로 다른 웹 요소의 경계를 정의할 수 있습니다. 예를 들어, 아트웍에 JPEG 포맷으로 최적화해야 하는 비트맵 이미지가 들어 있고 나머지 이미지는 GIF 파일로 최적화하는 것이 더 나은 경우 분할 영역을 사용하여 비트맵 이미지를 분리할 수 있습니다. [웹 및 장치용으로 저장] 명령을 사용하여 아트웍을 웹 페이지로 저장하는 경우 각각의 분할 영역을 자체적인 형식, 설정 및 색상표를 가진 독립된 파일로 저장할 수 있습니다.

Illustrator 문서의 분할 영역은 결과 웹 페이지의 표 셀에 해당합니다. 기본적으로 분할 영역은 표 셀에 둘러싸여 있는 이미지 파일로 내보내집니다. 표 셀에 이미지 파일 대신 HTML 텍스트와 배경색이 포함되도록 하려면 분할 영역 유형을 [이미지 없음]으로 변경하면 됩니다. Illustrator 텍스트를 HTML 텍스트로 변환하려면 분할 영역 유형을 [HTML 텍스트]로 변경하면 됩니다.

대지와 [웹 및 장치용으로 저장] 대화 상자에서 분할 영역을 볼 수 있습니다. Illustrator에서는 아트웍의 왼쪽 위 모서리에서 시작하여 왼쪽에서 오른쪽으로, 위에서 아래로 분할 영역의 번호를 지정합니다. 분할 영역의 총 수 또는 정돈 방식을 변경하는 경우 분할 영역 번호가 업데이트되어 새로운 순서를 반영하게 됩니다.

분할 영역을 만들면 주변의 아트웍이 자동 분할 영역으로 분할되어 웹 기반 테이블 형태로 레이아웃이 유지됩니다. 자동 분할 영역에는 자동 분할 영역과 하위 분할 영역의 두 가지 유형이 있습니다. 자동 분할 영역은 분할 영역으로 정의되지 않은 아트웍의 영역을 설명합니다. Illustrator에서는 분할 영역을 추가하거나 편집할 때마다 자동 분할 영역을 다시 생성합니다. 하위 분할 영역은 겹치는 사용자 정의 분할 영역이 분할되는 방식을 나타냅니다. 하위 분할 영역은 번호가 있고 분할 영역 심볼을 표시하지만 기본 분할 영역과 별개로 선택할 수 없습니다. Illustrator는 작업 중에 필요하면 하위 분할 영역과 자동 분할 영역을 다시 생성합니다.

분할 영역 만들기

분할 영역 선택

[분할 영역 선택] 도구 를 사용하여 그림 창이나 [웹 및 장치용으로 저장] 대화 상자에서 분할 영역을 선택합니다.

• 분할 영역을 선택하려면 해당 영역을 클릭합니다.
• 여러 개의 분할 영역을 선택하려면 Shift 키를 누른 상태로 클릭합니다. [웹 및 장치용으로 저장] 대화 상자에서 Shift 키를 누른 상태로 드래그할 수도 있습니다.
• 겹치는 분할 영역으로 작업할 때 기본 분할 영역을 선택하려면 분할 영역의 보이는 부분을 클릭합니다.

  또한 다음 중 한 가지를 수행하여 그림 창에서 분할 영역을 선택할 수 있습니다.

• [개체] > [분할 영역] > [만들기] 명령을 사용하여 만들어진 분할 영역을 선택하려면 대지에서 해당 아트웍을 선택합니다. 분할 영역이 그룹이나 레이어에 연결되어 있으면 [레이어] 패널에서 해당 그룹 또는 레이어 옆의 대상 아이콘을 선택합니다.
• [분할 영역] 도구, [선택물에서 만들기] 명령 또는 [안내선에서 만들기] 명령을 사용하여 만들어진 분할 영역을 선택하려면 [레이어] 패널에서 해당 분할 영역을 대상으로 지정합니다.
• [선택] 도구 로 분할 영역 패스를 클릭합니다.
• 분할 영역 패스 선분이나 분할 영역 고정점을 선택하려면 [직접 선택] 도구를 사용하여 해당 항목을 클릭합니다.

  주의: 자동 분할 영역은 선택할 수 없습니다. 이 분할 영역들은 흐리게 표시됩니다.

분할 영역 옵션 설정

분할 영역의 옵션은 분할 영역의 내용이 결과 웹 페이지에서 어떻게 보이고 어떤 기능을 할지 결정합니다.

분할 영역 잠금

분할 영역을 잠그면 실수로 크기를 조절하거나 이동하는 등의 변경을 방지할 수 있습니다.

• 모든 분할 영역을 잠그려면 [보기] > [분할 영역 잠금]을 선택합니다.
• 개별 분할 영역을 잠그려면 [레이어] 패널에서 분할 영역의 편집 단을 클릭합니다.

분할 영역 경계 조정

[개체] > [분할 영역] > [만들기] 명령을 사용해 분할 영역을 만든 경우, 분할 영역의 위치와 크기는 그 분할 영역에 들어 있는 아트웍에 묶입니다. 따라서 아트웍을 이동하거나 크기를 조절하면 분할 영역 경계가 자동으로 조정됩니다.

[분할 영역] 도구, [선택 항목에서 만들기] 명령 또는 [안내선에서 만들기] 명령을 사용해 분할 영역을 만든 경우 다음과 같은 방법으로 분할 영역을 수동으로 조정할 수 있습니다.

• 분할 영역을 이동하려면 [분할 영역 선택] 도구 로 분할 영역을 새 위치로 드래그합니다. 이동을 수직, 수평 또는 45도 대각선 방향으로 제한하려면 Shift 키를 누른 채 드래그합니다.
• 분할 영역의 크기를 조절하려면 [분할 영역 선택] 도구로 분할 영역을 선택하고 그 영역의 모퉁이 또는 면을 드래그합니다. 또한 [선택] 도구와 [변형] 패널을 사용해 분할 영역의 크기를 조절할 수도 있습니다.
• 분할 영역을 정렬하거나 분포시키려면 [정렬] 패널을 사용합니다. 분할 영역을 정렬하면 불필요한 자동 분할 영역이 제거되면서 보다 작고 효율적인 HTML 파일이 생성될 수 있습니다.
• 분할 영역의 누적 순서를 변경하려면 [레이어] 패널에서 분할 영역을 새 위치로 드래그하거나 [개체] > [정돈] 명령을 선택합니다.
• 분할 영역을 나누려면 분할 영역을 선택하고 [개체] > [분할 영역] > [분할 영역 나누기]를 선택합니다.

  만든 방법에 상관없이 만들어진 분할 영역을 결합할 수 있습니다. 분할 영역을 선택하고 [개체] > [분할 영역] > [분할 영역 결합]을 선택합니다. 결과로 생기는 분할 영역은 결합된 분할 영역의 외부 가장자리들을 결합하여 만들어지는 사각형으로부터 크기와 위치를 가져옵니다. 결합된 분할 영역들이 인접하지 않거나 다른 비율 또는 정렬로 되어 있으면 새 분할 영역이 다른 분할 영역 위에 겹쳐질 수 있습니다.

  모든 분할 영역을 대지 경계로 크기를 조절하려면 [개체] > [분할 영역] > [대지로 클립]을 선택합니다. 대지를 벗어나는 분할 영역은 대지에 맞게 잘리고 대지 내에 있는 자동 분할 영역은 대지 경계에 닿도록 확장되므로 모든 아트웍이 동일한 크기를 유지합니다.

분할 영역 제거

해당 아트웍에서 분할 영역을 삭제하거나 풀기를 수행하여 분할 영역을 제거할 수 있습니다.

• 분할 영역을 삭제하려면 분할 영역을 선택하고 Delete 키를 누릅니다. 분할 영역이 [개체] > [분할 영역] > [만들기] 명령을 사용하여 만들어진 경우 해당 아트웍도 동시에 삭제됩니다. 해당 아트웍을 유지하려면 분할 영역을 삭제하는 대신 풀기를 수행합니다.
• 모든 분할 영역을 삭제하려면 [개체] > [분할 영역] > [모두 삭제]를 선택합니다. [개체] > [분할 영역] > [만들기] 명령을 사용하여 만든 분할 영역은 삭제되지 않고 풀립니다.
• 분할 영역을 풀려면 분할 영역을 선택하고 [개체] > [분할 영역] > [풀기]를 선택합니다.

분할 영역 표시 또는 숨기기

• 그림 윈도우에서 분할 영역을 가리려면 [보기] > [분할 영역 가리기]를 선택합니다.
• [웹 및 장치용으로 저장] 대화 상자에서 분할 영역을 숨기려면 [분할 영역 가시성 켜기/끄기] 단추 를 클릭합니다.
• 분할 영역 수를 숨기고 분할 영역 선의 색상을 변경하려면 [편집] > [환경 설정] > [특수 문자 안내선 및 분할 영역](Windows) 또는 [Illustrator] > [환경 설정] > [특수 문자 안내선 및 분할 영역](Mac OS)을 선택합니다.

이미지 맵 만들기

이미지 맵을 사용하여 핫스폿이라고 하는 이미지의 하나 이상의 영역을 URL에 연결할 수 있습니다. 사용자가 핫스폿을 클릭하면 웹 브라우저가 연결된 파일을 불러옵니다.

연결을 만들기 위해 이미지 맵을 사용하는 것과 분할 영역을 사용하는 것의 주요 차이는 아트웍을 웹 페이지로 내보내는 방법에 있습니다. 이미지 맵을 사용하면 아트웍은 영향을 받지 않고 단일 이미지 파일로 유지되는 반면, 분할 영역을 사용하면 아트웍이 개별 파일들로 나뉘어집니다. 이미지 맵과 분할 영역의 또 다른 차이는 이미지 맵을 사용하면 아트웍의 다각형 영역이나 사각형 영역을 연결할 수 있는 반면 분할 영역을 사용하면 사각형 영역만 연결할 수 있습니다. 사각형 영역에만 연결해야 할 경우 이미지 맵을 사용하는 것보다 분할 영역을 사용하는 것이 더 좋습니다.