Logo9 Patch Editor

Flutter에서 9-패치 이미지 사용하는 방법

2025년 1월 13일

목차

9-패치 이미지(Nine-patch image)는 특별한 PNG 이미지로, 개발자가 이미지를 늘릴 때 이미지의 특정 영역이 변형되지 않도록 유지하여 이미지 왜곡을 방지할 수 있습니다. 이는 버튼 배경, 진행률 표시줄 등과 같이 크기 조정이 가능한 UI 요소를 만들 때 매우 유용합니다. Flutter 자체는 9-패치 이미지의 기본 형식을 직접 지원하지 않지만, 몇 가지 기술을 사용하여 유사한 효과를 낼 수 있습니다.

9 Patch Editor를 사용하여 9-패치 이미지 만들기

먼저 PNG 이미지를 준비해야 합니다. 그런 다음 9 Patch Editor 도구를 사용하여 9-패치 이미지를 만듭니다. 이 도구를 사용하면 이미지의 늘릴 수 있는 영역과 내용 영역을 지정할 수 있습니다. 구체적인 작업 단계는 다음과 같습니다.

  1. 9 Patch Editor 웹사이트로 이동합니다.
  2. PNG 이미지를 업로드합니다.
  3. 도구에서 제공하는 편집기를 사용하여 이미지의 늘릴 수 있는 영역을 선택합니다(이미지의 왼쪽 가장자리와 위쪽 가장자리를 드래그).
  4. 이미지의 내용 영역을 선택합니다(이미지의 오른쪽 가장자리와 아래쪽 가장자리를 드래그, 이 영역은 늘릴 때 변하지 않음).
  5. 생성된 9-패치 이미지를 다운로드합니다(자신의 계획에 따라 다른 이미지를 다운로드).

Flutter에서 9-패치 이미지 사용하기

Flutter에는 9-패치 이미지를 직접 로드하는 메커니즘이 없습니다. 타사 라이브러리를 사용하거나 Flutter 내장 Image.centerSlice 속성을 사용하여 9-패치 이미지 효과를 시뮬레이션해야 합니다.

방법 1: 타사 라이브러리 사용

현재 Flutter의 일부 타사 라이브러리를 사용하면 9-패치 이미지를 로드하고 렌더링할 수 있습니다. 예를 들어 ninepatch_image 및 nine_patch가 있습니다.

ninepatch_image 라이브러리 사용

pubspec.yaml 파일에 의존성을 추가해야 합니다.

dependencies:
  ninepatch_image: ^0.0.4

PNG 이미지를 Flutter 프로젝트의 assets 폴더에 넣고 pubspec.yaml 파일에서 선언합니다.

flutter:
  assets:
    - assets/my_image.9.png

그런 다음 NinePatchImage 위젯을 사용하여 9-패치 이미지를 표시할 수 있습니다.

NinePatchImage(
  imageProvider: AssetImage("assets/my_image.9.png"),
  child: Text( "Lorem Ipsum is simply dummy text of the printing "))

자세한 사용 방법은 ninepatch_image 문서를 참조하십시오.

nine_patch 라이브러리 사용

pubspec.yaml 파일에 의존성을 추가해야 합니다.

dependencies:
  nine_patch: ^1.0.0

assets 폴더에 9-패치 이미지 정보를 저장하는 JSON 파일을 만들고 원본 이미지를 assets 폴더에 넣어야 합니다.

assets/TextBox_Side.9.jsonassets/2.0x/TextBox_Side.png
(1픽셀 테두리 제외)
{
  "stretch": {
    "x": 118,
    "y": 40,
    "width": 121,
    "height": 60
  },
  "contents": {
    "x": 19,
    "y": 18,
    "width": 248,
    "height": 101
  },
  "dimensions": {
    "x": 285,
    "y": 167
  },
  "name": "TextBox_Side.png",
  "scale": 2
}

Example nine-patch PNG file named TextBox_Side.png

stretch는 이미지의 늘릴 수 있는 영역이고, contents는 이미지의 내용 영역이고, dimensions는 이미지의 크기입니다. 9 Patch Editor 도구에서 이 정보를 보거나 nine_patcher 도구를 사용하여 이 정보를 생성할 수 있습니다.

그런 다음 NinePatchImage 위젯을 사용하여 9-패치 이미지를 표시할 수 있습니다.

import 'package:nine_patch/nine_patch.dart';

...

// 새 NinePatchImage 위젯 만들기
NinePatchImage.fromAssetMetadata(
    name: "my_image.9.json",
)

assets/my_image.9.json을 자신의 9-패치 이미지 JSON 파일 경로로 바꿔야 합니다.

자세한 사용 방법은 nine_patch 문서를 참조하십시오.

방법 2: Image.centerSlice 사용

타사 라이브러리를 사용하고 싶지 않은 경우, Flutter 내장 Image.centerSlice 속성을 사용하여 9-패치 이미지 효과를 시뮬레이션할 수 있습니다. 이미지의 늘릴 수 있는 영역을 수동으로 지정해야 합니다.

Image.asset(
  'assets/my_image.png',
  width: 200,
  height: 100,
  centerSlice: Rect.fromLTWH(20, 20, 160, 60), // 늘릴 수 있는 영역을 수동으로 지정
),

주의: 이미지는 원본 이미지 또는 컴파일된 이미지를 사용해야 합니다.

이미지에 따라 centerSlice 속성의 값을 수동으로 조정해야 합니다. 9 Patch Editor 도구에서 이 정보를 볼 수 있습니다.

요약

Flutter는 9-패치 이미지를 직접 지원하지 않지만, 타사 라이브러리 또는 Image.centerSlice 속성을 사용하여 유사한 효과를 낼 수 있습니다. ninepatch_image 라이브러리를 사용하는 것이 더 간단하기 때문에 권장합니다. 더 유연하고 강력한 기능이 필요한 경우 nine_patch를 사용하는 것을 고려할 수 있습니다. 타사 라이브러리를 도입하고 싶지 않다면 Image.centerSlice 메서드를 사용할 수 있지만 기능이 제한적이며 늘릴 수 있는 영역을 수동으로 지정해야 합니다. 어떤 방법을 선택할지는 구체적인 요구 사항과 프로젝트 복잡도에 달려 있습니다.

iOS 및 macOS에서 NinePatch 이미지 사용 방법