01
Canvas 값 업데이트로 인한 잦은 재렌더링
- 문제
- Canvas의 실시간 값을 useState로 관리하면서 값이 바뀔 때마다 React 컴포넌트가 반복 렌더링되고 화면이 끊기는 문제가 발생했습니다.
- 해결
- 고빈도로 바뀌는 Canvas 값을 useRef로 관리해 React 상태와 분리하고, 불필요한 재렌더링을 줄였습니다.
- 결과
- 화면 성능을 개선하고 Canvas 애니메이션이 더 부드럽게 동작하도록 했습니다. 이 경험을 통해 자주 변하지만 React 렌더링을 유발할 필요가 없는 값은 useRef로 관리하는 것이 효과적임을 배웠습니다.
02
오디오 상태와 화면 상태의 불일치
- 문제
- 재생 버튼, 진행 시간, 선택된 트랙 정보를 각각 관리하면서 실제 오디오 상태와 화면에 표시되는 정보가 어긋나는 문제가 발생했습니다.
- 해결
- 현재 트랙과 재생 여부, 재생 시간을 하나의 상태 흐름으로 통합하고 오디오 이벤트를 기준으로 화면이 갱신되도록 구성했습니다.
- 결과
- 트랙을 변경하거나 재생 위치를 이동해도 플레이어 정보가 즉시 동기화되어 일관된 음악 감상 경험을 제공할 수 있게 되었습니다.
03
반응형 화면에서 발생하는 플레이어 레이아웃 문제
- 문제
- 화면 폭이 줄어들면서 앨범 정보와 재생 컨트롤이 겹치거나 일부 버튼의 터치 영역이 지나치게 작아지는 문제가 있었습니다.
- 해결
- 화면 크기에 따라 정보 배치와 컨트롤 구조가 변경되도록 반응형 레이아웃을 설계하고, 모바일 환경에서는 핵심 기능을 중심으로 인터페이스를 단순화했습니다.
- 결과
- 데스크톱과 모바일 모두에서 정보의 우선순위가 유지되고, 주요 재생 기능을 편리하게 조작할 수 있게 되었습니다.
