my-blog: 블로그 페이지의 페이지네이션 및 태그 UI 개선

요약

이번 작업은 my-blog 레포지토리의 master 브랜치에서 2026-07-15T04:45:08Z에 진행되었습니다. 주요 내용은 블로그 목록 페이지의 페이지네이션(getPageNumbers 함수)과 태그 행의 flex-wrap 적용입니다. 이 변경은 기존에 작업된 태그 필터링 및 라이트 테마 기능 위에 깔끔하게 적용되었습니다. 총 28라인이 추가되고 6라인이 삭제되었습니다.

배경 및 목적

기존 블로그 페이지는 많은 게시물이 있을 경우 페이지네이션 처리가 다소 투박하고, 태그들이 많아질 경우 줄바꿈이 깔끔하지 않게 되는 문제가 있었습니다. 사용자들은 보다 직관적이고 보기 편한 방식으로 블로그 게시물을 탐색하고 관련 태그를 확인하기를 원했습니다. 따라서, 페이지네이션 로직을 개선하고 태그 행의 반응형 디자인을 강화하여 전반적인 사용자 인터페이스(UI)를 개선하는 것이 이번 작업의 목적이었습니다.

구현 내용

이번 커밋의 주요 변경사항은 다음과 같습니다.

주요 변경사항 상세 설명

• 페이지네이션 로직 개선: getPageNumbers 함수를 업데이트하여 창(Windowed) 기반의 페이지네이션을 구현했습니다. 이를 통해 게시물이 많더라도 성능 저하 없이 효율적으로 페이지 번호를 생성하고 관리할 수 있게 되었습니다.
• 태그 행 flex-wrap 적용: 블로그 게시물 목록에서 태그들을 표시하는 행에 flex-wrap: wrap; 스타일을 적용했습니다. 이를 통해 화면 크기가 작아지거나 태그가 많아져도 태그들이 자연스럽게 다음 줄로 넘어가면서 레이아웃이 깨지지 않도록 개선했습니다.

변경된 파일 목록

• frontend/src/pages/blog.astro
• frontend/src/pages/blog/[slug].astro

추가/삭제된 코드 라인 수

• 추가 라인: 28
• 삭제 라인: 6

핵심 코드 설명

(제공된 데이터에 변경_내용 필드가 비어있어 구체적인 코드 예시를 제공하기 어렵습니다. 만약 getPageNumbers 함수의 로직 개선이나 blog.astro 파일에서의 flex-wrap 적용 관련 코드가 있다면, 해당 부분을 발췌하여 이곳에 설명하는 것이 좋습니다.)

기술적 의사결정

이 커밋은 주로 프론트엔드 UI/UX 개선에 초점을 맞추고 있으며, 특정 기술 스택이나 라이브러리 선택보다는 기존 Astro 프레임워크 내에서의 구현 및 CSS 스타일링 개선에 집중한 것으로 보입니다. 따라서 별도의 기술적 의사결정 항목은 생략합니다.

배운 점 및 개선점

배운 점

• 사용자 경험을 고려한 UI/UX 개선의 중요성을 다시 한번 느꼈습니다. 단순히 기능을 구현하는 것을 넘어, 사용자가 어떻게 인터랙션하고 정보를 소비하는지에 대한 고민이 필요함을 알게 되었습니다.
• flex-wrap과 같은 CSS 속성을 활용하면 복잡한 반응형 디자인을 비교적 간단하게 구현할 수 있다는 것을 배웠습니다.

개선점 및 다음 단계 계획

• 이번 커밋은 기존 작업과의 머지를 통해 진행되었으므로, getPageNumbers 함수의 실제 성능 및 다양한 시나리오에서의 동작을 더욱 면밀히 테스트할 필요가 있습니다.
• blog.astro 및 blog/[slug].astro 파일 내에서 태그 표시 로직을 더욱 간결하게 다듬을 수 있는지 검토해볼 수 있습니다.
• 향후에는 검색 기능 강화나 필터링 옵션 확장 등 블로그 페이지의 기능을 더욱 풍부하게 만드는 작업을 진행할 수 있을 것입니다.

참고 자료

• Astro 공식 문서 (페이지네이션 및 컴포넌트 개발 관련)
• CSS Flexible Box Layout Module Level 1 (flex-wrap 관련)