안녕하세요. 직방 프론트엔드 개발자 박동조라고 합니다.
카카오 Map API에 대해 문의 드릴게 있어 글을 올렸습니다.
저희 측에서 다음부동산을 위탁 운영하고 있는데요.
다음 부동산 mobile web (https://m.realty.daum.net/) 에서 간헐적으로 지도 이동 시, 지도가 깨지는 현상을 발견했습니다.
혹시 이 현상에
- 다른 문의가 있었나요?
- 해결 방법이 있나요?
- 지도에 마크, 이미지 등등 랜더링 하는 리소스를 줄이면, 좀 덜해질 수 있을까요?
그 외에 아시는 바가 있으시다면, 도움 부탁드립니다.
아래는 재현 환경과 재현 녹화 영상링크 입니다
환경 : 안드로이드 chrome
확인 기기 : S8, S8+, Note8 (하지만 안드로이드 대부분에서 나타날 수는 있다고 추측)
[다음 부동산 m 현상 녹화]
https://drive.google.com/file/d/1HZMVUzydWU1XdO3cVO061sq1lrd-aj41/view?usp=sharing
[카카오 map m 현상 녹화]
https://drive.google.com/file/d/1x6xwIDkEjbqPabePeegoZa1tmYpsg–l/view?usp=sharing
재현이 잘나타나는 조건
- 기기가 하드한 작업을 했거나, 하고 있을때
- 지도에 랜딩 시키는 리소스가 많을 때
해당 이슈는 제가 바로 재현이 힘들긴 하네요.
질문에 답변을 드리자면,
- Q: 다른 문의가 있었나요?
- A: 기존에 알려진 문제는 없었습니다.
- Q: 해결 방법이 있나요?
- A: 저도 처음 보는 현상이라 모르겠습니다.
- Q: 지도에 마크, 이미지 등등 랜더링 하는 리소스를 줄이면, 좀 덜해질 수 있을까요?
- A: 모르겠습니다.
각 영상에서는 노이즈가 덧씌워진 듯한 일부 영역이 보이는데,
실제로 그 영역에는 지도API에서 의도적으로 생성/배치하는 요소는 없습니다.
[1, 다음 부동산 m 현상 녹화 중 장면]
[2. 카카오 map m 현상 녹화 중 장면]
두 영상에서 보이는 노이즈 영역은 높이는 유사하지만 나타나는 위치가 조금 다릅니다.
노이즈 영역의 색상도 다르고요.
노이즈 영역 내에 불규칙적으로 구멍이 나 있는 것이 보이는데 그 구멍으로 지도 배경 색이 비쳐 보입니다.
구멍을 뚫은 이미지일 수도 있지만 저렇게 만들어진 이미지는 API에서 넣은 적이 없습니다.
그리고 영상 내에서도 구멍 패턴이 변경되는 걸 확인할 수 있는데, 이미지 처럼 정적인 리소스를 올린게 아닌 것 같습니다.
[3. 다음 부동산 m 현상 녹화 중 다른 장면]
여기서부터는 그냥 가정입니다.
동일 이슈가 각기 다른 기기에서 나타나는 것을 보면 분명 문제가 있어 보이긴 합니다만,
확인 된 기기들이 갤럭시 S시리즈인 것을 보면, 그리고 현상과 같이 엮어 보면
해당 시리즈의 그래픽 드라이버의 문제일 가능성도 있어 보입니다.
보여주신 영상 내에서 크롬 탭에 다른 페이지에 어떤 페이지가 떠 있는지는 알 수 없지만
크롬에서 GPU 렌더링시 장면 합성 중에 현재 보이지 않는 다른 탭의 데이터가 합성되어
보이는 탭의 페이지에 표출되는 현상이 보고된 바 있습니다.
이는 WebGL 페이지인 경우에 해당되긴 하지만
지도도 하드웨어 가속을 받기 위해 넣은 CSS 때문에 가능성이 있지 않을까 생각해 봅니다.
그래픽 유닛 제조사에 따라 다른 확률로 나타나긴 하지만
테스트 한 기기에 S8도 포함된 내용이 있습니다.
https://www.xda-developers.com/google-chrome-samsung-galaxy-s6-graphics-driver-bug/
위 링크의 상황에 해당될지 모르겠지만,
만약 해당 현상을 일부러 재현시키고
지도페이지를 제외한 한 번 모든 탭을 끄고 다시 지도를 조작했을 때에 같은 현상이 발생하는지 확인해 보세요.
