혹시 스크롤바를 꾸미려면 JavaScript가 필요하다고 생각하셨나요? 저도 처음엔 그렇게 생각했습니다. 어떤 JavaScript 라이브러리를 써야 하나 검색하다가 시간을 꽤 날렸습니다. 알고 보니 CSS 의사 요소(pseudo-element) 몇 줄이면 충분했습니다. 의사 요소란 HTML 태그에 직접 클래스를 붙이지 않고도 특정 부분의 스타일을 제어할 수 있는 CSS 문법입니다. 괜히 어렵게 생각하고 있었던 거였습니다.
크롬, 엣지, 사파리처럼 웹킷(WebKit) 기반 브라우저에서는 ::-webkit-scrollbar라는 의사 요소로 스크롤바 전체를 제어합니다. 웹킷이란 애플이 개발하고 현재 크롬, 사파리, 엣지 등이 공통으로 사용하는 브라우저 렌더링 엔진입니다. 전 세계 브라우저 점유율 기준으로 크롬 계열이 65% 이상을 차지하기 때문에(출처: StatCounter), 웹킷 방식을 먼저 다루는 것이 현실적입니다. 사용자 대부분이 크롬 계열 브라우저를 쓴다는 사실은, 이 방식으로 시작하는 것이 합리적이라는 근거가 됩니다.
스크롤바를 구성하는 핵심 요소는 세 가지입니다. track은 스크롤바 전체 배경 영역으로, 손잡이가 움직이는 레일에 해당합니다. thumb은 실제로 위아래로 움직이는 손잡이 부분입니다. button은 스크롤바 양 끝에 있는 화살표 영역입니다. 이 세 가지만 이해하면 스크롤바 커스터마이징의 90%는 해결됩니다.
직접 써보고 알게 된 것들
직접 써봤는데, width를 8px에서 5px로 줄이고 border-radius를 넣는 것만으로도 느낌이 완전히 달라졌습니다. 처음엔 그라디언트(linear-gradient) 스타일이 멋있어 보여서 넣었다가, 글 내용보다 스크롤바가 더 튀는 것 같아 결국 블로그 메인 컬러에 맞춘 단색 thumb으로 바꿨습니다. 스크롤바를 꾸미는 과정에서 가장 먼저 배운 교훈은, 눈에 보기 좋은 것과 실제로 잘 어울리는 것은 다르다는 겁니다.
width를 0으로 설정하면 스크롤 기능은 살리면서 스크롤바를 시각적으로 완전히 숨기는 것도 가능합니다. 이 옵션이 필요한 경우는 생각보다 많습니다. 코드 블록이나 가로 스크롤 영역처럼 스크롤바가 레이아웃을 방해하는 곳에 쓰면 깔끔하게 정리가 됩니다. 다만 스크롤바가 완전히 사라지면 사용자가 스크롤 가능한 영역임을 인지하기 어려울 수 있으니, 어디에 쓸지는 신중하게 판단해야 합니다.
Firefox 호환, 나중에 알면 조금 아쉽습니다
그런데 한 가지 함정이 있었습니다. ::-webkit-scrollbar는 Firefox에서 전혀 작동하지 않습니다. 솔직히 이건 예상 밖이었습니다. 적용하고 나서 한참 뒤에 Firefox로 확인해봤을 때 아무것도 바뀌지 않은 걸 보고 당황했습니다. Firefox는 웹킷 방식을 지원하지 않고, scrollbar-width와 scrollbar-color라는 별도의 표준 속성만 사용합니다.
여기서 scrollbar-width란 스크롤바의 두께를 thin, auto, none 세 가지 값으로만 설정할 수 있는 속성입니다. 픽셀 단위의 세밀한 조절이 불가능하다는 점이 웹킷 방식과 가장 크게 다릅니다. 이 제약이 처음엔 답답하게 느껴졌는데, 생각해보면 표준화를 위한 트레이드오프이기도 합니다. scrollbar-color는 thumb과 track의 색상을 지정하는 속성으로, thumb 색상과 track 색상을 나란히 입력하는 방식입니다. MDN Web Docs에 따르면 scrollbar-color와 scrollbar-width는 현재 Firefox와 크롬 최신 버전에서 모두 지원되는 표준 속성입니다.
제 블로그 방문자 통계를 보니 Firefox 비율이 5% 미만이었습니다. 그래서 실질적인 영향은 크지 않았지만, 그렇다고 아예 무시하는 건 좀 아쉽습니다. scrollbar-color와 scrollbar-width 두 줄만 추가하면 Firefox 사용자에게도 최소한의 커스텀 느낌을 줄 수 있으니, 크로스 브라우저 대응 차원에서 함께 작성해두는 것을 권합니다. 5%라는 숫자가 작아 보여도, 그게 실제 사람이라는 점을 기억하면 무시하기가 어렵더군요.
모바일 환경도 고려해야 합니다. 터치 방식의 모바일 기기는 스크롤바 자체가 거의 표시되지 않아 커스터마이징 효과가 없는 경우가 많습니다. 미디어 쿼리(media query)를 활용하면 이 문제를 깔끔하게 해결할 수 있습니다. 미디어 쿼리란 화면 크기나 기기 종류에 따라 CSS를 다르게 적용하는 문법으로, 태블릿 이상 기기에서만 스크롤바 스타일이 효과를 발휘하도록 조건을 걸 수 있습니다. 불필요한 코드가 모바일에서 낭비되지 않아 성능에도 유리합니다. 처음엔 이 부분을 놓쳐서 모바일에서 스크롤바 관련 스타일이 영향을 미치는 것 같아 고민했는데, 미디어 쿼리 하나로 깔끔하게 해결됐습니다.
예쁜 스크롤바가 목적이지, 불편한 스크롤바가 목적은 아닙니다
스크롤바를 꾸미다 보면 빠지기 쉬운 함정이 있습니다. 디자인에만 집중하다 보면 정작 사용성을 해치게 됩니다. 제 경험상 이건 꽤 구체적인 문제입니다. 처음엔 네온 글로우(box-shadow를 이용한 발광 효과) 스타일이 화려해 보여서 욕심이 났지만, 막상 적용해보니 글 내용보다 스크롤바가 먼저 눈에 들어왔습니다. 정보성 블로그에서 스크롤바가 콘텐츠를 압도하면 본말이 전도됩니다. 보조 UI는 보조 UI답게 있어야 한다는 걸 그때 배웠습니다.
스크롤바 너비는 6~10px 사이가 가장 실용적입니다. 4px 이하로 좁아지면 클릭하기 어렵고, 12px 이상이면 레이아웃이 압박받는 느낌이 납니다. thumb 색상은 배경색과 충분한 대비를 줘야 사용자가 스크롤 위치를 한눈에 파악할 수 있습니다. 배경과 너무 비슷한 색을 쓰면 심미적으로 세련되어 보일 수 있지만, 정작 어디까지 스크롤했는지 알기 어렵습니다. 네온 글로우 같은 화려한 스타일은 개인 포트폴리오 페이지에는 어울릴 수 있지만, 정보성 블로그에는 역효과가 날 가능성이 높습니다.
특정 영역에만 스타일을 적용하고 싶다면 클래스 선택자로 범위를 한정하면 됩니다. 전체 페이지가 아니라 코드 블록이나 사이드바처럼 특정 영역에만 커스텀 스크롤바를 적용하는 방식입니다. 직접 코드 블록 영역에만 스크롤바를 따로 꾸며봤는데, 가독성이 눈에 띄게 좋아졌습니다. 전체 페이지 스크롤바와 코드 블록 스크롤바를 다르게 디자인하면 사용자 입장에서도 두 영역이 구분되어 읽기 편해집니다.
스크롤바 디자인은 콘텐츠를 돋보이게 하는 조연이어야지, 주연이 되면 안 됩니다. 이 균형을 의식하고 작업하는 것과 그냥 멋있어 보이는 걸 고르는 것 사이에는 꽤 큰 차이가 있습니다. CSS 스크롤바 커스터마이징은 진입 장벽이 낮은 편이지만, 잘 하려면 웹킷 호환성과 Firefox 대응, 모바일 예외 처리, 사용성 균형까지 함께 고려해야 합니다. 처음이라면 width와 border-radius만 바꿔보는 것으로 시작하고, 익숙해지면 클래스 선택자로 특정 영역만 꾸미는 방식으로 확장해보시길 권합니다. 작은 디테일 하나가 블로그 전체의 완성도를 꽤 높여줍니다.
참고