iOS 어피치 카카오톡 테마의 말풍선 이미지와 KakaoTalkTheme.css 문서에서 메세지 스타일을 살펴보면서 아이폰용 카카오톡 테마 말풍선의 원리와 좌표에 대해서 알아봐요
이전글
카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)
안드로이드 카카오톡 테마 만들기 안드로이드 말풍선 응용편! 나인패치의 늘어나는 기준선을 어디에 넣을 것인지, 말풍선 위에 이미지를 넣어 말풍선 응용형을 만드는 방법에 대해 알아보겠습
salgudiy.tistory.com
카카오톡 테마 만드는 법 모아보기
카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 14편 - apk 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 15편 <마지막편> - 안드로이드용 말풍선 응용형2 + 작업방식 (+ 자세하게, tmi)
1. iOS 말풍선 살펴보기
1) 말풍선 종류
Images 폴더에는 총 8가지의 말풍선 종류가 있습니다.
(Receive) 상대방이 보낸 말풍선 4가지 종류
1. 상대방이 보낸 첫번째 말풍선 (chatroomBubbleReceive01)
2. 상대방이 보낸 첫번째 말풍선 선택했을때 (chatroomBubbleReceive01Selected)
3. 상대방이 보낸 두번째 말풍선 (그룹) (chatroomBubbleReceive02)
4. 상대방이 보낸 두번째 말풍선 (그룹) 선택했을때 (chatroomBubbleReceive02Selected)
(Send) 내가 보낸 말풍선 4가지 종류
5. 내가 보낸 첫번째 말풍선 (chatroomBubbleSend01)
6. 내가 보낸 첫번째 말풍선 선택했을때 (chatroomBubbleSend01Selected)
7. 내가 보낸 두번째 이상 말풍선 (그룹) (chatroomBubbleSend02)
8. 내가 보낸 두번째 이상 말풍선 (그룹) 선택했을때 (chatroomBubbleSend02Selected)
2) 말풍선 버전
그리고 각각의 종류마다 @2x, @3x 버전이 있습니다.
이미지 폴더에는 1배율 사이즈의 말풍선 이미지가 없지만, 1배율 사이즈의 말풍선이 있다고 가정했을 때,
그 말풍선 이미지를 2배 키운 버전이 @2x, 3배 키운 버전이 @3x가 됩니다.
카카오톡 테마의 스타일을 정의한 KakaoTalkTheme.css 문서에 사용된 수치는 1배율 기준입니다.
이미지 파일은 크게 만들어서 축소 저장해야 작게 만들어서 크게 늘릴때보다 손실이 적기때문에 말풍선 이미지는 3배율 사이즈를 기준으로 만들어 준 후 좌표 위치를 정하고 그 좌표 수치를 3으로 나눠 CSS 문서에 입력해주는 방식으로 작업하게 됩니다.
2. iOS 말풍선 좌표 알아보기
KakaoTalkTheme.css 문서의 메세지 스타일을 보시면 Send 부분은 내가 보낸 말풍선의 스타일을 정의하는 부분이고 Receive는 받은 말풍선(상대방이 보낸 메세지)을 정의하는 부분입니다.
1) 좌표 2개 (늘어나는 기준점)
좌표가 두개 있는 부분은, 말풍선이 늘어나는 부분을 지정하는 x좌표와 y좌표입니다. 나인패치를 이용한 안드로이드용 말풍선은 나인패치의 늘어나는 기준선으로 지정해준 부분이 늘어나지만 iOS용 말풍선은 x와 y좌표의 기준점 부분이 늘어나는 방식입니다.
말풍선 가운데 부분(빨간점)에 늘어나는 기준점을 지정해주면 말풍선이 담고있는 콘텐츠 양에 따라 늘어나거나 줄어듭니다.
말풍선이 어떤 원리로 늘어나는지 알아볼 수 있게 기준점이 있는 부분을 십자 모양으로 다른 색으로 표시했습니다. 기준점 부분이 늘어나기 때문에 사방으로 쪼개져서 늘어나는 것처럼 보이기도 합니다.
Images 폴더의 ChatroomBubbleSend02@3x.png
iOS 어피치 카카오톡 테마의 내가 보낸 두번째 이상 말풍선 (그룹) 3배율 이미지 파일의 늘어나는 기준점을 알아보겠습니다.
MessageCellStyle-Send의 -ios-group-background-image: 'chatroomBubbleSend02.png' 17px 17px;
이 부분을 보시면 17px 17px가 늘어나는 기준점 (x좌표 y좌표) 입니다. @3x는 3배율 말풍선 이미지니까 적혀있는 좌표에 3을 곱해줍니다. 17px 17px에 3을 곱해주면 51px 51px가 됩니다.
이미지의 왼쪽에서 51px 떨어지고 (x좌표) 위에서 51px 떨어진 곳(y좌표)이 기준점이 되어서 하얀색으로 표시해준 영역이 ╋자 형태로 늘어나게 되는 것입니다.
2) 좌표 4개 (콘텐츠 박스 영역)
좌표가 4개가 적혀있는 부분도 있습니다. 이 부분은 콘텐츠를 담는 영역을 지정해주는 영역입니다. 말풍선의 콘텐츠니까 텍스트(메세지)를 담는 부분을 일컫는 것입니다.
/* top, left, bottom, right */ 로 안내되어 있는 것처럼 반시계방향으로 위, 왼쪽, 아래, 오른쪽 순서로 기준점이 적혀있습니다.
이때는 (1)늘어나는 기준점처럼 x,y의 좌표가 아니고 이미지 파일의 위로 부터 ( )px 떨어져 있는 지점, 왼쪽으로부터 ( )px 떨어져 있는 지점, 아래로 부터 ( )px 떨어져 있는 지점, 오른쪽으로 부터 ( ) 떨어져 있는 지점을 뜻합니다.
위쪽과 왼쪽의 기준점은 콘텐츠 박스가 시작되는 왼쪽 상단 모서리의 위치가 되는 것이고 아래와 오른쪽의 기준점은 콘텐츠 박스가 끝나는 오른쪽 하단의 모서리의 위치가 되는 것입니다.
Images 폴더의 ChatroomBubbleSend02@3x.png
iOS 어피치 카카오톡 테마의 내가보낸 두번째 이상 말풍선 (그룹) 3배율 이미지 파일의 콘텐츠 박스 영역을 알아보겠습니다.
MessageCellStyle-Send의 -ios-group-title-edgeinsets: 10px 11px 7px 17px;의 부분을 보시면
10px(위), 11px(왼쪽), 7px(아래), 17px(오른쪽) 기준점이 적혀있습니다. @3x는 3배율 말풍선 이미지니까 적혀있는 기준점에 3을 곱해주시면 됩니다. 그러면 30px 33px 21px 51px가 되겠죠?
이미지 파일의 위로 부터 30px 떨어진 곳, 왼쪽으로 부터 33px 떨어진 곳에서 콘텐츠 박스가 시작되어
이미지 파일의 아래로 부터 21px 떨어지고 오른쪽으로부터 51px 떨어진 곳에 사각형 박스가 끝납니다.
이 하얀색 박스 영역이 콘텐츠(텍스트)가 들어가는 영역입니다.
다음에는 iOS (아이폰용) 말풍선 기본형을 만드는 방법에대해 알아보겠습니다
다음글
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
iOS 어피치 카카오톡 테마의 말풍선을 살펴보면서 아이폰용 카카오톡 테마 말풍선 기본형을 만들어보고, 좌표를 지정하고 CSS 문서를 수정하는 법에 대해서 알아봐요 이전글 카카오톡 테마 만드
salgudiy.tistory.com
카카오톡 테마 만드는 법 모아보기
카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 14편 - apk 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 15편 <마지막편> - 안드로이드용 말풍선 응용형2 + 작업방식 (+ 자세하게, tmi)
'카카오톡 테마 만들기' 카테고리의 다른 글
| 카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi) (6) | 2022.12.02 |
|---|---|
| 카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi) (4) | 2022.12.02 |
| 카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi) (1) | 2022.12.02 |