NinePatch 이미지란 무엇인가

NinePatch 이미지는 안드로이드 시스템이 왜곡이나 늘어짐 없이 콘텐츠에 따라 이미지를 자동으로 크기 조정할 수 있도록 하는 특수한 PNG 이미지입니다. 이를 통해 개발자는 다양한 화면 크기에 대해 여러 리소스 세트를 가질 필요 없이 버튼, 진행률 표시줄, 배경 이미지와 같은 확장 가능한 UI 요소를 만들 수 있습니다.

NinePatch 이미지 생성

Draw 9-patch는 Android Studio 내에서 NinePatch 이미지를 만들고 편집하는 도구입니다. 개발자는 이를 통해 테두리를 따라 검은색 픽셀 선을 직관적으로 그리고 다양한 크기로 이미지가 어떻게 보이는지 미리 볼 수 있습니다. Android Studio에 포함된 도구 외에도 9 Patch Editor와 같은 NinePatch 이미지를 만드는 데 사용할 수 있는 많은 온라인 리소스와 애플리케이션이 있습니다.

NinePatch 이미지 사용

Android 앱에서 NinePatch 이미지를 사용하는 것은 간단합니다. 프로젝트의 res/drawable 폴더에 추가한 다음 XML 레이아웃 파일에서 android:background를 사용하여 참조합니다. 예를 들면 다음과 같습니다.

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

주의하세요. 텍스트와 함께 버튼을 깔끔하게 표시하려면 layout_width와 layout_height가 wrap_content여야 합니다.

다음은 XML과 NinePatch 이미지를 통해 렌더링된 두 개의 버튼을 보여줍니다. 위 그림과 같이 버튼의 너비와 높이가 텍스트에 따라 어떻게 변하는지, 반면 배경 이미지는 화면에 맞게 늘어나는지 살펴보세요.

NinePatch 사용 시나리오

1. 버튼 배경: 이는 Drawables에서 가장 일반적인 적용 사례입니다. 텍스트 길이는 버튼에 따라 다를 수 있으므로 NinePatch는 배경 이미지가 완전히 덮여 있고 텍스트 위치에서 버튼과 함께 경계 밖으로 나가거나 변형되지 않도록 합니다. 예를 들어, 둥근 모서리 버튼 배경이 있는 경우 NinePatch를 사용하면 버튼 텍스트의 길이가 어떻든 둥근 모서리가 변경되지 않은 상태로 유지됩니다.

2. 진행률 표시줄 배경: 진행률 표시줄과 함께 고정된 단위 거리에 걸쳐 배경 이미지를 늘립니다. 여기서 단위 거리는 서로 다르고 한 시스템에서 다른 시스템으로 로드할 때 다릅니다. NinePatch는 늘어나는 동안 배경 이미지의 스타일이 왜곡되지 않도록 합니다.

3. 목록 항목의 배경: 목록 보기에서 이러한 목록 항목의 배경은 실제로 보기에 입력되는 내용의 길이에 따라 달라야 합니다. NinePatch는 배경 이미지가 왜곡 없이 아름답게 늘어나도록 합니다.

4. 대화상자 케이지 배경: 이러한 경우 대화상자 크기는 내용에 따라 변경됩니다. NinePatch는 배경 이미지가 동일한 스타일로 일관되게 늘어나도록 합니다.

5. 확장 가능한 구분선: NinePatch를 사용하면 사용자는 여러 화면 크기 및 레이아웃 적응성을 제공하는 가로 또는 세로 확장 가능한 구분선을 디자인할 수 있습니다.

6. 사용자 정의 모양 배경: NinePatch는 코너가 둥글거나 그림자가 드리워진 등 다양한 특수 효과가 있는 사용자 정의 모양 배경을 구축하여 늘어나는 동안 이러한 효과가 변경되지 않도록 합니다.

NinePatch의 장점

