카카오톡 공유하기를 내 맘대로 바꿔보자 (with.기본 템플릿 커스텀)

이전 게시글로 카카오톡 메시지 템플릿을 이용하여 카카오톡 공유하기를 구현해보았다.

그런데, 아래의 비빔밥 이미지를 클릭했을 때도 "방명록 남기러 가기" 버튼을 클릭했을 때와 동일한 링크로 이동해야하는데, 서비스 도메인 링크로 이동이 되는 문제가 있었다.

메시지 템플릿 설정에서는 이미지와 함께 링크를 넣을 수 있는 설정이 별도로 없었기 때문에 기획자 분의 의도에 맞게 메시지 템플릿을 수정하기로 했다.

 

미리 메시지 템플릿을 지정해놓는 방법 대신, 직접 클라이언트에서 템플릿 양식에 맞춰 공유하기를 구현하고자 했다.

직접 커스텀하고는 싶은데, 방법이 헷갈리는 분들을 위해서 차근차근 설명해보려고 한다.

 

지금 우리에게 필요한 것은 듀얼 모니터 두 개의 창(링크)이다. 

 

 

** 카카오톡 SDK 설치 및 초기화 단계는 이전 포스팅을 참고하세요! **

2024.09.29 - [🗂️ 개발 이모저모] - 카카오톡 공유하기를 원하는 대로 만들어보자 ! (with. 메시지 템플릿)

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

 

앞서 말한 두 개의 창은 

코드 예시 와 피드 구성요소 이다. (코드 예시가 없어도 되긴 함)

 

나는 이전과 마찬가지로 메시지 유형 중 "피드" 유형으로 메시지를 생성할 것이고, 직접 만든 버튼을 이용하여 공유하기를 구현할 예정이기 때문에 sendDefault 함수를 이용했다.

Kakao.Share.sendDefault({
	objectType : "feed",
	// 공유할 때 원하는 내용
});

 

피드 옵션 확인하기

 

내가 이전 공유하기와 다르게 원했던 것은 크게 아래와 같다.

1. 기본 이미지를 클릭했을 때 내가 원하는 링크로 이동 (기본 도메인 주소가 아닌)

2. `b` 영역에 홍보글 추가하기

3. 버튼 추가하기 (총 두 개)

 

나머지는 이전에 구현했던 공유하기와 다르지 않다.

예시 코드와 피드 옵션을 비교해보면, 어떻게 내용을 전달해주면 되는지 쉽게 알 수 있다.

내가 확인해야하는 옵션은

 

- A, B, C, D, E 이고 이를 피드 옵션 링크에서 다시 찬찬히 살펴보자.

 

주의 할 점

옵션명을 적어줄 때는 SDK 뒤의 명칭을 써주면 되는데, Content, Social, Buttons과 같은 프로퍼티 명은 SDK가 적혀있는 대문자 시작이 아니라 소문자 시작으로 적어줘야 한다. -> content, social, buttons 으로

 

A, B 옵션

feed Object 표에서 Content 부분 링크를 타고 들어가보면 아래와 같은 표가 보일 것이다.

여기서 내가 사용하기를 원하는 부분을 확인해서 content 프로퍼티 안에 넣어주면 된다.

 

content Object

title	String	콘텐츠의 타이틀	O*
image_url SDK: imageURL	String iOS: URL	콘텐츠의 이미지 URL	O*
image_width SDK: imageWidth	Int JavaScript: Number	콘텐츠의 이미지 너비, 픽셀 단위	X
image_height SDK: imageHeight	Int JavaScript: Number	콘텐츠의 이미지 높이, 픽셀 단위	X
description	String	콘텐츠의 상세 설명, title과 합쳐 최대 4줄 표시	O*
link	Link JavaScript: LinkObject	콘텐츠 클릭 시 이동할 링크 정보	O

 

link는 Link 프로퍼티에 맞게 내용을 넣어줘야 해서 Link 객체도 확인해야 한다.

 

 

link Object (4개의 옵션 중 하나 필수_4개 전부 필수가 아님)

