스크롤바와 사용자 경험
사용자들은 웹사이트를 탐색할 때 어느 정도의 경험을 기본적으로 기대합니다. 예를 들어, 사이트 왼쪽 상단의 로고를 클릭하면 홈페이지로 이동할 것이라고 생각하는 것이 자연스럽습니다. 하지만 그렇게 동작하지 않는다면 어떨까요? 사이트의 모든 요소가 여러분의 기대와 정반대로 작동한다면요?
스크롤바가 존재하는데도 마우스 휠을 돌리거나 트랙패드로 화면을 넘겨도 아무런 반응이 없다면 어떨까요? 이것은 누구에게나 끔찍한 사용자 경험(UX)으로 느껴질 것입니다.
좋은 사용자 경험을 만들거나 망치는 요소에 대해서만으로도 하나의 글을 쓸 수 있지만, 그중 확실한 부분은 바로 제대로 작동하는 스크롤바와 미적인 목적을 위한 스크롤바 숨김 기능입니다.
스크롤바는 웹페이지에서 무엇을 볼 수 있을지 예측하게 해주는 훌륭한 지표입니다. 스크롤바가 보이면 아래로 스크롤해서 더 많은 콘텐츠를 확인해야 한다고 기대하게 됩니다. 반대로 스크롤바가 보이지 않는 경우는 보통 다음 두 가지 이유 중 하나입니다.
- 보이는 것이 곧 전부다 – 뷰포트(화면)의 높이와 너비가 사이트의 높이와 너비와 정확히 일치하는 경우입니다.
- 디자인에 의한 숨김 – 사이트 디자인에 애니메이션 화살표처럼 스크롤 가능한 추가 콘텐츠가 있음을 알려주는 요소가 포함된 경우입니다. 이때 스크롤바는 사용자가 실제로 스크롤을 시작할 때만 나타나며, 그전까지는 기본적으로 숨겨져 있습니다.
개발자 입장에서 적절한 스크롤바 구현은 사이트의 사용자 경험을 향상시키고, 그 결과 방문자가 사이트에 더 오래 머물도록 만듭니다.
참고: 가로 스크롤바는 의도적으로 사용하고 싶을 때만 활용하세요. 사이트에서 의도치 않게 나타난다면 대부분 컴포넌트 크기 조정에 문제가 있다는 신호입니다. 원래 없어야 할 가로 스크롤바를 억지로 숨겨서 문제를 덮지 마세요.
CSS 구현 방법
구현에 들어가기 전 가장 먼저 알아야 할 점은 모든 주요 브라우저가 동일하게 만들어지지 않았다는 것입니다. Firefox에서 작동하는 코드가 Chrome이나 Internet Explorer에서는 작동하지 않으며, 그 반대도 마찬가지입니다. CSS는 이러한 문제를 해결하기 위해 벤더 프리픽스(vendor prefix), 즉 브라우저 프리픽스(browser prefix)를 사용해 크로스 브라우저 지원을 제공합니다. 주요 프리픽스는 아래 표와 같습니다.
벤더 프리픽스 치트시트
| 벤더 프리픽스 | 지원 브라우저 |
| -webkit- | Chrome, Safari, 최신 버전의 Opera, 그리고 iOS용 Firefox를 포함한 대부분의 iOS 브라우저 |
| -moz- | Firefox (iOS 제외) |
| -o- | 구버전 Opera |
| -ms- | Internet Explorer 및 MS Edge |
출처: MDN(Mozilla Developer Network) – CSS Prefixes 문서
그렇다면 언제 프리픽스가 필요하고 언제 필요하지 않은지 어떻게 알 수 있을까요? CSS를 만드는 개발자들은 항상 새로운 속성과 새로운 방식을 실험하고 있습니다. 따라서 비교적 최근에 도입된 속성이라면 아직 모든 브라우저와 호환되지 않을 가능성이 높습니다.
다행히도 여러분의 CSS를 분석해 필요한 프리픽스를 자동으로 추가해 주는 도구(Autoprefixer 등)들이 있습니다. 직접 확인하고 싶다면 Can I Use나 MDN 공식 문서를 활용해 브라우저 호환성을 파악하는 것도 좋은 방법입니다.
코드 작성하기
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox implementation */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* webkit browsers implementation */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* Sample Text From https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p>It is! It's the city of New New York! Strictly speaking,
it's the fifteenth New York since the original, so that
makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York. River, you know my name. You whispered my name in
my ear! There's only one reason I would ever tell anyone my
name. There's only one time I could... New-new-Doctor. Don't
you think she looks tired? I'll tell you what, then:
don't...step on any butterflies. What have butterflies ever
done to you? Oh, yes. Harmless is just the word: that's why
I like it! Doesn't kill, doesn't wound, doesn't maim. But
I'll tell you what it does do: it is very good at opening
doors!</p>
<p>Aw, I wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were! You gave up
on me! Ooh, that's rude. Is that the sort of man I am now?
Am I rude? Rude and not ginger. Sweet, maybe... Passionate,
I suppose... But don't ever mistake that for nice. Please,
when Torchwood comes to write my complete history, don't
tell people I travelled through time and space with her
mother! New-new-Doctor. Don't you think she looks tired? I'm
the Doctor, I can save the world with a kettle and some
string! And look! I'm wearing a vegetable! New-new-Doctor.
I'm sorry. I'm so sorry. It is! It's the city of New New
York! Strictly speaking, it's the fifteenth New York since
the original, so that makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York.</p>
</div>
</div>
</div>
</body>
</html>
이 코드를 Chrome에서 실행하면 회색 배경의 div와 함께 스크롤할 수 있는 텍스트가 표시됩니다. 가장 널리 쓰이는 두 가지 구현 방식이 모두 포함되어 있습니다. Firefox용 구현은 코드 상단의 <style> 태그 안에 있고, 나머지 대부분은 -webkit- 프리픽스가 붙은 속성으로 처리됩니다.
실행 결과를 살펴보면 스크롤바는 화면에 보이지 않지만, 여전히 스크롤 기능 자체는 정상적으로 작동하는 것을 확인할 수 있습니다. 이것은 CSS에서 스크롤바를 숨기는 여러 방법 중 하나일 뿐입니다. 여러분에게 효과가 있었던 다른 방법이 있는지, 직접 코드를 수정해 보면서 새로운 방식을 찾아보는 것도 좋은 학습이 될 것입니다.