오늘은 ThinkGround 프론트엔드의 사용 흐름을 실제 운영 화면 기준으로 점검하면서, 자잘하지만 체감이 큰 문제들을 정리하는 데 집중했다.
먼저 category, tag, search 쿼리로 접근했을 때 주소는 바뀌지만 화면이 그대로 머무르는 문제가 있었다. 원인을 따라가 보니 클라이언트 내비게이션 이후에도 특정 고정 경로 값이 우선되면서 실제 현재 주소를 제대로 반영하지 못하고 있었다. 이 부분을 정리해 쿼리 스트링 기반 아카이브 진입과 링크 이동이 안정적으로 동작하도록 수정했다.
스켈레톤 로딩 적용
상세 글 진입 시 보이던 단순 로딩 문구는 실제 레이아웃을 닮은 스켈레톤 UI로 교체했다. 처음에는 직접 구현한 형태로 시작했지만, 재사용성과 일관성을 고려해 react-loading-skeleton 기반으로 정리했다.
그 결과 상세 글 화면에서는 실제 본문이 도착하기 전까지 제목, 메타 정보, 본문 영역이 자연스럽게 채워지는 로딩 경험을 제공할 수 있게 됐다.
모바일 내비게이션 정리
모바일 화면에서는 우측 상단 햄버거 버튼이 보이기만 하고 실제 메뉴가 열리지 않는 문제가 있었다. 버튼만 존재하고 상태 관리가 빠져 있었기 때문에, 헤더를 클라이언트 컴포넌트로 전환하고 메뉴 열림/닫힘 상태, 링크 클릭 후 닫힘, 브라우저 이동 시 정리, 데스크톱 복귀 시 상태 초기화까지 함께 반영했다.
메뉴가 열렸을 때는 오버레이 패널 형태로 표시되도록 정리했고, 햄버거 아이콘도 열림 상태에서 X 형태로 자연스럽게 전환되도록 맞췄다.
우측 하단 퀵 액션 FAB 추가
추가로 우측 하단에 떠 있는 퀵 액션 FAB를 새로 도입했다. 스크롤이 어느 정도 내려간 뒤 등장하고, 누르면 Writing, Topics, Random, Top 액션이 펼쳐지는 방식이다.
처음 구현 후에는 Top 버튼을 눌렀을 때 메뉴만 닫히고 실제로 스크롤이 올라가지 않는 문제가 있었는데, 메뉴 닫힘과 스크롤 잠금 해제 순서를 다시 맞추면서 해결했다. 현재는 모바일 화면에서도 정상적으로 최상단 이동이 동작한다.
오늘 정리한 것
- category, tag, search 라우트와 SPA 내비게이션 안정화
- 상세 글 화면 스켈레톤 로딩 도입
- 모바일 햄버거 메뉴 동작 수정
- 우측 하단 퀵 액션 FAB 추가 및 Top 액션 수정
이제 기본적인 읽기 경험과 내비게이션 흐름은 한층 안정된 상태가 됐다. 다음 단계에서는 모바일 전체 화면 밸런스를 더 점검하고, FAB와 상세 페이지의 UX를 조금 더 정리해 나갈 계획이다.