[Android/UI] 나인패치(9-Patch) 이미지, 웹에서 1분 만에 만들기

안드로이드 앱을 개발하다 보면 버튼이나 말풍선처럼 콘텐츠 길이에 따라 크기가 변해야 하는 이미지를 다룰 때가 많습니다. 이때 사용하는 것이 바로 .9.png, 즉 나인패치(9-Patch) 파일입니다.

안드로이드 스튜디오 내장 에디터도 훌륭하지만, 별도의 툴을 켜지 않고 브라우저에서 직관적으로 작업하고 싶을 때 가장 추천하는 사이트가 바로 **[Android Asset Studio - Nine-Patch Generator]**입니다.

오늘은 이 사이트를 활용해 나인패치 이미지를 만드는 방법을 상세히 정리해 보겠습니다.

---

1. 사이트 접속 및 이미지 업로드

먼저 아래 링크로 접속합니다. 🔗 Android Asset Studio - Nine-Patch Generator

사이트에 접속하면 상단의 'Source' 버튼을 누르거나, 준비한 .png 파일을 브라우저 화면으로 직접 드래그 앤 드롭하여 업로드할 수 있습니다.

 

2. 주요 기능 및 옵션 설정

이미지를 올렸다면, 왼쪽 설정 패널에서 다음 항목들을 조정합니다.

• Source Density: 원본 이미지의 밀도(mdpi, hdpi, xhdpi 등)를 선택합니다. 보통 고해상도로 작업했다면 xhdpi나 xxhdpi를 선택하면 됩니다.
• Padding: 콘텐츠가 들어갈 안쪽 여백을 설정합니다. 나중에 이미지 위의 텍스트가 그림자에 겹치지 않게 조절하는 핵심 단계입니다.
• Optical Bounds: (필요 시) 이미지의 시각적인 경계를 보정합니다.

3. 스트레치(Stretch) 영역 지정하기 (가장 중요!)

화면 중앙의 에디터에서 이미지 테두리에 있는 검은색 선을 마우스로 드래그하여 조정합니다.

• 상단/좌측 선: 이미지가 늘어날 영역을 지정합니다. (그림자가 있는 모서리는 제외하고 중간의 평평한 부분만 지정해야 깨지지 않습니다.)
• 하단/우측 선: 내부 콘텐츠(텍스트 등)가 위치할 영역(Padding)을 지정합니다.

4. 실시간 미리보기 (Preview)

이 사이트의 가장 큰 장점은 오른쪽 미리보기 화면입니다. 이미지가 가로로 길어질 때, 세로로 길어질 때, 혹은 둘 다 커질 때 그림자가 왜곡되지는 않는지 실시간으로 확인할 수 있습니다. 특히 버튼의 둥근 모서리나 은은한 그림자가 유지되는지 꼭 확인하세요!

5. 다운로드 및 프로젝트 적용

설정이 끝났다면 우측상단의 [Download ZIP] 버튼을 누릅니다.

• 다운로드된 압축 파일을 풀면 res/drawable-xhdpi 등 각 해상도 폴더에 맞춰 최적화된 .9.png 파일들이 들어있습니다.
• 이 폴더들을 그대로 안드로이드 프로젝트의 res 폴더에 복사해 넣기만 하면 끝입니다.