상세 컨텐츠

본문 제목

카톡 테마 뜯어보기

카테고리 없음

by 230719 2025. 3. 18. 00:38

본문

카카오 서비스에 나와있는 사용자 테마 제작 가이드_2025_01 Updated 버전을 참고하였고,
샘플 테마파일도 카카오 서비스에 나와있는 것으로 사용했다.

 

열어보니, 이런 이미지 폴더도 존재하고

KakaoTalkTheme.css 파일도 있고,
apeach-11.4.0.ktheme이란 파일도 있었다.

 

뜯어보니... 이미지 파일과 css 파일을 수정하여, 압축한 뒤 확장자를 ktheme으로 바꾸기만 하면 되는 거였다.

지금은 이미지를 내가 직접 만들기란 힘드니..

이런 식으로 변경된 사실만 알아보고자 한다. (이미지 크기 픽셀은 수정 전과 같다.)



/*
 Manifest
 */

ManifestStyle
{
    -kakaotalk-theme-name: 'Apeach';
    -kakaotalk-theme-version: '11.1.0';
    -kakaotalk-theme-url: 'http://www.kakao.com';
    -kakaotalk-author-name: 'Kakao Corp.';
    -kakaotalk-theme-id: 'com.kakao.talk.theme.apeachios';
}


/*
 TabBar Style
 */

TabBarStyle-Main
{
    /* 배경 이미지 */
    background-color: ;
    -ios-background-image: 'maintabBgImage.png';		/* 배경 이미지 top-center-crop */
    
    /* 홈탭 */
    -ios-home-normal-icon-image: 'maintabIcoHome.png';
    -ios-home-selected-icon-image: 'maintabIcoHomeSelected.png';
    /* 친구탭 */
    -ios-friends-normal-icon-image: 'maintabIcoFriends.png';
    -ios-friends-selected-icon-image: 'maintabIcoFriendsSelected.png';
    /* 채팅탭 */
    -ios-chats-normal-icon-image: 'maintabIcoChats.png';
    -ios-chats-selected-icon-image: 'maintabIcoChatsSelected.png';
    /* 친구찾기 (글로벌) */
    -ios-find-normal-icon-image: 'maintabIcoFind.png';
    -ios-find-selected-icon-image: 'maintabIcoFindSelected.png';
    /* 채널탭 */
    -ios-browse-normal-icon-image: 'maintabIcoBrowse.png';
    -ios-browse-selected-icon-image: 'maintabIcoBrowseSelected.png';    
    /* 뷰탭 */
    -ios-view-normal-icon-image: 'maintabIcoView.png';
    -ios-view-selected-icon-image: 'maintabIcoViewSelected.png';
    /* 만화탭 (일본) */
    -ios-piccoma-normal-icon-image: 'maintabIcoPiccoma.png';
    -ios-piccoma-selected-icon-image: 'maintabIcoPiccomaSelected.png';
    /* 쇼핑탭 */
    -ios-shopping-normal-icon-image: 'maintabIcoShopping.png';
    -ios-shopping-selected-icon-image: 'maintabIcoShoppingSelected.png';
    /* 콜탭 */
    -ios-call-normal-icon-image: 'maintabIcoCall.png';
    -ios-call-selected-icon-image: 'maintabIcoCallSelected.png';
    /* 더보기탭 */
    -ios-more-normal-icon-image: 'maintabIcoMore.png';
    -ios-more-selected-icon-image: 'maintabIcoMoreSelected.png';
}


/*
 MainView Style
 */

HeaderStyle-Main
{
    -ios-text-color: #664242;

    -ios-tab-text-color: #B39898;
    -ios-tab-highlighted-text-color: #664242;
}

