카카오톡 테마 만들기

카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)

살구공작소 2022. 12. 2. 10:34




안드로이드용 카카오톡 테마 말풍선은 나인패치 방식을 사용합니다. 말풍선을 직접 만들어 보기에 앞서 나인패치에 대해서 가볍게 알아보고, 안드로이드 스튜디오에서 나인패치 이미지를 불러오고 수정하는법, 나인패치 오류가 날때의 이유를 알아보겠습니다.

 


 

이전글

 

카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)

 

카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세

지난 글 3편에서 압축을 풀어준 Android 나만의 카카오톡 테마 만들기 폴더를 안드로이드 스튜디오에서 프로젝트로 불러오는 법, 오류없는 카카오톡 테마 제작을 위한 초기 세팅을 하는 법과 테마

salgudiy.tistory.com

 


카카오톡 테마 만드는 법 모아보기

카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)

카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)

카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)

카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)

카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)

카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)

카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)

카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)

카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)

카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)

카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 14편 - apk 파일 만드는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 15편 <마지막편> - 안드로이드용 말풍선 응용형2 + 작업방식 (+ 자세하게, tmi)

아이폰 카톡 테마 쉽고 빨리 만들기 : 메인탭 버튼 편 (ft. 스크립트 공유)

아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유)

 


 

 

카카오톡 테마 만드는법

 

 

1. 나인패치 알아보기

 

나인패치는 콘텐츠를 담기 위해 크기가 자동으로 조정되는 이미지입니다. 확장자는 .9.png로 되어있습니다.

 

나인패치 이미지
나인패치 이미지 예시

 

예시 이미지를 보시면 이미지의 상하좌우 가에 검은색 선이 그려져 있습니다.

 

이렇게 이미지의 제일 가에 상하좌우로 1px 영역에 검은색(#000000)으로 기준선을 표시해준 이미지가 나인패치입니다.

 


1) 위쪽, 왼쪽 검은색 라인

 

나인패치 기준선

 

나인패치 말풍선

 

이미지의 위쪽과 왼쪽의 검은색 라인을 기준으로 담긴 콘텐츠의 양에 따라 이미지가 늘어납니다. 이것을늘어나는 기준선이라고 부를게요.

 

 


 

2) 아래, 오른쪽 검은색 라인

 

나인패치 텍스트 박스

 

나인패치 콘텐츠 영역

 

이미지의 아래와 오른쪽의 검은색 라인이 콘텐츠를 담을 영역의 기준이 됩니다. 이것을 콘텐츠 영역이나 텍스트 박스라고 부를게요.

 


 

2. 안드로이드 스튜디오에서 나인패치 이미지 열기

 

나인패치 이미지가 잘 작동하는지 확인 하려면 안드로이드 스튜디오에서 열어 보시면 알 수 있어요.

 

 

안드로이드 스튜디오

 

안드로이드 스튜디오에서 File > Open

 

안드로이드 스튜디오 나인패치 파일 열기

 

내가 확인하고 싶은 나인패치 이미지를 선택해주고 OK를 눌러줍니다.

 

 

또는 열고 싶은 이미지 파일을 안드로이드 스튜디오로 드래그 앤드 드롭하면 열립니다.

 

 

프로젝트가 열려있지 않은 안드로이드 스튜디오 초기 화면에서 Open을 눌러 나인패치 이미지를 선택하거나 파일탐색기에서 나인패치 이미지를 드래그 앤드 드롭해도 열립니다.

 

안드로이드 스튜디오 나인패치 수정

 

이렇게 나인패치 이미지가 작동하는지 확인하실 수 있습니다.

 


3. 안드로이드 스튜디오에서 나인패치 이미지 확인하기

 

 

Show content를 눌러보시면 콘텐츠 영역이 보라색으로 뜹니다.

 

 

Show patches를 누르면 늘어나는 기준선을 확인할 수 있습니다.

 

 

Show bad patches를 누르면 오류의 유무를 확인하실 수 있습니다.

오류가 없다면 아무것도 뜨지 않습니다.

 

나인패치 오류

 

 

반면에 어떤 오류가 있다면 빨간 테두리로 뜨게 됩니다.

이때는 기준선을 움직여서 오류가 없게 해주셔야 나중에 apk파일로 만들때 오류가 뜨지 않아요.

 

 


 

4. 안드로이드 스튜디오에서 나인패치 이미지 수정하기

 

나인패치 수정

 

 

마우스를 올렸을때 마우스 포인터가 화살표로 바뀌면

드래그해서 기준선을 옮겨 나인패치 이미지를 간단하게 수정하실 수 있습니다.

 

안드로이드 스튜디오에서는

정밀하게 수정하기 어렵고, 되돌리기가 없고, 움직이는대로 바로 자동저장되기때문에

저는 간단하게 수정할때만 사용하고

일러스트나 포토샵에서 기준선을 지정해주거나 수정해줍니다.

 


 

5. 나인패치 오류 원인 ★★★★★ (중요!)

 

나인패치 영역은 투명도 100% 또는 #000000의 색으로만 구성되어야만 합니다.

가끔 나인패치에 오류가 날때가 있는데 그때는 아래의 가능성을 확인하시고

그 부분을 수정해 주시면 됩니다. 투명도 100% 또는 #000000로 변경해주시면 됩니다.

 

오류가 날 수 있는 상황

 

1. 검은색 기준선이 #000000이 아닌 검은색 비스무리한 색으로 지정되어있을때

2. CMYK 모드로 작업했을때

(RGB 모드로 작업해야 #000000색이 색변화(검정 비스무리한색) 없이 그대로 저장됩니다.)

3. 투명한 영역에 100% 투명하지 않은 색이 들어 있을때 (투명도 99%짜리라던가..)

4. 검은색이 안티에일리어싱 되어있을때

 

 

나인패치 오류

 

 

다음에는 안드로이드용 말풍선 기본형을 만드는 방법에대해 알아볼게요!

 

 


 

다음글

 

카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)

 

카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)

어피치 카카오톡 테마의 말풍선을 살펴보면서 나인패치 방식을 이용해서 안드로이드용 카카오톡 테마 말풍선 기본형을 만들어보고, 나인패치 오류없이 말풍선을 내보내기 하는 법에 대해서 알

salgudiy.tistory.com

 

 


 

 

카카오톡 테마 만드는 법 모아보기

카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)

카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)

카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)

카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)

카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)

카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)

카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)

카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)

카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)

카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)

카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 14편 - apk 파일 만드는 법 (+ 자세하게, tmi)

카카오톡 테마 만드는 법 15편 <마지막편> - 안드로이드용 말풍선 응용형2 + 작업방식 (+ 자세하게, tmi)

아이폰 카톡 테마 쉽고 빨리 만들기 : 메인탭 버튼 편 (ft. 스크립트 공유)

아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유)