튜토리얼

JavaScript SDK로 카카오톡 공유 메시지 발송

이 문서는 웹페이지에 카카오톡 공유 버튼을 구현하고, 사용자 정의 템플릿으로 구성한 메시지를 공유하는 과정을 단계별로 설명합니다.

카카오톡 공유는 사용자가 카카오톡 친구 또는 채팅방을 직접 선택해 서비스의 콘텐츠를 공유하는 기능입니다. 카카오 로그인이나 액세스 토큰 없이 사용할 수 있으며, 별도의 사용 권한 신청도 필요하지 않습니다.

개요

구분	내용
학습 목표	사용자 정의 템플릿으로 구성한 메시지를 카카오톡으로 공유하는 웹페이지
선행 작업	카카오디벨로퍼스 계정으로 로그인하기

1. 앱 설정하기

카카오톡 공유를 사용하려면 JavaScript SDK 실행과 메시지 링크 연결에 필요한 앱 설정을 완료해야 합니다.

1-1. 앱 생성하기

카카오 API를 사용하려면 카카오디벨로퍼스 앱이 필요합니다. 카카오디벨로퍼스 앱 만들기를 참고해 사용할 앱을 만듭니다.

1-2. JavaScript 키와 도메인 설정하기

앱 관리 페이지에서 생성한 앱을 선택합니다.
[앱] > [플랫폼 키] > [JavaScript 키]로 이동합니다.
사용할 JavaScript 키의 키 값 오른쪽에 있는 [A] 복사 아이콘을 선택합니다. 복사한 키는 카카오톡 공유 구현에서 사용합니다.
해당 [B] JavaScript 키를 선택하고 [C] JavaScript SDK 도메인 에 http://localhost:4000을 등록합니다.
- 중요: 실제 서비스에 적용할 때는 서비스 웹페이지의 도메인을 등록해야 합니다.

1-3. 웹 도메인 등록하기

카카오톡 공유 메시지에 포함된 웹 링크를 사용하려면 웹 도메인을 등록해야 합니다.

앱 관리 페이지에서 [앱] > [제품 링크 관리]로 이동합니다.
웹 도메인에 메시지에서 연결할 웹사이트의 도메인을 등록합니다. 이 튜토리얼의 예제 템플릿에서 사용할 수 있도록 https://developers.kakao.com을 등록합니다.
필요한 경우 기본 웹 도메인을 선택합니다.

2. 프로젝트 설정하기

코드 편집기 또는 터미널로 프로젝트 폴더와 HTML 파일을 만듭니다.

코드 편집기로 만들기

Finder(macOS) 또는 파일 탐색기(Windows)에서 원하는 위치에 kakao-share 폴더를 만듭니다.
코드 편집기에서 kakao-share 폴더를 엽니다.
폴더 안에 index.html 파일을 만듭니다.
4단계에서 제공하는 전체 코드를 index.html에 복사하고 저장합니다.

터미널에서 만들기

사용하는 운영체제에 맞는 명령어를 실행합니다.

mkdir kakao-share
cd kakao-share
touch index.html

3. 사용자 정의 템플릿 구성하기

카카오톡으로 공유할 메시지는 메시지 템플릿 도구에서 사용자 정의 템플릿으로 구성합니다.

튜토리얼 > 나에게 사용자 정의 메시지 발송을 참고해 피드 A형 템플릿을 만듭니다.
[사용 목적]을 카카오톡 공유 API로 설정합니다.
이미지, 제목, 본문, 버튼을 설정합니다.
나에게 사용자 정의 메시지 발송 > 3. 메시지 구성 요소 설정하기를 참고해 메시지 템플릿을 구성합니다.
헤더에 ${NAME}님을 위한 추천을 입력해 사용자 인자를 추가합니다. 다음 단계에서 메시지를 보낼 때 사용자 인자에 원하는 값을 전달할 수 있습니다. 자세한 사용 방법은 사용자 인자를 참고합니다.
템플릿을 저장하고 템플릿 ID를 확인합니다.
- 참고: 템플릿 ID는 메시지 템플릿 설정 화면의 [B] 또는 [C] 영역에서 확인 가능

4. 카카오톡 공유 구현하기

index.html에 아래 전체 코드를 복사해 붙여넣습니다. 이 코드는 JavaScript SDK 설치와 초기화, 카카오톡 공유 버튼 구현을 포함합니다.

아래 코드에서는 JavaScript SDK 2.8.2를 사용합니다. 최신 버전을 사용하려면 JavaScript SDK 다운로드에서 [</>] 버튼을 눌러 최신 버전의 script 코드를 복사해 사용합니다.

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>카카오톡 공유</title>
    // JavaScript SDK 설치
    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.8.2/kakao.min.js" integrity="sha384-zt/G7/KfaRQ9dT/QIkS0ujMtzouJqzuSJcXVQu50x0rl/+mD1dc70AeOejVbMD9E" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>카카오톡 공유 테스트</h1>
    <button type="button" onclick="shareMessage()">카카오톡 공유하기</button>

    <script>
      //JavaScript SDK 초기화 함수
      Kakao.init("${JAVASCRIPT_KEY}")
