Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

꿀팁: UI 디자인과 어울리는 스크롤바 스타일 제작

by
Length:LongLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

UI 디자인에 맞는 스크롤바의 룩앤필(look and feel)을 제작할 수 있도록 이 꿀팁에서 그 방법을 알려드리겠습니다. CSS에서 웹킷 브라우저가 제공하는 기능을 살펴보고, 그 외의 브라우저에서도 제공되도록 jQuery 대비책(fallback)을 활용할 것입니다.

빠르고 편한 방법을 찾나요?

웹사이트의 특정한 컴포넌트에 스타일을 적용하는 데 도움이 필요하다면 전문가의 도움을 받을 수 있는 지름길이 있습니다. Envato에는 다양한 컴포넌트의 스타일을 재적용하거나 커스터마이징하는 작업을 도와줄 전문가들이 있습니다.

Web component services on Envato Studio

브라우저에 관한 단상

웹킷 기반의 브라우저를 말할 때는 애플 사파리와 크롬에 대한 얘기입니다. 그 둘은 전체 데스크톱 브라우저 시장의 40% 이상을 점유하고 있습니다. 태블릿의 경우, 어떤 회사의 브라우저가 쓰인다 해도 애플의 iPad는 늘 웹킷을 사용합니다. 구글은 크롬을 안드로이드 OS와 Chromebooks에 추가했는데, 둘 다 구글 크롬에 기반을 두고 있습니다.

이 통계를 보니 스크롤바에 스타일을 적용하는 방법은 전망이 밝아 보이네요!


1단계: 스크롤바가 있는 페이지

실제로 CSS를 이용해 스크롤바에 스타일을 적용하기 전에 스타일이 잘 동작하는 것을 보여주는 데모, 즉 스크롤바가 있는 페이지가 필요합니다. 스크롤바는 다음의 경우에 보입니다.

  • 눈에 보이는 윈도우 영역보다 콘텐츠가 더 많은 경우 (스크롤바가 오른쪽에 나타납니다.)
  • textarea에 텍스트가 충분히 많아서 스크롤바가 나타나는 경우
  • 다른 페이지를 보이게 하려고 iframe을 사용하는 경우
  • div나 다른 블록 요소에서 overflow 속성을 지정한 경우

이번 데모용으로 마지막 옵션을 선택하겠습니다. 다음은 저의 초기 마크업입니다.

모의 콘텐츠로 가득 찬 div일 뿐이지요. 그리고 초기 CSS가 있습니다. 크기가 고정되었고 가로와 세로 스크롤바 모두 보이게 됩니다.

아래 이미지와 유사한 화면을 볼 수 있습니다.


2 단계: 웹킷 브라우저에서 시작

과거 언제인가 (수년 전) 웹킷 브라우저에서 스크롤바를 대상으로 CSS 가상 요소가 도입되었습니다. 테마에 맞춰 페이지에 스타일을 적용할 기회를 제공한 것이었지요.

-webkit- 접두어와 웹킷의 맞춤형 스크롤바 속성을 이용해 스타일을 적용해 봅시다. 기억하세요. 저는 여러분이 쉽게 이해하도록 기본 CSS 속성을 쓰고 주석에 설명을 달겠습니다.

이 가상 요소가 나타나면, 웹킷은 브라우저에 장착된 스크롤바의 렌더링 기능을 끄고 CSS에서 제공하는 데이터를 사용합니다. -- Surfin' Safari

그리고 나머지 가상 요소들입니다.

이 CSS 코드를 추가한 후, 여러분은 다음과 같은 효과를 볼 수 있습니다. (한 번 더 얘기하는데 웹킷 브라우저만 해당합니다.)

그거 아세요? 인터넷 익스플로러도 자체적으로 스크롤바를 스타일 할 수 있습니다!

맞아요. 실은 IE가 CSS로 스크롤바에 스타일을 적용하도록 도와준 첫 번째 브라우저였습니다. IE 5.5인 시절로 돌아가긴 하지만 그때는 색상만 바뀌었어요.

