프론트엔드
채널톡 iOS26 대응기
두줄요약
iOS26에서 Safari 주소창 변경으로 채널톡 메신저 하단에 빈 공간이 보이는 문제를 대응했습니다. CSS 우회와 커버 오버레이 방식을 거쳐 채팅 경험을 해치지 않는 방향으로 적용했습니다.
문제 상황
- iOS26 출시 후 Safari 주소창 디자인 변경으로 고객사 사이트 위에 설치된 채널톡 메신저 하단에 빈 공간이 보이는 현상 발생
- 기능 동작에는 문제 없지만, 시선이 집중되어 채팅 경험 저하
해결 방법
- CSS와 safe-area 조정으로 주소창 영역을 덮는 방식 시도
- 사이트 height를 0으로 줄여 빈 공간 노출을 막는 우회안 검토, 이후 scrollTop 복원 처리 추가
- 최종적으로 메신저 오픈 시 고객사 사이트 전체를 채널톡 색상의 커버로 동적 추가하는 방식 적용
주의할 점
- height를 0으로 줄이면 스크롤 영역 소실과 Safari 주소창 상태 변화로 자연스러운 브라우징 경험 훼손
- 다양한 사이트와 시나리오에서 테스트 필요