핸드폰 메뉴를 클릭하면 자꾸 이상한 팝업창이 떠요.
지금까지 제작시 메뉴 클릭 문제에 대한 피드백은 없었는데 고객사에서 문득 이런 피드백이 전달되었습니다.
핸드폰 카카오톡으로 전달 받은 링크를 클릭하고 햄버거 메뉴를 누르면, URL 열기, URL 공유, URL 복사 항목의 버튼팝업이 발생한다는 것이었습니다. 그래서 이거 어떤거 누르면 되냐는 질문에 다소 의아하여 캡쳐해달라고 요청드렸습니다.
이 문제는 제가 사용하는 PC에서는 발생하지 않고, 모바일 브라우저(크롬, 사파리)에서도 발생하지 않았습니다. 다른 아이폰의 모바일 브라우저에서 테스트해봐도 동일한 문제가 발생하지 않았습니다. 혹시나 업데이트가 제대로 안된 오래된 폰 문제일 수도 있다고 생각하여 폰의 기종을 고객사에 여쭤보았지만, 오래된 폰도 아니었고, 다른 분의 모바일 브라우저에서도 동일한 증상이 발생한다는 것입니다.
해결 방법에 대한 접근
- OS 별 모바일 브라우저에서도 동일한 문제가 발생하는지 확인
- 햄버거 메뉴를 누르면 팝업창이 뜨는 문제 브라우저의 정체 확인
- 햄버거 메뉴를 누르면 얼마나 자주 팝업창이 뜨는지 확인
OS 별 모바일 브라우저에서도 동일한 문제가 발생하는지 확인
사용하는 안드로이드 폰에서도 테스트를 진행해보았습니다. 보유하고 있는 몇개의 기기를 이용해 여러 브라우저들을 테스트 하였습니다. 하지만, 안드로이드 폰의 다른 브라우저에서는 발생하지 않았습니다. 해당 문제는 아이폰에서만 발생하는 듯 보였습니다.
햄버거 메뉴를 누르면 팝업창이 뜨는 문제 브라우저의 정체 확인
일반 브라우저에서는 이러한 문제가 발생하지 않았지만, 고객사에서 보내주신 이미지를 자세히 보니, 카카오톡 자체 브라우저임을 확인하였습니다. 보통 이런 앱에 삽입되어 있는 자체 브라우저 들은 예전의 ie(인터넷익스플로러) 때와 마찬가지로 제대로 CSS를 구현하지 못하거나 자주 다양한 버그를 가지고 있습니다. 혹시나 싶어 아이패드의 카카오톡 자체 브라우저를 이용해 동일한 테스트를 진행하였더니 똑같은 문제가 발생하였습니다. 해당 문제는 카카오톡 자체 브라우저의 문제로 확인하였습니다.
햄버거 메뉴를 누르면 얼마나 자주 팝업창이 뜨는지 확인
이 부분은 메뉴를 누를 때마다 매번 팝업창이 떴습니다. 앱을 종료시키고 닫아봐도 동일한 문제가 지속적으로 발생하였습니다. 이러한 증상은 태블릿 역시 동일하였습니다.
그렇다면 해결 방법은??
👉 임시파일 데이터 삭제가 해답!!
카카오톡 하단의 더보기 > 설정(상단의 기어모양 아이콘) > 데이터 저장공간 > 임시데이터 삭제를 눌러 캐시를 비워주시면 해당 문제는 해결이 됩니다. 이러한 문제는 대부분 캐시 문제일 경우가 많습니다. 만약 이 문제로 해결이 되지 않는다면 피드백 주세요.
오늘은 사소하지만, 까다로운 문제인 카카오톡 헴버거 메뉴를 클릭했을 때 발생하는 팝업 에러에 대해 알아보았습니다. 다음엔 더 좋은 글로 찾아 뵙겠습니다. 감사합니다.