이런 속성들은 오늘날 여전히 사용됩니다. 데모용으로 IE 9에서 이 속성을 확인해 보세요.

어떻게 보이는지 알겠지요.


3 단계: 웹킷 외의 브라우저에 대한 대비책

이 정도면 웹킷은 충분합니다. 파이어폭스, IE, 오페라에서도 이 기능을 적용할 수 있습니다. 이를 위해  jScrollPane 폼에 멋진 대비책이 있습니다. 켈빈 럭(Kelvin Luck)이 이 jQuery 플러그인을 개발했으며, 작업 시 구원자가 되어 줄 것입니다. 

켈빈의 웹사이트에는 좋은 예제들이 많습니다. 그러나 기본적으로 사용할 목적이므로 jQuery 파일과 jScrollPane 파일을 다운로드하고 다음과 같은 방식으로 실행하면 됩니다.

일단 테마에 맞추기 위해 jquery.jscrollpane.css를 열고 색상 값이 있는 줄을 다음과 같이 편집합니다. (성능을 향상하고자 스타일 코드를 전부 자신의 파일 안에 넣고 싶을 것입니다.) 

다음은 파이어폭스에서 보이는 화면입니다.


마무리

(다를 예들과 마찬가지로) Gmail과 Google+ 같은 웹 앱에서는 이미 아이디어를 수용하고 있으며, 계속해서 탄력이 붙으면  파이어폭스와 IE에서도 자체적인 스타일을 제공할 것입니다.

여러분이 이 꿀팁을 즐겨 읽으셨으면 하는 바람입니다. 그리고 여러분의 디자인 작품에서 스타일일 적용된 스크롤바를 보길 기대할게요!


그 밖의 참고 자료

Envato Market에 있는 맞춤형 스크롤바

이미 만들어진 제품을 찾고 있다면, Envato Market에 판매 중인 scrollbar 세트가 있습니다. 웹 사이트에 연결해서 다양한 효과를 낼 수 있습니다. 그중에 일부를 살펴보지요.

1. Lazybars - 테마 적용 가능한 반응형 스크롤바 jQuery 플러그인

Lazybars는 사용하기가 편하며, 테마를 적용할 수 있는 스크롤바 jQuery 플러그인입니다. 그저 웹사이트에서 스크롤바 요소에 클랙스 명을 추가하면 이 스크롤바를 실행하면 됩니다.

Lazybars에 들어 있는 테마들을 활용하거나 일부 간단한 CSS를 이용해 자신만의 테마를 만드세요.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - 테마를 적용할 수 있는 반응형 스크롤바 jQuery 플러그인

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress"는 플러그인으로 워드프레스 사이트에서 원하는 디자인의 스크롤바를 제작할 수 있습니다. 맞춤형 디자인을 위한 옵션이 많아서 색상, 효과, 스크롤 지연 시간, 레일 스트립 등 다수의 변수를 바꿀 수 있습니다.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar는 워드프레스 웹사이트용 원하는 대로 변경이 가능한 커스텀 스크롤바 jQuery 플러그인입니다. 이 플러그인을 이용해 웹 페이지의 스크롤바를 원하는 대로 바꿀 수 있고 원하는 곳에 단축 코드로 커스텀 스크롤바(Custom Scrollbar)를 넣을 수 있습니다. 테마 파일일지라도 가능합니다.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller에서 사이트용으로 스크롤바를 제공합니다. 들어 있는 세 가지 스킨이 마음에 들지 않으면 CSS를 편집해서 원하는 스타일을 적용하면 됩니다. hover 했을 때의 스크롤이나 마우스가 스크롤 밖으로 나갈 때 희미해지는 것과 같은 고급 기능이 들어 있습니다. 아이폰/아이패드에서 잘 작동합니다.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar 스타일

웹사이트에 아름답고 화려한 CSS3 스크롤바를 적용하기가 쉽습니다. 기존의 CSS 파일에 삽입하고 새로운 CSS3 스크롤바를 경험해 보세요.

CSS3 Scrollbar Styles
CSS3 Scrollbar 스타일
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.