Logo

CSS로 부드럽게 스크롤되는 목차 만들기

많은 양의 내용을 보여줘야하는 웹페이지에서 목차(TOC, Table of Contents) UI를 쉽게 볼 수 있는데요. 사용자가 목차에 있는 링크를 클릭하면, 번거롭게 스크롤을 여러 번 내리지 않아도 해당 페이지의 특정 지점으로 바로 건너뛸 수 있기 때문에, 더 나은 경험을 제공할 수 있습니다. 하지만 이 때 스크롤링이 너무 빠르게 일어나기 때문에 기존에 보던 화면과 이동한 화면이 비슷한 경우 사용자에게 혼선을 줄 수도 있는데요.

이번 포스팅에서는 함께 간단한 목차 UI를 구현하면서, 어떻게 하면 좀 더 부르럽게 스크롤링을 하여 사용자를 원하는 지점으로 데려갈 수 있는지에 대해서 살펴보겠습니다.

컨텐츠 영역

우선, 웹페이지의 주요 컨텐츠 영역을 HTML 마크업해 보겠습니다. 여기서 모든 <h2> 요소의 id 속성에 유일한 식별자를 설정하는 것이 중요한데요. 아래에서 목차에서 링크를 걸 때 id 속성값 앞에 # 기호를 붙여서 참조할 것이기 때문입니다.

<article>
  <h1>Web 기술</h1>
  <section>
    <h2 id="intro">머리말</h2>
    <p>
      웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는
      사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을 알아야 웹 기술을
      잘 활용할 수 있습니다. 아래의 링크들을 확인하여 다양한 웹 기술을
      배워보세요.
    </p>
  </section>
  <section>
    <h2 id="html">HTML</h2>
    <p>
      <a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML</a
      >(HyperText Markup Language)은 웹페이지에 내용을 기술하고 정의하는 데
      사용합니다.
    </p>
  </section>
  <section>
    <h2 id="css">CSS</h2>
    <p>
      <a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>(Cascading
      Style Sheets)는 웹페이지 콘텐츠의 모양이나 표현을 기술하는 데 사용합니다.
    </p>
  </section>
  <section>
    <h2 id="http">HTTP</h2>
    <p>
      <a href="https://developer.mozilla.org/ko/docs/Web/HTTP">HTTP</a>는 웹을
      통해 문서, 스타일시트, 스크립트, 이미지, 비디오, 글꼴 및 기타 리소스를
      가져오고 웹 서버로 다시 보내기 위한 기본적인 인터넷 프로토콜입니다.
    </p>
  </section>
  <section>
    <h2 id="outro">맺음말</h2>
    <p>
      웹 기술을 잘 배우셔서 멋진 웹사이트나 애플리케이션을 만드셨으면
      좋겠습니다. 읽어주셔서 감사합니다.
    </p>
  </section>
</article>

목차 영역

다음으로 목차 영역에 대한 HTML 마크업을 해볼까요? 각 <a> 요소의 href 속성은 위에서 설정한 id 속성값을 사용하여 #아이디 형태로 설정해줍니다. 이렇게 해시 기호가 앞에 붙어있는 링크를 클릭하면 브라우저는 페이지내에서 동일한 값이 id 속성으로 설정된 요소를 찾아서 그 곳으로 자동 스크롤 해줍니다.

이렇게 링크를 거는 방식을 앵커(anchor), 해시(hash), 조각(fragment) 등 다소 다양한 이름으로 불르는데요. 이 부분에 대해서 더 알고 싶으신 분들은 별도 포스팅을 참고 바랍니다.

<aside>
  <nav>
    <h2>목차</h2>
    <ul>
      <li>
        <a href="#intro">머리말</a>
      </li>
      <li>
        <a href="#html">HTML</a>
      </li>
      <li>
        <a href="#css">CSS</a>
      </li>
      <li>
        <a href="#http">HTTP</a>
      </li>
      <li>
        <a href="#outro">맺음말</a>
      </li>
    </ul>
  </nav>
</aside>

일반 스크롤링

지금까지 작성한 HTML 마크업에 약간의 CSS 스타일을 추가해주면 다음과 같은 웹페이지가 완성됩니다. 좌측 목차 영역 내의 링크를 한 번 클릭해보세요. 스크롤이 자동으로 이동하는 것을 보실 수 있으실 겁니다.

그런데 스크롤이 너무 빨리 되는 느낌이 들지 않으시나요? 스크롤바를 주의깊게 보지 않으면 스크롤이 되었다는 것을 놓칠 수도 있을 것 같죠?

부드러운 스크롤링

자, 이번에는 <html> 요소에 아래와 같은 CSS 스타일을 추가해 줘볼께요.

html {
  scroll-behavior: smooth;
}

다시 목차 내의 링크를 클릭해보시면 이 번에는 훯씬 부드럽게 스크롤링이 되는 것을 보시실 수 있으실 거에요. 웹페이지가 스크롤이 되고 있다는 것을 좀 더 알아차리기 쉬우시죠?

scroll-behavior 속성

CSS의 scroll-behavior 속성은 auto와 smooth 두 가지 값을 갖는데요. 기본 값인 auto는 처음에 보신 웹페이지와 같이 스크롤링이 눈깜짝할 사이에 일어납니다. 반면에 smooth는 두 번째 웹페이지처럼 스크롤링이 천천히 부드럽게 일어납니다.

옛날에는 스크롤의 움직임에 이러한 애니메이션 효과를 주려면 복잡하게 자바스크립트를 사용했어야 했는데요. 이제는 간단하게 CSS 속성 하나만으로 동일한 효과를 낼 수 있어서 정말 좋은 것 같습니다.

마치면서

지금까지 CSS의 scroll-behavior 속성을 활용하여 웹페이지 내의 다른 지점으로 이동하는 링크를 클릭했을 때 스크롤이 부드럽게 이동하게 하는 방법에 대해서 알아보았습니다. 적지적소에 잘 활용하셔서 사용자 경험을 향상시키는데 도움이 되었으면 좋겠습니다.

This work is licensed under CC BY 4.0

messageCircle