안녕하세요, 화분입니다. 그간 여유가 생기지 않아 드디어 글을 쓰게 되었습니다. 기다려주신 분들이 계실지 모르겠지만··· 지금이라도 쓴 글이 테마를 제작하는데 도움이 되면 좋겠습니다. 그럼 바로 본론으로 들어갈게요.
*작성에 앞서 이 포스트는 맥북을 기준으로 작성되었음을 알립니다.
목차
1. 테마 제작 준비하기2. 이미지 준비하기3. 색상 변경하기4. 말풍선 변경하기5. 테마 완성하기
1. 테마 제작 준비하기
아이폰 테마는 안드로이드에 비해 오류가 적은 편입니다. 준비해야하는 이미지 파일이 더 많지만 사용하는 프로그램도 나름 가볍고 크게 복잡하지 않습니다.
먼저, 전 포스트에서 준비했던 아이폰 샘플 파일을 확인합니다. 2022년 1월 27일 기준 공식 홈페이지에서 'iOS 샘플 테마 다운로드'를 클릭하면 'iOS_ThemeGuide_210803.zip' 파일이 다운로드 됩니다. 이 압축 파일을 풀어서 나오는 폴더 안으로 들어가면 두 가지 파일을 확인할 수 있습니다. .ktheme 파일과 압축 파일입니다.
두 파일은 실은 같은 파일입니다. 왼쪽 파일을 '파일 이름 바꾸기'를 사용해 .zip을 붙여주면 오른쪽 파일이 되거든요. 파일 확장자 변경 경고 문구는 무시하고 바꿔주셔도 상관 없습니다. 어쨌든 최종적으로 카카오톡에 테마 파일을 적용하려면 왼쪽, .ktheme 확장자가 되어야합니다. 오른쪽 압축 파일을 풀어봅시다.
파일을 푼 폴더 내부 모습입니다. 저희는 이 폴더와 파일을 모두 수정할 예정입니다. 우선 왼쪽 Images 폴더를 수정합시다. 여기서 주의할 점은, 폴더 명과 파일 명은 무슨 일이 있어도 변경하면 안된다는 점입니다. 폴더 명이나 파일 명을 변경할 경우 이미 잘 짜여있는 테마의 코드가 이미지를 인식하지 못하고 테마에 오류가 생기게 됩니다.
2. 이미지 준비하기
이미지 폴더 내부입니다. 총 66개의 이미지로, 원하시는 테마를 구현하기 위해서는 모든 이미지를 변경해야합니다. 이미지 파일을 준비하시기 전 각 이미지 파일의 크기와 사용처를 확인하고 준비하시는 것이 나중에 수고로움을 줄일 수 있습니다. 각각 이미지 파일이 어디에 들어가는지는 공식 홈페이지의 '나만의 테마 만들기 다운로드'를 클릭 해 받은 가이드 pdf를 통해 확인할 수 있습니다. 가이드 파일을 확인하면서 간단히 설명하도록 하겠습니다.
아이폰은 안드로이드와 다르게 앱으로 설치되는 게 아니라, 테마 아이콘은 카카오톡 내부 테마 목록에서만 확인하실 수 있습니다. 말풍선의 경우 종류가 총 4가지인데, 이미지로 간단히 설명하겠습니다.
말풍선은 위의 이미지처럼 사용됩니다. ~send01과 ~receive01은 카톡을 처음 보냈을 때 뜨는 말풍선, 02가 붙는 파일은 연달아 카톡을 보냈을 때 뜨는 말풍선입니다. 말풍선이 어떻게 늘어나는지 설정하는 방법은 챕터4에서 설명하도록 하겠습니다. 나머지 이미지들도 확인 해봅시다.
친구 추가 버튼은 한국 카카오톡에서는 잘 사용되지 않는 것 같습니다. 항상 테마에 맞춰서 색상을 변경하긴 하는데 사용한 적은 없네요. 하단 바 배경 이미지의 경우 아이폰 기종에 따라 위아래로 심하게 늘어나는 경우가 있기 때문에 복잡한 디자인은 추천드리지 않습니다.
이미지 파일 명을 보시면 2x, 3x가 있는 것을 확인할 수 있습니다. 이는 아이폰 기종에 따라 화면 해상도가 달라 자동으로 선택되는 이미지 파일이기 때문에, 2x, 3x 파일은 '같은 이미지'를 '이미지 크기만 다르게' 바꾸셔야 합니다.
예를 들어 3x 파일의 크기가 가로 108 픽셀, 세로 45픽셀이라면 2x 파일의 크기는 3x 파일의 3분의 2인 가로 72 픽셀, 세로 30 픽셀으로 작업 하셔야합니다. 저는 보통 3x 파일 크기에 맞춰 작업 후 해당 파일의 이미지 비율을 변경해 적용하는 식으로 작업합니다.
하단 바에 있는 메뉴 아이콘 이미지들입니다. 현재(22년 2월 기준) 카카오톡은 5개의 메뉴를 사용하고 있고, 위 이미지에 제가 빨간 박스로 구분 해두었습니다. 이름이 다른 이미지들이 한 아이콘으로 사용되고 있는 이유는 구버전 카카오톡과 호환이 되도록 하는 이유 하나와 해외 카카오톡에 호환이 되도록 하기 위해서입니다. 예를 들어 Piccoma 이미지는 일본 카카오톡에서 설정 아이콘에 사용되는 것으로 알고 있습니다.
Selected가 붙은 이미지는 메뉴 아이콘을 선택했을 때 뜨는 이미지고, 안 붙은 이미지는 기본 아이콘 이미지로 사용됩니다.
빈 프로필 이미지는 친구가 프로필 이미지를 설정하지 않았을 때 뜨는 가장 기본적인 이미지입니다. 그 옆에 꽃모양 이미지는 비밀번호 키패드를 누를 때 그 순간에 눌렀다는 표시를 해주는 이미지인데, 기본적으로 반투명하게 설정 되어있습니다. 이 이미지는 아이폰에서만 설정 가능합니다.
이렇게 이미지를 전부 확인 해봤습니다. 이미지들이 테마에 어떻게 들어가는지는 공식 제작 가이드를 확인하거나, 이미지를 조금씩 바꾸면서 테마를 확인해보는 식으로 직접 해보시는 것을 추천드립니다. 실제로 해보는 것과 글만 읽어보는 것은 꽤 다릅니다. 이 이미지를 바꾸는 것이 아이폰 테마 제작의 80% 정도로 가장 오래걸리는 부분입니다. 다음에는 텍스트 색상을 바꾸는 방법을 서술하겠습니다.
3. 색상 변경하기
저번 포스트에서 코드를 수정할 수 있는 프로그램으로 안드로이드 스튜디오/비쥬얼 스튜디오를 추천한다고 했던 것 기억하시나요? 아이폰 테마는 둘 중 어느 것을 사용해도 상관 없습니다. 저는 안드로이드 스튜디오를 주로 사용하는데, 비쥬얼 스튜디오는 프로그램이 조금 무겁지만 색상코드 바로 옆에 색상을 미리 보여준다는 장점이 있습니다. 둘 다 써보시고 편하신 것으로 사용하면 될 것 같아요. 우선 저는 안드로이드 스튜디오로 설명하겠습니다.
안드로이드 스튜디오를 실행하고 작업 중인 폴더를 열면(Open Project) 이런 식으로 화면이 보여지게 됩니다. 저희는 여기서 KakaoTalkTheme.css 파일을 수정하게 됩니다. 중요한 점은 상단의 'ManifestStyle' 파트의 초록색 텍스트와 색상 코드만 변경 가능하다는 점입니다. 다른 부분을 건드리게 되면 테마가 정상적으로 작동하지 않게 됩니다. 텍스트를 수정할 때도 작은 따옴표(')를 지우지 않도록 조심 해주세요.
색상 파일도 천천히 뜯어보도록 합시다. 우선 ManifestStyle 파트입니다. 첫 번째 'Apeach' 부분은 테마 이름입니다. 따옴표 안을 수정하면 테마 이름을 바꿀 수 있습니다. 한글도 일본어도 사용 가능하지만 주의하실 점은 특수문자가 들어갈 경우 테마에 오류가 생기게 됩니다. '&' 같은 특수문자를 넣지 않도록 주의해주세요.
다음은 version 부분입니다. 해당 부분은 원래는 버전을 작성하지만 저 같은 경우는 테마 목록에서 제목과 함께 보인다는 점을 활용해 제 닉네임을 넣어두고 있습니다.
url 부분과 author name 부분은 실제로 카카오톡에 보이지는 않지만 테마 제작을 내가 했다! 라고 표현하는 부분이니 원하시는대로 변경하면 됩니다. 중요한 부분은 theme-id 부분입니다. 이 파트는 테마의 고유 이름표를 붙인다고 생각하시면 됩니다. 해당 id 부분이 동일할 경우 같은 테마로 인식 돼 테마 설치가 되지 않습니다. 따라서 다른 테마와 구분되는 텍스트로 변경하시는 것을 추천드립니다.
이 아래로는 색상 코드를 제외하고 수정하시면 안됩니다. 테마가 설치가 안될 경우 이 파일에서 작은 따옴표(')가 어딘가 지워졌을 가능성이 높습니다. 나머지 부분도 설명 해볼게요.
TabBarStyle-Main 파트는 이미지 파일을 설정하는 부분이니 스킵하셔도 됩니다. 나머지도 옆에 친절하게 설명이 잘 되어있기 때문에··· 간단히 설명하고 넘어가도록 하겠습니다.
HeaderStyle-Main 파트입니다. 이 부분은 가장 상단의 메뉴 이름 색상을 결정합니다. tab 부분은 채팅과 오픈채팅을 상단에 동시에 보이게 설정했을 경우 사용된다고 생각하시면 됩니다.
MainViewStyle-Primary 파트입니다. background-color의 경우 가장 위의 상태바 색상을 결정하기 때문에 배경 이미지에 맞게 변경하시면 됩니다. ios-text-color는 친구 이름과 채팅방 이름의 텍스트 색상을 결정하고, ios-description-text-color는 친구의 상태 메세지, ios-paragraph-text-color는 채팅방의 가장 최근 메세지 부분입니다. highlighted라고 적힌 부분은 클릭 시 보여지는 색상입니다.
ios-normal-background-color는 거의 사용하지 않는 부분입니다. 채팅방이나 친구의 개별 영역 부분인데, 이미지 배경을 보여주기 위해 불투명도를 0%로 해두기 때문입니다. 이는 ios-normal-background-alpha 부분이 0.0인 것에서 확인할 수 있습니다. 알파(alpha)값은 0.0부터 1.0까지 있고, 1.0이 100%로 원하시는 만큼 수정하시면 됩니다. ios-selected-background-color는 친구나 채팅방을 클릭할 때 클릭했다는 것을 보여주기 위해 색상이 약간 변하는 부분을 지정하는 것으로 배경 이미지와 어울리게 바꿔주시면 됩니다.
MainViewStyle-Secondary는 카카오톡 중에 배경 이미지가 들어가지 않는 부분의 색깔을 결정합니다. view 탭과 설정 탭 배경색을 설정하는 부분입니다. SectionTitleStyle-Main의 border-color는 친구 탭에 있는 선 색깔을 결정합니다. 배경 이미지에 따라 저는 알파 값을 1.0으로 해두는 경우가 많습니다. 이 파트에서 ios-text-color는 친구 탭의 '내 멀티프로필/생일인 친구/즐겨찾기' 부분의 색상을 결정합니다.
FeatureStyle-Primary는 이미지에서 설명했던 친구 추가 버튼에 사용되는 색상인데··· 역시나 한국 카카오톡에서는 쓰이는 걸 본 적이 없습니다.
다음은 채팅방 내부 파트입니다. BackgroundStyle-ChatRoom의 background-color는 상단의 상태 바 색상을 정하는 부분이니 배경 이미지와 어울리게 바꿔주시면 됩니다. InputBarStyle-Chat는 채팅방 내부 하단의 채팅을 치는 바 부분을 결정합니다. 텍스트가 나오는 하얀 바 부분은 변경할 수 없으니 참고 해주시면 됩니다.
말풍선 파트입니다. 파란색 숫자 부분도 모두 바꿔주어야 하는데 이는 뒤에 말풍선 챕터에서 설명하도록 할게요. Send 파트는 보내는 말풍선 부분, Receive 파트는 받는 말풍선 부분입니다.
비밀번호 페이지 파트입니다. BackgroundStyle-Passcode의 background-color는 앞서 말한 것과 마찬가지로 상단바의 색상을 결정합니다. LabelStyle-PasscodeTitle의 ios-text-color는 '비밀번호를 입력하세요' 부분의 색상을 변경합니다. PasscodeStyle 파트를 보시면 키패드의 배경 색상과 텍스트 색상을 변경할 수 있습니다. 키패드 부분은 이미지로 변경이 불가능합니다.
카카오톡 내 알림 메세지와 공유 메세지 파트입니다. 영어를 읽으면 바로 알 수 있으니 넘어가겠습니다.
하단 바 배경 색상 부분입니다. 예전에 잠깐 있었던 것 같은데 요즘은 사용되지 않는 것 같아요.
자, 이제··· 제일 복잡한 말풍선 설정 파트입니다. 거의 다 왔어요.
4. 말풍선 변경하기
다시 이 이미지를 봅시다. 숫자 옆 이미지 이름을 잘 보고 맞게 숫자를 변경해야 합니다. 처음 4줄(17px 17px 적힌 부분)은 말풍선의 어느 부분이 늘어나게 할 것인지 정하고, ios-title-edgeinsets와 ios-group-title-edgeinsets는 말풍선의 어느 부분에 텍스트가 들어가게 할 것인지 정하는 부분입니다. 예전 설명글에 사용했던 이미지를 들고 오겠습니다.
빨간 색 글씨로 표현된 부분은 늘어나는 부분입니다. 빨간 선이 겹치는 부분의 1px이 늘어나 말풍선을 구성하게 됩니다. 카카오톡을 사용할 때 말풍선이 텍스트 양에 따라 자유자재로 늘어나는 것이 이 부분으로 설정되는 겁니다. 복잡한 이미지가 있는 부분은 피해서 설정하시면 됩니다. 잘못 설정하면 말풍선이 이상하게 늘어나게 됩니다···. 3x가 붙은 이미지를 기준으로 빨간 선까지 거리가 왼쪽에서 60px, 위에서 60px 이라면 위의 17px 17px을 20px 20px로 바꾸면 됩니다. 3x니까 나누기 3! 숫자를 변경하다가 가장 오른쪽의 ';'를 지우지 않도록 주의해주세요. 지우면 테마에 오류가 납니다.
ios-title-edgeinsets와 ios-group-title-edgeinsets 설정이 좀 더 어려운 편입니다. css 파일에 보시면 친절하게 '/* top, left, bottom, right */'라고 적혀있습니다. 즉, 10px 17px 7px 11px는 각각 위, 왼쪽, 아래, 오른쪽을 설정하는 겁니다. 아래 이미지를 봅시다.
파란색 선이 그어진, 검은색 반투명한 박스가 들어간 영역이 텍스트가 들어가는 부분이 되는 겁니다. 화살표를 잘 보시면 위에서 30px, 왼쪽에서 33px(이미지에는 34로 되어있지만 3으로 나누기 위해 3의 배수로 잡아야합니다.), 아래서 18px, 오른쪽에서 18px 만큼 파란 선까지 거리가 있습니다. 이 경우 10px 17px 7px 11px를 10px 11px 6px 6px로 바꾸면 되는 겁니다. 3x 이미지를 기준으로 나누기 3! 2x 이미지를 기준으로 한다면 2로 나누면 되는 거예요. 이 설정으로는 감이 잘 안오기 때문에 카카오톡에 테마를 깔고 확인하고 조금씩 수정하고를 반복하는 방법 밖에 없습니다. 한 번에 성공하기 쉽지 않아요. 이렇게 4종류의 말풍선을 모두 설정하면··· 말풍선 설정이 끝납니다.
5. 테마 완성하기
제일 쉬운 부분입니다. 마지막이기도 하고요. 위의 이미지에 보이는 폴더와 파일을 다시 압축해 zip파일로 만들고, 확장자를 zip에서 ktheme으로 바꾸면 됩니다. 확장자 바꿀 때 뜨는 경고 메세지를 무시하고 변경한 다음에 해당 테마 파일을 카카오톡 내부에서 받으면 바로 적용이 됩니다. 저는 보통 구글 드라이브에 넣고 공유 링크를 보내 다운로드 받는 편입니다. 카카오톡 내부에 바로 파일을 보내도 다운로드 되는 것으로 알고 있어요. 테마를 설치해서 확인하고 수정하고 또 확인하고. 마음에 드실 때까지 계속 위의 과정을 반복해주시면 됩니다.
*. 마치며
오래 기다려주셨는데 도움이 되었으면 좋겠습니다. 일정이 바빠 이제야 겨우 아이폰 테마 만드는 법을 작성했는데, 안드로이드 테마 제작 방법도 빠르게 들고 올 수 있도록 노력할게요. 아무래도 안드로이드 테마 제작이 더··· 어렵습니다. 제작할 수 있는 환경을 구성하는 게 복잡해서요. 아마 그 환경 구성을 먼저 들고 오지 않을까 싶습니다. 즐거운 테마 제작이 되시길 바라며, 글이 도움이 되셨다면 후원도 해주시면 감사합니다. 소소하게 간식을 사먹는데 사용됩니다. 좋은 하루 보내시고 질문이 생기신다면 댓글이나 메세지로 부탁드려요. 감사합니다!
아래는 후원용으로 별다른 내용이 없습니다.
이어지는 내용이 궁금하세요? 포스트를 구매하고 이어지는 내용을 감상해보세요.
- 텍스트 8자 공백 제외