• 확장성: 이것이 NinePatch의 가장 큰 장점입니다. 콘텐츠에 따라 자동으로 크기를 조정하므로 다양한 화면 크기 및 콘텐츠 길이에 대해 여러 리소스 세트를 유지할 필요가 없습니다.
• 왜곡 방지: 확장 가능한 영역의 좌표 제어로 이미지가 늘어나는 것을 방지합니다. 선명도 및 예쁨 속성은 대부분 유지됩니다.
• 효율성 증가: 리소스 파일 수가 줄어들어 개발 효율성이 향상됩니다.
• 유연한 배열: 다양한 레이아웃 요구 사항에 맞게 다양한 모양과 크기의 UI 요소를 쉽게 만들 수 있습니다.

NinePatch 작동 방식

NinePatch 이미지의 특징은 픽셀의 완전히 좁은 테두리입니다. 해당 테두리는 이미지 콘텐츠의 확장성과 영역을 정의합니다. 가장자리에 검은색 픽셀 선을 그리면 주변에서 어느 부분이 늘어날지, 수직으로 늘어날지, 수평으로 늘어날지를 알 수 있습니다.

특히 1픽셀 테두리는 네 부분으로 나뉩니다.

1. 왼쪽 테두리(수직 검은색 픽셀 선):

• 기능: 이미지의 수직 늘임을 제어합니다. 왼쪽 테두리의 수직 검은색 픽셀 선은 이미지의 어느 영역을 수직으로 늘릴 수 있는지 정의합니다.

• 예:

  • 검은색 픽셀 선 없음: 이미지의 높이가 고정되어 있으므로 수직으로 늘릴 수 없습니다. 이미지 자체보다 높은 컨테이너에 넣으려고 하면 그대로 유지되고 빈 영역이 있거나 잘릴 수 있습니다.

  • 검은색 픽셀 선 하나: 이미지를 수직으로 늘릴 수 있지만 검은색 픽셀 선으로 지정된 영역으로 제한됩니다. 예를 들어, 검은색 픽셀 선이 왼쪽 테두리 중간에 배치된 경우 위쪽 절반과 아래쪽 절반은 변경되지 않고 중간 부분만 수직으로 늘어날 수 있음을 의미합니다.

  • 여러 검은색 픽셀 선: 여러 수직 확장 영역으로 정의할 수 있습니다. 예를 들어, 왼쪽 테두리에 두 개의 검은색 픽셀 선이 있으면 이미지가 가운데 늘어나는 부분을 포함하여 세 부분으로 나뉘며 위쪽과 아래쪽 부분은 변경되지 않은 상태로 유지됩니다.

2. 위쪽 테두리: (물 수평 검은색 픽셀 선):

• 기능: 이미지의 수평 늘임을 제어합니다. 위쪽 테두리의 수평 검은색 픽셀 선은 이미지의 확장 가능한 부분을 가로 방향으로 정의합니다.

• 예:

  • 검은색 픽셀 선 없음: 이미지 너비가 고정되어 있고 수평으로 늘어나지 않습니다. 왼쪽 테두리에 검은색 픽셀 선이 없는 경우와 마찬가지로 이미지는 그대로 유지되지만 빈 영역이 있거나 잘릴 수 있습니다.

  • 검은색 픽셀 선 하나: 이미지를 수평으로 늘릴 수 있지만 검은색 픽셀 선으로 지정된 영역에서만 가능합니다. 예를 들어, 검은색 픽셀 선이 위쪽 경계 중간에 있는 경우 이미지의 왼쪽 절반은 변경되지 않으며 오른쪽 절반도 변경되지 않고 중간에서만 일부 늘어날 수 있습니다.

  • 여러 검은색 픽셀 선: 다양한 측면 확장 영역을 정의합니다. 다양한 수평 검은색 픽셀 선이 있는 왼쪽 테두리의 경우처럼 이미지를 여러 부분으로 나누고, 이렇게 표시된 모든 섹션을 수평으로 늘릴 수 있습니다.

3. 오른쪽 테두리(수직 검은색 픽셀 선):

