[FE] 카카오톡 공유하기 기능 느림 이슈

https://choq.tistory.com/130

[FE] React 카카오톡 공유 개발

 

위 방법으로 가볍게(?) 공유하기 기능을 추가했다. 

성공적인 테스트를 마무리하고 사용할 이미지와 타이틀 등을 다시 수정했다. 그리고 나서 빌드배포까지 진행했다.

 

 

공유하기 기능 지연 이슈

테스트하려고 모바일 기기에서 카카오톡 공유 버튼을 작동시키니 아무 반응이 없었다. 어라라..

정확히는 반응이 상당히 느렸다. 에러가 난건가 싶어서 코드를 보려는데 그때 카카오톡 공유하기 기능이 작동되었다. 체감상으로는 8초는 더 걸린것 같다. 반응에 더욱 민감한 모바일 유저에게 이 정도의 시간은 없는 기능이라고 봐도 무방하겠다.. 그래서 무엇이 이전과 차이인지 찾아봤다.

 

결론은 이미지 크기 차이였다. 이미지 크기에 따라서 공유하기 버튼 작동 시간이 지연된다고 한다. 

이전에 테스트했던 이미지는 정말 작은 이미지였고 이번에 추가한 이미지는 원본으로 가로만 3000픽셀이 넘어가는 나름 대용량의 사진이었다. 공유하기 기능을 사용하면 카카오측에서는 해당 이미지 파일의 처적화 작업을 먼저 진행하게 되는데, 이 과정에서 이미지의 크기가 크다면 그만큼 시간이 더 오래 걸리는 것이다.

 

해결방법

고로 이미지의 사이즈만 줄이면 정상작동한다.

나 또한 이미지 사이즈를 변경해서 진행했더니 원하던대로 빠른 공유하기 작동이 진행되었다.

 

이미지 크기 줄이기

맥 기준 줄이는 꿀팁을 하나 공유하자면 사진을 열고 직접 픽셀을 조정할 수 있다. 이미지 파일을 열고 상단우측에 [마크업]을 선택해준다. 그리고 하단 아래 빨간 체크로 된 [크기조절] 아이콘을 클릭해준다. 

 

그러면 바로 픽셀을 조절할 수 있는 창이 나오는데, 여기서 픽셀을 줄이고 확인버튼을 누르면..!! 이전보다 사이즈가 줄어든 이미지를 만날 수 있다.

 

---

왜 og용 작은 이미지를

따로 관리하는지..확인 완료.