CSS 커스텀 스크롤바 스타일링 완벽 가이드

웹 디자인에서 스크롤바 커스터마이징은 브랜드 아이덴티티를 강화하고 사용자 경험을 향상시키는 중요한 요소입니다. 이 문서에서는 브라우저별 스크롤바 스타일링 방법과 모범 사례를 다룹니다.

브라우저 지원 현황

CSS Scrollbars Module Level 1 (표준)

Firefox: 64+ (완전 지원)
Chrome: 미지원
Safari: 미지원
Edge: 미지원

Webkit Scrollbar Pseudo-elements (비표준)

Chrome: 완전 지원
Safari: 완전 지원
Edge (Chromium): 완전 지원
Firefox: 미지원

Firefox 스타일링 (표준)

Firefox는 W3C 표준인 CSS Scrollbars Module Level 1을 지원합니다.

기본 문법

.element {
  /* 스크롤바 두께 */
  scrollbar-width: thin; /* thin, auto, none */

  /* 스크롤바 색상: thumb색상 track색상 */
  scrollbar-color: #ff230a rgba(0, 0, 0, 0.1);
}

scrollbar-width 옵션

auto: 브라우저 기본 두께
thin: 얇은 스크롤바
none: 스크롤바 숨김 (스크롤 기능은 유지)

예제

/* 수평 스크롤 컨테이너 */
.horizontal-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 35, 10, 0.5) rgba(0, 0, 0, 0.05);
}

Webkit 브라우저 스타일링

Chrome, Safari, Edge는 webkit 전용 가상 요소를 사용합니다.

주요 Pseudo-elements

/* 스크롤바 전체 */
::-webkit-scrollbar {
  width: 12px;  /* 세로 스크롤바 */
  height: 12px; /* 가로 스크롤바 */
}

/* 트랙 (배경) */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* 썸 (핸들) */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* 썸 호버 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 코너 (가로/세로 스크롤바가 만나는 부분) */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* 증가/감소 버튼 (화살표) */
::-webkit-scrollbar-button {
  display: none;
}

사용 가능한 모든 Pseudo-elements

::-webkit-scrollbar - 전체 스크롤바
::-webkit-scrollbar-track - 트랙 (배경 영역)
::-webkit-scrollbar-track-piece - 썸이 가리지 않은 트랙 부분
::-webkit-scrollbar-thumb - 드래그 가능한 썸 (핸들)
::-webkit-scrollbar-button - 증가/감소 화살표 버튼
::-webkit-scrollbar-corner - 가로/세로 스크롤바가 만나는 코너

실전 예제

예제 1: 카테고리 탭 스크롤바

.category-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 35, 10, 0.3) rgba(0, 0, 0, 0.05);
}

/* Webkit (Chrome, Safari, Edge) */
.category-tabs::-webkit-scrollbar {
  height: 6px;
}

.category-tabs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.category-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 35, 10, 0.3);
  border-radius: 3px;
}

.category-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 35, 10, 0.5);
}

예제 2: 다크모드 지원

/* 라이트 모드 */
.scrollable-element {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 35, 10, 0.3) rgba(0, 0, 0, 0.05);
}

.scrollable-element::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.scrollable-element::-webkit-scrollbar-thumb {
  background: rgba(255, 35, 10, 0.3);
}

/* 다크 모드 */
[data-theme="dark"] .scrollable-element {
  scrollbar-color: rgba(255, 35, 10, 0.5) rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .scrollable-element::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .scrollable-element::-webkit-scrollbar-thumb {
  background: rgba(255, 35, 10, 0.5);
}

[data-theme="dark"] .scrollable-element::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 35, 10, 0.7);
}

예제 3: 얇은 투명 스크롤바

.minimal-scrollbar {
  overflow-y: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Webkit */
.minimal-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.minimal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.minimal-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

예제 4: Glassmorphism 스타일 스크롤바

.glass-scrollbar {
  overflow: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Webkit */
.glass-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.glass-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 5px;
}

.glass-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.glass-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

모바일 최적화

iOS Safari 주의사항

iOS Safari는 기본적으로 스크롤바를 숨기고 스크롤 중에만 표시합니다.

.mobile-scroll {
  overflow-x: auto;

  /* iOS 네이티브 스크롤 느낌 */
  -webkit-overflow-scrolling: touch;

  /* 스크롤바 항상 숨김 (iOS 기본 동작 유지) */
  scrollbar-width: none; /* Firefox */
}

.mobile-scroll::-webkit-scrollbar {
  display: none; /* Webkit */
}

터치 최적화 스크롤

.touch-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* 스크롤 스냅 포인트 */
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
}

