Kakao SDK를 사용해서 카카오톡 공유하기 기능 구현하기

카카오톡 공유하기 기능은 사용자들에게 콘텐츠를 친숙하게 공유할 수 있도록 해줍니다. 이 글에서는 JavaScript와 Kakao SDK를 활용하여 이러한 공유 기능을 어떻게 구현할 수 있는지 알아보겠습니다.

사용 기술

JavaScript
Kakao SDK
공유 API

카카오 SDK를 사용하기 위해서는 앱을 등록하고 API 키를 발급받아야 합니다. 카카오 개발자 사이트의 어플리케이션 등록을 참고하세요.

카카오톡 공유 API와 메시지 API의 차이점

공유 기능을 구현하는 방법은 두 가지가 있는데 조금 차이가 있습니다.

카카오톡 공유 API: 사용자가 공유하기 버튼을 누르면 카카오톡 앱이 실행되고, 공유할 대상을 선택하는 간단한 방식입니다.
카카오톡 메시지 API: 개발자가 직접 구현한 친구목록 화면에서 친구를 선택하여 공유합니다. 이 방식은 구현 난이도가 더 높지만, 더 다양한 기능을 제공합니다.

자세한 차이는 이곳을 참고하세요

템플릿 설정하기

메시지를 보낼 때에는 기본 템플릿을 활용하거나, 사용자 정의 템플릿을 활용할 수 있습니다.

기본 템플릿

카카오에서 제공하는 템플릿 형식에 따라 메시지의 구성 요소 값을 JSON 또는 객체 형태로 직접 정의하고, 메시지 발송 요청 시 메시지를 구성한 객체를 전달하는 방법입니다. 기본 템플릿으로는 피드, 리스트, 위치, 커머스, 텍스트, 캘린더가 있습니다. 각 형식에 대한 자세한 내용은 이곳을 참고하세요.

사용자 정의 템플릿

원하는 구조와 내용의 메시지를 미리 등록해두고 사용하는 방법입니다. 템플릿 정의는 메시지 템플릿 도구에서 미리 설정할 수 있습니다. 커스텀 템플릿을 사용하면 ${변수명}으로 설정한 변수를 공유 기능 구현 시 값으로 넣어서 보낼 수 있습니다.

코드 구현하기

1. Kakao SDK 불러오기 및 초기화

먼저 kakao.js를 불러오고 초기화합니다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
  Kakao.init('API KEY')
</script>

Next.js에서는 _app.js에 코드를 추가합니다. API 키는 NEXT_PUBLIC_으로 시작해야 합니다.

2. 공유하기 버튼 구현

기본 템플릿을 사용해서 간단한 공유 버튼을 먼저 구현해보겠습니다. 공유하기 버튼을 만들고 해당 버튼에 기능을 할당힐 것입니다.

공유할 내용을 먼저 정의합니다. 템플릿 종류에 따라 필요한 값이 다르니 카카오 개발자 사이트를 참고하세요.

지금은 피드 템플릿에 필요한 값을 아래와 같이 만듭니다.

container: 공유하기 버튼을 렌더링할 DOM 컨테이너를 지정합니다. DOM 컨테이너는 id로 지정합니다.
objectType: 템플릿 종류를 지정합니다.
content: 템플릿에 들어갈 내용을 지정합니다.
buttons: 템플릿에 들어갈 버튼을 지정합니다.

const content = {
  title: '디저트 사진',
  description: '아메리카노, 빵, 케익',
  imageUrl: 'https://search1.kakaocdn.net/argon/0x200_85_hr/8x5qcdbcQwi',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    androidExecParams: 'test',
  },
}

<button id="kakao-link-btn">카카오톡 공유하기</button>

<script>
  Kakao.Link.createDefaultButton({
    container: '#kakao-link-btn',
    objectType: 'feed', // 피드, 리스트 등 템플릿 종류
    content: {
      title: '디저트 사진',
      description: '아메리카노, 빵, 케익',
      imageUrl: 'https://search1.kakaocdn.net/argon/0x200_85_hr/8x5qcdbcQwi',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        androidExecParams: 'test',
      },
    },
    buttons: [
      {
        title: '웹으로 이동',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
        },
      },
      {
        title: '앱으로 이동',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
        },
      },
    ],
  })
</script>

3. 커스텀 템플릿 활용하기

템플릿을 미리 만들고 Kakao.Link.sendCustom 함수를 사용하여 커스텀 템플릿을 활용합니다.

Kakao.Link.sendCustom({
  templateId: 1234,
  templateArgs: {
    key1: 'value1',
    key2: 'value2',
  },
})

key1, key2는 템플릿을 만들때 {key1}, {key2}로 지정한 부분에서 치환됩니다.

4. 이미지 업로드하기

직접 호스팅한 이미지를 사용할 수도 있지만 카카오 서버에 이미지를 업로드하도록 할 수도 있습니다. window.Kakao.Share.uploadImage 함수를 사용하여 이미지 파일을 업로드합니다. 업로드 성공 시 반환된 URL을 사용하여 메시지 템플릿에 이미지를 삽입할 수 있습니다.

function uploadImage(files) {
  // 파일 유형 검증 및 업로드 로직
  window.Kakao.Share.uploadImage({
    file: files,
  })
    .then((response) => {
      // 업로드된 이미지 URL 사용
    })
    .catch((error) => {
      console.error('이미지 업로드 실패', error)
    })
}