카카오톡 3.0 테마 만들기 (2/2) - 제작과 실행하기

 카카오톡 3.0 업데이트와 함께 직접 제작한 테마를 적용 할 수 있게 되었습니다. 그래서 2단계로 분리하여 리뷰 작성하려고 합니다.

1. 카카오톡 3.0 테마 만들기 (1/2) - 개발환경 만들기
    http://thdev.net/118
2. 카카오톡 3.0 테마 만들기 (2/2) - 제작과 실행하기

카카오톡 테마 봇이라는 프로그램이 있더군요^^ 설명글이 있어 링크 걸도록 하겠습니다.

   http://azdesigntm.tistory.com/95  - Azdesign™님 블로그

카카오톡 3.0 업데이트 내역
  http://thdev.net/116

안드로이드 apk 추출 방법
  http://thdev.net/122

 카톡 테마 만들기 위한 환경 구성이 완료되었으니 이제 제작을 해보아야겠죠. 제작하는 방법을 설명할려고 합니다. 수정가능한 부분이 어떤 부분인지와 이미지 파일을 어떻게 만들어야 하는지 등입니다. 이지미 제작은 사실 홈페이지에 잘 나와있기에 따로 설명하진 않겠습니다. 이번 리뷰는 샘플 테마 적용에서 어떻게 수정하는지만 알아보겠습니다.

느낌표 해결하기
 아래와 같은 화면을 보실 수 있으실겁니다.(사실 오른쪽 화면은 아무것도 안보이고, 왼쪽의 리스트처럼 보이진 않습니다. 필요에 의해서 열어주셔야 합니다.)
 실행하시면 아래 빨간색 부분의 문제가 발생합니다. 그리고 Android 버전이 설치되어 있는 최신 버전(4.0.3 일수도 있고. 2.3.3 일수도 있습니다.) 으로 선택되어 있으실겁니다. 이 부분을 사용하시는 폰의 환경으로 변경하셔야 합니다. 그리고 빨간색 문제도 해결해야 하구요!

 상세히 확대해 보면 아래와 같이 확인이 됩니다. 빨간색 느낌표가 뜨실겁니다. 이유는 안드로이드 컴파일을 하기위해서는 src라는 폴더가 필요합니다.(소스코드가 들어있는 부분) 하지만 카톡 테마를 만들기 위해서는 필요치 않습니다. 그렇기에 아래처럼 빨간색 ! 표가 뜨게 됩니다. 이를 해결해줘야 합니다. 그리고 위에서 말했던 버전도 확인해야 하구요.

그전에 일단 안드로이드 폰의 OS 버전부터 확인해야 합니다.
 휴대폰의 메뉴 -> 휴대폰 정보 -> 버전정보를 확인할 수 있습니다.(휴대폰 제조사 마다 소프트웨어라는 메뉴를 하나더 만들어 사용하는 경우가 있습니다. 소프트웨어 버튼을 클릭하시면 확인 가능합니다.)
 저의 경우 아래처럼 4.0.3 으로 확인 됩니다. (만약 이 과정을 거치는게 귀찮으시다면 2.2버전으로 선택하셔도 됩니다.)

KakaoTalk_for_android_theme_space 폴더를 오른쪽 클릭하시면 아래와 같은 메뉴가 표시됩니다.
 이 중 Properties 를 클릭하시거나 폴더를 선택한후 Alt+Enter를 선택하셔도 됩니다.

가장 먼저 왼쪽의 메뉴 중 Java Build Path를 클릭합니다. 그리고 오른쪽 화면에서 Source를 클릭합니다.

 그러면 아래와 같이 x 표시 아이콘이 보이실겁니다. 위에서 말했듯이 이 프로젝트에서는 사용할 필요가 없습니다. 선택하시고 Remove를 클릭하시면 됩니다.
 만약 2개의 폴더(gen폴더) 모두 x 가 뜨신다고 해도 일단 src 폴더만 Remove 해주시기 바랍니다. 해당하는 Android 버전이 없기 때문에 생기는 문제일 수 있습니다. 카톡 테마는 기본 개발 버전으로 4.0.3 을 필요로 합니다.

그리고 OK 버튼을 클릭하시면 됩니다. 그런데 아직 설정이 끝나지 않았기에 왼쪽 Android를 클릭합니다. 그러면 적용할 것인지에 되한 창이 뜰겁니다. 꼭 Apply를 클릭 해주셔야 합니다. 

이제 Android 버전을 선택할 차례입니다.
저는 아래와 같이 Android 버전이 설치되어 있습니다. 2.2, 2.3.3, 3.1, 3.2, 4.0.3 이 설치되어 있습니다. 이 중 사용하시는 휴대폰의 버전을 선택하시거나 저처럼 2.3.3 을 클릭하시면 됩니다. 그리고 OK 버튼을 클릭하세요!

이제 1가지 문제점과 버전 선택 준비가 끝났습니다.

꼭 수정해야 할 부분을 확인하셔서 현재 다운 받은 프로젝트를 테스트 해보실 수도 있습니다.

(만약 위의 설정을 완료 한 후에도 에러가 난다면(gen 폴더 문제가 있었다면) 아래 과정을 거쳐주시면 됩니다. 역시 프로젝트 오른쪽 클릭 -> Android Tools -> Fix Project Properties 를 클릭해주시면 해결 되실 겁니다.)

