모바일 메뉴 정리와 콘텐츠 수명주기 관리

오늘은 작지만 중요한 두 가지 사용성 문제를 정리했다. 모바일 가로 스크롤과 불완전한 콘텐츠 관리 기능이다.

ByteCosmos 모바일 메뉴

모바일 헤더는 메뉴를 한 줄에 유지하도록 바뀌어 있었다. 줄바꿈을 피하는 대신 좁은 화면에서 메뉴 자체가 가로로 스크롤되고, 페이지 양쪽에 빈 공간이 생긴 듯한 더 나쁜 경험을 만들었다.

메뉴를 가로 스크롤 띠로 만드는 대신 화면 안에서 자연스럽게 줄바꿈하도록 바꿨다.

Research의 작업 순서 버튼에도 같은 원칙을 적용했다. 탭을 옆으로 밀어내지 않고 여러 줄로 표시한다.

페이지 폭은 기기 화면 안에 고정하고, 실제로 넓은 데이터 테이블만 자신의 패널 안에서 스크롤하게 했다.

jintaechoi.com 메뉴

개인 사이트 헤더에도 같은 크기 제한을 적용했다.

좁은 화면에서는 다음처럼 동작한다.

• 브랜드는 안정적인 독립 행에 유지
• 메뉴 항목은 추가 행으로 줄바꿈
• 언어 선택기는 작게 유지
• 페이지 자체는 가로 메뉴 스크롤에 의존하지 않음
• 달력 필터 버튼도 옆으로 스크롤하지 않고 줄바꿈

작은 관리 사이트에서는 숨겨진 가로 이동 없이 주요 메뉴가 보이는 편이 더 적절한 모바일 선택이다.

글 삭제 기능

기존 콘텐츠 시스템에는 글 작성과 공개·비공개 전환은 있었지만 삭제는 없었다.

글 관리 화면에서 공개 상태 변경 옆에 영구 삭제 기능을 추가했다.

• 운영자만 사용
• POST 요청만 허용
• CSRF 검증
• 명시적인 브라우저 확인창
• 삭제 후 현재 글 필터로 복귀

새 DB 테이블은 만들지 않았다. 삭제는 기존 posts의 수명주기에 직접 적용한다.

일정 삭제 기능

일정도 같은 수명주기 기능이 빠져 있었다.

이제 다음 위치에서 삭제할 수 있다.

• 관리자 대시보드의 예정 일정 목록
• 운영자로 로그인한 상태의 개별 일정 상세

글 삭제와 같은 운영자 인증, POST, CSRF, 확인창 원칙을 적용했다.

여기도 새 테이블은 필요하지 않았다. 기존 calendar_events 개체에 적용한다.

검증

임시 비공개 기록으로 삭제 경로를 테스트했다.

임시 글 하나와 먼 미래 일정 하나를 생성하고 실제 삭제 핸들러를 호출했다. 두 기록이 제거되었는지 확인한 뒤 방어적으로 정리 작업을 수행했다.

메뉴 변경 이후 ByteCosmos 자동 테스트도 통과했다.

12 passed

변경 후 두 사이트를 다시 빌드하고 배포했다.

중요한 이유

작성만 가능한 인터페이스는 불완전한 관리 시스템이다. 글이나 일정이 지속되는 객체가 되면 의도적인 제거 경로도 필요하다.

반응형 디자인도 단순히 컴포넌트를 작게 만드는 일이 아니다. 작은 폭에서도 페이지 전체를 가로 캔버스로 만들지 않고 메뉴를 이해할 수 있어야 한다.

이번 작업은 그 두 빈틈을 메웠다.