• 기능: 콘텐츠 영역의 오른쪽 패딩을 정의합니다. 오른쪽 여백의 수직 검은색 픽셀 선은 이미지 콘텐츠 영역의 오른쪽 경계를 나타냅니다. 늘어나는 동안 콘텐츠 영역의 오른쪽은 이 경계에 유지됩니다.

• 예:

  • 검은색 픽셀 선 없음: 콘텐츠 영역이 이미지의 오른쪽 여백까지 확장되어 콘텐츠가 늘어날 때 유연하지 않으므로 이미지 콘텐츠가 오른쪽 가장자리까지 확장됩니다.

  • 검은색 픽셀 선 하나: 콘텐츠 영역의 오른쪽 가장자리는 검은색 픽셀 선의 위치에 따라 결정됩니다. 늘어날 때 콘텐츠 영역의 오른쪽은 검은색 픽셀 선에 고정되고 오른쪽의 공간이 늘어납니다.

4. 아래쪽 경계(수평 검은색 픽셀 선):

• 기능: 콘텐츠가 제한되는 영역의 아래쪽 여백을 정의합니다. 아래쪽의 수평 검은색 픽셀 선은 이미지 콘텐츠 영역의 아래쪽 경계가 끝나는 위치를 정의합니다. 늘어날 때 콘텐츠 영역의 아래쪽이 해당 경계에 유지됩니다.

• 예:

  • 검은색 픽셀 선 없음: 콘텐츠 영역이 이미지의 아래쪽 가장자리까지 확장됩니다. 늘어날 때 이미지 콘텐츠 전체가 아래쪽 가장자리까지 늘어납니다.

  • 검은색 픽셀 선 하나: 콘텐츠 영역의 아래쪽 경계는 검은색 픽셀 선의 위치에서 파생됩니다. 늘어날 때 콘텐츠 영역의 아래쪽이 검은색 픽셀 선 수준에 유지되고 아래의 공백이 늘어납니다.

이러한 네 개의 테두리에 영리한 검은색 픽셀 선을 사용하면 프로그래머는 Nine Patch 이미지가 다양한 크기로 표시될 때 정확하게 제어할 수 있으며 콘텐츠 영역의 변형이나 손실 없이 그렇게 할 수 있습니다. 이러한 픽셀 선은 이미지의 실제 경계가 아닌 확장 가능한 영역의 정의 경계와 콘텐츠 영역이라는 점을 명심하세요. 검은색 픽셀 선이 없는 부분은 고정 크기의 구성 요소입니다.

참고 사항

• NinePatch 이미지는 .9.png로 끝나는 파일 이름으로 저장해야 합니다.
• 이미지가 스케일링 시 사라지지 않도록 하려면 확장 가능한 영역에 최소 2x2픽셀의 크기가 필요합니다.
• 확장 가능한 영역의 가장자리에 추가 안전 공간을 두면 스케일링 중에 발생하는 색상 변화를 없앨 수 있습니다.
• 다양한 크기에서 이미지가 올바르게 표시되도록 이미지의 확장 가능 영역과 콘텐츠 영역을 매우 철저히 확인하세요.
• 특히 애니메이션 인터페이스 또는 자주 변경되는 인터페이스에서 NinePatch 이미지를 과도하게 사용하지 마세요. 성능이 저하될 수 있습니다.

요약

NinePatch 이미지는 UI 디자인의 효율성을 높이고 Android 애플리케이션에서 사용자 경험을 개선하는 데 가장 강력한 도구입니다. 하지만 이는 개발자가 장점과 단점을 균형 있게 고려할 필요가 없다는 의미는 아니며, 이미지 유형 선택은 요구 사항에 따라 달라집니다. 예를 들어, NinePatch 이미지가 다양한 길이의 텍스트를 허용해야 하는 확장 가능한 배경 또는 UI 요소에 적합한 선택이더라도 일반 PNG 이미지는 정적 배경 이미지에 적합합니다. 단순성이 매력적입니다. NinePatch를 사용할 때는 다양한 장치와 화면 크기에서 탁월한 성능을 발휘할 수 있도록 디자인 및 테스트에 최대한의 주의를 기울여야 합니다.