카카오톡 공유하기를 원하는 대로 만들어보자 ! (with. 메시지 템플릿)

여러 서비스를 이용하다보면, 카카오톡으로 이를 공유하고 싶을 때가 있다.

그런 순간 서비스들은 카카오톡 공유하기를 통해서 사용자가 공유할 수 있도록 기능을 제공하는데, 이때 첨부되는 정보는 공유 받은 사용자가 서비스에 새롭게 유입되는지, 안되는지를 결정하기 때문에 꽤나 중요하다고 생각한다.

 

그래서 나는 카카오톡 공유하기 기능을 통해서 사용자가 우리의 서비스를 널리 공유할 수 있도록 하려고 한다.

 

카카오톡 공유하기

카카오톡 공유하기를 구현하기 위해서는, 우선 카카오 Developer에 내 애플리케이션이 등록되어 있어야 한다.

https://developers.kakao.com/

카카오톡 공유하기 문서

만약 미리 등록해두지 않았다면 등록해두고, 등록하는 법은 내 애플리케이션을 누른 뒤에 차근차근 단계를 따라가면 충분히 할 수 있을 것이다.

나는 카카오 OAuth 기능을 구현할 때 해뒀었기 때문에 등록하는 단계는 생략하도록 하겠다.

 

** 중요 ** 개발 환경에서 테스트할 때 도메인에 로컬 환경 주소도 등록해둬야 테스트가 가능하다 개발 호스트 주소 등록을 안하면 이유 모를 실패에 한참 삽질할 수도 있어요.....어떻게 알았냐구요..? 저도 알고 싶지 않았습니다...

 

 

메시지 API 선택하기

카카오톡 공유 API 이해하기 문서

공유하는 방법에는 크게 카카오톡 공유와 카카오 메시지 두 가지가 있다. 이 두 가지의 차이점을 요약하자면 크게 카카오톡 앱을 거치느냐 안 거치느냐로 정리할 수 있을 것 같다.

 

카카오톡 공유  API는 카카오톡의 앱으로 이동하여 메시지를 전송하고, 카카오톡 메시지 API는 이동하지 않고 바로 대상을 선택해서 메시지를 보낸다. 그래서 메시지 전송 요청을 실행하는 주체가 카카오톡과 서비스로 달라지게 된다.

 

나는 메시지에서 제공하는 다양한 기능까지는 굳이 필요하지 않아서, 카카오톡 공유 API를 사용해서 구현하기로 결정했다.

 

메시지 템플릿 생성하기 (선택)

내 애플리케이션 > 메시지 > 메시지 템플릿

위의 경로로 들어가면 나오는 곳에서 미리 카카오톡 메시지의 템플릿을 만들어서 사용해주려고 한다.

이렇게 되면 수정할 때도 카카오 Developer에서 수정해주기만 하면 되기 때문에 조금 더 수정하기 편할 것 같았다.

이렇게 할 수 있었던 이유는 공유하기를 했을 때 보여줄 데이터들이 이미 정해졌기 때문이다.

뒤에 세종 대왕 이미지도 사용자의 책장 배경에 따라 달라질 예정

 

데이터를 사용자 인자(${KEY} 형식)로 처리해주면 클라이언트에서 동적으로 전달해줄 수 있다.

내가 동적으로 바꿔줄 데이터를 지정해주면 위처럼 미리보기로 보여주고 (이미지 비율은 미리보기가 안됨)

이렇게 사용자 인자로 어떤 값들을 받아야하는지도 잘 알려준다.

 

실제로 설정창에 들어가보면 굉장히 직관적으로 잘 설명되어 있어서 쉽게 설정할 수 있을 것이다.

나는 여러 템플릿 중에서도 피드 템플릿을 이용해서 공유하기 정보를 구성했다.

 

** 참고로 KakaoDeveloper에서 미리 템플릿을 추가하지 않아도 공유하기 기능은 구현할 수 있다. **

 

그럼 어떤 정보를 어떻게 보여줄 지도 알게되었으니 본격적으로 구현에 들어가보자.

 

 

KaKao SDK 스크립트 추가하기

나는 리액트를 사용하고 있었기 때문에 index.html 파일의 body 최하단에 아래와 같은 script를 추가해주어, 카카오 객체를 생성해주었다.

이후에 공유하기 기능 구현을 위한 함수를 받아오는 역할을 하게 될 것이다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.js"
    integrity="sha384-4isBVZ02Sicjf8XHbphmDqKPF9IdtDHzQm7IdcIhsBHx14UU9s4FrOKdDrjDCm9M"
    crossorigin="anonymous">
</script>

// 여러 예시 코드에서는 아래처럼 바로 초기화해주지만, 
// index.html에서는 환경 변수를 import 할 수 없기 때문에 리액트 함수를 통해 초기화해줘야 한다.
/** <script>
    Kakao.init(`${import.meta.env.VITE_KAKAO_API_KEY}`);
 </script> **/

 

 

shareKakao 함수 생성

사용자 정의 템플릿으로 메시지 보내기

템플릿을 정의하지 않고 메시지 보내기

 

공유하기를 하는 컴포넌트 안에서 함수를 정의하여 사용하기보다, 따로 유틸 함수를 생성해서 공유하기를 구현하고자 했다. 공식 문서에 친절하게 잘 나와있어서 차근차근 알아보면 충분히 찾아서 할 수 있을 것이다.

const shareKakao = (props: TShareKakao) => {
  const { owner, description, count, link, bookshelfImageUrl } = props;

  // Kakao 객체 가져오기
  const Kakao = window.Kakao;

   // 초기화
  if (!Kakao.isInitialized()) {
    Kakao.init(import.meta.env.VITE_KAKAO_SDK_KEY);
  }

  // 위에서 사용자 인자로 나온 친구들을 차례로 전달해주면 된다.
  Kakao.Share.sendCustom({
    templateId: /** 템플릿id **/,
    templateArgs: {
      key1 : key1,
      key2 : key2
      
      // 나의 경우는 아래와 같다.
      bookshelfImage: bookshelfImageUrl,
      description: description,
      count: count,
      owner: owner,
      link: link,
    },
  });
};

이렇게 공유 함수를 정의해주고, 공유하기 버튼의 onClick에 prop과 함께 넘겨주면 공유하기 성공이다~!

 

 

여러 페이지에서 각 각의 공유하기에 따른 템플릿 차이가 있으면 위에서 정의해둔 함수 안에서 분기를 타거나, 공통되는 부분만 추상화한 후 불러와서 사용해줘도 될 것 같다.

 

 

느낀 점

이제 정말 곧 오픈을 앞둔 와글와글의 방명록 서비스! 우리는 특히 SNS를 통한 확장 및 공유가 활발해야해서, 카카오톡 공유하기 기능을 추가해보았다. 

예전에 개발을 접한지 얼마 되지 않았을 때는 공식 문서를 보아도 내용이 잘 이해되지 않아서 블로그 글을 더 많이 참고했었는데, 이제는 공식 문서의 여러 링크와 자료를 넘나들며 블로그 글을 보지 않고 구현했다.

 

스스로의 성장에 박수를..! 그리고 더 많은 도전과 고민을 통해 계속 성장해가고 싶다

 

마지막으로 아래의 링크들을 통해서 구현에 필요한 정보를 얻어서 일단 걸어두도록 하겠다 ! 간혹가다 타입이 맞지 않아서 원하는 정보를 넣었는데도 동작하지 않을 수 있어서 오류가 발생했다면 매개변수의 타입도 확인해보는 것을 추천한다 !

 

초기화

api 파라미터 타입 확인 문서

메시지 템플릿 타입 및 필수 여부