Pinoco

Problem

네트워크 탭을 분석한 결과 초기 페이지 로드 시 필요하지 않은 리소스까지 모두 로드되는 문제가 있었습니다. 또한 React Profiler로 확인한 결과, 발언자가 변경될 때마다 VideoFeed 컴포넌트가 불필요하게 리렌더링되어 한 라운드 진행 중 총 688회의 리렌더링이 발생했고 이는 게임 진행 중 체감되는 UI 반응성 저하로 이어졌습니다.

Solution

React.lazy와 Suspense로 코드 스플리팅을 적용해, 사용자의 실제 진입 경로(게임 페이지 중심)에 따라 필요한 컴포넌트만 동적으로 로딩되도록 했습니다. 폰트를 WOFF2 포맷으로 전환해 리소스 크기를 줄였습니다. React Profiler로 렌더링 병목을 분석한 뒤, props 변화가 없는데도 리렌더링되던 VideoFeed·VideoStream 등 주요 컴포넌트에 React.memo를 적용했습니다.

Result

코드 스플리팅과 폰트 최적화로 메인 페이지 기준 로드 시간이 515ms에서 185ms로 64% 단축되고, 리소스 다운로드 크기는 2.2MB에서 5.7KB로 크게 줄었습니다. Lighthouse 지표로도 First Contentful Paint가 3.7초에서 2.7초로, Largest Contentful Paint가 12.4초에서 10.2초로 개선된 것을 확인했고, Total Blocking Time은 최적화 전후 모두 0ms를 유지해 메인 스레드를 오래 막는 작업은 없었다는 것도 함께 확인했습니다. React Profiler로 측정한 결과, 게임 시작부터 1라운드 진행까지 VideoFeed 컴포넌트의 리렌더링 횟수가 688회에서 338회로 약 51% 감소했습니다.

Problem

기존 타이머 컴포넌트는 setInterval을 사용해, 진행바가 완전히 소모되기 전에 타이머가 먼저 종료되는 불일치 현상이 있었습니다. 브라우저 렌더링 파이프라인 특성상 setInterval의 16ms 지연으로 인해 총 60개의 프레임을 렌더링해야 하는 상황에서 실제 프레임이 누락되거나 불규칙하게 처리되는 문제가 있었습니다.

Solution

브라우저의 리페인트 주기에 맞춰 동작하는 requestAnimationFrame API로 애니메이션 처리 방식을 전환했습니다. 고정 간격 대신 실제 경과 시간을 기준으로 진행 상태를 계산하도록 바꿔 정확한 타이밍 제어를 구현했고, width 속성 대신 transform 속성을 활용해 GPU 가속 기반 애니메이션으로 전환해 리플로우를 최소화했습니다.

Result

자바스크립트 실행과 화면 렌더링 사이의 지연 문제를 해소해 더 정확하고 반응성 높은 타이머 기능을 제공하게 되었습니다. 게임 진행 중 사용자 경험이 개선됐고, 핵심 게임플레이 요소인 시간 제한 기능의 신뢰성을 확보했습니다.

Problem

채팅 영역에서 새 메시지가 올라올 때, 사용자가 이전 채팅을 보고 있는 중에도 스크롤이 최하단으로 강제 이동해 대화 맥락을 놓치는 문제가 있었습니다. 메시지가 빠르게 쌓일수록 사용자가 이전 내용을 읽지 못하는 상황이 잦아졌고, 현재 위치와 최신 메시지 사이를 오가기 어려운 불편함이 있었습니다.

Solution

useRef로 채팅 컨테이너의 DOM 요소를 직접 참조해 스크롤 위치를 제어하는 메커니즘을 구현했습니다. 사용자의 스크롤 행동을 감지하는 isScrolledUp 상태를 도입해, 사용자가 의도적으로 스크롤을 올린 경우와 최신 메시지를 보고 있는 경우를 구분했습니다. IntersectionObserver로 마지막 채팅 메시지 요소가 뷰포트에 들어오는지 감지해, 스크롤이 하단 50px 이내일 때만 자동 스크롤을 유지하고 그렇지 않으면 사용자의 현재 위치를 보존하도록 설계했습니다. 사용자가 이전 메시지를 읽고 있을 때는 하단에 "최신 메시지로 이동" 버튼을 노출했습니다.

Result

중요한 대화를 놓치지 않으면서도 원활한 소통 환경을 만들어 채팅 기능의 사용자 경험이 개선됐습니다. 사용자가 스크롤 위치를 스스로 인식하며 읽고 있던 대화의 맥락을 유지할 수 있게 되었고, 이전 메시지를 확인 중일 때 화면 우측 하단에 나타나는 버튼으로 최신 대화에 빠르게 다시 접근할 수 있게 되었습니다.