.touch-scroll > * {
  scroll-snap-align: start;
}

반응형 스크롤바 크기

.responsive-scrollbar {
  overflow: auto;

  /* Firefox - 기본 */
  scrollbar-width: auto;
  scrollbar-color: #ff230a #f1f1f1;
}

/* 데스크톱 - 두꺼운 스크롤바 */
@media (min-width: 769px) {
  .responsive-scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
}

/* 모바일 - 얇은 스크롤바 */
@media (max-width: 768px) {
  .responsive-scrollbar {
    scrollbar-width: thin;
  }

  .responsive-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
}

접근성 고려사항

1. 충분한 색상 대비

/* ❌ 나쁜 예: 대비가 낮음 */
.low-contrast {
  scrollbar-color: #e0e0e0 #f5f5f5;
}

/* ✅ 좋은 예: 명확한 대비 */
.high-contrast {
  scrollbar-color: #666 #f0f0f0;
}

2. 호버 상태 명확히 표시

.accessible-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 35, 10, 0.5);
  transition: background 0.2s ease;
}

.accessible-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 35, 10, 0.8);
}

/* 포커스 상태도 고려 */
.accessible-scrollbar::-webkit-scrollbar-thumb:active {
  background: rgba(255, 35, 10, 1);
}

3. 최소 터치 타겟 크기

/* 모바일에서 최소 44x44px 권장 */
@media (max-width: 768px) {
  .touch-friendly::-webkit-scrollbar {
    width: 12px; /* 최소 12px */
  }

  .touch-friendly::-webkit-scrollbar-thumb {
    min-height: 44px; /* iOS 권장 크기 */
  }
}

모범 사례

1. 크로스 브라우저 대응

항상 Firefox와 Webkit 스타일을 함께 작성하세요.

.element {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: thumbColor trackColor;
}

/* Webkit */
.element::-webkit-scrollbar {
  width: 8px;
}

.element::-webkit-scrollbar-thumb {
  background: thumbColor;
}

.element::-webkit-scrollbar-track {
  background: trackColor;
}

2. 성능 최적화

/* ✅ GPU 가속 활용 */
.optimized-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 35, 10, 0.5);
  border-radius: 3px;
  will-change: background;
  transition: background 0.2s ease;
}

/* ❌ 피해야 할 것: 복잡한 애니메이션 */
.heavy-scrollbar::-webkit-scrollbar-thumb {
  animation: rainbow 5s infinite; /* 성능 저하 */
}

3. 디자인 일관성

브랜드 색상과 일관되게 스크롤바를 디자인하세요.

:root {
  --brand-primary: #ff230a;
  --brand-primary-light: rgba(255, 35, 10, 0.3);
  --scrollbar-track: rgba(0, 0, 0, 0.05);
}

.branded-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary-light) var(--scrollbar-track);
}

.branded-scrollbar::-webkit-scrollbar-thumb {
  background: var(--brand-primary-light);
}

.branded-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}

4. 조건부 스타일링

특정 요소에만 커스텀 스크롤바를 적용하세요.

/* ❌ 전역 적용은 피하기 */
* {
  scrollbar-width: thin;
}

/* ✅ 특정 컨테이너에만 적용 */
.scrollable-container {
  scrollbar-width: thin;
}

.modal-content {
  scrollbar-width: thin;
}

.code-block {
  scrollbar-width: thin;
}

5. 폴백 스타일 제공

/* 커스텀 스크롤바를 지원하지 않는 브라우저를 위한 기본 스타일 */
.fallback-scroll {
  overflow: auto;
  background: linear-gradient(to right, white 30%, transparent),
              linear-gradient(to left, white 30%, transparent);
  background-size: 40px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
}

테스트 체크리스트

스크롤바 스타일링을 적용한 후 다음을 확인하세요:

참고 자료

공식 문서

CSS Scrollbars Module Level 1 - W3C 표준
Webkit Scrollbar Pseudo-elements - Webkit 공식 블로그

브라우저 호환성

접근성 가이드라인

결론

커스텀 스크롤바는 웹사이트의 시각적 완성도를 높이는 효과적인 방법입니다. 하지만 다음을 항상 기억하세요:

접근성 우선: 색상 대비와 터치 타겟 크기 확인
크로스 브라우저 대응: Firefox와 Webkit 스타일 모두 작성
성능 고려: 복잡한 애니메이션 피하기
일관성 유지: 브랜드 아이덴티티와 일치
테스트 철저히: 다양한 기기와 브라우저에서 확인

적절히 사용하면 사용자 경험을 크게 향상시킬 수 있습니다.