1-2단계에서 복사한 JavaScript 키로 변경

      function shareMessage() {
        //카카오톡 공유 대상 선택 화면을 표시하는 함수
        Kakao.Share.sendCustom({
          // 메시지 템플릿 ID
          templateId: 12345,
3단계에서 확인한 템플릿 ID로 변경
          // 사용자 인자
          templateArgs: {
            NAME: "홍길동",
메시지에 표시할 값으로 변경
          },
        })
      }
    </script>
  </body>
</html>

5. 실행 및 테스트하기

5-1. 로컬 서버 실행하기

index.html이 있는 폴더에서 로컬 서버를 실행합니다.

cd kakao-share
python3 -m http.server 4000

명령어를 실행한 터미널을 종료하지 않고 웹 브라우저에서 http://localhost:4000에 접속합니다.

1-2. JavaScript 키와 도메인 설정하기에서 JavaScript SDK 도메인에 실제 도메인을 입력한 경우, 실제 도메인으로 접속해야 합니다.

5-2. 메시지 공유하기

카카오톡에 연결된 카카오계정으로 로그인

카카오톡 공유를 테스트하려면 카카오톡에 연결된 카카오계정으로 로그인해야 합니다. 카카오톡의 [더보기] > [설정] > [카카오계정]에서 로그인된 계정을 확인할 수 있습니다. 카카오톡과 연결되지 않은 카카오계정으로 로그인하면 4012 에러가 발생합니다. 자세한 내용은 카카오톡 공유 에러 코드를 참고합니다.

[카카오톡 공유하기]를 선택합니다.
카카오톡이 설치된 기기에서는 카카오톡이 실행되는지 확인합니다.
공유 대상 선택 화면에서 친구 또는 채팅방을 선택합니다.
[공유하기]를 선택합니다.
선택한 채팅방에 사용자 정의 템플릿 메시지가 표시되는지 확인합니다.
메시지의 링크를 선택해 등록한 웹페이지로 이동하는지 확인합니다.

PC 웹 브라우저에서 실행하면 카카오계정 로그인 화면이 표시될 수 있습니다. 카카오톡 공유가 완료되면 브라우저의 기존 페이지로 돌아옵니다.

6. 선택: 공식 카카오톡 공유 버튼 적용하기

이 단계에서는 공식 카카오톡 공유 버튼 이미지를 적용하는 방법을 설명합니다.

Kakao.Share.createCustomButton()으로 다운로드한 버튼에 공유 기능을 연결할 수 있습니다. 이 함수는 버튼을 화면에 생성하지 않고 container로 지정한 HTML 요소에 클릭 동작을 연결합니다.

디자인 리소스 다운로드 페이지의 [카카오톡]에서 버튼 크기를 [Small]로 선택하고 [다운로드]를 선택합니다.
내려받은 압축 파일에서 kakaotalk_sharing_btn_small.png를 index.html과 같은 kakao-share 폴더에 복사합니다.
4단계에서 작성한 <button>과 <script>를 아래 코드로 바꿉니다.
${JAVASCRIPT_KEY}와 12345를 각각 실제 앱의 JavaScript 키와 사용자 정의 템플릿 ID로 바꿉니다.

index.html

<button type="button" id="kakaotalk-share-btn" style="border: 0; background: transparent; padding: 0; cursor: pointer;">
  <!-- 카카오톡 공유 버튼 표준 이미지 -->
  <img src="./kakaotalk_sharing_btn_small.png" alt="카카오톡 공유하기" />
</button>

<script>
  Kakao.init("${JAVASCRIPT_KEY}")
1-2단계에서 복사한 JavaScript 키와 동일하게 입력

  Kakao.Share.createCustomButton({
    // 카카오톡 공유 버튼 표준 이미지를 클릭 동작으로 연결
    container: "#kakaotalk-share-btn",
    templateId: 12345,
3단계에서 확인한 템플릿 ID와 동일
    templateArgs: {
      NAME: "홍길동",
메시지에 표시할 값으로 변경
    },
  })
</script>

Kakao.Share.sendCustom()은 서비스가 직접 클릭 이벤트에서 공유를 요청할 때 사용하고, Kakao.Share.createCustomButton()은 JavaScript SDK가 지정한 요소에 클릭 동작을 연결할 때 사용합니다. 자세한 차이는 호출 방법 선택하기를 참고합니다.

7. 문제 해결하기

문제	확인할 내용
`Kakao is not defined` 오류 발생	SDK `script` 태그의 URL과 로드 순서 확인
등록하지 않은 도메인 관련 오류 발생	접속 주소가 JavaScript SDK 도메인에 등록됐는지 확인
템플릿을 찾을 수 없음	`templateId`, 앱 선택, 템플릿 저장 여부 확인
메시지에 `${NAME}`이 그대로 표시됨	`templateArgs`에 `NAME` 값 전달 여부 확인
메시지 링크가 열리지 않음	웹 도메인 등록과 템플릿의 컴포넌트 링크 설정 확인

자세한 오류 원인은 카카오톡 공유 에러 코드와 FAQ를 참고합니다.

문서 홈

시작하기

카카오디벨로퍼스

로그인

커뮤니케이션

광고

지도

내비게이션

검색

더 보기