나만의카카오톡테마만들기 for ios 카카오톡사용자테마가이드 UPDATE 2017/03/21 creative by TALK Design Team/KAKAO
체크포인트 카카오톡 4.0 이상부터지원 KakaoTalk.css 파일명은변경불가 이미지는 3GS 와 4이상의레티나사이즈로 2가지제작 해당문서내표시는사이즈는 3GS 기준 최종테마파일은반드시.ktheme 확장자로저장
STEP 1 파일다운로드 [Kakao.com > 서비스 > 카카오톡 > 사용자테마 ] 에서원하시는카카오톡샘플테마를다운로드받으세요.
테마정보 ManifestStyle ( 기본정보 ) -kakaotalk-theme-id 테마 ID com.kakao.talk. 아이디명 -kakaotalk-theme-name -kakaotalk-theme-version -kakaotalk-theme-url -kakaotalk-author-name 테마이름테마버전테마 URL 테마제작자
프로필이미지 DefaultProfileStyle1-V4 ( 기본프로필이미지 ) -ios-profile-small-image -ios-profile-small-image-second -ios-profile-small-image-third 친구탭목록 40*40 고정 -ios-groupchat-small-image -ios-chat-small-image -ios-chat-small-image-second -ios-chat-small-image-third 채팅탭목록 50*50 고정 -ios-groupchat-chat-image -ios-profile-large-image -ios-profile-large-image-second -ios-profile-large-image-third 미니프로필 110*110 고정 -ios-groupchat-large-image -ios-friendgroup-image -ios-friendgroup-image-second -ios-friendgroup-image-third 친구그룹 50*50 고정 # 기본프로필은최대 3 개까지랜덤하게보여질수있으며, 그룹프로필이미지는 iphone 4 이하에서만보여진다.
네비게이션바 NavigationBarStyle1-V4 ( 상단타이틀배경 ) NavigationItemTitleStyle1-V4 ( 상단타이틀 / 버튼색상 ) background-color -ios-background-image -ios-landscape-background-image -ios-landscape-568h-background-image 배경색상 or 배경이미지 ( 배경이미지로제작시, 세로 1 타입 / 가로 2 타입필요 ) - 320*64 - 투명불가 - 가로 480*52 : 센터기준으로늘어남 - 투명불가 - 가로 568*52 : 센터기준으로늘어남 - 투명불가 - 가로 : 센터기준으로늘어남 타이틀 / 좌. 우버튼색상 좌. 우버튼컬러는타이틀컬러와 동일하며, 투명도만다르게 텍스트투명도 자동적용
새로운메시지배너 MessageNotificationBarBackgrou ndstyle1-v4 ( 배너 bg) background-color 배경색상컬러만가능 MessageNotificationBarNameLab elstyle1-v4 ( 이름 ) MessageNotificationBarMessageL abelstyle1-v4 ( 메시지 ) 이름색상이름투명도메시지색상메시지투명도 댓글 ( 새소식 ), 전달완료등알림배너 SimpleMessageNotificationBarBa ckgroundstyle1-v4 ( 배너 bg) background-color 배경색상 - 컬러만가능 - 새로운메시지배너와구분되는다른컬러로권장 SimpleMessageNotificationBarBa ckgroundstyle1-v4 ( 이름 ) 이름색상이름투명도 SimpleMessageNotificationBarBa ckgroundstyle1-v4 ( 메시지 ) 문구색상문구투명도
탭바 TabBarTitleStyle1-V4 ( 탭바메뉴 ) 메뉴명색상 메뉴명투명도 -ios-selected-text-color 탭선택시메뉴명색상 -ios-selected-text-alpha 탭선택시메뉴명투명도 TabBarItemStyle1-V4 ( 탭바 ) -ios-background-image -ios-landscape-background-image 배경이미지 ( 세로 1 타입 / 가로 2 타입필요 ) - 높이최소 49px 최대 66px 가능 - 최소높이이상에서만투명가능 -ios-landscape-568h-background-image -ios-friends-normal-icon-image -ios-friends-selected-icon-image 친구탭아이콘 -ios-chats-normal-icon-image -ios-chats-selected-icon-image 채팅탭아이콘 -ios-channel-normal-icon-image -ios-channel-selected-icon-image -ios-game-normal-icon-image -ios-game-selected-icon-image 채널탭아이콘 게임별탭아이콘 - 60*49 고정 - 고정사이즈내에서아이콘자체의사이즈는수정가능함 -ios-recommendees-normal-icon-image -ios-recommendees-selected-icon-image 친구추천탭아이콘 ( 글로벌 ) -ios-more-normal-icon-image -ios-more-selected-icon-image 더보기탭아이콘
친구탭 BackgroundStyle3-V4 ( 친구탭전체배경 ) SearchBarStyle1-V4 ( 친구검색창 ) TableViewCellStyle1-1-V4 ( 친구목록 ) -ios-background-image 또는 background-color 배경이미지 or 배경색상 320 *504 고정 background-color 배경컬러 컬러만가능 border-color 셀영역하단 Border 색상 border-alpha 셀영역하단 Border 색상 이름색상 이름투명도 -ios-highlight-text-color 선택된이름색상 -ios-highlight-text-alpha 선택된이름투명도 -ios-normal-background-color -ios-normal-background-alpha 이름셀배경색상 이름셀배경투명도 투명권장 -ios-selected-background-color 선택된셀색상 -ios-selected-background-alpha 선택된셀투명도
친구탭 TableViewCellStyle1-1-V4 ( 친구목록 ) -ios-newcomer-background-color -ios-newcomer-background-alpha -ios-status-message-background-image -ios-status-message-text-color -ios-status-message-text-alpha 새친구셀컬러새친구셀투명도상태메시지 bg 이미지상태메시지텍스트컬러상태메시지텍스트투명도 -ios-status-message-text-edgeinsets 상테메시지텍스트위치 TableViewSectionHeaderStyle1- V4 ( 공통 : 섹션타이틀 ) background-color 또는 -ios-background-image 타이틀배경이미지 or 배경컬러이미지적용시반투명가능 border-color 타이틀하단 Border 색상 border-alpha 타이틀하단 Border 투명도 텍스트색상 텍스트투명도 -ios-text-shadow-color 텍스트그림자색상 -ios-text-shadow-alpha 텍스트그림자투명도 FriendBubbleStyle1-V4 ( 친구추가시작하기버튼 ) -ios-background-image 버튼원형배경이미지 - 144 * 144 고정 ( 그림자영역포함 ) -ios-image 친구추가이미지 32 * 32 고정 -ios-close-image 닫기이미지 32 * 32 고정
채팅탭 BackgroundStyle4-V4 ( 채팅목록배경 ) TableViewCellStyle2-1-V4 ( 채팅목록셀영역 ) -ios-background-image 또는 background-color 배경이미지 or 배경색상 320 *504 고정 -border-color 셀영역하단 Border 색상 -border-alpha 셀영역하단 Border 투명도 이름색상 이름투명도 -ios-highlight-text-color 셀선택시이름색상 -ios-highlight-text-alpha 셀선택시이름투명도 -ios-time-text-color 시각텍스트색상 -ios-time-text-alpha 시각텍스트투명도 -ios-detail-text-color 마지막메세지텍스트색상 -ios-detail-text-alpha 마지막메세지텍스트투명도 -ios-normal-background-color -ios-normal-background-alpha 셀영역배경색상 셀영역배경색상투명도 투명권장 -ios-selected-background-color 셀선택시영역배경색상 -ios-selected-background-alpha 셀선택시영역배경색상투명도
채팅탭 ChatBubbleStyle1-V4 ( 채팅시작하기버튼 ) -ios-background-image 버튼원형배경이미지 - 144 * 144 고정 ( 그림자영역포함 ) -ios-image 채팅추가이미지 32 * 32 고정 -ios-close-image 닫기이미지 32 * 32 고정
대화상대선택 ( 시작하기 / 공유하기시 ) TableViewCellStyle4-2-V4 ( 대화상대선택 ) -border-color -border-alpha -ios-highlight-text-color -ios-highlight-text-alpha 셀영역하단 Border 색상셀영역하단 Border 투명도이름색상이름투명도셀선택시텍스트색상셀선택시텍스트투명도 -ios-normal-background-color -ios-normal-background-alpha -ios-selected-background-color -ios-selected-background-alpha 셀영역배경색상셀영역배경색상투명도셀선택시영역배경색상셀선택시영역배경색상투명도 투명권장 UserSelectBarCloseButtonStyle1- V4 ( 선택된대화상대 ) -ios-background-image 대화상대선택시 X 버튼 12 *12 사이즈, 디자인모두고정 ForwardBarStyleNormal-V4 ( 공유 / 전달시탭 ) ForwardBarStyleSelect-V4 ( 공유 / 전달시탭 ) background-color background-color 선택된대화상대이름색상 활성화 비활성화
친구찾기탭 BackgroundStyle6-V4 ( 친구찾기탭전체배경 ) TableViewCellStyle4-1-V4 ( 상단아이콘버튼배경 ) -ios-background-image 또는 background-color 배경이미지 or 배경색상 320 *504 고정 -ios-normal-background-color 배경색상 투명권장 -ios-normal-background-alpha 배경투명도 -ios-selected-background-color 선택된배경색상 -ios-selected-background-alpha 선택된배경투명도 border-color 구분선컬러 RecommendeesFriendsHeaderBut tonbariconstyle1-v4 ( 상단아이콘 ) -ios-idsearch-icon-image -ios-qrcode-icon-image -ios-shake-icon-image 아이디찾기아이콘 QR코드로찾기아이콘흔들어찾기아이콘 44*44 고정 -ios-tell-fiend-icon-image 알리기아이콘 ButtonStyle6-V4 ( 친구추가버튼 ) -ios-background-image 버튼배경이미지 20*31 고정 -ios-image 친구추가이미지 35*24 고정 텍스트색상 텍스트투명도
더보기탭 MoreBackgroundStyle1-V4 ( 더보기탭전체배경 ) MoreCellStyle1-V4 ( 격자배경영역 ) -ios-background-image 또는 background-color 배경이미지 or 배경색상 320 *504 고정 border-color 셀구분선색상 border-alpha 셀구분선투명도 ios-text-color 더보기메뉴명색상 ios-text-alpha 더보기메뉴명투명도 ios-normal-background-color ios-normal-background-alpha 셀배경색상 셀배경투명도 투명권장 ios-selected-background-color 선택셀배경색상 ios-selected-background-alpha 선택셀배경투명도
더보기탭 스타일명요소설명권장타입비고 MoreIconSetStyle1-V4 ( 더보기아이콘 ) -ios-notification-icon-image 새소식아이콘 35 * 35 / PNG 70 * 70 / PNG -ios-giftshop-icon-image 선물하기아이콘 신규 (5.7.0 버전이상 ) -ios-itemstore-icon-image -ios-plusfriend-icon-image -ios-page-icon-image -ios-gamecenter-icon-image -ios-kakaopay-icon-image -ios-kakaotv-icon-image 아이템스토어아이콘플러스친구아이콘페이지아이콘게임하기아이콘카카오페이아이콘카카오TV 아이콘 -ios-kakaostyle-icon-image -ios-hotdeal-icon-image 카카오스타일아이콘핫딜아이콘 40 * 40 / PNG 80 * 80 / PNG 5.1.0 버전이상 -ios-makers-icon-image 주문생산아이콘 5.4.0 버전이상 -ios-hairshop-icon-image 헤어샵예약아이콘 5.7.0 버전이상 -ios-mart-icon-image 장보기아이콘 5.9.7 버전이상 -ios-order-icon-image 주문하기아이콘 신규 6.1.5 버전이상 -ios-account-icon-image 카카오계정아이콘 ( 글로벌 ) -ios-bargain-icon-image 바게인아이콘 (only 일본 ) -ios-theme-icon-image 테마아이콘 ( 글로벌 ) 글로벌메뉴는필수사항아님.
더보기탭 > 새소식 MoreNotificationCellStyle1-V4 ( 새소식리스트 ) -ios-unread-background-color 안읽은소식배경색상 Version 5.7.0 or later -ios-unread-background-alpha 안읽은소식배경투명도 Version 5.7.0 or later
채팅방 BackgroundStyle5-V4 ( 채팅방전체배경 ) -ios-background-image 또는 background-color 배경이미지 or 배경색상 ChatMessageCellStyle1-V4 ( 내말풍선 ) -ios-background-image 말풍선배경이미지 - 320 *568 고정 - 상단네비영역까지배경이미지에포함 -ios-selected-background-image -ios-group-background-image -ios-group-selected-background-image -ios-selected-text-color -ios-time-color -ios-unread-color -ios-title-edgeinsets -ios-group-title-edgeinsets 선택된말풍선배경이미지연속한말풍선배경이미지선택된연속말풍선배경이미지내메시지텍스트색상내메시지텍스트투명도선택된내메시지색상내메시지보낸시각내메시지읽지않은사람숫자텍스트메시지위치값연속한텍스트메시지위치값 -ios-image-edgeinsets 오브젝트메시지위치값사진 / 스티콘등오브젝트메시지
채팅방 ChatMessageCellStyle2-V4 ( 상대방말풍선 ) -ios-background-image -ios-selected-background-image -ios-group-background-image -ios-group-selected-background-image -ios-selected-text-color -ios-time-color -ios-unread-color -ios-title-edgeinsets -ios-group-title-edgeinsets 말풍선배경이미지선택된말풍선배경이미지연속한말풍선배경이미지선택된연속말풍선배경이미지상대방메시지텍스트색상상대방메시지텍스트투명도선택된상대방메시지색상상대방메시지받은시각상대방메시지읽지않은사람숫자텍스트메시지위치값연속한텍스트메시지위치값 -ios-image-edgeinsets 오브젝트메시지위치값사진 / 스티콘등오브젝트메시지
채팅방 ChatInputBarStyle1-V4 ( 메시지입력창 ) -ios-background-image 세로모드배경이미지 320*49 고정 -ios-landscape-background-image -ios-landscape-568h-background-image 가로모드배경이미지 480*49 고정 568*49 고정 ChatInputBarSendButtonHighligh tedstyle1-v4 ( 전송버튼텍스트활성화상태 ) background-color 배경컬러컬러만가능 텍스트색상 텍스트투명도 ChatInputBarSendButtonDisabled Style1-V4 ( 전송버튼텍스트비활성화 ) background-color 배경컬러컬러만가능 텍스트색상 ChatInputBarSendButtonVoiceTal knormalstyle1-v4 ( 보이스톡아이콘활성화 ) ChatInputBarSendButtonVoiceTal kdisablestyle1-v4 ( 보이스톡아이콘비활성화 ) ChatInputBarSendButtonVoiceM essagenormalstyle1-v4 ( 음성메시지아이콘색상 ) ChatInputBarSendButtonBotGuid enormalstyle1-v4 ( 플러스친구봇아이콘색상 ) background-color background-color background-color background-color 텍스트투명도아이콘컬러아이콘컬러아이콘컬러아이콘컬러
채팅방 ChatInputBarKeyboardMenuButt onnormalstyle1-v4 (+ 버튼 ) ios-image 옵션메뉴펼침이미지 ChatInputBarCloseMenuButtonN ormalstyle1-v4 (X 버튼 ) ios-image 옵션닫기이미지 21*21 고정 ChatInputBarPlusFriendHomeButt onnormalstyle1-v4 ( 홈버튼 ) ios-image 플러스친구홈바로가기이미지
암호입력 PasscodeBackgroundStyle1-V4 ( 암호입력화면배경 ) -ios-background-image 또는 background-color 배경이미지 or 배경색상 - 320 *568 고정 - 상단네비영역까지배경이미지에포함 PasscodeTitleLabelStyle1-V4 ( 암호입력텍스트 ) 텍스트색상 텍스트투명도 -ios-text-shadow-color 텍스트그림자색상 -ios-text-shadow-alpha 텍스트그림자투명도 -ios-bullet-color 암호입력창블릿색상지정 -ios-bullet-first-image 암호입력시 Dot 이미지 1 -ios-bullet-second-image 암호입력시 Dot 이미지 2 -ios-bullet-third-image: 암호입력시 Dot 이미지 3 1 개의이미지로도가능하며입력순서별로다른이미지도가능 -ios-bullet-fourth-image 암호입력시 Dot 이미지 4
암호입력 PasscodeBulletAndKeypadStyle1- V4 ( 암호입력화면키패드 ) ios-keypad-background-color ios-keypad-normal-text-color 키패드색상 숫자텍스트색상 키패드이미지대신컬러로도가능 ios-keypad-highlight-text-color 선택시숫자텍스트색상 -ios-keypad-number0-normal-image ~ -ios-keypad-number9-normal-image Normal 상태시숫자 0~9 키패드 75*75 필수 -ios-keypad-back-normal-image Normal 상태시지우기키패드 -ios-keypad-cancel-normal-text-color Normal 상태시취소색상 -ios-keypad-cancel-normal-text-alpha Normal 상태시취소투명도 -ios-keypad-number0-highlight-image ~ -ios-keypad-number9-highlight-image Pressed 상태시숫자 0~9 키패드 75*75 필수 -ios-keypad-back-highlight-image Pressed 상태시지우기키패드 -ios-keypad-cancel-highlight-text-color Pressed 상태시취소색상 -ios-keypad-cancel-highlight-text-alpha Pressed 상태시취소투명도 # 키패드는이미지로제작하거나 ios7 기본암호입력포맷으로컬러만지정하여사용할수있다.
STEP 3 리소스수정 1) 테마명변경하기 KakaoTalk.css 파일의최상단에있는 ManifestStyle 의요소에테마이름, 테마버전, 테마 URL, 제작자이름등붉은색으로표시된부분을자신이제작한테마에맞게수정하시면됩니다. 해당요소는카카오톡앱의 더보기 > 설정 > 테마설정 화면에그대로표시됩니다. ManifestStyle { -kakaotalk-theme-id: url( com.kakao.talk.winterstoryios ); -kakaotalk-theme-name: url('winter Theme'); -kakaotalk-theme-version: url('1.0.0'); -kakaotalk-theme-url: url('http://www.kakao.com'); -kakaotalk-author-name: url('kakao Corp.'); } 2) 이미지수정하기 상단의변경가능한리소스를참조하셔서, 변경하고자하는이미지를동일한파일명으로교체하실수있습니다.
STEP 4 폰에설치 사파리에서설치 ㄱ. 테마수정이완료되면 CSS 파일과이미지폴더를 ZIP 파일로압축합니다. ㄴ. ZIP 파일의확장자를 ktheme 로변경합니다. ( 테마명.ktheme) ㄷ. 압축된테마파일을외부에서다운로드할수있는곳에업로드합니다. ㄹ. 업로드한 URL 을사파리주소창에입력 or 링크를선택하시면 < 카카오톡으로열기 > 버튼이활성화됩니다. ㅁ. < 카카오톡으로열기 > 를선택하시면테마가설치됩니다.