Astro 블로그 사이드바 position: sticky 점핑 현상 해결기

블로그 레이아웃을 다듬던 중, 사이드바에 position: sticky 를 적용했을 때 스크롤 시 화면이 덜컥거리며 밀리는 점핑 현상 을 겪었다. 이번 포스팅에서는 이 문제를 어떻게 파악하고 해결했는지 정리해 본다.

문제 상황

사이드바 컴포넌트(Sidebar.astro)에 카테고리 목록을 두고, 스크롤을 내릴 때 화면 상단에 고정되도록 Tailwind CSS의 sticky, top-28 클래스를 주었다. 그런데 스크롤이 sticky 가 시작되는 지점에 도달하는 순간, 사이드바가 위로 찔끔 올라갔다가 멈추는 듯한 어색한 움직임 이 발생했다.

원인 파악: 픽셀 계산의 엇갈림

처음에는 부모 컨테이너의 Flexbox 렌더링 충돌이나 transform 속성을 의심했지만, 진짜 원인은 초기 렌더링 위치 와 sticky가 작동하는 기준 위치(top) 간의 픽셀(px) 오차에 있었다.

상단에 고정된 헤더(Header.tsx)의 높이와 메인 영역의 상단 여백을 계산해 보면 다음과 같다.

• 헤더 높이: 패딩과 내부 요소를 합쳐 약 73px
• 메인 영역 상단 여백(mt-12): 48px
• 즉, 화면 맨 위에서 사이드바 최상단까지의 실제 물리적 거리는 121px 이다.

하지만 기존 사이드바는 top-28 (112px)로 설정되어 있었다. 스크롤을 내릴 때 사이드바가 원래 자리(121px)에서 112px 위치까지 위로 엇갈려 올라간 뒤에 고정되기 때문에, 레이아웃이 덜컥거리는 시각적 착시 가 발생한 것이다.

해결 방법: 정확한 픽셀 값 매칭

원인을 알았으니 해결책은 간단하다. 사이드바의 top 위치를 실제 여백과 정확히 맞춰주면 된다. Tailwind의 Arbitrary values(임의 값) 문법을 사용해 오차를 메워줄 top-[121px] 을 적용했다.

{/* 수정 전 */}
<aside class="sticky top-28 ...">
  ...
</aside>

{/* 수정 후 */}
<aside class="sticky top-[121px] ml-auto ...">
  ...
</aside>

이렇게 수정하니 사이드바가 스크롤을 시작하자마자 어긋남 없이 원래 있던 그 자리에서 아주 부드럽게 화면에 고정되었다.