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