프로젝트 목록
데이터 관리 시스템
대규모 데이터 관리를 위한 웹 애플리케이션
대량의 고객·신고 데이터를 한 화면에서 다루는 사내 전용 시스템입니다. 유지보수를 맡아 기능을 개선하다가, 느린 목록 화면을 가상화 테이블 기반의 새 구조로 다시 만들어 기존 대비 최대 24배 빠르게 개선했습니다.
사내 프로그램으로 상세 화면 및 링크 비공개
- 기간
- 2025.04 ~ 2026.05
- 담당 역할
- 유지보수, 프론트엔드 개발, 성능 최적화
주요 역할
유지보수 업무를 담당했으며, 최우선 과제는 속도 개선이었습니다.
성능 최적화
- TanStack Virtual로 테이블을 가상화해 화면에 보이는 행만 렌더링
- 30여 종의 셀 컴포넌트를 memo 처리해 일괄 조작 시 불필요한 리렌더링 제거
- 서버 사이드 정렬과 페이지당 조회 수 제한으로 부하 분산
- 데이터 로딩 시 8배, 일괄 조작 시 최대 24배 이상의 성능 향상 달성
프론트엔드 개발
- TanStack Table 기반 대규모 데이터 테이블 설계 및 구현
- 셀 인라인 편집, 사용자별 컬럼 설정(순서·너비) 저장, 엑셀 다운로드
- 문자 예약 발송, 계정·권한 관리 기능 개발
프로젝트 구조 개선
- 기존 페이지를 개선하는 안과 새 구조로 다시 만드는 안을 모두 구현해 비교 제시
- 새 구조를 기존 화면과 병행 운영하며 검증한 뒤 기존 페이지를 대체
성능 개선 측정 결과
기존 버전과 신규 버전을 동일한 데이터·환경에서 측정한 결과입니다.
통합 성능 지표 요약
| 측정 항목 | 구분 | 기존 | 신규 | 개선 효과 |
|---|---|---|---|---|
| 데이터 페칭 및 초기 로드 | Avg Data to Paint | ~1,800 ms | ~218 ms | 약 8.2배 향상 |
| 대량 데이터 일괄 조작 (데이터 적을 때) | 메인 스레드 점유 | ~470 ms | ~0 ms | 차단 현상 제거 |
| 대량 데이터 일괄 조작 (실사용 기본 설정) | 전체 UI 처리 지연 | ~2,950 ms | ~120 ms | 약 24.5배 향상 |
측정 방법과 상세 분석 보기
1. 측정 환경
- 환경: 표준 웹 브라우저 측정 환경
- 데이터셋: 실제 운영 환경 기준
- 측정 도구: Antigravity를 활용하여 실제 브라우저와 연동된 테스트 진행, 브라우저 표준 성능 측정 API (longtask, paint, resource) 사용
- 비교 조건: 데이터가 적을 때, 실사용 기본 설정(데이터 약 5배)
2. 상세 분석 결과
A. 데이터 탐색 및 페이지 전환 (데이터 적을 때)
데이터가 시스템으로부터 수신된 후 화면에 최종 렌더링될 때까지의 시간을 측정했습니다.
- 기존 (Old): 데이터가 적을 때도 이동 시마다 약 1.7초 ~ 1.9초의 지연이 발생합니다. 페인팅 과정에서 브라우저 응답 지연 현상이 수반됩니다.
- 신규 (New): 동일 조건에서 평균 210ms 내외로 처리가 완료됩니다. 이는 사용자가 인지하기 어려운 수준의 빠른 반응 속도입니다.
B. 일괄 시스템 인터랙션 성능 (실사용 기본 설정)
사용자 기본 설정 규모의 데이터를 한 번에 조작할 때 발생하는 시스템 부하를 측정했습니다.
- 기존 (Old): 실사용 기본 설정(데이터 약 5배)에서 일괄 조작 시 약 3초(3,000ms) 동안 화면이 완전히 멈추는(Lock) 현상이 발생합니다. 이로 인해 조작 중 사용자 입력이 무시되거나 대기 시간이 길어지는 문제가 있습니다.
- 신규 (New): 같은 조건에서도 메인 스레드 차단 시간이 0ms에 가까우며, 총 UI 업데이트가 120ms 내에 완료됩니다. 실제 사용 환경에서도 부드러운 사용자 경험을 유지합니다.
3. 기술적 분석 및 사용자 경험 (UX)
렌더링 알고리즘 최적화:
- 기존: 전체 UI 요소를 다시 계산하여 그리는 방식으로 데이터가 증가할수록 연산량이 기하급수적으로 증가합니다.
- 신규: 가상화 기술 및 부분 렌더링 최적화를 통해 데이터 규모와 관계없이 안정적인 성능을 확보했습니다.
리렌더링 범위 축소:
- 행·셀 단위 memo 로 바뀐 데이터만 다시 그려, 대량 일괄 조작에서도 메인 스레드가 막히지 않습니다.
4. 결론
실제 사용자 설정 기준으로 개선된 버전은 기존 대비 데이터 로딩 시 8배, 일괄 조작 시 최대 24배 이상의 성능 향상을 달성했습니다. 이는 시스템 운영의 안정성과 대량 데이터 관리 효율성을 근본적으로 개선한 결과입니다.
측정일: 2026-02-03
기술 스택
Next.js 15, TypeScript, Tailwind CSS, React Query