분할 영역 정보

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

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

다른 분할 영역 유형을 사용하여 분할한 아트웍
다른 분할 영역 유형을 사용하여 분할한 아트웍

A. 이미지 없음 분할 영역 B. 이미지 분할 영역 C. HTML 텍스트 분할 영역 

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

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

분할 영역 만들기

  1. 다음 중 하나를 수행합니다.
    • 대지에서 하나 이상의 개체를 선택하고 [개체] > [분할 영역] > [만들기]를 선택합니다.

    • [분할 영역] 도구 를 선택하고 분할 영역을 만들 영역 위로 드래그합니다. Shift 키를 누른 상태에서 드래그하면 분할 영역을 정사각형으로 제한할 수 있습니다. 중심부터 그리려면 Alt 키(Windows) 또는 Option 키(Mac OS) 키를 누른 상태로 드래그합니다.

    • 대지에서 개체를 하나 이상 선택하고 [개체] > [분할 영역] > [선택물에서 만들기]를 선택합니다.

    • 아트웍을 분할하려는 위치에 안내선을 배치하고 [개체] > [분할 영역] > [안내선에서 만들기]를 선택합니다.

    • 기존의 분할 영역을 선택하고 [개체] > [분할 영역] > [분할 영역 복제]를 선택합니다.

      : 분할 영역 크기를 아트웍에 있는 요소의 경계와 일치시키려는 경우 [개체] > [분할 영역] > [만들기] 명령을 사용합니다. 해당 요소를 이동하거나 수정하면 분할 영역은 새 아트웍을 포함하도록 자동으로 조정됩니다. 또한 이 명령을 사용하여 텍스트 개체에서 텍스트와 기본 포맷 특성을 캡처하는 분할 영역을 만들 수도 있습니다.

      : 분할 영역 크기를 기본 아트웍과 무관하게 설정하려면 [분할 영역] 도구, [선택 항목에서 만들기] 명령 또는 [안내선에서 만들기] 명령을 사용합니다. 이러한 방법 중 하나로 만드는 분할 영역은 [레이어] 패널에 항목으로 나타나므로 다른 벡터 개체처럼 이동, 크기 조절 및 삭제할 수 있습니다.

분할 영역 선택

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

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

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

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

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

분할 영역 옵션 설정

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

  1. [분할 영역 선택] 도구를 사용해 다음 중 하나를 수행합니다.
    • 그림 윈도우에서 분할 영역을 선택하고 [개체] > [분할 영역] > [분할 영역 옵션]을 선택합니다.

    • [분할 영역 선택] 도구를 사용해 [ 및 장치용으로 저장] 대화 상자에 있는 분할 영역을 두 번 클릭합니다.

  2. 분할 영역 유형을 선택하고 해당 옵션을 설정합니다.

    이미지

    분할 영역이 결과 웹 페이지의 이미지 파일이 되도록 하려면 이 유형을 선택합니다. 이 이미지를 HTML 링크로 만들려면 URL과 대상 프레임 세트를 입력합니다. 또한 마우스를 이미지 위에 올려놓을 때 브라우저의 상태 영역에 나타날 메시지, 이미지가 보이지 않을 때 나타날 대체 텍스트 및 테이블 셀의 배경색을 지정할 수도 있습니다.

    이미지 없음

    결과 웹 페이지에서 분할 영역에 HTML 텍스트와 배경색이 포함되도록 하려면 이 유형을 선택합니다. [셀에 표시되는 텍스트] 텍스트 상자에 원하는 텍스트를 입력하고 표준 HTML 태그를 사용해 이 텍스트의 서식을 지정합니다. 분할 영역에 표시되는 것보다 많은 텍스트를 입력하지 마십시오. (텍스트를 너무 많이 입력하면 인접 분할 영역으로 넘쳐 웹 페이지의 레이아웃이 변경될 수 있습니다. 그러나 이 텍스트를 대지에서는 볼 수 없으므로 웹 브라우저로 웹 페이지를 볼 때까지는 텍스트를 너무 많이 입력했는지 확인할 수 없습니다. [가로] 및 [세로] 옵션을 설정하여 테이블 셀에서의 텍스트 정렬 방식을 변경합니다.

    HTML 텍스트

    이 유형은 텍스트 개체를 선택하고 [개체] > [분할 영역] > [만들기]를 선택하여 분할 영역을 만든 경우에만 사용 가능합니다. Illustrator 텍스트는 결과 웹 페이지에서 기본 서식 속성을 가진 HTML 텍스트로 변환됩니다. 텍스트를 편집하려면 아트웍의 텍스트를 업데이트합니다. [가로] 및 [세로] 옵션을 설정하여 테이블 셀에서의 텍스트 정렬 방식을 변경합니다. 또한 테이블 셀의 배경색을 선택할 수 있습니다.

    : [분할 영역 옵션] 대화 상자에서 [HTML 텍스트] 분할 영역의 텍스트를 편집하려면 분할 영역 유형을 [이미지 없음]으로 변경합니다. 이렇게 하면 대지에 있는 텍스트 개체와의 연결이 끊어집니다. 텍스트 포맷을 무시하려면 <포맷되지 않음>을 텍스트 개체의 첫 단어로 입력합니다.

분할 영역 잠금

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

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

분할 영역 경계 조정

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

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

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

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

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

분할 영역 제거

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

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

분할 영역 표시 또는 숨기기

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

이미지 맵 만들기

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

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

참고:

예기치 않은 결과를 피하려면 URL 연결을 포함하는 분할 영역에는 이미지 맵 핫스폿을 만들지 마십시오. 이미지 맵 연결이나 분할 영역 연결이 일부 브라우저에서는 무시될 수 있습니다.

  1. URL에 연결할 개체를 선택합니다.
  2. [속성] 패널의 [이미지 맵] 메뉴에서 이미지 맵의 모양을 선택합니다.
  3. URL 텍스트 상자에 상대 또는 전체 URL을 입력하거나, 사용할 수 있는 URL 목록에서 선택합니다. [브라우저] 단추를 클릭하면 URL 위치를 확인할 수 있습니다.

    참고:

    URL 메뉴에서 보이는 항목의 수를 늘리려면 [속성] 패널 메뉴에서 [패널 옵션]을 선택합니다. 1부터 30까지의 값을 입력하여 URL 목록에 표시할 URL 항목의 수를 정의합니다.

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

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