07. UI & UX 최적화

🎨 UI & UX 최적화

💡 “사용자는 0.1초의 차이에도 반응한다”

UI가 부드럽지 않으면, 아무리 좋은 기능이 있어도 사용자는 떠난다.

자연스럽고 빠른 UX를 제공하기 위해 Framer Motion, Tailwind CSS 최적화, useTransition 적용 등을 고민했고, 더 나아가 Lottie, Confetti, 커스텀 마우스 커서를 활용하여 재미 요소를 추가

📌 Framer Motion을 활용한 인터랙티브 UI 설계

✅ 애니메이션을 통한 부드러운 사용자 경험 제공

• Framer Motion을 활용하여 페이지 전환 시 자연스러운 트랜지션 적용
• 마우스 인터랙션(호버, 클릭, 스크롤) 시 부드러운 모션 효과를 추가하여 사용자 경험 개선

✅ 리스트 애니메이션 적용

• 무한 스크롤 시 새로운 아이템이 부드럽게 추가되도록 애니메이션 적용
• 레이아웃 시프트 최소화하여 사용자가 불편함 없이 UI를 사용할 수 있도록 개선

✅ 리스트 애니메이션 적용

• 무한 스크롤 시 새로운 아이템이 부드럽게 추가되도록 애니메이션 적용
• 레이아웃 시프트 최소화하여 사용자가 불편함 없이 UI를 사용할 수 있도록 개선

📌 사용자가 직접 반응하고 즐길 수 있는 경험을 주는 UX

✅ Lottie & Confetti 활용 → 사용자 참여도 증가

• 특정 이벤트 발생 시 Lottie 애니메이션을 적용하여 직관적인 피드백 제공.
• 성공적인 액션(로그인, 회원가입 등) 후 Confetti 효과를 추가하여 사용자가 재미를 느낄 수 있도록 설계.
• 마우스 커서 애니메이션 적용 → 사이트 탐색이 더욱 직관적이고 즐겁게 느껴지도록 개선.

📌 Tailwind CSS 최적화 → 클래스 정리 & 불필요한 스타일 제거

✅ JIT(Just-In-Time) 모드 활성화하여 빌드 속도 개선

• Tailwind의 JIT 모드를 활용하여 사용하지 않는 스타일을 빌드에서 자동으로 제거
• CSS 번들 크기를 줄여 불필요한 스타일 로딩 방지 → 성능 최적화

✅ 반복되는 Tailwind 클래스 정리 → 스타일 재사용 최적화

• @apply를 활용하여 중복되는 스타일을 컴포넌트에서 재사용 가능하게 변경

✅ 불필요한 Tailwind 클래스를 제거하여 스타일 최적화

• clsx 또는 classnames를 활용하여 조건부 클래스를 깔끔하게 정리

📌 useTransition 적용 → UI 응답성 최적화 [적용중]

✅ 비동기 상태 변경 시 UI 렌더링 최적화

• UI 업데이트 시 성능 저하를 방지하기 위해 useTransition을 활용
• 상태 변경이 많은 경우, 비동기 렌더링을 활용하여 브라우저가 부드럽게 처리할 수 있도록 최적화 → 마이페이지에 추후 적용