티스토리 뷰

크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
본문

 카카오톡 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파일을 설치만 하셔도 위의 동일한 테마가 적용됩니다. 이번에 작성한 리뷰는 쉽게 테마를 적용할 수 있을까 하여 설명한 글입니다. 개발 언어를 몰라도 충분히 수정 및 이미지 제작이 가능하다고 생각됩니다. 이를 통해서 많은 디자이너들이 좋은 테마 제작을 할 수 있을 것이라고 생각됩니다.

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



개인 광고 영역


댓글
  • 이전 댓글 더보기
  • 프로필사진 ㅇㅅㅇ 그리고 R.java는 수정이 안되네요...? 원래그런가요?? ㅠㅠ 2012.04.30 01:21
  • 프로필사진 BlogIcon taehwan R.java는 자동으로 갱신대기에 수정하셔도 다시만들어집니다! 리소스에관한정보를가지게 됩니다 2012.04.30 08:56 신고
  • 프로필사진 ㅇㅅㅇ 친절하시네요 ㅎㅎ
    더여쭐께 있는디...
    카톡 홈피에 xml수정으로 바꿀수 잇는거 있잖아요 drawable 하고 color 어쩌구 써있는것들... 그것들은 다 어디서 바꾸죠? Colors.xml에는 별로 없던데 ㅠㅠ
    2012.05.02 05:13
  • 프로필사진 BlogIcon taehwan 모두다 따로 존재할 겁니다. color에는 불러와서 사용하는 코드들이 정의되어 있는거구요. 저도 자세하게 직접 열어보지 않아서 자세히는 설명 못드리겠네요. 2012.05.02 08:48 신고
  • 프로필사진 ㅇㅅㅇ 그럼 colors.xml말고 또 뭐가있죠? 전 못찾겟던데 ㅠㅠ 2012.05.03 03:25
  • 프로필사진 BlogIcon taehwan 저도 너무 많은 파일이 존재하고 직접 제작해보지 않아서 더이상 모르겠군요; 한번 진행하면서 작성한번해봐야겠네요! 죄송해요 원하는 답변을 못드린 듯 하네요. 2012.05.03 11:55 신고
  • 프로필사진 ㅇㅅㅇ 아니에요 ㅎㅎ
    근데 하다가 자꾸 에러가 나네요 ㅠㅠ 맨처음 에러처럼 파일에는 에러표시가 안뜨고 가장 상위 디렉토리(KakaoTalk....)에만 에러표시가 뜨네요 ㅠㅠ
    어떻게하죠? ㅠ
    2012.05.05 08:01
  • 프로필사진 ㅇㅅㅇ 그리고...AVD하고 SDK가 이클립스에선 실행이 되는데 직접 실행이 안되네요 ㅠㅠ 관리자 권한으로 실행해야 되는데...ㄷㄷ;; 2012.05.05 08:11
  • 프로필사진 BlogIcon taehwan avd, sdk 실행은 관리자 권한이랑 상관 없습니다. 이클립스에서 adt를 설치할때는 관리자 권환이 필요합니다. 그리고 안드로이드 버전별로 설치를 하셨는지요. 가장 상위 폴더가 오류가 난다면 폴더안에 android .... 라는 폴더가 존재하는지도 확인하세요. 위에 글 확인하셔서 android 버전 선택부분을 참고하세요. 목록안에 아무것도 없다면 설치하지 않으셔서 그렇습니다. 2012.05.05 09:26 신고
  • 프로필사진 비밀댓글입니다 2012.05.05 19:31
  • 프로필사진 BlogIcon taehwan 제가 설치한 카턱테마는 카톡테마 샘플 페이지로 가셔서 apk 다운 받으시면 됩니다. 그리고 페북 알림은 다되는게 아니더군요! 페북에서 폰마다 적용 중일 수 있습니다. 제꺼는 좀 일찍 적용이 된듯 하구요. 그리고 사용중인 페북 재 설치도 하나의 방법 일듯 하근여 2012.05.06 11:52 신고
  • 프로필사진 ㅇㅅㅇ 아마도 그게 제가 Android 2.2로 선택해서 그런거 같네요...
    2.3.3으로 하니깐 다시 되네요.
    그럼 프로요에서는 못하는건가요?ㄷㄷ;;
    2012.05.06 07:49
  • 프로필사진 BlogIcon taehwan 프로요에는 적용 안되는 패키지 일 겁니다! 버전별로 차이가 많다보니 그런거구요. 2.3.3 으로 진행 하시면 될듯 합니다^^ 2012.05.06 11:52 신고
  • 프로필사진 ㅇㅅㅇ 음... 제가 쓰고있는게 여행테마인데요
    그건 제친구(프로요)도 잘 된다고 하네요 ㅠㅠ
    SDK버젼은 4로 되있구...
    친구한테 주니깐 설치는 되는데 적용하고 카톡 실행이 안된다네요...ㅠㅠ
    2012.05.08 03:42
  • 프로필사진 BlogIcon taehwan 프로요의 문제인지도 모르겠군요! 코드를 읽어 들이는데 문제가 있을지도요. 2012.05.08 10:46 신고
  • 프로필사진 ㅇㅅㅇ ㄷㄷㄷ....
    자꾸 질문해서 죄솝합니다 ㅠㅠ
    apk를 줫더니... 다들 안되네요;; 진저 프로요 다요...
    테마 설정하고 카톡 재실행 되면 바로 강종되네요... 전 잘 되는데...ㅠㅠ
    apk링크 보내드릴까요? ㅠㅠ 이건 왜이런지 정말 모르겠네요 ㅠㅠ
    2012.05.09 05:37
  • 프로필사진 BlogIcon taehwan 가능하시면 소스코드 압축해서 보내주셔도 되구요. 이메일은 tistory@thdev.net 입니다. 2012.05.09 20:14 신고
  • 프로필사진 ᄋᄉᄋ workspace를 통채로 압축해서 보내달라는 말씀이신가요? 컴 키면 보내드리겟습니다 ᄒᄒ 2012.05.10 03:12
  • 프로필사진 BlogIcon taehwan 네 그렇게 해주세요^^ 2012.05.10 03:42 신고
  • 프로필사진 ㅇㅅㅇ 곧 보내드릴께요 ㅎ 근데 소스코드라 하면 workspace 전체 인가요? 2012.05.10 05:33
  • 프로필사진 BlogIcon taehwan 확인 후 메일 보내드렸습니다. 2012.05.10 10:25 신고
  • 프로필사진 으앜 멘붕 ㅋㅋ 와...
    오늘 아침 9시 40분 부터 블레이드&소울 이미지를 써서 카톡 테마 한 번 만들어보겠다고 지금까지 맨 땅에 헤딩 했더니
    드디어 결실을 맺는군요.

    덕분에 글 참고하고 자료 뒤적거려가며 확실히 익혔습니다.

    이 포스팅이 없었다면 오래 전에 포기하고 접었을지도 몰라요 ㅠㅠㅠㅠ

    apk 매니저 개 똥망! ㅠㅠㅠ(어째선지 제 컴퓨터에선 구동이...ㅠ)
    이클립스를 찬양하라!
    2012.06.20 18:05
  • 프로필사진 BlogIcon taehwan 도움이 되셨다니 좋네요!^^ 2012.06.21 04:46 신고
  • 프로필사진 안녕하세요 여쭤볼게 있습니다.
    제가 다른 사람이 만든 카톡 테마를 약간만 수정해서 사용하고 싶은데요
    그 걸 어디선가 apk 파일로 받았습니다.
    이클립스에서 apk파일을 ->project파일 형식으로 열 수 있는 방법이 있나요?
    그렇게만 되면 그 이후부턴 올려주신 글을 보고 할 수 있을 것 같은데요 ^^ 미리 답변 감사드립니다.
    2012.07.08 17:46
  • 프로필사진 BlogIcon taehwan 질문 하신 답변을 드리면 이클립스에는 apk파일을 열어서 수정을 할수가 없습니다. 예전에 카카오톡에서 정식으로 테마를 만들기 이전에 카카오톡의 apk을 열어서 이미지를 변경하고 설치했던적이 있습니다! 그 방법을 사용하시면 몇가지 정보를 수정이 가능합니다. 제가 올린 내용에는 그 부분이 포함되지 않았습니다. 네이버에서 카톡테마 수정 이라고 검색해보시면 제 방법말고 다른 방법들이 있습니다! 그 방법을 사용하시면 가능합니다! . 좋은 방법은 아닙니다. 2012.07.08 19:50 신고
  • 프로필사진 cmh 안녕하세요.
    이글 보고 따라했더니 정말 쉽게 바꿨습니다.
    그런대 하나안되는게..
    채팅방 배경은 왜 변경이안댈까요? 안댈까요?
    이미지는 제대로 넣었고 다른 시작 배경 변경도 완료했는대
    채팅방 배경만 적용이 안댑니다 ㅠㅠ
    2012.07.22 00:46
  • 프로필사진 BlogIcon taehwan 배경화면 같은경우에는 사용자가 임의로 변경이 가능합니다. 그래서 변경이 안되는것 같은데. 자세한걸 잘 모르겠군요;; 2012.07.22 13:36 신고
  • 프로필사진 plan23 안녕하세요
    강좌덕분에 처음이지만 힘들이지않고 카톡테마 완성했습니다.!
    그런데 마켓 업로드 오류가 뜹니다...
    내용은 "애플리케이션 아이콘이 올바르지 않습니다. 48X48 PNG를 이용하세요"이고
    비슷한 증상인 사람들 및 해결하신분들 찾아보니
    앱 이름에서 개행문자를 제거하였더니 해결됬다고 하시네요..

    카톡테마 강좌따라서 만드는 과정중에 따로 앱 이름을 설정한 기억이 없는데..
    혹시 앱 이름을 볼 수 있거나 수정하는방법이 있을까요? ㅠㅠ
    2012.08.14 21:50
  • 프로필사진 BlogIcon taehwan 제가 올려드린 강좌는 기존에 있던 테마를 수정하는 방법을 설명드린겁니다. 아이콘 부분은 잘 모르겠네요.
    일단 패키지 이름을 변경하라는 내용은 본문에 포함되어 있었습니다. 해당 부분의 패키지명은 변경을 하셔야 합니다. 근데 제가 추가하지 않는 내용이 있네요. 패키지 명을 변경하면 실제 폴더의 이름도 변경을 해야 하는건데....작성을 해두지 않았군요.
    말씀하신 개행 문자는 저도 잘 모르겠군요;;
    2012.08.14 23:13 신고
  • 프로필사진 ㅇㅅㅇ 패키지명은 바꿀수 없나요? 한번에 테마 두개를 제작할수 없어서요... 2012.08.23 09:47
  • 프로필사진 BlogIcon taehwan 패키지명은 본문에 설명해 둔 내용에 있습니다. 참고하셔서 변경하시면 됩니다.
    Android Manifest 수정 이라는 부분을 참고하시면 됩니다.
    그리고 변경하셔야 기존 카카오톡에세 제공하는 테마와 충돌나지 않습니다. 사용자가 테마를 설치하지 않았다면 문제가 없지만 설치했다면 문제가 생깁니다. 참고하셔서 변경하세요.
    2012.08.23 12:31 신고
  • 프로필사진 ㅇㅅㅇ Manafiest.java 를 말한 거였는데.. AndroidManifest.xml을 바꾸면 자동으로 바뀌네요 ㅎㅎ
    그리고 오타난것 같습니다! AndroidManifest.xml인데 Manifest.xml이라 쓰셧네요 ㅎ
    2012.08.26 23:28
  • 프로필사진 BlogIcon taehwan 오타 지적 감사드립니다^^;
    AndroidManifest.xml 이부분을 변경하면 자동으로 변경됩니다. ㅎㅎ 오타는 아니라 ;; 제가 작성할 때 그냥 이렇게 작성하면 되겠지하여;; 작성한것이라서 파일명을 저렇게 적었네요. 확인하고 수정하였습니다^^;
    2012.08.27 01:22 신고
  • 프로필사진 ㅠㅠ 질문하나 남길게요~ AndroidManifest랑 string에서 이름을 바꾸고 사진도 다 바꾼상태에서 실행을 시켰는데요 저는 왜 이름도 안바뀌고 샘플파일 원본 그대로 들어가는지 모르겠어서요ㅠ 제가 뭐 빼먹은건 없는 것 같은데 왜그런 걸까요?/ㅠㅠ 2012.11.12 20:19
  • 프로필사진 BlogIcon taehwan 제목의 경우는 화면에 보여지는 부분인 theme_title만 변경하셔도 이름은 다르게 떠야 합니다. 이 부분은 수정하신 string에 있구요.
    AndroidManifest.xml을 수정하는 것은 패키지 이름을 변경하는 것이라서 해당 부분은 UI적인 부분에 표시되지는 않습니다.
    어떤 다른 부분이 추가된건지 수정이 안된건지 확인이 안되는군요. 제가 작성해놓은 부분은 가장 쉽게 눈에 보이는 부분을 말씀드린거였습니다.
    string 부분을 한번 더 확인해보시는게 좋을 듯 합니다. 충분한 답변을 못드려 죄송합니다.
    2012.11.13 09:40 신고
  • 프로필사진 삐삐 저기 전우주통신규약테마 원본apk좀 받을수있을까요ㅠㅠㅠ어느날 사라져서요
    tmxkzld5877@naver.com
    부탁드립니다ㅠ
    2013.02.07 12:41
  • 프로필사진 BlogIcon taehwan 우주테마가 사라졌었군요. 저는 가지고있는 파일이 없네요.. 2013.02.07 19:54 신고
댓글쓰기 폼