웹 페이지에 카카오톡 공유 버튼 추가하기

웹 페이지의 소셜 서비스 공유

웹 페이지를 보다 보면 소셜 미디어를 통해 공유할 수 있는 버튼이 있는 경우가 있다. 현재 보고 있는 페이지를 페이스북이나 링크드인, 카카오톡 같은 서비스를 통해 나 자신이나 다른 사람에게 전달하는 기능이다.

이런 종류의 버튼은 내 게시글을 다른 사람들이 손쉽게 공유할 수 있게 해 주어, 개미 눈물만큼이라도 조금 더 널리 퍼져나가기를 기대할 수 있게 한다. 그리고 이런 거 달아두면 혼자 보기에 뽀대가 좀 나 보이기도 한다.

무엇보다, 서비스와 구현 방식에 따라 웹 주소뿐 아니라 제목과 설명, 섬네일 이미지 주소 등을 함께 전달할 수 있어, 공유받는 사람에게 게시글의 내용을 조금 더 풍성하게 보여줄 수 있다는 장점이 있다.

공유 기능을 구현하는 방법은 서비스마다 조금씩 다르다. 링크드인이나 네이버 등은 정해진 공유용 URL에 게시글 주소나 제목 등의 정보를 전달해 공유 화면을 여는 방식으로 구현할 수 있다. 공유 화면에 표시되는 이미지와 설명은 서비스가 해당 페이지에 직접 접속해 메타 정보를 읽어 구성하기도 한다.

한편, 카카오톡은 웹 페이지에서 공유 기능을 구현할 수 있도록 전용 JavaScript SDK를 제공한다. 카카오가 제공하는 SDK를 페이지에 불러온 뒤, 공유 버튼을 누르면 SDK의 공유 함수를 호출하는 방식이다. 이때 공유할 제목과 설명, 이미지 주소, 링크 등을 직접 지정할 수 있다.

본 글에서는 웹 페이지에 카카오톡으로 공유하기 기능을 추가하는 방법과 절차에 대해 아주 간단하게 알아본다.

카카오 API 키 발급 절차

웹 페이지에 카카오톡 공유 기능을 넣기 위해 JavaScript SDK를 내 웹 페이지와 연동하려면, 먼저 카카오에 SDK 사용 등록을 해 주어야 한다.

먼저 카카오디벨로퍼스에 앱을 등록하고 JavaScript 키를 준비해야 한다. 참고로, 여기에서 말하는 앱은 휴대전화에 설치할 프로그램이 아니라, 카카오 API를 사용할 서비스를 등록하고 관리하는 단위를 의미한다.

1. 카카오디벨로퍼스 가입

   카카오디벨로퍼스에 접속해 회원가입을 진행한다.

   

2. 앱 목록으로 이동

   가입을 마치면 카카오디벨로퍼스 화면 상단의 앱 메뉴를 선택한다.

   

3. 앱 생성

   앱 목록 화면의 우측 상단에 있는 앱 생성 버튼을 누른다.

   

4. 앱 정보 입력

   앱 이름과 회사명, 카테고리 등 필수 정보를 입력하고 필요한 경우 앱 아이콘과 앱 대표 도메인도 등록한다.

   본 필자는 임의로 갈무리라는 이름을 사용했다. 회사명 입력란에는 화면 안내에 따라 사업자 정보와 일치하는 이름이나 단체명을 입력한다. 개인으로 등록하는 경우에는 본인의 이름을 입력할 수 있다.

   입력을 마치면 저장 버튼을 누른다.

   

5. 생성된 앱 선택

   앱 목록에 새로 만들어진 갈무리 앱이 표시된다. 해당 앱을 눌러 설정 화면으로 이동한다.

   

6. 제품 링크 관리로 이동

   좌측 메뉴에서 앱 → 제품 링크 관리를 선택한다. 이곳에서는 카카오톡 공유 메시지의 링크로 연결할 웹 도메인을 등록한다.

   

