공유하기 썸네일 이미지 문의

문의 시, 디벨로퍼스 앱ID를 알려주세요.


안녕하세요. 공유하기 시 채팅창 내 썸네일 문의 드립니다.

  1. 카카오톡 api 를 실행시켜서 공유하기 시 이미지 비율 1:1
  2. url 복사 후 카카오톡 채팅창에 입력/전송 시 이미지 비율 2:1

같은 페이지를 공유하는건데 위와 같이 이미지 비율이 달라집니다.
케이스별로 이미지가 짤리지 않게 보이는 게 목표인데
이런 경우 이미지를 여러개 준비 해야 하나요? 그렇다면 og:image태그를 여러개 작성하면 되는건지?
현재는 og:image태그 하나만 존재합니다.
알려주시면 감사하겠습니다.

안녕하세요.

카카오톡 공유하기 또는 URL 미리보기의 이미지 비율은 2:1 입니다.
800 x 400 사이즈 처럼 비율을 맞추어 이미지를 제공 부탁드립니다.

추가로, 썸네일에 표시되는 이미지는 카카오의 최적화 과정을 거치게 됩니다.
이 때, 의도하신 바와 달리 확대되거나 할 수 있습니다.
예를 들어 전부 흰 화면 가운데 사람이 작게 있다면 비율과 상관없이 가능한 이를 확대하여 표시하는 등의 보정기능이 함께 있으므로
이미지를 준비하실 때, 너무 빈 공간이 많지 않게 구성 부탁드립니다.


그럼 og:image는 2:1 비율 하나만 준비하면 되나요?
위 이미지와 같이 1:1 비율로 카카오톡 전송되는 경우도 짤리면 안되어서요.

그리고 현재 2:1비율로 보이는 경우도 의도하지 않게 짤려보이는데 최적의 이미지 샘플이 있다면 알려주세요…

첫번째 이미지와 같은 URL 미리보기 또는 기본 템플릿 사용하는 스크랩 방식의 카카오톡 공유하기에서 참고하는 og:image 는 2:1 비율로 준비 부탁드립니다.

두번째 이미지의 경우 사용하신 메시지 템플릿 에서 이미지 비율을 600 x 314로 지정 해두신 상태입니다.
2:1 비율의 이미지를 전달 시, 600 x 314 로 재조정하기에 이미지가 잘릴 수 있습니다.
지정해두신 이미지 비율에 맞는 이미지 경로를 파라미터로 전달 부탁드립니다.

자세한 확인을 위해 이미지 경로 부탁드립니다.


카카오계정 에서 테스트 했을때는 안짤리고 잘 보이는데… 왜 카카오톡 공유 시에는 짤려보이는걸까요??

https://www.kyobo.com/file/ajax/display-img?fName=/dtc/2024/10/31/NWU4NGM5ZDgt_이벤트%202_%20저축보험%20가입%20이벤트%2011월%20이벤트배너.png

앞서 첨부해 주신 Web보기 App 보기 버튼이 있는 메시지 말씀하시는건가요?

아니요 가장 처음 첨부한 첫번째 사진이요~ url로 공유하기로 한건데, 썸네일이 짤려서 보이는데, 카카오톡 메세지 디버깅에서는 안짤려보이네요.

해당 이미지는 600 x 314 사이즈로 되어 있습니다.
2:1 비율로 변경해 보시겠어요?

혹시 카카오톡 애플리케이션 메세지 템플릿에서 조정을 해야할까요? 아님 메타태그에 이미지 width, height를 명시하는 걸까요?

실제 이미지의 비율을 변경하셔야 하는데요
이미지를 다운받아 보면 현재 600 x 314 사이즈로 되어 있습니다.

아 네, url 직접 공유를 통해 2:1 비율로 전송하는 경우 이미지 크기를 2:1 비율로 조절하니 안 짤리고 잘됩니다. 그런데 카카오톡 공유하기 api를 사용(web보기/app보기 버튼이 있는 메세지)의 경우 1:1비율로 전달되어서 여전히 짤려서 보이는데요. 이 메세지의 이미지는 어떻게 조절해주면 되나요?

재현 가능한 URL 부탁드립니다.

https://www.kyobo.com/dgt/web/event/event-detail/307?gubn=ing

이곳에서 공유하기 아이콘 눌러서 카카오톡 전송이요. 모바일로 해야합니다!

https://www.kyobo.com/file/ajax/display-img?fName=%2Fdtc%2F2024%2F10%2F31%2FNWU4NGM5ZDgt_%EC%9D%B4%EB%B2%A4%ED%8A%B8+2_+%EC%A0%80%EC%B6%95%EB%B3%B4%ED%97%98+%EA%B0%80%EC%9E%85+%EC%9D%B4%EB%B2%A4%ED%8A%B8+11%EC%9B%94+%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%B0%B0%EB%84%88.png

네, 앞서 말씀드린바와 같이

  1. 해당 이미지를 다운로드 받아보니 600 x 314 사이즈로 되어 있습니다.

2:1 또는 3:4 또는 1:1 비율로 이미지 제공 부탁드립니다.

아, 아니요. 제가 테스트를 2:1 비율 이미지로 변경했는데 url공유 시 2:1 비율로 잘 전달됩니다.
말씀드린대로 web보기/app보기가 있는 메세지는 여전히 1:1로 전송되어 잘려 보입니다.
https://t.kyobo.com/dgt/web/event/event-detail/703?gubn=ing
위 링크 모바일로 다시 테스트 부탁 드립니다.

사용하신 기본 템플릿의 경우 이미지 영역은 400x400 으로 제공됩니다.
이를 전달하신 이미지와 동일하게 하고자 하시는 경우 아래와 같이 구현 부탁드립니다.

Kakao.Link.sendDefault({
	objectType : "feed",
	//내용
	content:{
		title : title
		, description : description
		, imageUrl : imgUrl
		, imageWidth: 600, <- 사이즈 지정
		, imageHeight: 300, <- 사이즈 지정
		,link: {
			mobileWebUrl: linkUrl,
			webUrl: linkUrl
		}
	},
...

안녕하세요. 혹시 이미지 비율은 코드로 어떻게 작성하면 될까요?


사진에서 CenterCrop/원본비율유지/사용자인자를 코드로 지정해주고 싶습니다.

안녕하세요.

아쉽지만, 기본 템플릿을 사용하는 sendDefault 기능에서는 이미지 비율을 조정하실 수 없습니다.

현재 1:1 비율로 공유할때가 문제인데요 …
2:1의 비율은 고려하고 있지 않습니다.
첨부된 케이스 둘 다 600x300의 이미지를 사용하고 있습니다.
첨부된 이미지 중 첫번째를 보면, "메세지 템플릿"에서 400x400으로 테스트 한 것은 잘 나오는데,
두번째 이미지를 보시면 sendDefault를 사용하여 imageWidth: 400, imageHeight:400 으로 동일 하게 지정했는데도 썸네일이 잘려서 보이고 있습니다.
동일한 이미지를 사용하는데도 다르게 보이는 이유가 무엇일까요? 또한 600x300 이미지를 사용해서 1번의 이미지처럼 나오게 하는것이 목표인데 어떻게하면될까요…