카카오톡 공유하기 기능을 개발해보자!

이전에 진행하던 사이드 프로젝트를 마무리하기 위해 카카오톡 공유하기 기능을 개발해 보려고 한다. 가이드 문서가 잘 정리되어 있기 때문에 적혀 있는 대로 차근차근 하나씩 진행하면 금방 개발하고자 하는 기능을 구현할 수 있었다!

1. 카카오 디벨롭퍼스에 내 앱 등록

카카오 디벨롭퍼스 링크

카카오 디벨롭퍼스에 접속해서 연동하고자 하는 앱을 등록해야 한다. 한 번도 사용해본 적이 없다면 우선 회원가입부터 진행한 후, 아래 사진에 표시되어 있는 '앱' 메뉴를 클릭하여 이동한다.

앱 메뉴를 클릭하면 아래와 같은 화면이 나온다. 현재 개발 중이라 어딘가에 배포가 되어 있지 않더라도 앱 대표 도메인에 localhost 주소를 입력하면 무사히 앱을 등록할 수 있다. 무척 간단하다.

2. 제품 링크 관리

공유나 메시지 등 링크 이동을 허용할 웹 도메인을 등록하기 위해 좌측 메뉴의 앱 > 제품 링크 관리 메뉴를 클릭하여 이동한다.

나는 실제 배포되어 있는 도메인과, 개발 환경에서도 확인해보기 위해 localhost도 함께 등록해 놓았다. '웹 도메인 수정' 버튼을 클릭하면 원하는 도메인을 등록할 수 있다.

3. JavaScript 키 확인 및 SDK 사용을 위한 도메인 등록

공유하기 기능을 사용하기 위해서는 카카오에서 제공하는 JavaScript SDK를 불러와서 사용해야 한다. 이때 SDK를 최초 init 하는 과정에서 사용되는 것이 JavaScript 키라고 보면 된다. 다만 키가 있다고 모두 사용할 수 있는 것은 아니고, 허용하는 도메인을 등록해야 한다. 먼저 좌측 메뉴에서 앱 > 플랫폼 키 메뉴로 이동한다.

가운데에 있는 JavaScript 키가 우리가 사용할 값이다. 복사해서 잘 간직해두고, 가운데 영역을 클릭하면 더 상세한 설정을 위한 화면으로 이동한다.

이동한 화면에서 도메인을 등록한다. 이번에도 역시 개발 환경과 배포 환경에서 모두 사용할 수 있도록 두 가지 URL을 모두 등록하였다.

4. SDK 불러오기

JavaScript SDK 링크
위 링크로 접속한 뒤 SDK를 불러오기 위한 script 태그를 복사한다. 그리고 index.html의 body 태그 안에 붙여넣기 하면 준비는 끝!

5. 공유하기

모든 준비가 끝났으니 이제 본격적으로 공유하기 기능을 개발할 차례! 아래 링크로 가면 다양한 유형의 템플릿을 구현하는 방법을 확인할 수 있다.

카카오톡 공유 - JavaScript

나는 이미지와 글로 구성된 기본 메시지 형식인 피드를 사용해볼 것이다.

export const kakaoShare = ({
  title,
  description,
  imageUrl,
  link,
  buttonLabel,
}: {
  title?: string;
  description?: string;
  imageUrl?: string;
  link?: string;
  buttonLabel?: string;
}) => {
  if (!Kakao.isInitialized()) {
    Kakao.init(import.meta.env.VITE_KAKAO_JS_KEY);
  }

  const urlLink = link ?? import.meta.env.VITE_DOMAIN;

  Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: title ?? '견생역전',
      description:
        description ?? '매일 뒹굴거리고 맛난 것만 찾는 우리 강아지... 어쩌면!?',
      imageUrl:
        imageUrl ?? `${import.meta.env.VITE_DOMAIN}/assets/MainImage.png`,
      link: {
        mobileWebUrl: urlLink,
        webUrl: urlLink,
      },
    },
    buttons: [
      {
        title: buttonLabel ?? '견생역전하러 가기', // 메세지 내에 버튼에 쓰여질 텍스트
        link: {
          mobileWebUrl: urlLink,
          webUrl: urlLink,
        },
      },
    ],
    // 카카오톡 미설치 시 카카오톡 설치 경로이동
    installTalk: true,
  });
};

위와 같이 간단하게 세팅한 뒤 공유하기 버튼을 클릭하면 아래 사진과 같이 공유할 대상을 선택할 수 있는 목록이 나타나고...

대상을 선택한 뒤 공유하면 내가 설정한 내용대로 정상적으로 공유하기 카드가 나타나는 것을 확인할 수 있다! 간단하게 구현할 수 있어서 신기하고 재밌었다. ㅎㅎ

참고
TypeScript를 사용하고 있는 경우 Kakao SDK를 사용할 때 해당하는 객체가 정의되어 있지 않다는 오류가 나타날 수 있다. 이때는 src/types 폴더 아래 혹은 src 폴더 바로 아래에 kakao.d.ts 파일을 추가하고 하기 내용을 작성한 뒤 저장하면 해결된다.
단순히 Kakao를 any 타입으로 지정해도 되고, 나는 내가 사용하는 속성이나 메서드의 타입을 작성해 보았다.

interface KakaoLink {
  mobileWebUrl: string;
  webUrl: string;
}

interface KakaoShareContent {
  title: string;
  description: string;
  imageUrl: string;
  link: KakaoLink;
}

interface KakaoShareButton {
  title: string;
  link: KakaoLink;
}

interface KakaoShareFeedOptions {
  objectType: 'feed';
  content: KakaoShareContent;
  buttons?: KakaoShareButton[];
  installTalk?: boolean;
}

declare const Kakao: {
  init(appKey: string): void;
  isInitialized(): boolean;
  Share: {
    sendDefault(options: KakaoShareFeedOptions): void;
  };
};