우선 아래 과정을 진행하기 전에 알아야 할 파일 리스트 입니다. 왼쪽 메뉴라는 표현을 사용하고 있는데 모두 이 메뉴에 해당됩니다.

Android Manifest 수정
왼쪽의 메뉴 중 AndroidManafiest.xml 파일이 보이실 겁니다. 그러면 package 파일명을 변경 할 수 있습니다. (다른 부분은 수정하지 않으시는게 좋습니다.) com.kakao.talk.theme.space 이름을 고유하게 설정해야 합니다. 저같은 경우 net.thdev.theme.space로 정했습니다. 유니크한 이름은 hello 로는 정 할 수 없습니다. 아래처럼 . 을 꼭 입력하셔야 합니다. 대부분 자기의 도메인 주소 또는 가지고 싶은 도메인 주소 이름을 따고 마지막에 파일이름을 입력합니다.
 versionName 은 버그패치인 경우 . 뒷부분을 수정하시면 되고, 많은 변화가 있거나 새로운 버전일 경우에 . 앞 부분을 수정하면 됩니다. 그런데 간단히 만드실 거라면 수정이 불필요 합니다.

테마 이름 변경
 테마이름을 변경하셔야 합니다. 테마 이름은 /res/values 폴더에 있습니다. string.xml을 더블클릭하시면 아래와 같이 샘플테마(우주통신) 이 보입니다. 이 이름은 카카오톡 테마에 보여질 이름입니다. 저는 th우주통신 으로 변경하였습니다.

컬러 코드 변경
 아래와 같이 배경 color, 폰트 색상을 정할 수 있습니다. 현재 5개의 color가 만들어져 있습니다. 이경우 Red, Green, Blue 값을 변경 할 수 있습니다. 컬러 코드를 참고하여서 수정하시면 됩니다.(제작하신 UI 디자인의 색상에 마추어 하나하나 수정하시면 됩니다.)

color 폴더의 내용 변경
 color이라는 폴더를 열어보시면 각 아이템에 대한 색상을 수정 가능합니다. 위에서 정한 colors는 컬러코드를 의미하는 것입니다. 그렇기에 아래의 color를 수정해주어야 실제 테마에 적용 됩니다. (위에 있는 color code 값은 필요할 경우 추가할 수도 있습니다.)
 만약 colors의 값을 불러와서 사용해야 한다면 <item android:state_checked="true" android:color="@color/font_white"/> 이라고 입력하시면 됩니다. 

리소스 변경
색상코드 변경은 추후에 해야하는건데 설명을 먼저 해 드렸습니다.
이제 이미지 제작을 위한 리스트를 보여드리겠습니다. (카카오톡 테마에서 가지고 옴)
 이 파일들은 모두 PNG로 출력되어야 하며, 아래의 이름들로 구성되어야 합니다.
 /res/drawable-hdpi 폴더 아래에 아래 파일들이 존재합니다. 그리고 권장타입을 맞게 사용되어야 합니다.
 /res/drawable 폴더 아래의 내용은 .xml로 끝나는 8개의 파일입니다.
위의 2개 폴더의 내용은 하나라도 빠지게 되면 문제가 생길 수 있습니다. 카톡에 필요한 이미지 파일 들이기 때문이죠.
아래 권장 타입중 9-patch가 존재하는데 이는 9-patch를 사용해야 한다는 의미입니다. 9-patch는 작은 이미지를 해당 휴대폰의 사이즈에 맞게 확대해주는 기능을 가진 프로그램입니다.(꼭 이런건 아니지만 추후에 다시 9-patch 사용법을 올리도록 하겠습니다.)

실행하고 테마 적용하기
이제 실행을 통해서 휴대폰에 올려보도록 하겠습니다. 실행 하는 방법은 간단합니다.
프로젝트 명에서 오른쪽 마우스를 클릭하고 -> Run As -> Android Application을 클릭하시면 잠시후 휴대폰에 설치가 완료 됩니다. 기다리셔도 아무 반응이 없습니다. 모든 설치를 백그라운드로 하고, 실행 시켜야 할 프로그램이 없기 때문입니다.

 카카오톡을 실행시킵니다. 메뉴 중 더보기로 접근합니다. 설정 -> 테마 설정으로 이동합니다. 테마 설정을 접근하면 방금 실행한 테마가 보이게 됩니다. 테마 이름은 아까 위에서 정한 th우주테마 입니다.(카톡 기본 제공 테마) 적용을 클릭하시면

아래와 같이 새로운 테마 적용이 완료 되었습니다.

마무리
 만약 이 방법으로 만들기 힘드시다면 다른 분의 테마를 사용할 수 밖에 없습니다. 그리고 카톡 테마 홈페이지에 카톡 샘플 테마 3개가 존재합니다. 프로젝트 파일과 apk파일이 존재합니다. 단순히 apk파일을 설치만 하셔도 위의 동일한 테마가 적용됩니다. 이번에 작성한 리뷰는 쉽게 테마를 적용할 수 있을까 하여 설명한 글입니다. 개발 언어를 몰라도 충분히 수정 및 이미지 제작이 가능하다고 생각됩니다. 이를 통해서 많은 디자이너들이 좋은 테마 제작을 할 수 있을 것이라고 생각됩니다.

따라하시다가 잘 모르시는 부분이 있으시다면 댓글로 작성해주세요. 빠른 답변 드리겠습니다.