본문 바로가기

공부/tip

[나인패치] 앱 제작 시 디자이너에게 유용한 나인패치

728x90
반응형

 

 

 

앱 제작 시 수많은 디바이스 별로 이미지를 슬라이스 해줘야 하는데요.
이때 유용한 것이 바로 나인패치 입니다.

 

예를 들어 아이폰의 문자 기능 중에 말풍선 같은 경우에 가로사이즈가 안에 들어가는 텍스트에 따라서
유동적으로 움직여야 합니다. 이럴 때 나인패치를 사용하게 되는데요.

 

밑에 이미지를 보면서 설명드리겠습니다.

 

 

 

1번의 배경이 투명한 이미지를 등록한다고 했을 때 가로 사이즈가 늘어나면 2번 이미지처럼 늘어나게 됩니다.
이때 3번 이미지처럼 보기 좋게 늘어나도록 고안된 것이 바로 나인 패치 도구라고 할 수 있습니다.

 

이때 참고하셔야 할 것이 나인패치로 저장된 파일명은 꼭 "파일명.0.png "여야 합니다.

 

 

나인패치 툴로 조작하는 것도 좋지만 간단하게 웹에서 변환 가능한 방법이 있어서 소개해 드릴까 합니다.
(위 내용은 김민수 님의 블로그를 통해서 알게 됐습니다. kmshack.kr)

 

먼저 원하는 디자인의 이미지를 png로 저장합니다.


그리고 아래 사이트에 접속합니다.

http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

 

 

그럼 위 화면처럼 두꺼운 십자가 모양의 모양이 나타납니다. 이 부분을 조절하시면 되는데요.
그 십자가 부분이 유동적으로 움직이는 부분이라고 생각하시면 됩니다.

 

 

 

조절이 끝나시면 download zip 버튼을 클릭해서 변환된 이미지들을 다운로드합니다.

 

 

 

728x90
반응형