분할 영역 개요

웹용 그래픽을 디자인할 때 이미지의 각 부분이 독립적으로 작동해야 하는 경우가 많습니다. 한 영역은 URL에 링크되어야 하고, 다른 영역은 더 빠르게 로드되어야 하며, 또 다른 영역은 다른 보정 설정이 필요할 수 있습니다. 분할 영역은 하나의 이미지를 더 작은 격자 형태의 조각으로 나누어 웹 페이지로 함께 작동하게 하면서도 각 섹션을 개별적으로 제어할 수 있게 합니다.

Photoshop은 HTML 테이블이나 CSS 레이어를 사용하여 분할된 이미지를 웹 페이지에서 다시 조합합니다. 파일 > 내보내기 > 웹용으로 저장 명령으로 분할된 이미지를 내보내면 Photoshop이 각 분할 영역을 별도의 파일로 저장합니다. 또한 브라우저에서 이미지를 하나의 구성으로 표시하는 데 필요한 HTML 또는 CSS도 생성합니다.

분할 영역의 작동 방식

분할 영역은 보이지 않는 격자선을 따라 이미지를 나누어 독립된 파일처럼 작동하는 사각형 섹션을 만듭니다. 각 분할 영역은 전체 레이아웃 내에서 위치를 유지하면서도 고유한 속성, 보정 설정, 동작을 가진 별도의 요소로 작동합니다.

이 방식에는 다음과 같은 실용적인 장점이 있습니다:

• 서로 다른 URL 링크를 할당하여 클릭 가능한 탐색 요소 만들기
• 영역별로 다양한 압축 설정을 적용하여 품질과 파일 크기의 균형 맞추기
• 전체 구성을 다시 내보내지 않고 개별 섹션 업데이트하기

생성 방식에 따른 분할 영역 유형

Photoshop은 생성 방식에 따라 분할 영역을 분류하며, 이미지를 편집할 때 각 유형마다 다르게 작동합니다.

• 사용자 분할 영역: 분할 영역 도구를 사용하여 직접 정의하는 섹션입니다.크기, 위치, 속성을 완전히 제어할 수 있으며, 이동하거나 수정하지 않는 한 그대로 유지됩니다.
• 레이어 기반 분할 영역: 레이어에 있는 모든 픽셀을 포함하는 분할 영역입니다.레이어를 이동하거나 편집하면 경계가 자동으로 업데이트됩니다. 자주 변경되는 콘텐츠에 적합하지만, 사용자 분할 영역보다 정확한 위치 지정에 대한 제어력은 떨어집니다.
• 자동 분할 영역: 사용자 분할 영역이나 레이어 기반 분할 영역이 차지하지 않은 이미지의 나머지 공간을 채우는 분할 영역입니다. Photoshop은 다른 분할 영역을 추가, 제거 또는 수정할 때마다 이러한 분할 영역을 자동으로 생성하고 다시 생성합니다.이미지의 모든 자동 분할 영역은 동일한 향상 설정을 공유합니다.
• 하위 분할 영역: 분할 영역이 겹칠 때 나타나는 특수한 유형의 자동 분할 영역입니다.하위 분할 영역 도구는 향상된 파일을 저장할 때 Photoshop이 겹치는 영역을 어떻게 분할하는지 보여줍니다.하위 분할 영역 도구는 기본 분할 영역 도구와 별도로 선택하거나 편집할 수 없습니다.

콘텐츠별 분할 영역 유형

분할 영역 도구는 포함된 콘텐츠 유형에 따라 분류되기도 합니다.

• 이미지 분할 영역: Photoshop 문서의 이미지 데이터를 포함하는 시각적 콘텐츠의 기본 분할 영역 유형입니다.
• 이미지 없는 분할 영역: HTML 텍스트 또는 단색을 위한 빈 테이블 셀입니다.Photoshop은 이를 이미지 파일로 내보내지 않으므로 실시간으로 선택 가능한 텍스트에 유용합니다.
• 테이블 분할 영역: 브라우저에서 분할된 이미지를 재구성하는 데 사용되는 HTML 테이블을 Photoshop이 구성하는 방식을 정의하는 분할 영역입니다.

분할 영역 시각적 표시

Photoshop은 작업하는 동안 분할 영역 유형을 구분할 수 있도록 시각적 표시를 사용합니다.

• 분할 영역 선: 실선은 사용자 분할 영역 또는 레이어 기반 분할 영역을 표시하고, 점선은 자동 분할 영역을 표시합니다.
• 분할 영역 색상: 파란색 기호는 사용자 분할 영역과 레이어 기반 분할 영역을 나타내고, 회색 기호는 자동 분할 영역을 표시합니다.
• 분할 영역 번호: 각 분할 영역의 왼쪽 상단에 있는 번호는 왼쪽에서 오른쪽, 위에서 아래 순으로 매겨지며, 분할 영역을 재배열하거나 수정하면 자동으로 업데이트됩니다.
• 분할 영역 배지: 작은 아이콘이 분할 영역의 콘텐츠와 유형을 나타냅니다.예를 들어, 이미지 아이콘은 이미지 콘텐츠가 있는 사용자 분할 영역을 나타내고, 취소선이 그려진 이미지 아이콘은 이미지 콘텐츠가 없는 사용자 분할 영역을 나타내며, 레이어 아이콘은 레이어 기반 분할 영역을 나타냅니다.

웹 페이지를 분할할 때 이러한 시각적 차이를 인식하면 분할 영역 유형을 빠르게 식별하고 복잡한 분할 영역 레이아웃으로 더 효율적으로 작업할 수 있습니다.