카카오톡 공유 에러 발생 관련

Scrap(미리보기, 스크랩)
1

Discovery(ID: 375248) / MLB(ID: 369559)

안녕하세요. 서비스 내 카카오톡 공유 기능을 사용 중입니다.
"카카오톡 공유 에러 발생"이라는 아래 알람을 받아 문의 드립니다.

  • 카카오톡 공유 에러 발생

이 에러는 카카오톡 공유하기 요청에 접근할 수 없는 이미지 URL이 포함된 경우 발생합니다. 이 경우, 공유된 메시지의 이미지가 표시되지 않습니다.

아래 이미지 URL을 유효한 URL로 수정하세요.

URL

문서 보기

문의 사항

  • 누군가에게 카카오톡 공유 시 관련 이미지에 이슈가 있어 에러 발생되는 것으로 이해했습니다.
    전달 주신 링크가 잘린 상태로 공유받았는데, 풀 링크를 공유받을 수 있을까요?

감사합니다.

2

안녕하세요.

카카오톡 공유 메시지 내용중 해당 이미지 URL로 섬네일이 있었고 Window PC에서 카카오톡 웹공유 위해 피커를 띄우는 시점

미리보기 구성을 하려다 실패한 케이스로

parameters={file_1=[https://static-resource.discovery-expedition.com/cdn-cgi/image/q=75,format=auto,fit=scale-down,onerror=redirect/images/goods/ec/X25FDKDJ56056BKS/thnail/3B466223946C498480345D3A963BA84A.png]

https://static-resource.discovery-expedition.com/cdn-cgi/image/q=75 접근했을때

redirect/images/goods/ec/X25FDKDJ56056BKS/thnail/3B466223946C498480345D3A963BA84A.png 에러를 받은 것으로 보입니다.

실제로 공유 액션 발생하기전에 에러 발생한터라 어떤 페이지에서 발생했는지는 로그를 남기지 않아 알 수가 없네요.
위 주소로 이미지 설정해서 공유하는 페이지 있을지 검토 해보시겠어요?

해당 주소 사용 에러는 최근 7일 42건 발생했습니다.

3

추가로 이 에러외에 구성하신 메시지 내용이 너무 길어(10k 초과) 에러 발생한 케이스도 더러 보입니다.

코드에서 메시지를 구성하는 것이 아닌 디벨로퍼스에서 미리 메시지를 구성하는 사용자 정의 템플릿을 사용해보시면 좋을 것 같고

이미지도 카카오측에 미리 업로드 해서 발송하는 “이미지 업로드” 기능 활용해보시면 좋을 것 같습니다.

4

혹시 메시지 내용이 긴 케이스에 대해 공유받을 수 있을까요?
어떤 메시지의 내용인지 문의드립니다!

5

전달 주신 링크 확인해 보니 상품 상세 페이지에서 카카오톡 공유하기 케이스인 듯 한데
테스트 시 첨부 이미지와 같이 카카오톡 채팅창에서 상품 썸네일이 정상적으로 노출되어서요
혹시 어떤 에러가 발생하는지도 알 수 있을까요?

6

알림 받으신 케이스는 사용된 이미지URL이

https://static-resource.discovery-expedition.com/cdn-cgi/image/q=75

입니다. 내부적으로 무한 리디렉션 하는 URL이고 현재 사이트에 서 위 주소를 사용하고 있지 않는데요.

위 주소를 사용할만한 상황이 있나요?

7

https://www.discovery-expedition.com/product-detail/DXSH3111N-WWS?godNo=GM0021122131414&utm_source=naver&utm_medium=shopping&utm_campaign=DXSH3111N-WWS&utm_content=220822_XPBZ_2F0000N_01&utm_term=SH&n_media=8753&n_query=디스커버리브릭운동화&n_rank=1&n_ad_group=grp-a001-02-000000044840487&n_ad=nad-a001-02-000000320251324&n_campaign_type=2&n_mall_id=discovery&n_mall_pid=GM0021122131414&n_ad_group_type=2&n_match=3&NaPm=ct%3Dmhcty2pz|ci%3DER99310608-b53b-11f0-b39d-826927b4b21a|tr%3Dpla|hk%3D403fc038743543a4a7a6e3938b4f472c6ee82796|nacn%3DoJoeD4AwUI4LB

광고 추적용 파라메터를 추가하셔서 광고하시는 상품 랜딩에서 공유시 에러 발생하는 것으로 재현됩니다.
모바일에서 카카오톡으로 공유는 메시지 전체 크기 10k 제한이 있어서 앞서 안내드린 것과 같이 사용자 정의 템플릿 사용하시고
공유 시점에는 링크를 정제해서 처리 하시면 좋을 것 같습니다.

해당페이지에서 섬네일 이미지도 위에 오류 유발하는 URL사용하시는 것으로 보입니다.

8

https://static-resource.discovery-expedition.com/cdn-cgi/image/q=** 링크는 S3 버킷에 있는 이미지로 추정은 되는데 링크가 잘린 상태라 저희 측에서도 확인이 어려워서 문의드렸습니다. 카카오 측에서도 확인이 어려운 걸까요?

9

위 에 기재드린 그대로 입니다. 이미지 URL이 아래와 같이 전달되었어요.

"imageUrl":"https://static-resource.discovery-expedition.com/cdn-cgi/image/q=75,format=auto,fit=scale-down,onerror=redirect/images/goods/ec/X21NDXSH3111NWWS/thnail/D729ECDFD424450EB2C1DDFAF8C083A2.png"
10

넵 확인 감사합니다 그러면 Window PC에서 카카오톡 웹공유 위해 피커를 띄우는 시점 미리보기 구성을 하려다 실패한 케이스가 아래 팝업일지 최종 확인 부탁드립니다!

팝업: https://sharer.kakao.com/picker/link?app_key=

11

PC에서 동작과 모바일에서 동작이 다릅니다.
첨부하신 화면은 PC에서 동작으로 오류가 발생하지 않고 모바일에서는 카카오톡앱을 호출해 카카오톡의 친구 피커가 표시됩니다.
이때 에러가 아래와 같이 발생합니다. PC와 달리 모바일에서는 전송크기 제한 10k가 있기 때문입니다.

앞서 안내드린 해결 방안으로 조치 해보시면 좋을 것 같습니다.

image
image1080×2316 114 KB

13

위에 전체 주소그대로 브라우저 주소창에 입력하셔야 재현되는데 그대로 하셨을까요?

14

2번째로 말씀 주신 메시지 길이 제한 이슈는 확인했습니다.

아래와 같이 링크에 utm 값이 붙은 상품 상세 페이지 링크는 MO 버전에서 카카오톡 공유하기 시
메시지 내용도 함께 길어져 관련 오류 발생되는 것으로 참고하겠습니다. (MO 버전은 10K 제한이 있기 때문)
–> 이를 위해 사용자 정의 템플릿 사용 및 링크 정제 처리하겠습니다.
https://www.discovery-expedition.com/product-detail/DXSH3111N-WWS?godNo=GM0021122131414&utm_source=naver&utm_medium=shopping&utm_campaign=DXSH3111N-WWS&utm_content=220822_XPBZ_2F0000N_01&utm_term=SH&n_media=8753&n_query=디스커버리브릭운동화&n_rank=1&n_ad_group=grp-a001-02-000000044840487&n_ad=nad-a001-02-000000320251324&n_campaign_type=2&n_mall_id=discovery&n_mall_pid=GM0021122131414&n_ad_group_type=2&n_match=3&NaPm=ct%3Dmhcty2pz|ci%3DER99310608-b53b-11f0-b39d-826927b4b21a|tr%3Dpla|hk%3D403fc038743543a4a7a6e3938b4f472c6ee82796|nacn%3DoJoeD4AwUI4LB

15

1번째 문의드린 에러의 경우 아래 이미지로 말씀 주셨는데 저는 PC에서 카카오톡 공유하기 했을 때 오류 재현이 되지 않아서요
2번 에러처럼 utm 적용 여부에 따라 달라질 수 있을까요?

https://static-resource.discovery-expedition.com/cdn-cgi/image/q=75,format=auto,fit=scale-down,onerror=redirect/images/goods/ec/X25FDKDJ56056BKS/thnail/3B466223946C498480345D3A963BA84A.png

16

브라우저에 바로 입력하면 브라우저가 인코딩 해줘서 오류 발생하지 않지만

URL의 q 파라마터에 컴마(,) 등호(=) 를 URL 인코딩 없이 사용해서 그런것 같습니다.

q 파라메터의 value를 인코딩해서 사용해보시겠어요?

17

브라우저로 직접 입력하지 않고 상품 상세 페이지에서 카카오톡 공유하기 시도해도 정상적으로 공유 가능합니다.
아래 캡처본은 PC 버전이지만 MO 크롬 브라우저에서 테스트하였습니다.

  1. https://www.discovery-expedition.com/product-detail/DKDJ56056-BKS 진입

2. 카카오톡 공유하기 클릭 시 정상적으로 공유하기 가능

image

18

네, 잘 조회되네요.

패킷이 잘려서 발생한 오류였나보네요.
그래도 가급적 쿼리파라메터의 value는 예상치 못한 상황 겪지 않도록 URL 인코딩 하시면 좋을 것 같습니다.
참고 부탁드리고

앞서 안내드린것과 같이 “이미지 업로드” 기능 활용하셔서 섬네일 생성중 발생하는 문제를 최소화 해보는 것도 추천드립니다.

감사합니다.

19

그러면 결론적으론 아래와 같이 2가지 이슈를 조치하면 될까요?

  1. 카카오톡 에러 발생 이슈
  • 오류 디바이스: PC
  • 오류 내용: Window PC에서 카카오톡 웹공유 위해 피커를 띄우는 시점에 미리보기 구성을 하려다 카카오톡 공유 실패함
  • 조치 필요: 카카오 측에 미리 업로드 해서 발송하는 “이미지 업로드” 기능 활용 필요
  1. 메시지 길이 제한 이슈
  • 오류 디바이스: MO
  • 오류 내용: 메시지 길이가 10K 제한이 있으나 utm 값이 붙은 상품 상세 페이지 링크 문자 길이가 길어 카카오톡 공유 실패함
  • 조치 필요: utm 값 적용된 링크 길이 단축 필요
20

바쁘시겠지만 위 내용 확인 부탁드립니다

21

안녕하세요.

여기에 답변 주신건으로 해결 하신게 아니었나요?

이미지 URL에 인코딩 안된 특수문자가 있어서 메시지 패킷이 훼손되는것으로 봤습니다.

"imageUrl":"https://static-resource.discovery-expedition.com/cdn-cgi/image/q=75,format=auto,fit=scale-down,onerror=redirect/images/goods/ec/X21NDXSH3111NWWS/thnail/D729ECDFD424450EB2C1DDFAF8C083A2.png"

[해결책]

(1) URL의 q 파라마터에 컴마(,) 등호(=) 등을 사용하지 않도록 URL 구성하시면됩니다.

(2) 1번을 할 수 없는 경우, 카카오 측에 미리 업로드 해서 발송하는 “이미지 업로드” 기능 활용 하시면됩니다.

(3) 사용하시는 패턴상 메시지를 구성하는 구성 요소가 너무 길어지면 모바일에서 10k 초과 하는 경우 에러 발생할 수 있으나 테스트 해보시고 1,2번 조치만으로 오류가 없다면 링크 길이 단축은 불필요합니다.

검토 해보시겠어요?

카카오톡 공유 에러 관련