안녕하세요~ K 입니다.
이번 글 주제는 카카오톡 테마 제작하기! 안드로이드ver 입니다.
저는 컴맹이에요ㅠㅠ 하시는 분들도 쉽게 만들수 있도록!
아주 자세하게 설명하겠습니다. ^-^ 누구나 할 수 있으니 부담없이 따라와주세요~
☆ 설치해야 할 프로그램 ☆
- JDK : 카카오톡 테마 어플이 Java기반이다. 따라서 JDK 설치 필요함
- Android Studio : apk파일 제작을 위해 필요함
- Visual Studio : xml파일 수정을 위해 필요함
=> 코드 편집을 위한 프로그램이기 때문에 다른것도 상관 없음(메모장도 가능)
~프로그램 설치 방법은 곧 업로드 예정~
https://k-mini-studio.tistory.com/4
JDK 설치 방법
Java 개발 환경을 만들기 위한 JDK( Java Development Kit ) 설치 방법 안내입니다. 0. 자신의 컴퓨터에 JDK가 설치되어 있는지 확인하기 Ctrl + R 단축키로 검색창을 연다 -> cmd 입력 -> Enter 또는 확인 -> 명..
k-mini-studio.tistory.com
1. 필요한 자료 다운로드
카카오톡 홈페이지 접속 -> 스크롤을 내리면 사용자 테마란이 있습니다.
https://www.kakaocorp.com/service/KakaoTalk
카카오톡
사람과 세상, 그 이상을 연결하는카카오톡
www.kakaocorp.com
여기에서 Android 테마 가이드, Android 샘플 테마 중 프로젝트 파일을 다운로드 합니다.
테마 가이드는 파일을 어떻게 수정하는지, 이게 어떤 부분의 파일인지 참고하는 용도,
프로젝트 파일은 우리가 작업할 앱 자료가 들어있는 파일입니다~
2. 프로젝트 파일의 압축 풀기
압축은 어떻게 풀어요? 하신다면 반디집을 다운받아서 풀어주시면 됩니다~
https://kr.bandisoft.com/bandizip/
반디집 공식 홈페이지 · ALZ, EGG, 7Z, RAR 지원 무료 압축 프로그램
반디집 (Windows) 반디집은 다양한 기능을 제공하고 빠르게 작동하는 압축 프로그램입니다. 무료로도 사용할 수 있으며, 유료 에디션은 다양한 고급 기능을 제공합니다. 주요 기능 지원 OS: Windows Vi
kr.bandisoft.com
다운받은 apeach-9.1.0-source.zip 파일 우클릭 -> 반디집으로 압축 풀기 클릭!
압축을 풀 폴더 지정(저는 kakao_Thema라는 폴더에 풀어줬습니다.) -> 확인 클릭!
압축을 풀면 아래와 같은 파일이 나옵니다 => 이것은 우리가 작업할 파일!
작업의 편의를 위해 원본을 복사한 후 그 파일의 이름을 테마의 이름으로 지정하는것이 좋습니다.
원본 파일 : apeach-9.1.0-source
작업할 파일 : keroppi-9.1.0-source
지금부터 제가 작업할 앱은 케로피 - 카카오톡 테마이며, keroppi-9.1.0-source 파일을 수정하여 제작할 것입니다.
각자 자신의 테마에 맞춰 이름을 설정해주세요~
* TIP : 파일 탐색기에서 보기 클릭 -> 오른쪽 끝에 파일 확장명 체크해주기!
파일 탐색기 단축키는 Windows키 + E
작업 시작 전 파일 확장자명이 보이도록 설정하는 센스 ^-^
만약 탐색기에서 보기란이 안보인다면 아래와 같이 설정해주시면 됩니다~
탐색기를 열고 위쪽의 파일 클릭 -> 폴더 및 검색 옵션 변경 클릭
폴더 옵션에서 보기 클릭 -> 밑으로 쭉 내려서 알려진 파일 형식의 파일 확장명 숨기기 클릭 해제!
-> 모든 폴더에 적용 -> 적용 -> 확인
3. 이미지 파일 수정하기
지금부터 어떤 파일이 어디에 있는지 즉, 파일 경로에 대해서는 따로 설명드리지 않을 겁니다.
왜냐하면 캡쳐 이미지에 모두 있기 때문에!!
따라서 캡쳐 이미지 맨 위의 경로를 보고 따라와주세요 ^-^
drawable-.. 폴더들은 테마에 적용하는 이미지들이 들어있는 폴더입니다 -> 전부 자신이 원하는 그림으로 수정해주기!
각자 편한 방법으로 그림 작업 후 파일만 바꿔치기 해주시면 됩니다. (포토샵, 그림 프로그램, 패드, 폰으로 수정... 등)
* 주의사항 : 이미지의 이름, 사이즈가 반드시 원본과 같아야 합니다.
다르면 사진 누락 또는 컴파일 에러 발생! 그림을 다시 그려야 될수도.. ㅠ,ㅠ
* TIP1 : xxhdpi의 이미지와 xhdpi의 이미지는 사이즈만 다른 같은 이미지이다,
따라서 xxhdpi의 이미지를 먼저 작업 후 사이즈만 줄여 xhdpi에 넣어주면 된다! ^-^
* TIP2 : 이 이미지가 정확히 어디에 적용되는건지 모르겠다~ 하시면 앞에서 다운받은 가이드를 참고해도 되지만
가장 확실하고 쉬운 방법이 있죠? 바로 카카오톡 테마 어피치를 직접 설치해서 참고하는 것입니다!
저도 이 방법으로 직접 비교해가며 수정했습니다~
+ 말풍선 수정 시 컴파일 에러가 날 수 있다!
이것은 나인패치(말풍선이 늘었다 줄었다 하는 것)를 적용해야 하기 때문이다.
그 과정이 귀찮으면 원본을 거의 건드리지 않는 선(채도 변경, 명도 변경 등..)에서 작업하면 나인패치 과정을 생략 가능!
아래는 예시입니다.
원본 파일과 카카오에서 제공한 가이드를 참고해 원하는대로 수정해주기!!
[ 이미지들은 모두 제가 작업한 이미지입니다. ]
여기서 잠깐!! 우리는 이미지 파일만 수정했지만,
이미지 사이즈나 이름 등 딱 1가지만 실수하더라도앱 설치파일(apk파일)을 제작할때 에러가 뜨게 됩니다!!
이 에러가 뜨게되면 오류 메세지로 어느 파일에 에러가 난것인지 알 수 있지만,
만약 에러가 여러 단계에 걸쳐서 쌓이고 쌓인다면 고치는데 무척 애를 먹게 됩니다. ㅠ,ㅠ
따라서 진행되는 단계마다 한번씩 자신의 앱을 설치해 실행해보는 것이 좋습니다 ^-^
즉, 여기에서 한번 앱을 직접 설치해 실행시켜보세요!!
자신의 앱 파일을 apk파일로 만들어서 휴대폰에 설치하는 방법은
카카오톡 테마 제작하기(안드로이드ver) - 앱 설치편을 참고해주세요~
4. 아이콘 파일 수정하기
이제 앱 아이콘을 수정하는 단계입니다.
위의 이미지 파일 수정과 같은 방법으로 수정해주기!
* TIP : 파일이 좀 많죠? 그러나 파일이 너무 많다고 당황할 필요 없습니다^-^
이미지 수정단계와 마찬가지로 모두 사이즈만 다른 파일이기 때문이죠!
따라서 작업 순서를 정해두는 것이 중요합니다!!
<시간 단축을 위한 작업 순서>
1. 사이즈가 가장 큰 위쪽 캡쳐 이미지 경로의 ic_launcher-web.png 파일을 먼저 작업한다.
( 작업 시 배경 레이이와 메인 그림 레이어는 분리해두는게 좋다 아래쪽 캡쳐 경로의 저장이 그렇게 되있기 때문이다! )
2. 이후 아래쪽 캡쳐 이미지 경로의 폴더들은 사이즈만 조절해주면 끝~
아래는 예시. 폴더 안의 내용들은 사이즈만 다른 같은 이미지 파일이기 때문에 캡쳐본은 한개만 준비했습니다.
+ 저도 전문가가 아니기때문에.. 이미지 파일 전부의 쓰임새는 잘 모르겠습니다 ㅠ,ㅠ 그러나 제작해본 결과에 따르면
실제 아이콘에 적용되는 이미지는mipmap-xxxhdpi 폴더 속의
ic_launcher_background.png와 ic_launcher_foreground.png 였습니다!
즉, 아래의 표시된 이미지 파일 2개가 겹쳐져서 사용됩니다.
5. 앱 관련 이름 설정
지금부터는 코드를 수정하는 단계입니다.
저는 Visual Studio 2019를 이용했으며, 다른 프로그램도 가능합니다.
+ 뭘 깔아야 하는지 모르겠다.. 어렵다.. 하시는 분들은 메모장도 가능하니깐 부담가지실 필요 전혀 없습니다~ ^-^
아래의 캡쳐 이미지대로 경로를 찾아간 후 build.gradle 더블 클릭!
아래 이미지는 Visual Studio 2019 를 사용해 파일을 연 모습입니다.
왼쪽 : 원본 파일 => 오른쪽 : 수정한 파일 처럼 자신의 테마 이름으로 수정해주세요~
수정한 후 Ctrl + S 로 저장해주기!! ^-^
저는 .theme.template => theme.keroppikakao 로 수정헸습니다.
즉, 제 테마의 이름이 keroppikakao 라는 뜻이겠죠?
* 주의사항 : 반드시 영어로만 수정해주셔야 합니다!!
프로그램이 한국어는 알아듣지 못해요~ 한국어로 설정 시 컴파일 에러 발생!!
만약 더블클릭 했는데 원하는 프로그램으로 안열려서 수정을 못하겠어요 ㅠ,ㅠ 하시는 분은 아래를 따라해주세요~
build.gradle 우클릭 -> 연결 프로그램 클릭!
원하는 프로그램이 바로 보이면 클릭 -> 확인 누르면 끝~
이렇게 해도 안뜬다! 하시면 밑에 추가 앱 클릭~
밑으로 내리다보면 원하는 프로그램이 있다! 프로그램 찾아서 클릭 -> 확인 해주면 끝~
6. 앱 이름 설정
이제 자신이 만든 앱 이름을 설정해줄 차례입니다.
각각의 폴더에는 모두 strings.xml 파일이 존재하는데,
우리는 이 3가지를 모두 수정해야 합니다.
이전 단계에서 코드를 수정 했던것과 같은 방법으로 수정하시면 됩니다.
수정 후 저장(Ctrl + S) 꼭 기억하기!!
아래는 수정 예시입니다.
저는 영어 이름은 Keroppi - KakaoTalk Theme로,
한국 이름은 케로피 - 카카오톡 테마라고 수정해주었습니다.
자신의 테마에 맞는 이름으로 수정하기~
+ values폴더와 values-ja폴더 안의 strings.xml 내용이 같으므로 캡쳐 이미지는 하나만 준비했습니다.
이렇게 수정을 다 해주었다면 나중에 앱을 다운받았을때 뜨는 이름이 values-ko 폴더 안의 strings.xml이 됩니다.
즉, 저의 경우에는 앱 이름이 케로피 - 카카오톡 테마가 되는겁니다~ ^-^
7. 카카오톡 테마의 색상 수정하기
드디어 마지막 단계입니다~ ^-^
우리는 지금까지 앱의 이름, 이미지 파일만 수정했죠? 따라서 글자 색상, 상태바 색상 등.. 색을 지정해주어야 합니다.
위의 캡쳐 이미지 속 경로에 가서 colors.xml 파일만 수정해주면 됩니다.
수정 방법은 앞에서 했던 코드 수정 방법들과 같습니다.
파일을 열어보면 엄청나게 긴 코드가 나올겁니다. 당황스럽겠죠? 그러나 걱정할 필요는 없습니다.
왜냐하면 우리가 수정할 부분은 딱 한부분 색상 부분이니까요~ ( 아래의 캡쳐 이미지 참고 ^-^)
캡쳐 이미지 속 빨간 네모박스로 표시된 저 형태의 부분들(html 색상 코드)만 모두 수정해 주시면 됩니다.
그러나 어떻게 해야할지 감이 안오시죠?
걱정하지 마세요~ 우리는 딱 2가지만 기억하면 되니까요 ^-^
<색상 파일 수정을 위해 기억해야 할 지식>
1. #664242 와 같은 숫자가 6개인 코드 : 일반 색상 코드
2. #26664242 와 같은 숫자가 8개인 코드 : 앞 2자리는 투명도 + 나머지 6자리는 일반 색상 코드
이 2가지를 기억하고, 맨 처음 카카오 홈페이지에서 다운받은 가이드를 보며 코드를 수정하면 됩니다.
아래의 링크는 제가 작업하면서 참고한 네이버 - 색상 코드표와 html 컬러 코드 보는 사이트 입니다.
저는 네이버에서는 원본 코드의 색상을 보는 용도로,
html 컬러 코드 보는 사이트는 원하는 색상을 찾아서 코드를 보는 용도로 사용했습니다.
각자 편한 방법으로, 편한 사이트를 찾아서 하시면 됩니다~
색상코드표 : 네이버 통합검색
'색상코드표'의 네이버 통합검색 결과입니다.
search.naver.com
https://html-color-codes.info/Korean/
HTML 컬러 코드
HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입
html-color-codes.info
여기까지 잘 따라오셨다면 이제 apk 파일을 제작하고 다운로드 하는 단계만 남았네요~
앞에서 테스트로 실행 해보신분은 여기서 이미 앱이 완성 되었을겁니다. 정말 고생하셨습니다~^-^
그리고, 앞에서 테스트로 설치를 안해보신 분들은 나머지 단계를
다음 글인 카카오톡 테마 제작하기(안드로이드ver) - 앱 설치편에서 알려드리도록 하겠습니다!!
이제 곧 완성입니다! 얼마 안남았으니 계속 따라와주세요~