새 UI로 변경된 페이지 리뉴얼 개발
실사용자의 편의 고려해 최적화에 중점 둬
2026년 2월, 데일리펀딩 홈페이지의 메인 얼굴이 바뀌었다. 기존보다 속도와 보안성을 높이고 최신 기술을 도입한 것은 물론, 사용자 중심의 UI를 구현한 것이 특징이다. 메인 페이지 리뉴얼 다음에는 각 탭의 세부 페이지를 단장하는 작업을 진행 중이다. 그중에서 완전히 UI가 바뀐 ‘언론 속의 데일리펀딩’ 페이지와 ‘공시자료’ 페이지를 리뉴얼 개발하는 프로젝트를 맡게 됐다. 데일리펀딩의 성장 스토리와 객관적인 영업 현황을 담은 핵심 페이지인 만큼 완전히 새로운 UI 디자인이 탄생해서다.
앞서 인턴십 사전 과제로 데일리펀딩 자체 블로그인 <데일리 인사이트>를 Next.js 앱라우팅으로 클론하는 작업을 수행했던 터라, Next.js로 어떻게 환경을 재구성할지 판단하는 데 도움이 됐다. Next.js는 리액트 라이브러리를 잘 사용할 수 있는 프레임워크이니 리액트 라이브러리에서 useState와 useMemo 함수를 이용해 서비스를 더 최적화하기로 결정했다.
useState는 상태가 변경될 때 재렌더링을 트리거하는 동시에 상태 값을 유지하고, useMemo는 의존성 배열(내가 지정한 변수들)이 바뀔 때만 재계산하고 그 외에는 이전에 메모이제이션한 값을 재사용하는 특징이 있기 때문이다. 언론 속의 데일리펀딩 페이지에는 데이터베이스에서 받아온 기사 개수에 따라 페이지네이션을 구현해야 하는 섹션이 있는데, useMemo를 사용하면 리액트 컴포넌트의 성능을 향상시킬 것 같다는 짐작도 들었다.
최적화를 신경 쓴다는 것은 대학교에서 진행한 개발 프로젝트와 큰 차이가 나는 부분이었다. 실사용자가 존재하는 환경에서 개발할 때 무엇에 중점을 두어야 하는지, 지속 가능한 환경을 구현하기 위해 어떤 점을 신경 써야 하는지 배웠던 순간이었다.
컴포넌트 작업, 로직 규칙 준수가 전부는 아냐
갑자기 나타난 x축 스크롤… 오버플로우 해결
언론 속의 데일리펀딩 페이지의 ‘가장 많이 읽은 기사’ 섹션은 이 페이지에만 존재하는 구성 방식이다. 페이지 상단에 요소가 3개씩 정렬되고, 화살표를 누르면 요소가 움직이는 구조라 단독 컴포넌트로 구성하면 될 것 같았다. 그런데 알고 보니 기존에 비슷하게 사용하는 컴포넌트가 존재했다. 개발자 선배 멘토와 대화 나누던 중 그 컴포넌트를 활용하면 유지보수하는 데 효율적이고 코드 가독성을 높이기 좋다는 피드백을 받았다. 기존 컴포넌트를 수정하되, 로직 규칙이 흐트러지지 않게 신경 쓰며 작업을 이어 나갔다.
예기치 못한 문제는 언제나 그렇듯 갑자기 발생한다. 수정한 컴포넌트를 적용하고 나니, 다른 페이지로 이동했을 때 UI 디자인이 깨지고 이상한 x축 스크롤이 생성된 것이다. 나중에야 겨우 찾은 원인은 두 가지였다. 실수로 그만 디자인 코드를 잘못 건드렸던 것. 그리고 사전에 오버플로우를 방지하지 못했던 것. 둘 다 컴포넌트를 수정하면서 해결했으나, 디자인 코드를 수정하면 해결됐던 첫 번째 이슈와 달리 x축 스크롤은 해결하는 데 오랜 고민이 필요했다.
