Top 5 나인 패치 The 114 Correct Answer

You are looking for information, articles, knowledge about the topic nail salons open on sunday near me 나인 패치 on Google, you do not find the information you need! Here are the best content compiled and compiled by the https://chewathai27.com/to team, along with other related topics such as: 나인 패치 제플린 나인패치, 나인패치 가이드, android 나인패치, 포토샵 나인패치, 안드로이드 나인패치 적용, 나인패치 사이트, 안드로이드 스튜디오 나인패치, 나인패치 이미지 만들기


[캠핑매장 리뷰] 캠핑 고수들은 어디서 쇼핑할까? | 나인패치 거의 모든 것 | 동계캠핑 준비
[캠핑매장 리뷰] 캠핑 고수들은 어디서 쇼핑할까? | 나인패치 거의 모든 것 | 동계캠핑 준비


나인패치(Nine Patch) 이미지란?

  • Article author: ju-hy.tistory.com
  • Reviews from users: 13285 ⭐ Ratings
  • Top rated: 3.7 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about 나인패치(Nine Patch) 이미지란? 나인패치(Nine Patch) 이미지란? … 안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면 이미지뷰의 사이즈에 맞춰지게 된다. 하지만 원본 … …
  • Most searched keywords: Whether you are looking for 나인패치(Nine Patch) 이미지란? 나인패치(Nine Patch) 이미지란? … 안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면 이미지뷰의 사이즈에 맞춰지게 된다. 하지만 원본 … 나인패치(Nine Patch) 이미지란? 안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면 이미지뷰의 사이즈에 맞춰지게 된다. 하지만 원본 이미지와 뷰의 크기가 다르게 되면 이미지가 늘어나서 깨..
  • Table of Contents:
나인패치(Nine Patch) 이미지란?
나인패치(Nine Patch) 이미지란?

Read More

[Android] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용)

  • Article author: unyongkim.tistory.com
  • Reviews from users: 39781 ⭐ Ratings
  • Top rated: 4.6 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about [Android] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용) [Andro] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용). 프로그래밍/안드로이드. by 우뇽킴 2020. …
  • Most searched keywords: Whether you are looking for [Android] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용) [Andro] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용). 프로그래밍/안드로이드. by 우뇽킴 2020. 안녕하세요~ 우뇽킴입니다. 개발하면서, 모바일 앱 내에 이미지를 적용할 일들이 있습니다. 그런데, 모바일 기기 환경 상 기기의 종류도 여러가지이다보니 해상도도 기기마다 다를 수 밖에 없습니다. 기기의 해상..
  • Table of Contents:

고정 헤더 영역

메뉴 레이어

검색 레이어

상세 컨텐츠

1 안드로이드 스튜디오를 통한 나인패치(9-Patch) 이미지 생성

2 나인패치(9-Patch) 이미지 생성 사이트를 이용한 방법

태그

추가 정보

페이징

티스토리툴바

[Android] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용)
[Android] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용)

Read More

[바이널엑스] UX 디자이너들의 필수 용어 사전: 9 Patch (나인패치) : 네이버 블로그

  • Article author: m.blog.naver.com
  • Reviews from users: 34778 ⭐ Ratings
  • Top rated: 3.8 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about [바이널엑스] UX 디자이너들의 필수 용어 사전: 9 Patch (나인패치) : 네이버 블로그 안드로이드의 최적화된 이미지 방법 ‘나인패치’. 안드로이드는 제조사마다 모두 다른 해상도의 디바이스를 출시합니다. …
  • Most searched keywords: Whether you are looking for [바이널엑스] UX 디자이너들의 필수 용어 사전: 9 Patch (나인패치) : 네이버 블로그 안드로이드의 최적화된 이미지 방법 ‘나인패치’. 안드로이드는 제조사마다 모두 다른 해상도의 디바이스를 출시합니다.
  • Table of Contents:

카테고리 이동

VINYL EXPERIENCE

이 블로그 
UX 딕셔너리
 카테고리 글

카테고리

이 블로그 
UX 딕셔너리
 카테고리 글

[바이널엑스] UX 디자이너들의 필수 용어 사전: 9 Patch (나인패치) : 네이버 블로그
[바이널엑스] UX 디자이너들의 필수 용어 사전: 9 Patch (나인패치) : 네이버 블로그

Read More

