카카오 공유 버튼 만드는 법
홈페이지에 카카오톡 공유 기능 추가하기

📤 링크를 카카오톡으로 바로 공유하고 싶다

홈페이지를 만들었고, 주변에 알리고 싶다. 카카오톡이 가장 편하다. 버튼 하나 누르면 링크와 미리보기 이미지가 채팅창으로 날아가면 좋겠다.

카카오 공유 버튼은 만들 수 있다. 카카오가 공식 SDK를 무료로 제공한다. 근데 생각보다 막히는 부분이 있다. 코드가 맞는데 왜 안 되지? 싶은 상황이 꼭 한 번은 온다. 이 글에서 그 이유까지 같이 설명한다.

💛 카카오 공유 버튼이 뭔가요?

버튼을 누르면 카카오톡 친구나 채팅방에 사이트 링크를 공유할 수 있는 기능이다. 단순 링크가 아니라 사이트 제목, 설명, 미리보기 이미지까지 함께 전송된다. 뉴스 기사나 쇼핑몰에서 흔히 보는 그 노란 버튼이다.

카카오 공식 JavaScript SDK를 사용하기 때문에 카카오 개발자 계정이 필요하다. 여기서 발급받은 JavaScript 키를 코드에 넣어야 작동한다. 계정 만들기부터 키 발급까지 5분이면 된다.

📦 준비물

세 가지가 필요하다. 아직 도메인이 없다면 먼저 도메인을 연결하고 오는 게 좋다.

• 카카오 개발자 계정 — developers.kakao.com에서 카카오 계정으로 무료 가입
• 운영 중인 사이트 — Netlify로 배포된 사이트
• 등록된 도메인 — netlify.app 주소도 되지만 커스텀 도메인이 있으면 더 좋다. 도메인이 없어도 Netlify 기본 주소로 가능하다

🪜 만드는 순서

카카오 개발자 센터 설정부터 코드 삽입까지 여섯 단계다.

🚧 가장 많이 막히는 부분 — 로컬에서 테스트하지 말 것

코드를 다 넣었다. VS Code에서 파일을 열고 버튼을 눌렀다. 그런데 아무 반응이 없거나 "요청 실패" 오류가 뜬다. 코드가 잘못된 줄 알고 한 시간을 찾는다.

코드는 맞다. 문제는 테스트 환경이다.

뚝딱닷컴도 처음에 이 함정에 빠졌다. 코드를 세 번 다시 짜고, AI한테도 두 번 물어보고 나서야 Netlify에 올리고 실제 주소로 테스트해야 한다는 걸 알았다. 반드시 Netlify에 배포한 다음, 실제 사이트 주소에서 버튼을 눌러야 한다.

⚙️ 도메인 등록 주의사항 — http와 https 둘 다

카카오 개발자 센터에서 도메인을 등록할 때 한 가지를 꼭 챙겨야 한다. http와 https 두 가지를 모두 등록해야 한다.

• https://mysite.com — HTTPS 접속용. Netlify는 기본으로 HTTPS다
• http://mysite.com — HTTP 접속용. 혹시라도 http로 접속하는 경우를 위해
• www가 있는 버전도 쓴다면 https://www.mysite.com도 함께 등록

하나만 등록하면 나머지 프로토콜에서 접속했을 때 공유 버튼이 오류를 낸다. 등록은 한 줄씩 입력하면 되고, 저장 후 바로 적용된다.

✅ 마무리 — 버튼 하나로 방문자가 직접 홍보해준다

카카오 공유 버튼이 달렸다면, 이제 방문자가 직접 내 사이트를 퍼뜨려줄 수 있다. 내가 직접 링크를 보내는 것보다 지인이 공유해주는 게 훨씬 효과적이다. 신뢰가 함께 전달되기 때문이다.

공유 버튼은 눈에 띄는 곳에 배치하는 게 중요하다. 블로그 글 상단이나 하단, 또는 소개 페이지 아래쪽이 좋다. 스크롤을 많이 내리지 않아도 보이는 위치면 공유율이 올라간다.

카카오 개발자 센터 가입부터 공유 버튼 코드 삽입까지 전체 과정은 뚝딱닷컴 교재 11장에 스크린샷과 함께 담겨 있다.