나인패치로 자유롭게 표현하기 1
이번엔 모바일 디자인을 한 번이라도 해 본 사람이라면 많이 들어봤을 나인패치에 관한 글을 쓰려고 한다. 나인패치는 단순히 작은 이미지에서부터 BG처리까지 다양하게 사용할 수 있어서, 시리즈물로 게재해야 될 것 같다. 오늘은 나인패치에 관련한 첫 번째 아티클로서, 가장 기본적으로 활용되는 카운팅 뱃지에 대해 설명할 것이다. 카운팅 뱃지는 쇼핑 앱의 장바구니에서도 볼 수 있고, 채팅 앱에서 톡 개수가 노출될 때 등 쉽게 찾아볼 수 있다.
나인패치 예시 : instagram 앱인스타그램에서 나인패치 리소스가 적용되는 부분은 DM과 알림 영역이다.
위 화면에는 한 자리 숫자만 노출이 되어 있는데, 만약 2자리 3자리에서도 저런 모양을 유지하려면 리소스를 어떻게 전달해야 될까?
가장 흔히 보이는 카운팅 뱃지의 한 자리일 때의 이미지다.
나인패치는 가장 최소 크기일 때부터 최대로 늘어나는 부분을 잡아주면 되는데,
위의 이미지에서는 한 자리 수의 BG가 최소 사이즈일테니,
위에 적용된 카운트 BG 사이즈에 상하좌우 1px 여백을 두고 그 여백에 검정색 라인을 그려주면 된다.
포토샵으로 제작한 나인패치그럼 이제부터 나인패치 제작 방법에 대해 상세하게 설명하겠다.
나인패치는 상하좌우에 검정 라인으로 만들어진다. 이 4개의 라인이 모두 있어야 적용된다.
이제 각 라인별 특징을 알아보자.
우선 상(top)과 좌(left)의 라인은 이미지 리소르를 확장, 축소하는 영역이다. 위의 디자인처럼 곡선으로 이루어진 경우는 늘리는 범위를 정할때 신경을 많이 써줘야 한다. 쿨하게 라인을 길게 좍좍 그리다보면... 변태스터운 이미지가 보일 수도 있다!!! 안드로이드 스튜디오는 관대하지 않으니, 세심함을 가지고 작업해야 한다.
다음은 하(bottom)와 우(right)의 라인은 콘텐츠 영역이다. 콘텐츠 영역이라 함은, 텍스트나 리소스 노출 범위를 말한다. 아! 여기서 팁하나 말하면 나인패치 안에 > 요런 리소스도 적용 가능하다.
위에서 만들어진 나인패치를 안드로이드 스튜디오에서 적용해보았더니, 이런 가능성의 화면이 나타나는 것을 확인할 수 있었다.
그럼 이제 실전 돌입, 안에 텍스트와 숫자를 넣어서 예쁘게 나오는지 확인해보자!
나인패치 결과나인패치는 엄청난 집중력을 요하는 작업이긴 하지만, 그래도 디자인 한벌로 여러 변수를 해결할 수 있는 점에서 넘나 스마트한 리소스가 될 수 있다.
사실 요즘은 나인패치 제작 프로그램도 있어서(심지어 무료란다) 누구나 쉽고 간편하게 제작할 수 있다. 이런 글이 무의미할 정도로....; 하지만 나처럼 포토샵으로 작업하는 사람들이 있을까...싶어서 이 글을 작성한다.
FIN.
