UX 개선안 공유

리팩토링 2차 개선 회의

---

위 회의에 이어서 UX 개선안을 각자 조사한 이후에 MoSCoW 방식으로 우선순위 요구사항을 정리했습니다. 각 문제와 관련된 동영상은 추후 구체적인 개선안에 함께 포함될 예정입니다.

Must

1. 로딩 상태 시각화 개선

• 기록 작성 페이지 로딩 중 "로딩 중..."이라는 단순 텍스트만 표시됨
• 시각적으로 지루하고 전문성이 떨어짐
• 실제로 로딩 중인지, 멈춘 건지 알기 어려움
• 예시
  • 알림 페이지의 로딩 스피너 부재로 사용자에게 잘못된 정보가 일시적으로 전달된다. (동영상)
  • 내 모임방 로딩스피너 불일치 (동영상)
  • 모임방 진입 시 로딩 스피너 불일치 (동영상)
  • 검색 페이지 로딩 스피너 불일치 (동영상)

💡 로딩스피너와 스켈레톤 UI를 함께 사용해보자

먼저 기준을 정해야겠다.

- 로딩 UI 사용 기준

  - 페이지 간 이동 시
    - 화면 구조를 미리 인지할 수 있도록 Skeleton UI를 사용한다.
    - 초기 화면 전체가 교체되는 구간으로, 사용자가 다음 화면의 구조를 빠르게 인지할 수 있어야 한다. 이 경우 Skeleton UI를 사용하여 콘텐츠 레이아웃을 미리 보여주고, 로딩 대기 시간을 시각적으로 완화한다.
    - 이것도 먼저 작업하는 사람이 정보 공유, 일단 집단 지성
  - 페이지 내 동적 데이터 로딩 시
    - 예: 무한 스크롤, 추가 목록 로딩
    - 초기 화면 전체가 교체되는 구간으로, 사용자가 다음 화면의 구조를 빠르게 인지할 수 있어야 한다.
    - 이 경우 Skeleton UI를 사용하여 콘텐츠 레이아웃을 미리 보여주고, 로딩 대기 시간을 시각적으로 완화한다.
    - 기존 콘텐츠 흐름을 방해하지 않도록 Loading Spinner를 사용한다.

2. CLS 문제 → 1번 상황을 개선하면 함께 해결될 수 있는 문제

• 피드 메인 페이지의 내 띱 목록 컴포넌트가 동적 렌더링되며 레이아웃이 재배치되는 현상 발생
• 내 모임방 요소의 높이가 늘어남 (동영상)

---

3. 검색 UX 개선

• 모임 검색 검색내용이 없습니다와 검색중입니다가 규칙없이 나오고 있다. (동영상)
• 사용자 찾기에서 불필요한 검색창 리렌더링과 API 과다 호출 (동영상)
• 사용자 검색에서 사용자 클릭시 흰 화면 노출로 UX 측면에서 좋지 못함 (동영상)
• 최근 검색어 부분 또한 일시적으로 잘못된 정보를 제공 (최근 검색어를 아직 불러오지 않은 것이지만 사용자에게는 없다고 알려줌) (동영상)
  • 디바운싱 처리는 되어 있다.
  • 하지만 불필요한 렌더링은 개선할 여지가 있다.

4. 무한 스크롤 미구현

• API는 cursor 기반 페이지네이션을 지원하지만 프론트엔드에서 활용하지 않고 있었음 (nextCursor, isLast 필드 존재)

• 기록이 많을 경우 초기 로딩이 매우 느려짐

• 메모리 사용량이 불필요하게 증가함

• 무한스크롤

  • 내 띱 목록, 내 정보-저장-피드/책 목록, 피드 상세보기 페이지 댓글 목록 등에서 API 요청에 대한 응답이 도착하기 전까지 같은 요청이 반복해서 발생하는 문제 발생

5. 피드 좋아요, 저장 / 책 저장 / 띱하기(띱취소) 버튼 요청 중복 전송 문제

• 해당 버튼들에서 이벤트 요청이 무한히 가능한 문제 발생

• 낙관적 업데이트 및 디바운싱을 활용한 사용자 경험 향상 필요

• 투표 기능의 즉각적인 피드백 부족

  • 투표 클릭 시 API 응답을 받은 후에야 UI가 업데이트됨
  • 네트워크 지연이 있을 경우 사용자는 클릭이 제대로 됐는지 알 수 없음
  • 중복 클릭 방지는 구현되어 있지만 시각적 피드백이 부족함

---

Should

1. 기록 삭제 시 전체 페이지 새로고침 문제

• 기록이나 투표를 삭제한 후 window.location.reload()를 사용하여 전체 페이지를 새로고침함
• 이로 인해 스크롤 위치가 맨 위로 초기화됨
• 사용자가 설정한 필터(페이지 범위, 총평 등)와 정렬 옵션이 모두 초기화됨
• 모든 리소스를 다시 로드하여 네트워크 비용 증가

2. 피드에서 특정 글 클릭 시 새로운 창 열림 (동영상)

Could

7. 피드 페이지 로고나 일부 요소가 늦게 렌더링 됨(일부 요소별 렌더링 속도가 다름), 스플래시 로고 늦게 나옴 (동영상)

• 피드 게시글 미리보기 이미지가 포맷과 해상도 문제로 로딩이 늦어짐