7. 웹 도메인 등록

   웹 도메인 등록 버튼을 누르고 공유 메시지에서 연결할 사이트의 도메인을 입력한다. 본 필자는 https://www.eqmaker.kr을 입력했다.

   게시글 전체 주소가 아니라 프로토콜을 포함한 도메인을 등록한다. 예를 들어 https://www.eqmaker.kr/게시글/로 연결하려면 https://www.eqmaker.kr을 등록하는 식이다.

   입력을 마치면 저장 버튼을 누른다.

   

8. 플랫폼 키 확인

   좌측 메뉴에서 앱 → 플랫폼 키를 선택한다. REST API 키, JavaScript 키, 네이티브 앱 키가 표시된다.

   기본으로 발급된 JavaScript 키를 설정해 사용할 수도 있지만, 여기서는 별도의 키를 만들기 위해 JavaScript 키 추가 버튼을 누른다.

   

9. JavaScript 키 추가 및 SDK 도메인 등록

   키 이름과 JavaScript SDK 도메인을 입력한다. 이 도메인은 카카오 JavaScript SDK를 실행할 웹사이트의 주소이다.

   본 필자는 키 이름을 EQMaker로 지정하고, SDK 도메인에 https://www.eqmaker.kr과 https://eqmaker.kr을 입력했다. 독자 제위는 실제 공유 버튼이 실행될 사이트 주소를 입력하면 된다.

   앞서 등록한 제품 링크의 웹 도메인은 공유 메시지에서 이동할 목적지, 여기서 입력하는 SDK 도메인은 공유 기능을 실행할 출발지에 해당한다. 같은 블로그에서 공유하고 같은 블로그로 연결한다면 두 설정에 같은 도메인이 들어갈 수 있다.

   카카오톡 공유만 구현하는 경우, 이 화면의 카카오 로그인 리다이렉트 URI는 입력하지 않아도 된다. 필요한 정보를 입력한 뒤 저장 버튼을 누른다.

   

10. 생성된 JavaScript 키 확인

    저장을 마치면 플랫폼 키 목록에 새로 만든 EQMaker 키가 표시된다. 해당 항목에 표시되는 문자열이 앞으로 공유 기능을 구현할 때 사용할 JavaScript 키이다.

    이후 코드의 Kakao.init()에 이 키를 넣어 카카오 JavaScript SDK를 초기화하면 된다.

    

웹 페이지에서 카카오톡으로 공유하기 구현

이제 발급받은 키를 이용해 웹 페이지의 원하는 곳에 카카오톡으로 공유하기 버튼을 만들어 주면 된다. 아래는 카카오톡 공유 기능을 구현한 간단한 HTML 예제이다.

공유할 글의 제목과 설명, 이미지 주소, 링크를 원하는 내용으로 변경한다. 이미지 주소에는 외부에서 접근할 수 있는 실제 이미지 URL을 입력하고, imageWidth와 imageHeight에는 해당 이미지의 실제 가로·세로 픽셀 수를 입력한다.

이 파일은 해당 키의 JavaScript SDK 도메인으로 등록한 주소를 통해 접속해야 한다. 공유 메시지에 넣는 링크의 도메인도 제품 링크 관리의 웹 도메인에 등록되어 있어야 한다. 발급받은 키 값은 발급받은 JavaScript 키 자리에 삽입하면 된다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>카카오톡 공유 예제</title>
  <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.6/kakao.min.js"></script>
  <script>
    Kakao.init('발급받은 JavaScript 키');

    function shareKakao() {
      Kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: '공유할 글 제목',
          description: '공유할 글의 내용을 간단하게 설명한다.',
          imageUrl: 'https://www.eqmaker.kr/thumbnail.jpg',
          imageWidth: 1504,
          imageHeight: 1504,
          link: {
            mobileWebUrl: 'https://www.eqmaker.kr/',
            webUrl: 'https://www.eqmaker.kr/'
          }
        },
        buttons: [{
          title: '글 보기',
          link: {
            mobileWebUrl: 'https://www.eqmaker.kr/',
            webUrl: 'https://www.eqmaker.kr/'
          }
        }]
      });
    }
  </script>
</head>
<body>
  <a href="#" onclick="shareKakao(); return false;">카카오톡 퍼가기</a>
</body>
</html>

동작 상태 확인