web_url SDK: webURL	String iOS: URL Flutter: Uri	PC버전 카카오톡에서 사용하는 웹 링크 URL 도메인 부분은 [내 애플리케이션] > [플랫폼] > [Web]에서 등록한 사이트 도메인과 일치해야 함	O*
mobile_web_url SDK: mobileWebURL	String iOS: URL Flutter: Uri	모바일 카카오톡에서 사용하는 웹 링크 URL 도메인 부분은 [내 애플리케이션] > [플랫폼] > [Web]에서 등록한 사이트 도메인과 일치해야 함	O*
android_execution_params SDK: androidExecutionParams	String Android, Flutter: Map<String,String>	안드로이드 카카오톡에서 사용하는 앱 링크 URL에 사용될 파라미터 해당 값이 없을 경우 mobile_web_url 이용	O*
ios_execution_params SDK: iosExecutionParams	String Android, Flutter: Map<String,String>	iOS 카카오톡에서 사용하는 앱 링크 URL에 사용될 파라미터 해당 값이 없을 경우 mobile_web_url 이용	O*

 

나는 이 중에서도 webUrl과 mobileUrl 링크를 넣어주었다.

모바일과 PC에서 모두 이용 가능한 서비스이기 때문이다.

 

이렇게 넣어주면 아래처럼 공유하기가 된다. 언뜻 보면 공유하기가 완성된 것 같지만 아직은 완성이라고 할 수 없다 !

Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: `${owner}의 책장이오`,
      description: description,
      imageUrl: bookshelfImageUrl,
      link: {
        mobileWebUrl: link,
        webUrl: link,
      },
    },
  });

 

 

 

C 옵션 (Social)

나는 현재 저 게시글에 몇 개의 댓글이 남겨졌는지에 대한 정보도 같이 보여주고 싶기 때문에 Social 부분을 확인해봐야 한다.

 

social Object

like_count SDK: likeCount	Int JavaScript: Number	콘텐츠의 좋아요 수	X
comment_count SDK: commentCount	Int JavaScript: Number	콘텐츠의 댓글 수	X
shared_count SDK: sharedCount	Int JavaScript: Number	콘텐츠의 공유 수	X
view_count SDK: viewCount	Int JavaScript: Number	콘텐츠의 조회 수	X
subscriber_count SDK: subscriberCount	Int JavaScript: Number	콘텐츠의 구독 수	X

Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: `${owner}의 책장이오`,
      description: description,
      imageUrl: bookshelfImageUrl,
      link: {
        mobileWebUrl: link,
        webUrl: link,
      },
    },
    social: {
      commentCount: count,
    },
  });

 

 

D 옵션 (Button)

나는 버튼을 두 개로 나누어서, 각 각에 링크를 달아주고 싶었다.

 

buttons Object

title	String	버튼의 타이틀	O
link	Link JavaScript: LinkObject	버튼 클릭 시 이동할 링크 정보(하나는 필수로 존재해야 함)	O

Link는 위에서 살펴보았기 때문에 동일하게 넣어주면 된다.

 

버튼을 두 개 넣었을 때는 한 버튼에 글자수가 일곱 글자가 넘어가게 되면 줄바꿈이 생겨 보기 좋지 않기 때문에 띄어쓰기를 포함해서 일곱 글자가 넘지 않도록 해주는 것이 좋다.

Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: `${owner}의 책장이오`,
      description: description,
      imageUrl: bookshelfImageUrl,
      link: {
        mobileWebUrl: link,
        webUrl: link,
      },
    },
    social: {
      commentCount: count,
    },
    buttons: [
      {
        title: '방명록 남기기',
        link: {
          mobileWebUrl: link,
          webUrl: link,
        },
      },
      {
        title: '세종대왕 책장',
        link: {
          mobileWebUrl: KingLink,
          webUrl: KingLink,
        },
      },
    ],
  });

 

 

E 옵션 (ItemContent)

E 옵션은 하위 a, b, c, d로 나누어진 ItemContent 영역이다.

이 중에서도 내가 사용할 부분은 b 부분이다.

 

itemContent 

