앵커 기본 사용법 스크롤 개념
웹 페이지를 보다 보면, 목차나 “맨 위로 가기” 같은 링크를 클릭했을 때 페이지 내에서 특정 위치로 바로 이동하는 경험을 해보셨을 것입니다.
이러한 기능을 구현하는 것이 바로 “앵커 스크롤”입니다. **앵커(Anchor)**는 말 그대로 닻이라는 뜻인데, 웹에서는 페이지 내 특정 지점을 표시하는 북마크 역할을 합니다. 따라서 앵커 스크롤은 이 북마크로 지정된 위치로 화면을 자동으로 스크롤해주는 것을 의미합니다.
예를 들어, 긴 웹 문서 상단에 목차가 있고 각 목차 항목을 클릭하면 해당 내용이 있는 부분으로 뷰가 이동하는 경우를 생각해봅시다.
사용자는 일일이 스크롤할 필요 없이 클릭 한 번으로 원하는 섹션을 바로 볼 수 있어 편리합니다.
이처럼 페이지 내비게이션을 위해 널리 쓰이는 것이 앵커 스크롤입니다.
초보자도 쉽게 따라 할 수 있을 만큼 기본 사용법은 단순하지만, 앵커 기본 사용법을 조금만 살펴보면 다양한 활용법과 주의사항이 있습니다.
HTML #id 앵커의 기본 원리
가장 기본적인 앵커 스크롤(앵커 기본 사용법)은 **HTML의 id 속성과 앵커 링크(<a> 태그)**를 활용해 구현합니다. 원리는 생각보다 간단합니다.
먼저 이동 대상이 될 목적지 요소에 고유한 id 값을 지정합니다. 그런 다음, 클릭할 링크에 href 속성으로 #과 해당 id를 작성하면 됩니다.
브라우저는 이러한 링크를 클릭할 때 페이지에서 동일한 id를 가진 요소를 찾고, 그 요소가 보이도록 자동으로 스크롤합니다.
예를 들어 아래와 같이 작성할 수 있습니다:
앵커 기본 사용법
<!-- 목차에 있는 링크 -->
<a href="#section2">2. 상세 내용 보기</a>
<!-- ...중략... -->
<!-- 본문의 섹션에 ID 부여 -->
<h2 id="section2">2. 상세 내용</h2>
<p>여기에 2번 섹션의 상세 내용이 있습니다...</p>
위 코드에서 <a href="#section2"> 링크를 클릭하면, 브라우저는 같은 페이지 내에서 id="section2"인 요소 (<h2 id="section2">)를 찾습니다.
그리고 그 요소가 화면에 맨 위로 올라오도록 페이지를 즉시 이동시킵니다.
이 동작은 브라우저가 기본적으로 제공하는 기능이므로, 별도의 스크립트 없이도 작동합니다.
이러한 방식으로 한 페이지 내 원하는 위치로 “점프”할 수 있습니다.
페이지 URL에는 #section2와 같이 해시(hash)가 추가되는데, 이 덕분에 사용자가 현재 보고 있는 위치를 URL로 공유할 수도 있습니다.
예를 들어 http://예시사이트.com/page#section2 형태의 주소를 누군가에게 보내주면, 그 사람이 페이지를 열 때 자동으로 해당 섹션으로 이동하게 됩니다.
참고로 앵커 링크는 다른 페이지에도 적용할 수 있습니다.
만약 다른 페이지의 특정 부분으로 이동시키고 싶다면, href에 페이지 주소까지 포함해 <a href="otherpage.html#section2">처럼 작성하면 됩니다.
브라우저는 해당 페이지를 연 후에 #section2 위치로 이동시켜 줍니다.
추가로, #top이나 그냥 #을 href로 쓰면 페이지 최상단으로 이동하는 특수한 앵커 링크가 됩니다.
별도로 id="top"을 지정하지 않아도 동작하므로 “맨 위로” 링크를 만들 때 유용하게 사용할 수 있습니다.
기본 앵커 링크 방식의 한계
간단한 #id 앵커 기본 사용법은 구현이 쉽지만, 기본 동작에는 몇 가지 한계점이 있습니다.
초보 단계에서는 크게 문제되지 않을 수 있지만, 더 나은 사용자 경험과 특정 상황에 대응하기 위해서는 이러한 제한을 이해하고 개선하는 방법을 알아두는 것이 좋습니다:
순간이동하듯 이동:
기본 앵커 링크를 클릭하면 스크롤이 부드럽게 이동하지 않고 해당 위치로 즉시 점프합니다.
화면이 갑자기 바뀌면 사용자가 당황하거나 맥락을 놓칠 수 있습니다.
부드러운 애니메이션 효과 없이 뚝 하고 이동하는 것은 UX 측면에서 아쉬움이 있습니다.
고정 헤더에 가려짐:
현대 웹사이트에서는 상단에 고정 헤더(내비게이션 바 등)를 사용하는 경우가 많은데, 앵커로 점프할 경우 해당 섹션의 제목 부분이 헤더 뒤에 숨어버릴 수 있습니다.
기본 동작만으로는 이런 상황을 처리하지 못해 내용 일부가 가려지는 불편이 생깁니다. 이 역시 해결책이 있으며, 추후 포스팅에서 다룰 예정입니다.
한 페이지 내 고유해야 함:
앵커로 사용할 id 값은 한 페이지 내에서 **유일(unique)**해야 합니다.
만약 동일한 id를 가진 요소가 여러 개 있다면 브라우저는 보통 첫 번째 요소로 이동합니다. 중복 id는 HTML 표준상 바람직하지 않으므로, 앵커를 설정할 때 항상 고유한 이름을 부여해야 합니다.
스크립트 제어의 어려움:
기본 앵커 링크는 브라우저가 자동 처리하기 때문에, 개발자가 그 순간에 개입하여 제어하기 어렵습니다.
예를 들어, 애니메이션 효과를 주거나 이동 전에 확인 창을 띄우는 등 세밀한 제어가 필요하다면 자바스크립트를 사용해야 합니다.
위의 앵커 기본 사용법 한계점들은 이 연재를 통해 차례로 해결 방법을 배워갈 부분들입니다.
우선 이번 1부에서는 앵커 앵커 기본 사용법을 살펴보았습니다.
다음 포스팅에서는 앵커 스크롤을 부드럽게 만들어 사용자 경험을 향상시키는 방법(CSS와 자바스크립트를 활용하는 방법)을 알아보겠습니다.