iOS에서 커스텀 스크롤바 적용 안되는 이유 (feat. 삽질)

nagosu·2024년 8월 8일

iOS 스크롤

서론

자주 거래하던 클라이언트로부터 또 한 건의 의뢰가 들어왔다.

하지만 그때는 몰랐다.

이게 한 달 동안 나의 발목을 잡을지...

기존 작업자가 있다가 내가 이어받은 상황이었는데

퍼블리싱 수정과 자바스크립트를 이용한 기능 구현을 통해 실제 시연이 가능하게 만드는 작업이었다.

처음 받았을 때 이런식으로 커스텀 스크롤바가 적용이 되어있었다.

::-webkit-scrollbar {
  background-color: transparent;
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #fec20f;
  border-radius: 16px;
  border: 4px solid transparent;
}

프론트엔드 개발이나 퍼블리싱을 꽤나 작업해 본 사람들은 밥 먹듯 자주 보던 코드일 것이다.

그래서 나는 화면 크기에 따른 반응형 수정 작업을 완료한 후 클라이언트에게 작업물을 전달하였다.

돌아온 답변은?

아니 내가 분명히 작업할 때는 딱히 문제가 없어보였는데???

그래서 우선 VSCode에서 Live Server를 통해 로컬 서버를 열고 아이패드에서 동일 포트로 접속해 직접 확인해 보았다.

스크롤이 어디갔지??

처음엔 Safari 자체에서 커스텀 스크롤바가 보이지 않는 줄 알았다.

그래서 Safari뿐만 아니라 Chrome에서도 가지고 있던 아이패드, 아이폰 모두 테스트해봤는데 동일한 현상이 나타났다.

그런데 생각해 보니 Webkit 기반의 브라우저라면 맥북이든 아이패드, 아이폰이든 똑같이 보여야 하는 것 아닌가?

여기서 잠깐 개념을 정리하고 가보자.

Webkit 기반 브라우저란?

Webkit 기반의 브라우저는 Webkit이란 렌더링 엔진을 사용해 웹 페이지를 표시하는 브라우저를 의미한다.

Webkit은 원래 Apple의 Safari 브라우저를 위해 개발된 오픈 소스 프로젝트이고, HTML, CSS, Javascript 등의 웹 표준을 처리하고 렌더링하는 역할을 한다.

과거에는 Google Chrome, Opera 등 다양한 브라우저들이 Webkit을 사용했지만, 현재 가장 많이 사용하는 웹 브라우저인 Google Chrome은 Webkit에서 분기된 Blink 엔진을 사용하고 있다.

따라서 현재는 Microsoft Edge, Opera, Brave 등도 Blink 엔진을 사용하고 있다.

그런데 Blink 기반의 브라우저에서도 ::-webkit-scrollbar와 같은 Webkit 프리픽스가 붙은 CSS 속성이 동작하는 이유는, Blink가 Webkit에서 파생된 엔진이기 때문에 여전히 Webkit 기반의 속성을 지원하기 때문이다.

다시 본문으로 돌아와서, 처음에는 태블릿에서 ::-webkit-scrollbar가 적용되지 않는 이유 이런 식으로 구글에 검색했지만, 내가 원하는 결과는 나오지 않았다.

그러다 중요한 사실을 알게 되었다.

정말 자세히 보면, 스크롤할 때 흰색 스크롤바가 생기는 것을 볼 수 있었다.

심지어 배경이 흰색이었던 영역에서는 스크롤바 자체가 보이지 않았기 때문에 태블릿에서 스크롤바가 생기지 않는다고 착각했던 것이다.

그렇게 조금 더 삽질을 하다 문득 떠오른 것이 있었다.

나는 평소에 아이패드를 다크 모드로 사용하는데, 혹시 화이트 모드로 바꾸면 어떻게 될까?

아.. 결국에는 태블릿 자체에서 커스텀 스크롤바가 적용되지 않는 것이 아니라 아이패드에서 화이트 모드일 때는 검정색, 다크 모드일 때는 흰색으로 나타나는 기본 상태라는 것을 드디어 깨달았다.

그래서 업무폰이 안드로이드 기기이기 때문에 혹시나 싶어 접속해 보니, 커스텀 스크롤바가 잘 적용되어 있는 것을 확인할 수 있었다.

그래서 왜 적용이 안될까?

한국어 검색 결과로는 레퍼런스가 한 개도 없어서 열심히 영어로도 검색해 봤지만, 별다른 소득은 없었다.

그때 한 가지 블로그 글이 눈에 들어왔다.

https://frontendmasters.com/blog/how-to-fix-the-invisible-scrollbar-issue-in-ios/

블로그 제목이 How to fix the invisible scrollbar issue in iOS browsers인데, 한국어로 번역하면 iOS 브라우저에서 스크롤바가 보이지 않는 문제를 어떻게 해결할까 정도가 되겠다.

블로그 본문을 요약하면 내용은 이렇다.

::-webkit-scrollbar CSS가 iOS에서 적용되지 않는 이유는 Apple의 Webkit 엔진에서 iOS 브라우저를 위한 스크롤바 렌더링 방식을 제한적으로 구현했기 때문이다.
iOS의 Safari 및 다른 Webkit 기반 iOS 브라우저는 성능 최적화와 일관된 사용자 경험을 위해 스크롤바 스타일링을 제한한다.
iOS의 경우 스크롤바가 시스템에서 직접 렌더링되며, 이를 통해 터치 기반 장치에서의 스크롤 동작이 더 부드럽고 직관적으로 작동하도록 설계되었다.
이러한 이유로 iOS에서는 ::-webkit-scrollbar를 통해 스크롤바를 사용자 정의하는 기능을 지원하지 않는다.

그리고 결정적으로 다음 글에서 Apple의 공식 답변을 확인할 수 있었다.

https://forums.developer.apple.com/forums/thread/670065

작성자의 질문은 이렇다.

안녕하세요!

스크롤 가능한 컨테이터를 가지고 있는데, 이 컨테이너는 대부분의 브라우저와 기기에서 정상적으로 작동합니다.

하지만 iOS 14에서는 문제가 발생합니다.

iOS 12까지는 의도한 대로 잘 동작하고, iOS 13은 현재 테스트 할 수 없는 상황입니다.

목표는 항상 스크롤바가 표시되도록 하는 것입니다.

그러나 iOS 14에서는 스크롤이 발생할 때만 네이티브 스크롤바가 표시됩니다.

iOS 14 사용자들을 위해 이 문제를 해결할 수 있는 방법이 있을까요?

미리 감사드립니다!

div {  
	max-height: 20rem;
  	overflow-x: hidden;
  	overflow-y: auto;
  	margin-right: 0.25rem;
  	
    ::-webkit-scrollbar-track {
    	border-radius: 0.125rem;
    	background-color: lightgray;
  	}
  	
    ::-webkit-scrollbar {
    	width: 0.25rem;
    	border-radius: 0.125rem;
  	}
  	
    ::-webkit-scrollbar-thumb {
    	border-radius: 0.125rem;
    	background-color: gray;};
  	}
}