MainViewStyle-Primary
{
    background-color: #FFDEDE;
    -ios-background-image: 'mainBgImage.png';

    /* 텍스트 스타일 */										/* 이름변경 */
    -ios-text-color: #664242;                       		/* Title : 리스트 목록*/
    -ios-highlighted-text-color: #946C6C;                   	/* Title Pressed */
    
    -ios-description-text-color: #805959;               	/* Description : 상태메세지 */
    -ios-description-highlighted-text-color: #946C6C;   	/* Description Pressed */

    -ios-paragraph-text-color: #805959;                    /* Paragraph : 라스트메세지 */ 
    -ios-paragraph-highlighted-text-color: #946C6C;          /* Paragraph Pressed*/

    /* 셀 스타일 */
    -ios-normal-background-color: #F66C6C;                 /* Cell Background */
    -ios-normal-background-alpha: 0.0;
    
    -ios-selected-background-color: #664242;               /* Cell Background Pressed */
    -ios-selected-background-alpha: 0.05;
}

MainViewStyle-Secondary
{
    background-color: #FFE3E3;
}

SectionTitleStyle-Main
{    
    border-color: #F66C6C;
    border-alpha: 0.09;
    
    -ios-text-color: #F66C6C;
    -ios-text-alpha: 1.0;
}


/*
 Feature Style
 */

FeatureStyle-Primary                                       /* Primary : 버튼 텍스트 */
{
    -ios-text-color: #805959;
}


ButtonStyle-AddFriend
{
    -ios-image: 'findBtnAddFriend.png';
}


/*
 DefaultProfile Style
*/

DefaultProfileStyle
{
    /* 프로필 */
    -ios-profile-images: 'profileImg01.png';
}


/*
 ChatRoom Style
 */

BackgroundStyle-ChatRoom
{
    background-color: #FFDEDE;
    -ios-background-image: 'chatroomBgImage.png';
}

InputBarStyle-Chat
{
    /* 입력창 배경 */
    background-color: #FFFFFF;
    
    /* 보내기 버튼 */
    -ios-send-normal-background-color: #FF7F7F;
    -ios-send-normal-foreground-color: #FFFFFF;
    
    -ios-send-highlighted-background-color: #F27979;
    -ios-send-highlighted-foreground-color: #FFDEDE;

    /* 인풋바 좌측 메뉴 아이콘 */
    -ios-button-normal-foreground-color: #E86464;
    -ios-button-highlighted-foreground-color: #CB6F6F;


    /* CUX 관련 버튼 (신규추가) */
    -ios-button-text-color: #191919; /*인풋바 텍스트 컬러 */
    -ios-button-normal-background-color: #000000;   /* 메뉴버튼 배경 컬러 */
    -ios-button-normal-background-alpha: 0.04;

}


/*
 Message Style
 */

MessageCellStyle-Send
{
    -ios-background-image: 'chatroomBubbleSend01.png' 17px 17px;
    -ios-selected-background-image: 'chatroomBubbleSend01Selected.png' 17px 17px;
    -ios-group-background-image: 'chatroomBubbleSend02.png' 17px 17px;
    -ios-group-selected-background-image: 'chatroomBubbleSend02Selected.png' 17px 17px;
    -ios-title-edgeinsets: 10px 11px 7px 17px;  /* top, left, bottom, right */
    -ios-group-title-edgeinsets: 10px 11px 7px 17px;

    -ios-text-color: #FFFFFF;
    -ios-selected-text-color: #FFFFFF;
    -ios-unread-text-color: #FF7F7F;
}

MessageCellStyle-Receive
{
    -ios-background-image: 'chatroomBubbleReceive01.png' 22px 17px;
    -ios-selected-background-image: 'chatroomBubbleReceive01Selected.png' 22px 17px;
    -ios-group-background-image: 'chatroomBubbleReceive02.png' 22px 17px;
    -ios-group-selected-background-image: 'chatroomBubbleReceive02Selected.png' 22px 17px; 
    -ios-title-edgeinsets: 10px 17px 7px 11px;  /* top, left, bottom, right */
    -ios-group-title-edgeinsets: 10px 17px 7px 11px;

    -ios-text-color: #4D4D4D;
    -ios-selected-text-color: #4D4D4D;
    -ios-unread-text-color: #FF7F7F;
}


