iOS 카카오톡 테마 말풍선 기본형 만들기

아이폰용 카카오톡 테마의 말풍선을 제작하려면, 기본형을 이해하고 좌표 설정 및 CSS 수정 방법을 알아야 합니다. 아래를 읽어보시면 이 과정에 대한 상세한 설명을 확인할 수 있습니다. 2025-08 기준으로 업데이트된 내용을 포함하고 있습니다.

👉 ✅ 상세 정보 바로 확인 👈

iOS 카카오톡 말풍선 이미지 이해하기

말풍선 이미지 파일 위치

아이폰 카카오톡 테마의 말풍선 이미지는 ‘Images’ 폴더에 위치합니다. 이 중에서 ChatroomBubbleSend02@3x.png 파일을 활용하여 나만의 테마를 만들어보세요.

말풍선 크기 및 여백 설정

기본적으로 콘텐츠 박스의 크기는 36px x 54px입니다. 이 크기를 바탕으로 여백을 설정하는데, 상단 27px, 좌측 30px, 하단 18px, 우측 30px의 여백을 두어야 합니다. 이 수치를 활용하여 말풍선을 디자인하세요.

👉 ✅ 상세 정보 바로 확인 👈

CSS 문서 수정하기

KakaoTalkTheme.css 파일 수정

KakaoTalkTheme.css 문서를 열어 메시지 스타일을 조정합니다. 여기에서 말풍선의 색상, 테두리, 여백 등을 수정할 수 있습니다. 기본적으로 테두리는 3px 두께로 설정하여 어피치 말풍선과 동일한 스타일을 유지하는 것이 좋습니다.

PNG 파일로 내보내기

디자인이 완료되면, 파일을 PNG 형식으로 내보내기 위해 다음 단계를 따르세요:
1. File > Export > Export As... 메뉴를 선택합니다.
2. ‘Use Artboards’를 체크하고, ‘Export’를 클릭합니다.
3. 해상도를 72ppi로 설정하고, 배경색을 투명으로 설정한 후 내보냅니다.

좌표값 설정하기

콘텐츠 박스 영역 좌표 찾기

아웃라인 뷰 모드(Ctrl+Y)를 활성화한 후, 콘텐츠 박스의 좌표값을 찾습니다.
1. 대지의 왼쪽 상단과 콘텐츠 박스의 상단 왼쪽 점을 연결하여 사각형을 그립니다.
2. 이 값을 통해 실제 좌표를 계산합니다. 예를 들어, 위쪽 여백이 30px이고 왼쪽 여백이 33px이라면, 각각 10px, 11px로 나눠서 위치를 정합니다.

늘어나는 기준점 설정

중앙에 작은 사각형을 배치하여 늘어나는 기준점을 찾습니다. 사각형의 크기를 51px × 51px로 설정하고, 이 값을 기준으로 좌표를 조정합니다.

최종 조정 및 확인

모든 설정을 마친 후, 좌표값을 해당 위치에 입력하고 최종적으로 디자인을 확인합니다. 다음 글에서는 iOS 말풍선 응용형 만드는 방법을 다룰 예정입니다.

자주 묻는 질문 (FAQ)

1. 카카오톡 말풍선을 어떻게 디자인하나요?

말풍선 디자인은 기본 이미지를 기반으로 여백과 크기를 정하고, CSS 스타일을 수정하여 구현할 수 있습니다.

2. 이미지 파일을 어떻게 내보내나요?

디자인 프로그램에서 ‘Export’ 기능을 사용하여 PNG 파일로 내보내면 됩니다. 해상도와 배경색을 적절히 설정하세요.

3. 좌표값은 어떻게 계산하나요?

대지 기준으로 상단과 좌측의 여백을 측정하여, 각각을 정해진 비율로 나누어 좌표값을 설정합니다.

4. 말풍선의 테두리 색상을 어떻게 설정하나요?

CSS 파일에서 말풍선의 테두리 속성을 조정하여 원하는 색상과 두께로 설정할 수 있습니다.

5. iOS 말풍선 응용형은 어떻게 만들까요?

응용형은 기본형의 요소를 바탕으로 추가적인 디자인 요소를 포함하여 제작합니다. 다음 글에서 자세한 방법을 소개합니다.

6. KakaoTalkTheme.css의 역할은 무엇인가요?

KakaoTalkTheme.css는 말풍선의 스타일을 정의하며, 색상, 여백, 테두리 속성을 설정하는 데 사용됩니다.

이전 글: 수디르만컵 중계: 2023년 배드민턴 세계 선수권 대회