채널톡 iOS26 대응기

2025년 9월 15일 iOS26 출시로 Safari 주소창 디자인이 크게 바뀌면서, 고객사 사이트에 SDK 형태로 설치되는 채널톡 메신저 하단에 구멍이 생겨 뒤의 사이트가 비쳐 보이는 문제가 생겼다. 기능 동작 자체에는 문제가 없었지만 시선이 그쪽으로 쏠려 채팅 경험을 해쳤다. 베타 단계부터 CSS 접근과 height 0 접근을 차례로 시도하다 결국 커버를 덮는 방식으로 출시일에 맞춰 대응을 마쳤다.

핵심 포인트

Safari가 viewport 영역을 주소창을 제외한 나머지로 잡아, safe-area를 포함한 CSS만으로는 주소창 영역에 접근할 수 없었다.
관점을 바꿔 "구멍에 보일 만한 것을 없애자"는 발상으로 고객사 사이트의 height를 0으로 만들었더니 실제로 안 보이게 됐다.
하지만 height가 0이 되면 스크롤 영역이 사라져 메신저를 닫았을 때 원래 스크롤 위치를 잃고 최상단으로 이동했다.
더 큰 문제는 스크롤이 사라지면 Safari 주소창이 항상 확대된 상태로 남아, 모바일 브라우저의 자연스러운 스크롤 경험을 해친다는 점이었다.
최종 해법은 메신저를 열 때 고객사 사이트와 같은 크기에 채널톡과 같은 색인 커버를 동적으로 붙여, 구멍을 막은 것처럼 보이게 하는 것이었다.

상세 정리

전례: 2021년 iOS15에서 Safari 주소창이 상단에서 하단으로 옮겨져 채팅창을 가렸을 때도 같은 성격의 대응을 한 적이 있다.
이번 변화의 배경은 Liquid Glass와 함께 주소창 디자인이 크게 바뀐 것이고, 일반 사이트는 문제가 없지만 SDK로 설치되는 메신저는 영향을 받았다.
대응 시점: 팀이 미리 iOS26 베타로 여러 시도를 해, 출시일인 9월 15일에 맞춰 제품에 적용을 마쳤다.
1차 시도 CSS: 고객사에 영향을 주지 않고 가장 안전한 방법이라 화면을 덮을 수 있는 스타일을 다양하게 시도했지만, viewport 계산 방식 때문에 주소창 영역은 CSS로 접근할 수 없었다.
2차 시도 height 0: 메신저를 열 때 사이트의 height를 0으로 적용하고 닫을 때 되돌리는 방식으로, 하단 주소창 영역에 사이트가 보이지 않게 하는 데는 성공했다.
부작용 1 스크롤 위치: 메신저를 열 때의 scrollTop을 기억했다가 닫을 때 height를 되돌리며 그 위치로 이동시키는 방식으로 복원할 수 있었다.
부작용 2 주소창 상태: Safari는 아래로 스크롤하면 주소창을 축소하고 위로 스크롤하면 확대하는데, 스크롤 자체가 사라지니 항상 확대된 상태가 됐다. 주소창을 자바스크립트로 제어할 방법이 없어 개선이 불가능했다.
기능에 영향을 주는 문제는 아니었지만 조금이라도 더 편한 채팅 경험을 위해 멈추지 않고 다른 방법을 찾았다고 밝힌다.
3차 시도 커버: 메신저를 열 때 사이트와 같은 크기에 같은 색인 커버를 동적으로 append하는 방식으로, 열었다 닫아도 스크롤 위치가 유지되고 주소창도 변화가 없었다.
검증: 팀에서 다양한 사이트와 시나리오로 테스트해 특별한 문제가 없어, iOS26 접속 사용자에게 이 방식을 적용하기로 결정했다.
글에 담지 못한 것들: 재현 조건을 정확히 파악하지 못했지만 viewport가 깨져 UI가 디바이스 스크린 밖으로 벗어나는 경우가 종종 있었고, 상담에서 메시지 입력을 위해 키보드를 열 때도 문제가 있었다고 언급한다.