profile_text SDK: profileText	String	헤더 또는 프로필 영역에 출력될 텍스트 profile_image_url 값이 없을 경우, 볼드(Bold)체로 된 제목만 담은 헤더 형태로 출력됨 최대 16자까지 출력	ⓐ	X
profile_image_url SDK: profileImageUrl	String iOS: URL Flutter: Uri	프로필 영역에 출력될 이미지 작은 원형의 프로필 사진 형태로 출력됨	ⓐ	X
title_image_text SDK: titleImageText	String	이미지 아이템의 제목 최대 2줄, 최대 24자까지 출력	ⓑ	X
title_image_url SDK: titleImageUrl	String iOS: URL Flutter: Uri	이미지 아이템의 이미지 iOS 108*108, Android 98*98 크기 1:1 비율이 아닌 이미지는 센터 크롭(Center crop) 방식으로 재조정됨	ⓑ	X
title_image_category SDK: titleImageCategory	String	이미지 아이템의 제목 아래에 회색 글씨로 출력되는 카테고리 정보 최대 한 줄, 최대 14자까지 출력	ⓑ	X
items	ItemInfo[] JavaScript: Array.<ItemObject> Android, Flutter: List<ItemInfo> iOS: [ItemInfo]	각 텍스트 아이템 정보 아이템 이름과 가격에 해당하는 item, item_op를 포함한 JSON 배열, 최대 5개의 아이템 지원 아래 items: 텍스트 아이템 정보 참고 (예: [{"item": "item1 name", "item_op": "item1_description"}, {"item": "item2 name", "item_op": "item2_description"}])	ⓒ	X
sum	String	주문금액, 결제금액 등 아이템 영역의 요약 정보 제목 텍스트 아이템 영역 아래에 최대 6자까지 출력 비고: ⓒ 영역에 하나 이상의 아이템이 있고, sum과 sum_op 값을 모두 전달해야 ⓓ 영역이 출력됨 참고: ⓓ 영역 사용 시 ⓒ, ⓓ 영역의 item_op, sum_op는 오른쪽 정렬되고, 미사용 시에는 왼쪽 정렬됨	ⓓ	X
sum_op SDK: sumOp	String	아이템 영역의 가격 합산 정보 텍스트 아이템 영역 아래에 볼드체로 최대 11자까지 출력 비고: ⓒ 영역에 하나 이상의 아이템이 있고, sum과 sum_op 값을 모두 전달해야 ⓓ 영역이 출력됨 참고: ⓓ 영역 사용 시 ⓒ, ⓓ 영역의 item_op, sum_op는 오른쪽 정렬되고, 미사용 시에는 왼쪽 정렬됨	ⓓ	X

파란색으로 표시한 b 부분 중에서도 나는 이미지 없이 text만 사용할 것이라서 두 개에만 표시를 해두었다.

Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: `${owner}의 책장이오`,
      description: description,
      imageUrl: bookshelfImageUrl,
      link: {
        mobileWebUrl: link,
        webUrl: link,
      },
    },
    social: {
      commentCount: count,
    },
    buttons: [
      {
        title: '방명록 남기기',
        link: {
          mobileWebUrl: link,
          webUrl: link,
        },
      },
      {
        title: '세종대왕 책장',
        link: {
          mobileWebUrl: KingLink,
          webUrl: KingLink,
        },
      },
    ],
    itemContent: {
      titleImageUrl: KingImageUrl,
      titleImageText: '세종대왕님의 책장',
      titleImageCategory: '감사한 마음 전하기👋',
    },
  });

 

 

---

완성된 공유하기

이렇게 내가 의도한 대로 동작하는 카카오톡 공유하기가 완성되었다.

배경 이미지를 눌러도 도메인 주소로 가는 것이 아닌, 내가 원하는 링크로 잘 이동하고 버튼도 각 각의 url에 맞게 이동한다.

 

예시코드와 공식 문서를 차근차근 뜯어보면서, 내가 원하는 대로 커스텀하기 위해서는 어떤 프로퍼티를 수정하고 추가해줘야하는 지 정확히 알게 된 것 같다.

 

이 글이 카카오톡 공유하기를 구현하는 다른 분들께 도움이 되었으면 좋겠다.

 

그럼 오늘은 이만~!

안뇽 !