채널톡 iOS26 대응기

안녕하세요 채널톡에서 고객용 메신저를 만들고 있는 프론트엔드 엔지니어 대니얼입니다.

얼마전 2025년 9월 15일에 드디어 iOS26이 출시되었습니다. 고객용 메신저는 항상 채널톡을 사용하는 유저의 입장에서 생각하며 채팅 경험을 가장 중요하게 생각해 왔습니다. 지난 21년에도 iOS15가 출시되며 Safari 브라우저에서 항상 상단에만 있던 주소창이 하단으로 변경되며 채널톡의 채팅창을 가리게 되어 이에 대응하는 작업을 진행했습니다.

👉🏻 iOS15 대응기 (feat. 크로스 브라우징)

배경

이번에 출시된 iOS26에서도 Liquid Glass와 함께 Safari 브라우저의 주소창 디자인이 크게 변경 되었는데요. 일반 사이트의 경우에는 문제가 없지만 채널톡 메신저는 고객사 사이트에 SDK형태로 설치 되기 때문에 아래처럼 채널톡 메신저를 열면 하단에 구멍이 생겨 뒤에 있는 사이트가 보이는 문제가 있었습니다.

사실 채널톡의 기능 동작 자체에는 문제 없었지만 하단에 사이트가 보이니 시선이 너무 집중되어 채팅 경험에 좋지 않아 이를 대응하게 되었습니다.

채널톡 고객용 메신저 팀은 미리 iOS26 베타를 통해, iOS26에서도 최선의 채팅 경험을 위해 다양한 시도를 하여 대응을 했고 iOS26 출시일인 지난 9월 15일에 맞춰 고객용 메신저 제품에 적용 완료했습니다.

계획

CSS로 해결할 수 있을까

먼저 채널톡에서 시도한 방법은 CSS를 통해 해결하는 방법이었습니다. 이렇게 할 수만 있다면 가장 간단하면서도 고객사에 영향을 주지 않고 가장 안전한 방법이었습니다. 이를 위해 화면을 덮을수 있는 CSS Style을 다양하게 시도했습니다.

이 외에도 safe-area 등 CSS를 통해 메신저가 하단 주소창 영역도 덮을수 있도록 시도를 해보았지만, Safari 자체에서 viewport 영역을 주소창을 제외한 나머지 영역으로 잡고 주소창 영역은 단순히 CSS만으로는 접근할 수 없었습니다.

사이트의 height를 줄이자

채널톡 메신저의 CSS를 조정하는 것만으로 해결이 불가능 하다고 판단 되어지자 문득 이런 생각이 들었습니다. “결국 메신저를 열었을 때 하단에 구멍이 뚫려서 보이는 게 문제인데 뚫린 구멍에 보일 만한 것을 없애보자!”

그래서 테스트로 채널톡 메신저를 열 때, 아래의 CSS Style을 고객사 사이트에 적용하여 사이트의 height를 0으로 적용하고 채널톡 메신저를 닫을 때, 다시 원래대로 돌려 놓았습니다.

결과는 실제로 하단 주소창 영역에 고객사 사이트가 보이지 않게 되었습니다!

그럼 이번에는 해결 되었을까요?

안타깝게도 2가지 문제가 있었습니다.

1. 사이트의 height를 0으로 하게 되면 스크롤 영역이 사라지게 되어 채널톡 메신저를 열었다가 닫으면 기존에 고객사 사이트에서 위치해있던 스크롤 포지션을 잃어버리고 사이트 최상단으로 스크롤이 이동했습니다.

2. Safari는 스크롤시 아랫쪽으로 스크롤하면 주소창을 축소시키고 윗쪽으로 스크롤 하면 주소창을 다시 원래대로 확대시킵니다. 하지만, 사이트의 height가 0이 되어 스크롤이 사라지면 항상 주소창이 확대된 상태로 변했습니다. 이는 모바일 브라우저에서 제공하는 자연스러운 스크롤 경험을 해치게 되었습니다.

1번의 경우는, 그나마 개선 방법이 있었습니다. 채널톡 메신저를 여는 순간의 scrollTop을 기억했다가 메신저 닫을때, 고객사 사이트의 height를 다시 원래대로 돌려놓으며 기억해뒀던 scrollTop으로 다시 이동시켜 스크롤 위치를 복원하는 것이었습니다. 이렇게 적용하니 아래 영상과 같이 스크롤 위치는 원래대로 돌아오게 되었습니다.

