my-blog: 태그 사이드바 높이 고정 및 내부 스크롤 적용

요약

이번 커밋은 my-blog 프로젝트의 frontend/src/pages/blog.astro 파일을 수정하여, 태그 사이드바의 높이를 뷰포트에 맞게 고정하고 스크롤 기능을 추가했습니다. 이를 통해 태그 수가 많아져도 페이지 레이아웃이 깨지는 현상을 방지하고 사용자 경험을 개선했습니다. 작업은 2026년 7월 15일에 완료되었습니다.

배경 및 목적

제 블로그에는 200개 이상의 다양한 태그가 등록되어 있습니다. 기존에는 태그 목록이 페이지의 다른 요소들(게시글 목록, 페이지네이션 등)보다 훨씬 길게 늘어나면서 전체 페이지 높이를 과도하게 차지하는 문제가 있었습니다. 이로 인해 페이지 레이아웃이 불안정해지고 사용자에게 불편함을 줄 수 있었습니다.

이러한 문제를 해결하고, 태그 수가 많더라도 안정적이고 깔끔한 레이아웃을 유지하기 위해 태그 사이드바의 높이를 뷰포트(viewport)에 맞게 고정하고, 내용이 넘칠 경우 내부적으로 스크롤할 수 있도록 개선하는 것이 목적이었습니다.

구현 내용

주요 변경사항은 frontend/src/pages/blog.astro 파일 내에서 태그 사이드바에 CSS 스타일을 적용한 것입니다.

• 변경된 파일 목록:

  • frontend/src/pages/blog.astro

• 추가 라인 수: 1

• 삭제 라인 수: 1

핵심 코드 설명

frontend/src/pages/blog.astro 파일에 다음과 같은 CSS 스타일을 추가하여 태그 사이드바의 동작 방식을 변경했습니다.

<div class="overflow-y-auto h-screen">
    <!-- ... 기존 태그 목록 렌더링 코드 ... -->
</div>

이 변경은 태그 사이드바를 감싸는 div 요소에 h-screen (뷰포트 높이의 100%) 클래스와 overflow-y-auto (세로 스크롤이 필요할 때만 스크롤바 표시) 클래스를 적용한 것입니다. 이를 통해 태그 사이드바는 항상 화면 높이에 맞춰져 있으며, 태그 수가 화면을 넘어서면 해당 영역 내에서만 스크롤이 가능하게 됩니다.

배운 점 및 개선점

이번 작업을 통해 CSS의 h-screen과 overflow-y-auto 속성을 활용하여 동적인 콘텐츠 높이에 유연하게 대응하는 방법을 배울 수 있었습니다. 특히, 많은 양의 데이터를 표시해야 할 때 사용자 경험을 저해하지 않도록 UI를 구성하는 것이 중요하다는 것을 다시 한번 느꼈습니다.

아직 태그 사이드바의 h-screen이 정확히 뷰포트의 '콘텐츠 영역'만을 고려하는지, 아니면 헤더나 푸터까지 포함하는지에 따라 미세 조정이 필요할 수 있습니다. 만약 헤더/푸터 영역까지 고려하여 조금 더 여유 공간을 두어야 한다면, h-screen 대신 특정 px 값이나 vh 단위를 조합하여 높이를 조절하는 것을 고려해 볼 수 있습니다.

다음 단계로는, 만약 태그 사이드바의 높이가 페이지 레이아웃에 영향을 주는 다른 요소들과 충돌하거나 예상치 못한 간격이 발생한다면, CSS를 추가적으로 조정하여 최적의 레이아웃을 확보할 계획입니다.

참고 자료

• Tailwind CSS documentation: h-screen and overflow-y-auto (직접적인 참고 자료는 아니지만, 해당 클래스들을 사용했으므로 관련 문서가 참고가 됩니다.)