안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기. (How to make an Android Nine-Patch Image Button) :: 개발자를 위한 레시피

  • Article author: recipes4dev.tistory.com
  • Reviews from users: 38727 ⭐ Ratings
  • Top rated: 3.4 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about 안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기. (How to make an Android Nine-Patch Image Button) :: 개발자를 위한 레시피 앞선 글의 설명을 통해, 나인 패치(9-Patch) 이미지에 대한 기본적인 개념을 충분히 이해했으리라 생각되니, 그럼, 이제 앱 만들기 예제를 통해, 나인 … …
  • Most searched keywords: Whether you are looking for 안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기. (How to make an Android Nine-Patch Image Button) :: 개발자를 위한 레시피 앞선 글의 설명을 통해, 나인 패치(9-Patch) 이미지에 대한 기본적인 개념을 충분히 이해했으리라 생각되니, 그럼, 이제 앱 만들기 예제를 통해, 나인 … 1. 나인 패치(9-Patch) 이미지. [안드로이드 나인 패치(9-Patch) 이미지 버튼]에서 나인 패치(9-Patch) 이미지의 개념과, 실제 그리기 과정에서 어떻게 동작하는지에 대해 설명하였습니다. 특히, 나인 패치(9-Patc..programming, develop, software, android, iOS, linux, java, kotlin, c, cpp, web, spring
  • Table of Contents:

안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기 (How to make an Android Nine-Patch Image Button)

티스토리툴바

안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기. (How to make an Android Nine-Patch Image Button) :: 개발자를 위한 레시피
안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기. (How to make an Android Nine-Patch Image Button) :: 개발자를 위한 레시피

Read More

[Android] 나인 패치(9-Patch) 사용법 – (이미지 늘려도 괜찮아짐) :: 히짱이네

  • Article author: hijjang2.tistory.com
  • Reviews from users: 15820 ⭐ Ratings
  • Top rated: 3.3 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about [Android] 나인 패치(9-Patch) 사용법 – (이미지 늘려도 괜찮아짐) :: 히짱이네 1. 나인 패치 파일 만드는거 아무대나 파일 만든다음에 복사해서 붙여 넣으면 됨 파일명이 ~~.9.png 됨 (안쓸 chat.png 삭제.) …
  • Most searched keywords: Whether you are looking for [Android] 나인 패치(9-Patch) 사용법 – (이미지 늘려도 괜찮아짐) :: 히짱이네 1. 나인 패치 파일 만드는거 아무대나 파일 만든다음에 복사해서 붙여 넣으면 됨 파일명이 ~~.9.png 됨 (안쓸 chat.png 삭제.) 1. 나인 패치 파일 만드는거 아무대나 파일 만든다음에 복사해서 붙여 넣으면 됨 파일명이 ~~.9.png 됨 (안쓸 chat.png 삭제.) 파일 눌러서 확인 하면 이렇게 생김 2. 이미지 전체적인 크기 조정하기 그리고 자..나만 알아보는 IT메모장
  • Table of Contents:
[Android] 나인 패치(9-Patch) 사용법 – (이미지 늘려도 괜찮아짐)

티스토리툴바

[Android] 나인 패치(9-Patch) 사용법 - (이미지 늘려도 괜찮아짐) :: 히짱이네
[Android] 나인 패치(9-Patch) 사용법 – (이미지 늘려도 괜찮아짐) :: 히짱이네

Read More

나인패치(Nine Patch) 이미지란?

  • Article author: sorrow16.tistory.com
  • Reviews from users: 47549 ⭐ Ratings
  • Top rated: 3.8 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about 나인패치(Nine Patch) 이미지란? 나인패치(Nine Patch) 이미지란? · 안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면 이미지뷰의 사이즈에 맞춰지게 된다. · 안드로이드 … …
  • Most searched keywords: Whether you are looking for 나인패치(Nine Patch) 이미지란? 나인패치(Nine Patch) 이미지란? · 안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면 이미지뷰의 사이즈에 맞춰지게 된다. · 안드로이드 … 나인패치(Nine Patch) 이미지란? ​ ​ 나인 패치는 안드로이드, iOS에서 이미지 리소스의 크기를 줄이기 위해서 꼭 필요한 절차입니다. 각 DP 별로 밀도와 크기가 모두 다르니 다른 이미지를 저장해주어야 하는데..혼자 놀고, 혼자 공부하고, 혼자 즐기는 곳
  • Table of Contents:
나인패치(Nine Patch) 이미지란?
나인패치(Nine Patch) 이미지란?

Read More

나인패치(9patch) 이해하기

  • Article author: azdesigntm.com
  • Reviews from users: 44429 ⭐ Ratings
  • Top rated: 4.8 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about 나인패치(9patch) 이해하기 나인패치 이미지 개념 이해하기. 테마관련 포스팅을 하다보니 이전에 포스팅한 데이타가 삭제가 되어있어 이어지지 않아서 9patch(나인패치) 이미지 … …
  • Most searched keywords: Whether you are looking for 나인패치(9patch) 이해하기 나인패치 이미지 개념 이해하기. 테마관련 포스팅을 하다보니 이전에 포스팅한 데이타가 삭제가 되어있어 이어지지 않아서 9patch(나인패치) 이미지 … 나인패치 이미지 개념 이해하기 테마관련 포스팅을 하다보니 이전에 포스팅한 데이타가 삭제가 되어있어 이어지지 않아서 9patch(나인패치) 이미지 개념에 대해 새롭게 포스팅 해보려고합니다. 1년전에 포스팅 할..
  • Table of Contents:

태그

‘포토샵 강좌 및 자료이미지 편집자료’ Related Articles

공지사항

최근 포스트

태그

검색

전체 방문자

티스토리툴바

나인패치(9patch) 이해하기
나인패치(9patch) 이해하기

Read More

안드로이드 9 patch (나인패치) 예제 만들어보기

  • Article author: soo0100.tistory.com
  • Reviews from users: 49226 ⭐ Ratings
  • Top rated: 4.6 ⭐
  • Lowest rated: 1 ⭐
  • Summary of article content: Articles about 안드로이드 9 patch (나인패치) 예제 만들어보기 안드로이드 스튜디오에서는 나인패치를 만들기 위한 툴을 제공합니다. 해당 툴을 열기 위해서는 drawable 폴더에 이미지를 넣고 이름을 파일명. 9.png로 … …
  • Most searched keywords: Whether you are looking for 안드로이드 9 patch (나인패치) 예제 만들어보기 안드로이드 스튜디오에서는 나인패치를 만들기 위한 툴을 제공합니다. 해당 툴을 열기 위해서는 drawable 폴더에 이미지를 넣고 이름을 파일명. 9.png로 … 안드로이드에서는 나인패치라는 것이 있습니다. 다양한 해상도에 맞추어서 이미지를 처리하기 위한 기술이라고 보면 좋겠습니다. 먼저 결과 화면을 보면서 이야기 해보죠. 나인패치라는 것을 적용하면 하기처럼 이..
  • Table of Contents:

태그

관련글

댓글2

공지사항

최근글

인기글

최근댓글

태그

티스토리툴바

안드로이드 9 patch (나인패치) 예제 만들어보기
안드로이드 9 patch (나인패치) 예제 만들어보기

Read More


See more articles in the same category here: https://chewathai27.com/to/blog.

나인패치(Nine Patch) 이미지란?

나인패치(Nine Patch) 이미지란?

안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면 이미지뷰의 사이즈에 맞춰지게 된다.

하지만 원본 이미지와 뷰의 크기가 다르게 되면 이미지가 늘어나서 깨지게 된다.

이를 방지하기 위해 이미지의 크기가 달라질 때 왜곡되는 부분과 왜곡되지 않는 부분을 나누어 처리할 수 있도록 만든 기능이 나인패치 이미지이다.

안드로이드 스튜디오에서 나인패치 이미지를 열어보면 위와 같은 UI를 볼 수 있다.

앞서 말했듯 왼쪽 이미지처럼 이미지를 9개의 구역으로 나누어 늘어나도 되는 부분과 아닌 부분을 정할 수 있다.

그 후 이미지의 크기를 바꾸면 오른쪽처럼 코너 부분이 왜곡되지 않고 변경되는 것을 볼 수 있다.

사용법

나인패치 이미지를 사용하기 위해서는 프로젝트에 이미지를 추가할 때 확장자 앞에 .9를 붙여주면 된다.

.9라는 글자가 붙어 있으면 안드로이드에서 자동으로 나인패치 이미지로 인식하게 된다.

그리고 이미지를 추가한 뒤 늘어나도 되는 가로 세로 범위를 지정해 준 뒤에

사용하려는 view에 background로 지정해주면 된다.

※ background 지정 시에는 android:background=”@drawable/button_image_02″ 와 같이 .9를 빼고 넣어준다.

Reference

[부스트코스]안드로이드 프로그래밍

https://www.edwith.org/boostcourse-android

[Android] 나인패치(9-Patch) 이미지 만드는 방법(안드로이드 스튜디오 또는 나인패치 생성 웹사이트 이용)

안녕하세요~ 우뇽킴입니다.

개발하면서, 모바일 앱 내에 이미지를 적용할 일들이 있습니다.

그런데, 모바일 기기 환경 상 기기의 종류도 여러가지이다보니 해상도도 기기마다 다를 수 밖에 없습니다.

기기의 해상도가 다르다보니 적용되는 이미지의 사이즈가 늘어나거나 깨져서 이미지가 이상하게 보이게 됩니다.

이러한 해결책으로 나온 것이 나인패치(9-Patch) 이미지 입니다.

나인패치(9-Patch) 이미지 는 컨텐츠가 보이는 영역과 이미지에서

상,하,좌,우 등 확대해도 되는 영역을 사전에 지정해 둔후, 파일명.9.png 형태로 저장하여 사용합니다.( 즉, 확장자 .9.png 로 저장함.)

그렇다면 나인패치는 어떻게 생성할까요? 총 2가지 방법이 있습니다.

1. 안드로이드 스튜디오를 통한 나인패치(9-Patch) 이미지 생성

우선 안드로이드 스튜디오 개발툴을 이용하여 나인패치 이미지를 생성하는 법을 알아보겠습니다.

나인패치 이미지를 적용할 이미지는 아래의 이미지를 사용해보도록 하겠습니다.

저는 맥(Mac) OS를 사용하므로, 안드로이드 스튜디오 환경도 맥(Mac)기준으로 글이 작성되었음을 알려드립니다.

( 맥(Mac)이나 윈도우(Windows)환경의 안드로이드 스튜디오 모두 방법은 동일합니다. )

나인패치 적용할 이미지

안드로이드 스튜디오 res > drawable 디렉토리에 내에서 나인패치 적용할 이미지가 있다면, ‘Create 9-Patch file…’을 클릭합니다.

그렇게 되면, 아래처럼 자동으로 .9.png 확장자가 생성됩니다.

이후 res > drawable 디렉토리에 새로 생성된 .9.png 확장자 파일을 클릭하게 되면, 아래의 사진처럼 우측에 이미지 파일이 열리면서 우측에 나인패치 이미지를 적용할 작업창이 나옵니다.

그럼 본격적으로 나인패치(9-Patch)이미지를 적용해보겠습니다.

아래의 사진처럼 마우스로 드래그하면서 이미지가 확대되면 확장되어도 될 영역을 사용자가 직접 지정해주면 됩니다.

우선, 좌측과 상단에 확장영역을 지정해줍니다.

그러면, 검정색 실선 이 표시되면서, 확장되는 영역이 표시됩니다.

우측과 하단영역도 동일하게 확장영역이 지정이 가능한데, 이는 컨텐츠 영역을 확대할지에 대하여 사용자가 영역을 지정합니다.

정리해서 말씀드리자면, 아래와 같습니다.

(1) 좌측/상단 부분 : 이미지가 확대되는 영역

(2) 우측/하단 부분 : 이미지안에 컨텐츠(내용)부분이 확대되는 영역

좌측/상단/우측/하단 확대 영역을 각각 지정하면, 실시간으로 우측의 Preview창에서 확장 영역 지정 시 나인패치 이미지 적용된 이미지를 볼 수 있습니다.

이때 작업 창에 하단에 ‘Show content’체크박스를 클릭해주면, 컨텐츠 확대영역 부분도 확인할 수 있습니다.

참고 : https://developer.android.com/studio/write/draw9patch?hl=ko

2. 나인패치(9-Patch) 이미지 생성 사이트를 이용한 방법

나인패치 이미지를 생성하는 사이트를 이용해 만드는 방법도 있습니다.

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

이 사이트에 접속하면 쉽게 안드로이드 스튜디오 개발 툴을 이용하는 방법보다 쉽게 나인패치 이미지를 생성할 수 있습니다.

좌측에 ‘Select image’를 클릭 후, 나인패치 이미지를 적용할 이미지를 선택합니다.

이미지를 선택하게 되면, 아래처럼 작업 창이 나오며, Edit Mode > Strech region 에서 좌측과 상단영역을 마우스 드래그를 통하여 지정할 수 있습니다.

Strech region에서 상단과 좌측의 확대영역을 지정하였다면, 다음으로 컨텐츠 영역은 ‘Content padding’에서 지정할 수 있습니다.

마찬가지로, 마우스 드래그를 통하여 영역을 지정해줍니다.

우측의 ‘Preview’에서 ‘with cotent’ 체크박스를 클릭하면, 안드로이드 스튜디오 개발툴에서 나인패치 이미지 생성 했을 때의 방법과 마찬가지로 컨텐츠 확장 영역을 확인할 수 있습니다.

작업이 완료되었으면, ‘Download ZIP’ 아이콘을 클릭하면, drawable 디렉토리 안에 해상도 별(mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi)로 구분된 파일을 한꺼번에 다운로드 받을 수 있습니다.

참고 : https://romannurik.github.io/AndroidAssetStudio/nine-patches.html

개발 시 나인패치(9-Patch) 이미지를 적용해야할 경우 참고하시길 바랍니다~

감사합니다.

– 우뇽킴

728×90

[바이널엑스] UX 디자이너들의 필수 용어 사전: 9 Patch (나인패치)

안드로이드의 최적화된 이미지 방법 ‘나인패치’

안드로이드는 제조사마다 모두 다른 해상도의 디바이스를 출시합니다.

iOS iPhone은 가로 해상도가 고정이기 때문에 고정된 길이의 이미지를 사용해도 문제가 없지만, 안드로이드는 고정된 이미지를 사용하게 된다면 다양한 해상도에 따라 강제로 늘어나게 될 경우 아래와 같이 이미지가 깨져 보입니다.

Button1: 강제로 늘린 이미지 / Button2: 나인패치를 적용한 이미지

<출처 : http://wptrafficanalyzer.in/blog/working-with-9-patch-nine-patch-images-in-android/>

‘나인패치’ 구조의 이해

나인패치를 적용한 이미지는 아무리 늘어나도 원본과 같은 이미지를 얻을 수 있습니다.

나인패치를 적용하지 않고, 각각의 해상도에 맞는 이미지를 다 만들어준다면 비효율적일 뿐만 아니라 한정된 시스템 공간에 고화질의 이미지를 무한대로 넣을 수 없습니다. 그리고 앱 용량이 늘어나게 되고 리소스 관리도 힘들게 됩니다. 한 번의 개발이 끝이 아니라 지속적인 유지보수가 필요한 환경에서는 더욱 힘들기 때문에 구글 안드로이드 플렛폼 개발자들은 ‘나인패치’의 개념을 도입하게 되었습니다.

– 나인패치 외곽의 검은 실선의 의미

이미지의 왼쪽과 상단 라인은 반복되는 영역(Stretchable area)을 표시하며 즉 늘어나는 영역과 늘어나지 않는 영역을 정의 합니다. 늘어날 수 있는 영역은 여러 개가 될 수 있습니다.

오른쪽과 하단라인은 컨텐츠가 들어가게 되는 공간(Padding box)을 지정합니다. 다시 말해 패딩 영역을 정의할 수 있습니다.

<출처: http://warmz.tistory.com/577>

나인패치 이미지는 가장자리에 1픽셀의 검은라인 (Stretchable area 나 Padding box 영역) 지정 부분에 “RGB 0,0,0” 값 외에 다른 Color 값이 들어갈 경우 9 Patch 표기 값이 아닌 Resource 영역으로 인식하기 때문에 에러가 나므로 꼭 지켜주어야 하며, .9.png 확장자로 저장되어야 일반 이미지로 처리가 되지 않고 나인패치로 인식할 수 있습니다.

– 나인패치 예제

나인패치는 버튼, 입력필드, 배경 등으로 다양하게 활용할 수 있습니다.

버튼의 경우 다양한 크기의 버튼을 나인패치로 대응이 가능하며, 어떠한 기기에서든 UI를 구성할 수 있습니다.

1. 입력필드

입력필드에서 이미지의 가로만 늘어나고 세로부분의 이미지는 고정되어야 하므로, 나인패치는 다음과 같이 적용됩니다.

나인패치 입력 필드 예제

<출처: http://bit.ly/1PYPxBr >

하단의 파란색 입력필드 이미지는 늘어나지 않아야 하기 때문에 왼쪽의 빈 영역에 검은 점을 그려준 것을 볼 수 있습니다. 때문에 두 줄의 경우에도 빈 영역만 늘어나고 이미지는 늘어나지 않은 것을 확인할 수 있습니다.

오른쪽에는 파란색 입력필드 이미지 위쪽으로 패딩 영역을 검은 라인으로 그려주었고, 하단에는 좌우에 충분히 여백을 주어 텍스트가 모두 꽉 차지 않고 입력필드 안쪽으로 보일 수 있게 표시해 주었습니다.

응용하여 카카오톡 테마도 원하는 이미지로 변경할 수 있습니다.

카카오톡 말풍선 응용

<출처: http://sproutlol.blog.me/220296839005>

2. 버튼

위에서 나인패치는 늘어날 수 있는 영역이 여러 개가 될 수 있다고 설명 드렸습니다.

늘어나는 부분을 동일한 비율로 표시해주면 이미지가 늘어날 때에 동일한 비율에 맞게 늘어나게 됩니다.

아래 그림을 보면 상단에 검은 라인이 1:1:1로 표시된 것처럼 이미지도 같은 비율로 늘어난 것을 볼 수 있습니다.

<출처: http://bit.ly/1PYPxBr>

3. 숨기는 영역

안드로이드는 4.3(젤리빈)버전부터 늘어나는 영역, 패딩 영역 이외 숨기고 싶은 영역을 지정할 수 있는 기능이 생겼습니다. 이 부분은 기존의 패딩 영역의 위치인 왼쪽과 하단 부분에 정의하여 붉은색(#FF0000)으로 표시해줍니다.

나인패치 숨기는 영역

<출처: http://bit.ly/1PYPxBr>

이렇게 이미지에 붉은색으로 숨기는 영역을 정의하게 되면 모바일에서 이미지가 그려질 때 이미지에 마스크를 씌운 것처럼 숨기는 영역이 적용되며 버튼의 상/하단과 위/아래 부분의 불필요한 영역이 없어집니다.

<출처: http://bit.ly/1PYPxBr>

4. 반복적인 패턴은 불가능!

나인패치 영역을 반복적인 패턴으로 보여주기 때문에 패치영역의 첫부분과 끝 부분이 같아야 자연스럽게 표현됩니다. 반복되는 패턴이 아닌 질감을 가지는 이미지일 경우 통이미지로 사용하는편이 좋습니다.

질감을 가진 이미지의 나인패치

<출처: http://bit.ly/1PYPxBr>

간편하게 직접 만들어보는 ‘나인패치’

– Draw 9 patch.com

직접 그래픽 툴을 이용하여 나인패치 이미지를 제작할 수도 있지만 별도의 다운로드 없이 온라인상에서 바로 나인패치 이미지를 확인하고 저장할 수 있는 링크를 소개해드리겠습니다.

나인패치를 적용할 png이미지를 삽입합니다.

그리고 Preview 영역에서 이미지를 확인하며 1,2,3,4번을 조절하면 Patch image 영역에서 검은색 라인을 그려줍니다.

오른쪽과 하단라인은 컨텐츠가 들어가게 되는 공간(Padding box)을 지정해준다고 말씀 드린 것처럼 오른쪽에 검은 라인을 꽉 채워주니 Preview에서 보이는 파란색 박스 안에 텍스트(컨텐츠)가 꽉 찬 여백이 없는 형태가 됩니다.

작업을 완료한 후에 마우스 우클릭하여 “\’이미지를 다른 이름으로 저장’하면 아래 이미지처럼 원하는 나인패치 png이미지를 저장하실 수 있습니다.

마치며

처음에는 어렵다고 느꼈던 나인패치 개념이 구조를 이해하고 나서는 모바일에 대응하여 가장 쉽고 효율적인 방법이라는 생각이 들었습니다. 나인패치는 UX/UI 디자이너로서 꼭 알고 있어야 할 개념일 뿐만 아니라, 앞으로 모바일 관련 작업 시에도 나인패치의 개발 구조를 이해하고 있다면 다양한 디바이스의 해상도를 완벽하게 지원 가능한 디자인으로 제작하여 더욱 높은 퀄리티의 결과물을 얻을 수 있을 것 같습니다.

참고자료 및 인용자료 출처

http://azdesigntm.com/423

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

http://bit.ly/1PYPxBr

So you have finished reading the 나인 패치 topic article, if you find this article useful, please share it. Thank you very much. See more: 제플린 나인패치, 나인패치 가이드, android 나인패치, 포토샵 나인패치, 안드로이드 나인패치 적용, 나인패치 사이트, 안드로이드 스튜디오 나인패치, 나인패치 이미지 만들기

Leave a Comment