하지만, 2번의 경우에는 Safari 브라우저의 주소창을 자바스크립트로 컨트롤 할 수 있는 방법이 없어서 개선이 불가능 했습니다. 주소창이 항상 확대되어 있는 것이 채널톡 기능에 영향을 주는것은 아니지만, 조금이라도 더 편한 채팅 경험을 살리기 위해 여기서 멈추지 않고 계속 다른 방법을 찾아보았습니다.

사이트에 커버를 씌우자!

“하단 주소창 영역에 고객사 사이트가 보여서 구멍 뚫린 것처럼 보이는데 채널톡 메신저를 열 때, 고객사 사이트 전체에 채널톡과 같은 색으로 커버를 씌워볼까?”

사이트에 커버를 씌워 마치 주소창 하단 영역에 뚫린 구멍을 막은 것처럼 보이는 방법을 생각했습니다. 이를 위해 채널톡 메신저를 열 때 아래와 같은 코드를 적용해 보았습니다.(코드는 설명을 위한 pesudo code입니다.)

메신저를 열 때, 동적으로 고객사 사이트와 같은 크기이며 채널톡과 색이 똑같은 커버를 append 하는 방법이었습니다. 이를 적용하니 채널톡 메시저를 열었다 닫아도 스크롤 위치가 유지되며 주소창도 변화가 없었습니다.

이 외에도 팀에서 다양한 사이트에서 다양한 시나리오로 테스트를 진행했는데 특별히 문제가 없어서 iOS26으로 접속한 유저들에게는 이 방식을 적용 시키자 결정하고 iOS26 대응은 마무리하게 되었습니다.

마무리하며

사실 고객용 메신저에서 iOS26 대응을 한 과정을 글로 작성하고 읽어보니 요약된 글로만 보면 굉장히 짧게 느껴지네요. 실제로 대응 과정에서는 글로 작성된 것 외에도 다양한 문제들을 직면 했었습니다.

iOS26에서 Safari를 쓰다 보면 재현 조건은 정확하게 파악하지 못 했지만 종종 viewport가 깨져서 UI가 아예 디바이스 스크린 밖으로 벗어나는 경우도 있었고, 가끔 상담에서 메세지 입력을 위해 키보드 열 때, position: fixed 인 요소들이 하얗게 변하며 사라지는 등 Safari 브라우저의 버그로 추정되는 내용들도 많았고 순탄치 못한 상황도 있었습니다.

고객들의 채팅 경험을 위해 iOS26 Safari의 버그로 보이더라도 이를 해결 또는 개선 가능한 방법들을 찾기 위해 수많은 테스트를 하며 CSS Style을 다양하게 적용해 보는 등의 과정이 있었습니다.

하지만, 채널톡 고객용 메신저는 하루 1000만명의 유저와 만나는 제품으로써 작은 경험 하나도 놓치지 않고 고객 경험을 최우선으로 하며 개선해 나가고 있습니다!

그 후

25년 11월 4일에 iOS26.1이 출시 되었습니다. iOS26이 출시된, 지난 9월 15일에 iOS26 대응 작업을 적용한 후로 약 1달반이 지난 시점에서 iOS26에서 발생했던 사이트 하단 주소창 영역에 구멍이 뚫려 보이는 문제를 Safari팀에서 해결해주어 iOS26.1에 적용을 해주었습니다.

실제로 iOS26.1을 업데이트하여 테스트 해보니 기존에 채널톡 고객용 메신저에서 적용했던 iOS26 대응 작업을 반영하지 않더라도 사이트에 화면을 덮는 어떤 요소(여기에서는 채널톡 고객용 메신저)가 뜨면 Safari에서 자체적으로 이를 감지하여 사이트 하단 주소창 영역에 구멍이 뚫려보이지 않도록 막아주도록 개선이 되었습니다.

Safari에서 이를 어떻게 감지하는지는…Safari팀만 알겠죠? 궁금하네요.

기존에 채널톡 고객용 메신저에 적용했던 iOS26 대응 작업은, 아직은 26.0.x 버전을 사용하시는 유저분들도 많으실 것 같아서 당분간은 유지 하되 추후에는 iOS26 대응 했던 부분은 제거할 예정입니다.