모바일 블로그 레이아웃에서 사이드바를 접는 기준

모바일 블로그 레이아웃에서 사이드바를 접는 기준

데스크톱 블로그는 본문 옆에 카테고리, 최근 글, 인기 글, 통계, 관리자 패널을 둘 수 있습니다. 하지만 모바일에서 같은 구성을 그대로 세로로 쌓으면 부가 정보가 본문보다 먼저 보이거나, 읽기 시작까지 너무 멀어집니다.

반응형은 순서 재설계다

모바일 레이아웃은 단순히 grid를 한 열로 바꾸는 작업이 아닙니다. 사용자가 작은 화면에서 어떤 순서로 정보를 소비해야 하는지 다시 정하는 일입니다. 글 상세에서는 제목과 본문이 먼저이고, 사이드바는 그 다음입니다. 글 목록에서는 제목, 요약, 날짜가 먼저이고 통계는 뒤로 가야 합니다.

관리자 세션에서 보이는 버튼도 조심해야 합니다. 편집, 삭제, 대시보드 진입 같은 기능은 운영자에게 중요하지만 일반 읽기 흐름을 방해하면 안 됩니다. 모바일에서는 텍스트 버튼보다 명확한 아이콘 버튼이나 별도 관리 영역이 더 안정적입니다.

접는 기준은 화면 폭이 아니라 역할이다

사이드바의 각 블록은 역할이 다릅니다. 최근 글은 탐색이고, 인기 글은 추천이며, 방문자 수는 신뢰 신호이고, 로그인 패널은 운영 도구입니다. 이들을 같은 카드 크기로 쌓으면 우선순위가 사라집니다. 모바일에서는 탐색성 높은 블록만 먼저 두고, 운영 도구는 관리자일 때만 간결하게 보여주는 편이 낫습니다.

높이와 밀도를 관리한다

모바일에서 가장 흔한 실패는 카드가 너무 큰 것입니다. 여백과 폰트 크기를 데스크톱 기준으로 유지하면 한 화면에 정보가 거의 보이지 않습니다. 버튼은 누르기 충분해야 하지만, 반복 항목은 밀도를 높여야 합니다. 제목은 줄바꿈을 허용하되, 메타 정보는 짧고 예측 가능해야 합니다.

좋은 모바일 블로그는 데스크톱의 축소판이 아닙니다. 읽기 목적을 먼저 두고, 보조 정보는 그 목적을 방해하지 않는 위치로 옮기는 설계입니다.

실제 적용 메모

관리자 대시보드에서 실제로 모바일 문제가 있었습니다. 데스크톱에서는 글 목록과 댓글 목록을 2열로 보여줘도 괜찮지만, 모바일에서는 버튼이 잘리고 텍스트가 압축됐습니다.

수정 기준은 아래처럼 잡았습니다.

• 980px 이하에서는 관리 그리드를 1열로 전환
• 글 제목은 줄바꿈을 허용하고 overflow를 막음
• 수정, 삭제 버튼은 모바일에서 같은 폭으로 확장
• 차트 컨트롤은 오른쪽 정렬 대신 왼쪽 정렬로 변경
• 날짜 입력은 모바일에서 가로 폭을 충분히 차지하게 조정

중요한 것은 “사이드바를 아래로 내린다”가 아니라 각 요소의 역할을 다시 정하는 것입니다. 글 본문, 글 목록, 댓글, 관리자 도구는 같은 우선순위를 갖지 않습니다. 모바일에서는 읽기와 조작이 충돌하지 않게 순서를 다시 잡아야 합니다.