안녕하세요 리뷰하는 d입니다!
저번에 이어서 이번에는 iOS_Sample_Theme_220405 > apeach.ktheme > Images 폴더 내부에 있는 이미지들을 하나하나 뜯어보도록 하겠습니다!
1. 채팅방 배경과 말풍선 파일 분석하기
파일은 이름순으로 분류하도록 하겠습니다.
1-1. chatroomBgImage@3x
카카오톡 채팅 할 때의 채팅방 내부 배경 파일입니다.
크기는 1125 X 2250 픽셀입니다.
1-2. chatrommBubbleReceive01@2x/3x
상대방이 나에게 첫 번째로 메시지를 보냈을 때 말풍선의 작은 버전(x2)과 큰 버전(x3)입니다.
예를 들어 같은 시간에 연달아 카톡을 받았을 때 첫 번째 카톡 말풍선은 1번처럼 왼쪽에 세모 모양으로 삐죽 나와있습니다.
하지만 두 번째로 받는 카톡부터는 2번처럼 삐죽 나와있는 모양 없이 그냥 사각형임을 알 수 있습니다.
1-3. chatroomBubbleReceive01 Selected@2x/3x
마찬가지로 상대방이 나에게 첫 번째로 메시지를 보냈을 때의 말풍선이지만
내가 그 말풍선을 클릭했을 때입니다.
예를 들어 제가 올린 위의 사진을 보시면
제가 선택한 카카오톡 첫 번째 칸의 말풍선 색깔이 흰색에서 회색으로 변해있습니다.
1-4. chatrommBubbleReceive02@2x/3x
상대방이 보낸 두 번째 메시지의 말풍선의 크고 작은 버전입니다.
위에서도 설명드렸다시피 말풍선에 뾰족하게 나온 부분이 없고 사각형입니다.
1-5. chatroomBubbleReceive02Selected@2x/3x
상대방이 보낸 두 번째 메시지 말풍선을 선택했을 때입니다.
1-6. chatrommBubbleSend01@2x/3x
내가 상대방에게 보낸 첫 번째 메시지 말풍선입니다.
1-7. chatrommBubbleSend01Selected@2x/3x
내가 상대방에게 보낸 첫 번째 메시지 말풍선을 선택했을 때입니다.
1-8. chatrommBubbleSend02@2x/3x
내가 상대방에게 보낸 두 번째 메시지 말풍선입니다.
사각형입니다.
1-9. chatrommBubbleSend02Selected@2x/3x
내가 상대방에게 보낸 두 번째 메시지 말풍선을 선택했을 때입니다.
2. 친구 추가 버튼과 메인 배경, 메인탭 배경
순서대로 내 카카오톡 테마의 미리 보기 아이콘, 친구 추가 버튼, 메인 배경, 메인탭 배경입니다.
메인 배경화면이란 말 그대로 채팅방 배경화면을 제외한 대화 리스트 화면이나 친구 리스트 화면의 배경을 말합니다.
여기서는 뒤의 하얀색 배경이 배경화면입니다.
3. 메인 탭 아이콘
여기가 이제 살짝 난 코스인데요, 너무 겁먹으실 필요 없습니다.
양이 어마어마해 보이지만 사실 잘 보면 옆에 조그마한 버전, 큰 버전 이기 때문에 실제로 진짜 필요한 이미지는 이 캡쳐본의 1/2이라고 생각하시면 될 것 같습니다.
보시기 좋게 옆에 조그만 애들은 삭제하겠습니다.
조그만 애들을 삭제하자
짜잔~~
16장이 남았습니다.
그렇습니다 저희는 16장만 그리면(?) 됩니다.
이제 하나하나 뜯어보겠습니다.
우선 얘네들은 위에서 말씀드렸다시피 메인탭의 아이콘들입니다.
하지만 저희가 쓰는 메인탭은 5가지인데 선택했을 때 모양이 달라진다 해도 10개입니다.
그럼 6개는 어디에 쓰는 걸까요?
네 6개는 사실상 저희가 쓰지 않는 아이콘들입니다.
저희가 쓰는 메인탭은 친구탭, 채팅탭, 뷰탭, 쇼핑탭, 더 보기 탭입니다.
하지만 저곳에는 친구 찾기 탭(글로벌용), 만화탭(일본용), 채널탭까지 포함되어 있습니다.
하지만 이미지 사진을 빼버리면 오류가 나기 때문에 저희는 친구탭, 채팅탭, 뷰탭, 쇼핑탭, 더 보기 탭 5가지 그림만 그리고 나머지 3가지는 5가지 중에 중복으로 복사해서 떼워넣으시면 되겠습니다. ^^
위 이미지를 보시면 아시겠지만 카카오톡 예시도 그림을 중복해 놓았습니다.
저희는 이 10장만 바꾸면 됩니다.
각각 친구 탭 아이콘, 친구 탭 아이콘 눌렀을 때/ 채팅 탭 아이콘, 채팅 탭 아이콘 눌렀을때/ 뷰 탭 아이콘, 뷰 탭 아이콘 눌렀을때/ 쇼핑 탭 아이콘, 쇼핑 탭 아이콘 눌렀을때/ 더 보기 탭 아이콘, 더보기 탭 아이콘 눌렀을 때입니다.
4. 비밀번호 화면과 프로필 화면
마지막으로 비밀번호 화면과 프로필 화면인데요,
이제 이미지가 얼마 남지 않았습니다!
마저 뜯어보도록 하겠습니다.
첫 번째 이미지는 말 그대로 비밀번호 입력하는 화면의 배경이라고 보시면 되겠습니다.
제일 마지막 이미지는 프로필 사진을 지정해놓지 않은 사람의 프로필 화면에 띄워지는 이미지이며
그 옆의 벚꽃 이미지는 비밀번호를 입력할 때 누른 숫자의 배경입니다.
나머지 이미지들은 비밀번호를 입력할때 나오는 이미지들입니다.
예시를 한번 보시죠.
이 화면을 보시면 이해가 더 잘되실 것입니다.
지금 제가 누르고 있는 숫자는 5이며
숫자 5 뒤에 입력판 배경인 벚꽃 이미지가 들어가 있습니다.
또한 제가 숫자 5 하나를 입력했기 때문에 비밀번호 아이콘이 하나만 어피치로 변해있고 나머지는 꽃 이미지로 되어있는 것을 보실 수 있습니다.
아이콘들에 순서가 1,2,3,4로 표시되어 있으므로
원하시는 순서에 원하시는 아이콘으로 변경하시면 되겠습니다.
짝짝짝짝짝!!!
이렇게 해서 Image 폴더 내의 66개의 이미지를 모두 뜯어보았습니다!
다음에는 KakaoTalkTheme.css를 전격 해부해 보겠습니다!
아이폰 카톡 테마 만들기 시리즈
2023.04.04 - [일상] - [아이폰 카톡 테마 만들기 1] 준비하기
[아이폰 카톡 테마 만들기 1] 준비하기
안녕하세요 리뷰하는 d입니다! 이번에는 우여곡절 ios 카카오톡 테마 만들기를 도전해 봤습니다...! ㅎㅎㅎ 평소에 다른 분들이 만들어서 무료로 배포해 주는 것만 쓰다가 제가 직접 만들려니까
review-d.tistory.com
2023.04.07 - [일상/IT] - [아이폰 카톡 테마 만들기 3] KakaoTalkTheme.css 뜯어보기
[아이폰 카톡 테마 만들기 3] KakaoTalkTheme.css 뜯어보기
안녕하세요 리뷰하는 d입니다! 이번에는 저번에 이어서 KakaoTalkTheme.css를 한번 뜯어보도록 하겠습니다. iOS_Sample_Theme_220405 > apeach.ktheme 폴더 내로 들어가면 이렇게 두 가지 파일이 있을 것입니다.
review-d.tistory.com
'일상 > IT' 카테고리의 다른 글
| [아이폰 카톡 테마 만들기 3] KakaoTalkTheme.css 뜯어보기 (3) | 2023.04.07 |
|---|---|
| [아이폰 카톡 테마 만들기 1] 준비하기 (1) | 2023.04.04 |
댓글