카카오톡이 설치된 스마트폰에서 확인하면 좀 더 직관적으로 연동 상태를 살펴볼 수 있지만, PC에서도 확인할 수 있다. 다음은 본 필자가 PC 브라우저에서 테스트한 화면이다. 카카오톡 퍼가기 링크를 누르면 공유 대상을 선택하는 창이 열린다. 카카오 계정 로그인이 필요한 경우에는 먼저 로그인을 진행한다.

공유할 대상을 선택한 뒤 하단의 공유 버튼을 누른다. 본 필자는 테스트를 위해 내 프로필을 선택하고 나에게 공유하기 버튼을 눌렀다. 정상적으로 전송되면 다음과 같이 공유 성공 화면이 표시된다.

스마트폰의 카카오톡에서 새로운 메시지가 도착했는지 확인한다. 공유된 링크와 글 보기 버튼이 원하는 페이지로 연결되는지도 확인하면 된다.

위 코드는 동작 원리를 보여주기 위한 간단한 예제이다. 실제 블로그에 적용할 때는 SDK의 중복 로딩과 초기화, 실행 오류 등의 처리도 함께 고려해야 한다. 또한, title, description, 섬네일 이미지 등의 값은 서버 측에서 게시글에 맞게 동적으로 생성하도록 수정하면 된다.

예를 들어 현재 게시글의 제목과 메타 디스크립션을 사용하고, 섬네일은 카카오톡 공유용 이미지로 지정하는 식이다. 이러한 자동화 방법은 여기서 다루지 않는다. 중요한 것은 위와 같은 형식으로 공유할 데이터를 구성해 카카오 SDK에 전달하면 된다는 것이다.

어떤 내용을 넣을지는 독자 제위께서 가장 잘 아시리라 믿는다. 암튼 중요한 것은 내 손으로 카카오톡에 내 웹페이지 게시글을 공유하는 기능을 넣는 데 성공했다는 것이다.

FAQ

개인 웹 페이지에 카카오톡 공유 기능을 추가할 수 있는가?

가능하다. 카카오디벨로퍼스에 앱을 등록하고 JavaScript 키와 도메인을 설정한 뒤, 웹 페이지에 카카오 JavaScript SDK와 공유 버튼을 추가하면 된다.

카카오 API 인증 키란 무엇인가?

카카오 API를 호출하는 앱을 식별하고 사용 권한을 확인하는 데 사용하는 값이다. 용도에 따라 JavaScript 키, REST API 키, 네이티브 앱 키 등이 있으며, 본 글의 웹 페이지 공유 예제에서는 JavaScript 키를 사용한다.

하나의 JavaScript 키를 여러 웹사이트에서 사용할 수 있는가?

가능하다. 해당 키의 JavaScript SDK 도메인에 공유 기능을 실행할 웹사이트들을 등록하면 된다. 공유 메시지에서 연결할 사이트의 도메인도 제품 링크 관리에 등록해야 한다. 같은 도메인 아래의 여러 게시글은 게시글마다 별도의 키를 발급받을 필요가 없다.

JavaScript API 키가 공개되어도 되는가?

JavaScript 키는 브라우저에서 사용하는 키이므로 페이지 소스나 개발자 도구에서 확인할 수 있다. 키를 숨기는 대신 JavaScript SDK 도메인을 실제 사용하는 사이트로 제한해 관리해야 한다. 어드민 키나 클라이언트 시크릿 등 비밀로 관리해야 하는 값은 웹 페이지에 포함하면 안 된다.

카카오톡 공유 기능을 구현하려면 카카오 로그인도 추가해야 하는가?

웹 페이지에 별도의 카카오 로그인 기능을 구현할 필요는 없다. 카카오톡 공유에 필요한 JavaScript 키와 도메인을 설정하면 된다. 다만, PC 브라우저 등에서 공유하는 과정에는 사용자의 카카오 계정 로그인이 필요할 수 있다.

공유 메시지의 제목과 설명, 이미지를 직접 지정할 수 있는가?

가능하다. 본 글에서 사용하는 피드형 공유는 제목, 설명, 이미지 URL과 연결할 링크를 직접 지정할 수 있다. 이미지에는 외부에서 접근할 수 있는 실제 URL을 사용하고, 블로그에서는 각 게시글의 정보가 자동으로 들어가도록 구성할 수도 있다.