/*
 Passcode Style
 */

BackgroundStyle-Passcode
{
    background-color: #FFDEDE;
    -ios-background-image: 'passcodeBgImage.png';
}

LabelStyle-PasscodeTitle
{
    -ios-text-color: #664242;
}


PasscodeStyle
{
    -ios-bullet-first-image: 'passcodeImgCode01.png';
    -ios-bullet-second-image: 'passcodeImgCode02.png';
    -ios-bullet-third-image: 'passcodeImgCode03.png';
    -ios-bullet-fourth-image: 'passcodeImgCode04.png';
    
    -ios-bullet-selected-first-image: 'passcodeImgCode01Selected.png';
    -ios-bullet-selected-second-image: 'passcodeImgCode02Selected.png';
    -ios-bullet-selected-third-image: 'passcodeImgCode03Selected.png';
    -ios-bullet-selected-fourth-image: 'passcodeImgCode04Selected.png';
    
    -ios-keypad-background-color: #FFF2F2;
    -ios-keypad-text-normal-color: #664242;
        
    -ios-keypad-number-highlighted-image : 'passcodeKeypadPressed.png';
}


/*
 Message Notification Bar Style
 */

BackgroundStyle-MessageNotificationBar
{
    background-color: #FCC5C5;
}

LabelStyle-MessageNotificationBarName
{
    -ios-text-color: #604242;
}

LabelStyle-MessageNotificationBarMessage
{
    -ios-text-color: #805959;
}


/*
 Direct Share
*/

BackgroundStyle-DirectShareBar
{
    background-color: #FFFFFF;
}

LabelStyle-DirectShareBarName
{
    -ios-text-color: #B35959;
}

LabelStyle-DirectShareBarMessage
{
    -ios-text-color: #D47B82;
}


/*
 BottomBanner Style
 */

BottomBannerStyle {
    background-color: #664142;
}

css파일은 이러했다.

 

ManifestStyle
{
-kakaotalk-theme-name: 'Eunseong';
-kakaotalk-theme-version: '1.1.0';
-kakaotalk-theme-url: 'http://www.kakao.com';
-kakaotalk-author-name: 'cjaksqmf1';
-kakaotalk-theme-id: 'com.kakao.talk.theme.apeachios';
}

매니페스트를 대강 수정했다.

/* 배경 이미지 */
background-color: hsl(26, 88%, 48%);
-ios-background-image: 'maintabBgImage.png';

배경색은 주황색으로 해봤다.

 

MainViewStyle-Primary
{
background-color: #232323;
-ios-background-image: 'mainBgImage.png';

/* 텍스트 스타일 */ /* 이름변경 */
-ios-text-color: #be0000; /* Title : 리스트 목록*/
-ios-highlighted-text-color: #0042a5; /* Title Pressed */
 
-ios-description-text-color: #805959; /* Description : 상태메세지 */
-ios-description-highlighted-text-color: #946C6C; /* Description Pressed */

-ios-paragraph-text-color: #805959; /* Paragraph : 라스트메세지 */
-ios-paragraph-highlighted-text-color: #946C6C; /* Paragraph Pressed*/

/* 셀 스타일 */
-ios-normal-background-color: #7f0000; /* Cell Background */
-ios-normal-background-alpha: 0.0;
 
-ios-selected-background-color: #664242; /* Cell Background Pressed */
-ios-selected-background-alpha: 0.05;
}

다양한 색상을 바꿔봤다.

대강 바꿔본 후, 이미지 폴더와 css파일을 압축한 다음, 압축 zip의 확장자를 ktheme으로 바꿨다.

 

 

카카오톡으로 .ktheme 파일을 보내서 열어봤더니, 바로 테마를 적용할 수 있었다.

 

이처럼, 적용이 바로 되었다!

 

대강 원리는 파악 했고, CSS에서 어떤 코드가 어느 부분을 변경하는지만 알면 될 것 같다.

그건 정리해서 다음에 업로드 해볼 것이다.