리팩토링 2차 개선 회의

개요

이번 회의에서는 2차 개선 범위를 실사용(배포본) 기준의 UX 개선에 우선순위를 두기로 합의했습니다. 원래 계획은 Tanstack query의 도입이 먼저였으나 현재 띱 서비스에서 해당 개선이 코스트 대비 높은 효율을 갖지는 않을 수 있다는 의견이 모였습니다. 때문에 저희팀은 일반적인 상황 뿐 아니라 느린 네트워크 상황 등 여러 사용자 환경을 고려해 UX를 향상 시킬 수 있는 부분을 검토하고 개선하는 것이 우선순위가 높다고 판단했습니다.

• 우선 목표: "보이는 속도/피드백/안정성" 개선
• 성능 평가 기준: 느린 4G (DevTools Throttling) 환경.

  빠른 네트워크 환경이라면 대부분의 경우 문제가 생기지 않는다. 때문에 악조건을 가정하고 UX가 좋지 않은 부분을 찾아 개선한다.

• 필수 사항: 문제 상황 인식, 개선안 도출, 전/후 비교 데이터 기록, 실제 결과 정리

아래는 UX 개선안 작성시 고려할 사항들입니다.

---

1. 성능 최적화 (UX 관점)

문제상황

• 초기/스크롤 구간에서 체감 지연, 로딩 UI 불일치로 사용자 피로감
• 이미지 로딩과 리스트 렌더링이 성능 병목으로 추정

의의

• "필요한 것부터 빠르게 보여주기 + 일관 로딩 경험"으로 체감 성능 개선
• 실사용 기준(느린 4G)에서 병목을 우선 제거해 즉시 효과를 얻는 전략

2. 에러 핸들링 불충분 (중앙집중 처리)

문제상황

• 운영 환경에서 console.error 위주
• 에러 분류/사용자 노출/로깅이 일관되지 않음

의의

• 사용자: 간결한 안내와 재시도 경로 제공
• 개발팀: 재현 가능한 로그/메타 확보

---

3. 낙관적 업데이트 (좋아요/북마크)

문제상황

• 상호작용 후 피드백 지연으로 UX 품질 저하

의의

• 네트워크 왕복 전이라도 즉시 반응 제공
• 체감 품질 향상

---

4. 스켈레톤 UI 일관 적용

문제상황

• 화면/컴포넌트별 로딩 UI 불일치
• 깜빡임/점프 감지

개선안 / 실행

• Skeleton 디자인 토큰 통일 (높이/간격/애니메이션)
• 리스트/카드/디테일 공용 스켈레톤 컴포넌트 도입
• 데이터 준비 상태별(초기/추가 로딩/에러) 레이아웃 변화 최소화

---

TanStack Query 도입 건

결정

본 리팩토링 차시(2차)에서는 도입 보류

• 실사용 기준 개선(성능/에러/피드백) 완료 후 재검토
• 캐시 일관성/중복요청 제거/낙관적 업데이트 표준화 필요성 확인 시

---

우선 각자 개선할 문제를 명확하게 인식하고 팀 단위로 공유하며 이후 개선안을 검토한다.

UX 개선안 공유