채널톡 iOS26 대응기

문제 상황

• iOS26에서 Safari 주소창 디자인 변경으로 SDK 형태의 고객용 메신저 하단에 빈 공간이 생기며 뒤의 사이트가 노출되는 문제
• 기능 동작에는 영향이 없지만, 시선이 분산되어 채팅 경험이 저하되는 상황

원인 분석

• Safari의 viewport와 주소창 영역 처리 방식으로 인해 CSS만으로는 하단 주소창 영역 접근이 어려운 제약
• 메신저를 띄울 때 스크롤 영역과 주소창 동작이 함께 흔들리며 자연스러운 브라우징 경험이 깨지는 문제

해결 방법

• 처음에는 safe-area 등 CSS 조합과 화면 덮기 시도를 검토했지만 한계 확인
• 고객사 사이트의 height를 0으로 줄였다가 복원하는 방식과 scrollTop 복원으로 일부 문제를 완화
• 최종적으로 메신저 열림 시 사이트 전체 크기의 동적 커버를 추가해 하단 노출과 스크롤 문제를 함께 해결

주의할 점

• height 조작은 스크롤 위치 상실과 주소창 확대 상태 고정 문제를 유발
• Safari 버그로 보이는 viewport 깨짐, fixed 요소 비표시 같은 예외 상황도 함께 점검 필요

적용해볼 점

• 브라우저 UI 변경에 대비해 CSS 단독 해법보다 오버레이·커버 방식까지 포함한 대응 검토
• 실제 기기와 베타 환경에서 다양한 시나리오 테스트를 통해 부작용 확인