새로운 기능 개발이 아닌 유지보수 작업
간편투자앱 안정성과 속도를 돌아볼 때
데일리펀딩이 간편투자앱을 리뉴얼 개발한 지 벌써 5년차가 됐다. 지난해부터 IT실이 대대적으로 진행 중인 ‘플랫폼 리뉴얼’ 프로젝트에 앱 리뉴얼 작업이 포함된 건 당연한 일. 고객 편의와 신뢰, 유지보수라는 이정표를 세우고 닻을 올린 만큼, 프런트엔드 개발팀은 앱 시스템 구조와 성능 모두를 들여다보고 있다.
첫 번째로 진행한 작업은 2022년 당시의 앱 전면 개편 프로젝트 스토리와 방향성을 읽어 내는 것이었다. 새로운 기능을 개발한다는 IT실의 역동적인 에너지와 목표 의식이 뚜렷했으나, 유지보수나 안정성은 추가 개발 여지가 보였다. 4년 전보다 데일리펀딩 IT실의 기술은 더 발전했으니 이는 어쩌면 당연했다.
가장 먼저 변화를 주고 싶었던 영역은 간편투자앱에 출력되는 리스트였다. 리스트는 ‘내 지갑’ ‘내 포인트’ 탭과 ‘이자 달력’ 그리고 내 투자 내역 등 가장 자주 노출되는 요소다. 기존에는 상태 변경이 발생할 때마다 renderItem과 인라인 핸들러∙객체가 새로 생성되면서 리스트 아이템이 불필요하게 리렌더링되는 구조였다. 이로 인해 사용자가 스크롤을 내릴 때 끊김 현상이 일어나거나 화면이 순간적으로 깜박이고, 딜레이가 발생할 가능성도 없지 않았다. CPU가 과부하되면 발열, 배터리 소모 증상이 일어나니, 장기적으로 앱 사용성도 떨어뜨릴 수 있다. 즉, 안정적인 사용성과 플랫폼 속도를 위해서는 리팩토링이 필요한 최적의 시점인 것. 이를 포착한 건 앱 성능 최적화 작업의 시작이었다.
반복되는 계산 값을 저장하는 메모이제이션 기술
리렌더링 방지해 실행 속도, 플랫폼 품질 UP
메모이제이션(Memoization)은 앱 성능을 최적화하는 가장 적절한 전략이었다. 먼저 리스트 아이템을 별도의 컴포넌트로 분리하고, 컴포넌트 자체를 메모이제이션하는 리액트메모(React.memo)를 적용했다. 이를 통해 프롭스(props)가 변경되지 않은 아이템 컴포넌트는 렌더링을 스킵하도록 구성했다. 또한 renderItem과 이벤트 핸들러를 useCallback으로 고정해 함수 참조가 매 렌더마다 변경되는 문제를 해결했고, React.memo가 정상적으로 동작하도록 props 안정성을 확보했다.
개선 효과는 두드러졌다. ‘내 포인트’ 탭 하단에 약 40개의 투자∙포인트 내역 데이터를 추가하고 메모이제이션 적용 전후의 렌더링 성능을 비교 테스트했을 때 놀라운 결과를 발견한 것이다. 테스트 시나리오는 ▲‘내 포인트’ 탭 진입 후 필터 클릭 ▲조회 기간(1개월→3개월→6개월) 선택 후 조회하기 클릭 ▲리스크 스크롤 등으로 구성했고, 그 결과는 아래와 같다.
개선 전후 컴포넌트가 얼마나 렌더링됐는지 React DevTools Profiler와 렌더 카운트 로직을 추가해 정량적으로 비교하니 뚜렷한 결과를 눈으로 확인할 수 있었다.
이번 메모이제이션 적용 프로젝트로 스크롤 중 끊김이 줄어든 것은 물론, 탭 전환이나 필터 적용, 새로고침 등 화면 상호작용 시 반응 속도가 빨라졌다. 특히 데이터가 많거나 아이템 UI가 복잡한 화면에서 불필요한 리렌더링이 줄어 인터렉션 직후 화면이 빠르게 안정화된 것도 유의미하다.
금융 플랫폼에서 끊김이나 로딩이 잠깐이라도 일어나면 고객은 불안을 느낄 수밖에 없다. 가볍고 빠른 앱, 언제나 더 나은 방향으로 발전하는 플랫폼만이 좋은 고객 경험을 심어 주고 고객 신뢰와 편의 모두를 전달한다.
데일리펀딩 IT실의 운영 정체성에 깊게 스며든 가치를 지키고 고객의 일상에 뿌리내리려 한다.