이 버튼 하나 달면, 한 달에 CS 알바비 100만 원 아낍니다.
사장님, 오프라인 옷가게를 생각해 보세요.
손님이 옷을 들고 “이거 M 사이즈 있나요?” 물어보려고 둘러보는데 점원이 안 보입니다.
그럼 손님은 어떻게 할까요? 그냥 옷 내려놓고 나갑니다.
인터넷 쇼핑몰이나 홈페이지도 똑같습니다.
궁금한 게 생겼을 때 바로 물어볼 곳이 없으면, 손님은 가차 없이 창을 닫아버립니다.
그래서 대형 쇼핑몰들은 화면을 아무리 밑으로 내려도,
우측 하단에 ‘카카오톡 노란색 버튼’이 찰거머리처럼 따라다닙니다.
이걸 전문 용어로 ‘플로팅(Floating: 둥둥 떠다니는) 버튼’이라고 합니다.
1. 복사해서 붙여넣는 ‘황금 코드’
요즘 HTML, CSS 직업 훈련이나 코딩 교육 받으시는 분들도 많이 계시죠?
코드를 보면 아시겠지만, 군더더기 없이 아주 깔끔하게 짠 실전용 소스입니다.
홈페이지의 <body> 태그 안쪽, 맨 아래쪽에 그대로 복사해서 붙여넣으세요.
<!-- 1. 카카오톡 플로팅 버튼 (HTML) -->
<!-- ★ 사장님의 카카오톡 오픈채팅방 링크로 꼭 바꿔주세요! -->
<a href="https://open.kakao.com/o/사장님링크" target="_blank" class="kakao-floating">
<img src="https://cdn-icons-png.flaticon.com/512/2111/2111466.png" alt="카톡 상담">
</a>
<style>
/* 2. 버튼 디자인과 위치 (CSS) */
.kakao-floating {
position: fixed; /* 화면에 찰싹 고정 */
bottom: 30px; /* 바닥에서 30px 띄움 */
right: 30px; /* 오른쪽에서 30px 띄움 */
width: 60px; /* 버튼 가로 크기 */
height: 60px; /* 버튼 세로 크기 */
background-color: #FEE500; /* 카카오톡 공식 노란색 */
border-radius: 50%; /* 완벽한 동그라미로 깎기 */
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 4px 10px rgba(0,0,0,0.2); /* 그림자 효과 */
z-index: 9999; /* 다른 사진이나 글씨보다 무조건 위에 보이게 */
animation: pulse 2s infinite; /* 심장박동 애니메이션 (2초마다 무한 반복) */
}
.kakao-floating img {
width: 35px; /* 카톡 아이콘 크기 */
height: 35px;
}
/* 3. 시선을 사로잡는 '펄스(심장박동)' 애니메이션 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); } /* 1.1배로 커졌다가 */
100% { transform: scale(1); } /* 다시 원래대로 */
}
</style>📢 사장님, 이것만은 꼭 확인하세요!
코드 첫 번째 줄에 있는 href="https://open.kakao.com/o/사장님링크" 부분을 반드시 사장님의 ‘카카오톡 오픈채팅방 링크’나 ‘카카오톡 채널 링크’로 바꿔주셔야 손님이 클릭했을 때 사장님 폰으로 카톡이 옵니다.
2. 왜 굳이 ‘애니메이션’을 넣었을까요?
그냥 가만히 떠 있는 버튼은 쓰다 보면 배경이랑 섞여서 잘 안 보입니다.
그래서 CSS 기능 중 하나인 @keyframes를 사용해 ‘펄스(Pulse)’ 효과를 넣었습니다.
버튼이 심장 뛰듯이 쿵쾅, 쿵쾅 하고 1.1배씩 커졌다가 작아집니다.
시야 구석에서 뭔가 꼼지락거리면 사람은 무의식적으로 그곳을 보게 되어 있습니다.
“궁금한 거 있으면 참지 말고 여기 눌러서 물어보세요!”라고 손짓하는 것과 같습니다.
위치는 무조건 ‘우측 하단’입니다
“난 남들과 다르게 왼쪽 위에 달아야지!”
사장님, 장사에서 제일 위험한 게 ‘혼자만의 예술’을 하는 겁니다.
스마트폰을 오른손으로 쥐었을 때, 엄지손가락이 가장 편하게 닿는 곳이 ‘우측 하단’입니다.
대한민국 모든 국민이 카톡 버튼은 우측 하단에 있다고 뇌에 박혀있습니다.
위치는 절대 바꾸지 마세요!
