디자이너를 위한 나인 패치 (nine-patch) 가이드

나인 패치란?

나인 패치(9-Patch)란 확장 가능한 비트맵 이미지입니다. 효율적인 리소스 관리를 위하여 반복되는 이미지를 9개의 영역으로 나누어 영역에 대한 역할을 부여하는 것을 말합니다. 나인 패치 이미지는 1픽셀 테두리(#000000)가 포함된 png이미지로 확장자명은 9.png가 되어야 합니다. 나인 패치는 보통 콘텐츠의 배경 이미지로 쓰이며, 예를 들어 버튼의 경우 하나의 나인 패치를 사용하여 버튼의 사이즈가 달라져도, 버튼 안의 글자 수가 달라져도 동일한 스타일을 유지할 수 있게 해 줍니다. 

 

실제 프로젝트 진행 시 경우에 따라 안드로이드 개발자분들께 나인 패치 이미지를 요청받습니다.

ex) 버튼, 말풍선, 툴팁 등

 

---

나인 패치의 구조

아래 버튼을 예로 들어보겠습니다 

 

 

4개의 모서리 r값이 들어간 사각 버튼입니다

아래와 같이 9개의 영역으로 나눌 수 있고 각각의 속성이 있습니다

 

 

모서리 1️⃣, 3️⃣, 7️⃣, 9️⃣ 이 영역은 고정되어 있으며 원본 크기 그대로 적용됩니다

가로 2️⃣, 8️⃣ 이 영역은 필요한 경우 가로로 늘어납니다

세로 4️⃣, 6️⃣ 이 영역은 필요한 경우 세로로 늘어납니다

가운데 5️⃣ 이 영역은 수평 및 수직 방향으로 동일하게 늘어납니다

 

---

나인패치 이미지를 만드는 방법

나인 패치로 만들 이미지 상하좌우로 영역에 맞게 라인을 추가해줍니다

위와 왼쪽으로는 이미지가 늘어날 수 있는 영역을 1px 라인으로 잡아줍니다

오른쪽과 아래로는 콘텐츠가 들어갈 영역을 1px 라인으로 잡아줍니다

 

이해를 돕기 위해 이미지가 늘어날 수 있는 영역과 콘텐츠가 들어가는 영역을 구분하여 표시했습니다

 

최종적으로 나인 패치 이미지는 아래와 같이 사방에 1px 라인이 포함된 이미지가 됩니다
그리고 확장자명은 filename.9.png로 저장해야 합니다

 

나인 패치 이미지의 형태

 

개발 적용시 xxxhdpi 사이즈의 나인 패치 파일이 필요하므로

원본 이미지를 4배로 사이즈 업하여, 큰 이미지에 사방으로 1px라인을 추가합니다

이때 라인의 컬러는 #000000 이어야 하며, 확장자명은 .9.png가 될 수 있도록 주의하여야 합니다

 

실제 개발에 적용되는 나인패치 이미지 (xxxhdpi)

 

---

 

추가로 꼭지가 가운데에 있는 툴팁의 경우
늘어나는 영역에서 꼭지를 뺀 영역을 1px 라인으로 잡아줍니다

 

 

---

나인 패치를 제작할 수 있는 방법 및 도구

1. 그래픽 툴로 제작 후 확장자명을 name.9.png로 저장
2. 심플 나인 패치 제너레이터로 제작
3. 안드로이드 스튜디오에서 제작 

 

---

참고 사이트

 

안드로이드 스튜디오 

크기 조절 가능한 비트맵 만들기 9-patch

Create resizable bitmaps (9-Patch files) - Flobiz

 

나인 패치의 이해

안드로이드 나인 패치(9-Patch) 이미지 버튼

안드로이드 나인 패치(9-Patch) 이미지 버튼. (Android Nine-Patch Image Button)

 

제너레이터 사용법

영화 ‘앤트맨’을 통해 알아본 안드로이드 나인 패치

영화 ‘앤트맨’을 통해 알아 본 안드로이드 나인패치(Android 9 Patch)