스크롤바 커스텀 완전 정복: 남들과 다른 개성 있는 CSS 디자인 7가지 실전 예제

스크롤바 커스텀 남들과는 다른 개성 있는 스크롤바 CSS 디자인

남들과 다른 개성 있는 CSS 디자인 7가지 실전 예제

CSS 몇 줄만으로 밋밋한 기본 스크롤바를 블로그 컨셉에 딱 맞는 개성 있는 디자인으로 바꿀 수 있다. 방문자들이 스크롤을 내릴 때마다 눈에 띄는 커스텀 스크롤바는 블로그의 완성도를 한층 끌어올린다.

스크롤바가 그냥 회색 막대기인 블로그랑, 메인 컬러에 맞게 꾸며진 블로그랑 첫인상이 다르다. 디테일 하나가 전체 인상을 좌우한다는 걸 스크롤바로 실감할 수 있다.

 

📋목차

• 스크롤바 커스터마이징의 기초 이해
• webkit-scrollbar 속성 완벽 해부
• 7가지 실전 스크롤바 디자인 예제
• Firefox에서 스크롤바 꾸미기
• 특정 영역에만 적용하는 법
• 모바일에서 스크롤바 처리 방법
• 브라우저 호환성과 주의사항

🔩 스크롤바 커스터마이징의 기초 이해

"스크롤바 커스텀"은 웹 브라우저가 기본으로 제공하는 스크롤바의 색상, 두께, 모양을 CSS로 변경하는 작업이다. 이 기능은 크롬, 엣지, 사파리 같은 웹킷 기반 브라우저에서는 ::-webkit-scrollbar 의사 요소를 통해 비교적 쉽게 적용할 수 있다.

스크롤바는 크게 세 부분으로 구성된다. 스크롤바 전체 영역인 track, 실제로 움직이는 핸들 부분인 thumb, 그리고 스크롤바 양 끝의 화살표 버튼인 button이다. 이 세 요소를 각각 조절하면 원하는 디자인을 만들 수 있다.

🔍 webkit-scrollbar 속성 완벽 해부

"webkit-scrollbar" 관련 속성을 하나씩 알아보자.

/* 스크롤바 전체 너비 설정 */
::-webkit-scrollbar {
width: 8px;
}

/* 스크롤바 배경(트랙) */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

/* 스크롤바 핸들(thumb) */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}

/* 핸들 호버 상태 */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

width를 0으로 설정하면 스크롤 기능은 유지하면서 스크롤바를 시각적으로 숨길 수도 있다. 스크롤바 없이 깔끔한 레이아웃을 원할 때 유용한 트릭이다.

🎨 7가지 실전 스크롤바 디자인 예제

다양한 상황에서 바로 쓸 수 있는 "스크롤바 커스텀" 예제 7가지를 정리했다.

첫 번째, 미니멀 그레이 스타일이다.

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

두 번째, 그라디언트 컬러 스타일이다.

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff6b6b, #feca57);
border-radius: 10px;
}

세 번째, 다크 테마 스타일이다.

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #e94560; border-radius: 4px; }

네 번째, 네온 글로우 스타일이다.

::-webkit-scrollbar-thumb {
background: #00f5ff;
border-radius: 6px;
box-shadow: 0 0 6px #00f5ff;
}

다섯 번째, 심플 라인 스타일이다.

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-thumb { background: #333; }

여섯 번째, 테두리 있는 스타일이다.

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb {
background: #fff;
border: 3px solid #333;
border-radius: 10px;
}

일곱 번째, 브랜드 컬러 적용 스타일이다. 블로그 메인 컬러를 thumb 배경색으로 지정하면 통일감 있는 디자인이 완성된다.

🦊 Firefox에서 스크롤바 꾸미기

Firefox는 webkit 방식을 지원하지 않는다. 대신 scrollbar-width와 scrollbar-color 속성을 사용한다.

* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

scrollbar-width는 thin, auto, none 세 가지 값만 지원하고, 세밀한 조절은 불가능하다. 크롬만큼 디테일한 커스터마이징은 안 되지만 기본적인 색상과 두께는 조절할 수 있다.

📦 특정 영역에만 적용하는 법

전체 페이지가 아니라 특정 div나 textarea에만 커스텀 스크롤바를 적용하고 싶을 때는 해당 요소에 직접 스타일을 넣으면 된다.

.custom-scroll::-webkit-scrollbar {
width: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #4caf50;
border-radius: 3px;
}

이렇게 하면 .custom-scroll 클래스가 붙은 요소에만 커스텀 스크롤바가 적용된다. 코드 블록이나 사이드바처럼 스크롤이 생기는 특정 영역에 포인트를 줄 때 유용하다.

📱 모바일에서 스크롤바 처리 방법

모바일 기기는 터치 방식이라 기본적으로 스크롤바가 표시되지 않거나 아주 잠깐만 나타났다가 사라진다. 커스텀 스크롤바 CSS를 적용해도 모바일에서는 효과가 없는 경우가 많다.

모바일에서 불필요하게 스크롤바 관련 코드가 실행되는 걸 막고 싶다면 미디어 쿼리로 분리하는 방법이 있다.

@media (min-width: 768px) {
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; }
}

⚠️ 브라우저 호환성과 주의사항

webkit 방식은 크롬, 엣지, 사파리에서는 잘 동작하지만 Firefox에서는 지원하지 않는다. 크로스 브라우저 대응을 위해서는 webkit 방식과 Firefox scrollbar-color 방식을 함께 써야 한다.

스크롤바 너비를 너무 넓게 설정하면 콘텐츠 영역이 좁아지고 레이아웃이 어색해질 수 있다. 6~10px 정도가 실용적인 범위다. 그리고 스크롤바 색상이 배경색과 너무 비슷하면 사용자가 스크롤 위치를 파악하기 어려우니 대비를 충분히 주는 게 좋다.

---

출처 및 참고
- MDN scrollbar-color: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
- CSS-Tricks scrollbar: https://css-tricks.com/almanac/properties/s/scrollbar/
- Can I Use: https://caniuse.com/css-scrollbar