FE 성능 기록과 측정 방법

제품 개발 기록으로 · 급여 시트 사용 · 근무표 사용 · 개발·운영

명시된 환경에서 얻은 참고 측정값과 재현 방법을 정리합니다. 성능 기준선으로 사용하려면 같은 조건에서 다시 측정해야 합니다. 기능별 사용법은 위 문서를 참고하세요.

FE 성능: 급여 시트

문제와 변경 이유

급여 시트 성능 개선은 저사양 CPU에서 급여 시트의 초기 진입, 셀 클릭, 스크롤이 느린 문제를 다룹니다. 닫힌 날짜 선택기의 대량 바인딩, 클릭 한 번의 중복 그리기, 선택·스크롤 중 반복 계산을 줄인 변경입니다.

측정 기록

아래 값은 원문에 기재된 참고 측정값입니다. 현재 성능의 기준선으로 사용하려면 같은 조건에서 다시 측정해야 합니다.

조건	원문에 기록된 내용
화면·데이터	HR 계약급여내역 시트, 1,010행 × 16열
환경	Chrome DevTools CPU 4배 제한, CDP 프로파일링
빠진 정보	브라우저 버전, 장비 사양, 캐시 조건, 반복 횟수, 원시 trace 링크는 원문에서 확인되지 않음

지표	변경 전	변경 후
DOMContentLoaded	15.7초	2.6초
첫 그리드 셀 표시	19.3초	4.6초
마우스 클릭의 긴 작업	약 280ms, 2개	77ms, 1개

유지보수와 사용자 문서 영향

날짜 선택기를 열고 닫는 동작, 연도 범위, 클릭·드래그 선택, 선택 집계, 필 핸들을 회귀 확인 대상으로 남깁니다. 원문의 후속 제안은 코드·후속 변경을 확인해 구현 여부를 판단합니다.

원문은 사용 절차 변경 없이 성능을 개선한 것으로 설명합니다. 사용자 문서에서 속도 향상을 수치로 안내하려면 측정 조건과 대상 버전을 다시 확인해야 합니다.

근거: 급여 시트 성능 개선 원문. 성능 측정과 회귀 테스트를 다시 실행한 결과는 아닙니다.

FE 성능: 스케줄러 첫 진입

문제와 변경 이유

스케줄러 성능 개선은 관리자 스케줄러에서 초기화가 중복 실행되고, 독립적인 조회가 직렬로 이어져 근무표 표시가 늦어지는 문제를 다룹니다. 초기화 중복 방지, 독립 조회의 동시 실행, 기간으로 근무표를 한 번에 읽는 API, 근무표 표시 뒤의 준수율 검증으로 변경했습니다.

측정 기록

항목	원문에 기록된 내용
시나리오·환경	관리자 #scheduler 진입, 지연 150ms를 적용한 로컬 측정
근무표 표시	2.4초에서 1.2초
HTTP 요청 묶음	16회에서 8회
근무표 관련 직렬 왕복	11회에서 2회
빠진 정보	장비·브라우저 버전, 캐시 조건, 반복 횟수, 원시 trace 링크는 원문에서 확인되지 않음

유지보수와 사용자 문서 영향

일반 간호사와 관리자의 병동 범위, 근무표가 없는 달, 월·병동 변경 중 이전 준수율 응답이 늦게 도착하는 경우, 휴일·커스텀 근무 라벨을 확인해야 합니다. 조회를 병렬화하더라도 권한 필터와 날짜 데이터가 준비되는 순서를 보존해야 합니다.

사용자 문서에서는 근무표 로딩, 데이터가 없는 상태, 권한 안내를 구분해 설명할 필요가 있습니다. 이번 기능 정리에서는 스케줄러 문서에서 기존 스크린샷·안내와 현재 코드의 차이를 대조했습니다. 이 성능 수치를 재측정한 것은 아닙니다. 과거 로컬 측정으로 운영 환경의 대기 시간을 보장하지 않습니다.

근거: 스케줄러 첫 진입 개선 원문. 원문에 전체 lint·build, admin 테스트, 로컬 근무표 조회·표시 검증이 기록되어 있습니다.

재현과 신규 측정 순서

1. 측정할 리비전, 앱, 계정 역할, 조직·병동, 기간, 행·열 수를 고정합니다. 급여는 계약급여내역 진입·셀 선택·스크롤, 근무표는 관리자 스케줄러 진입·월 변경·병동 변경을 각각 별도 시나리오로 둡니다.
2. 브라우저·버전·장비·화면 크기, CPU 제한, 네트워크 지연, 캐시·로그인 상태를 기록합니다. 초기 진입과 재진입을 나누고 측정 중 다른 작업의 부하를 피합니다.
3. 시작은 메뉴 클릭 또는 탐색 시작, 끝은 첫 데이터가 보이고 필요한 조작을 받는 시점으로 명시합니다. DOMContentLoaded와 사용자 조작 가능 시점은 서로 다른 지표입니다.
4. DevTools Performance 녹화에서 진입, 셀 클릭, 스크롤을 각각 실행하고 trace를 저장합니다. Network에서는 실제 요청 수와 직렬 의존 구간을 확인합니다. tRPC 배치 요청 한 번에 여러 연산이 들어갈 수 있어 HTTP 횟수와 API 연산 수를 구분합니다.
5. 같은 조건으로 반복하고 반복 횟수·개별 값·대표값을 함께 남깁니다. 전후 조건이 다르면 비교 표를 만들지 않습니다. 원시 trace는 비밀 토큰·개인정보를 제거한 프로젝트 저장 위치로 연결합니다.
6. 속도 외에 날짜 선택, 셀 입력·선택·드래그·필 핸들, 기간 전환 중 늦게 온 응답, 권한 범위와 빈 상태가 유지되는지 해당 기능 절차로 확인합니다.
7. 전후 녹화에 시작·종료 표식을 붙이고 기다리는 시간을 삭제하지 않습니다. 아직 측정하지 않은 칸에는 숫자를 추정해 넣지 않고 조건과 미확인 이유를 적습니다.

추가 성능 자료와 소유 경로

기록	관련 기능·유지할 조건
탭 초기 로딩의 비어 보이는 상태	알림·신고·내 정보 등 실제 빈 목록과 읽는 중을 구분. 변경 파일은 해당 원문 기준
데이터와 렌더링 구조	시트의 가상화·소스 참조·저장 경로가 바뀌면 사용 절차와 측정 데이터량을 함께 갱신
로딩 표시 규칙	영역 대기는 링, 개별 버튼 대기는 아이콘. 표시 변경은 성능 개선 수치와 별도로 기록

기존 변경 설명 전체와 현재 기능 연결은 문서 원장에서 찾습니다. 랜딩의 「반나절」「0시간」 같은 업무 절감 표현과 데모의 고정 애니메이션 시간은 FE 실측 지표가 아닙니다.

기존 급여 시트 동작 영상

아래 영상은 급여 시트의 조작을 설명하는 실제 화면 녹화입니다. 성능 전후 측정 자료는 아닙니다. 전체 길이는 파일 메타데이터 기준 83.272초이며 이번 로컬 문서에서 재생·일시정지와 43초 지점의 단계 설명을 확인했습니다. 포스터에는 법정공제 시트, 수식바 확대와 단계 자막이 있습니다. 현재 고객사의 수치나 현행 요율의 근거로 사용하지 않습니다.

1분 23초 · 소리 없음 · 화면 안의 번호와 강조 위치를 따라 보세요. 전체화면으로 확대할 수 있어요.

처음에는 재생 버튼을, 다시 볼 때는 아래 동작 번호를 누르세요.

1. 월·셀 값 보기

   상단에서 작업할 월을 고르고 왼쪽 목록의 시트를 엽니다. 직원 행의 셀을 눌러 값과 위쪽 수식바를 확인합니다. 자세히 따라 하기

2. 공제 계산식 확인

   가로로 스크롤해 공제 열을 찾고 금액 셀을 누릅니다. 위쪽 수식바에서 계산식과 참조 항목을 읽습니다. 영상의 금액·요율을 입력값으로 옮기지 말고 병원의 해당 월 자료를 확인하세요. 자세히 따라 하기

3. 셀 메모 확인

   확인할 셀을 우클릭하고 「메모 보기」를 누릅니다. 오른쪽에 선택한 셀의 메모가 열리면 어떤 직원·항목에 남긴 내용인지 확인합니다. 자세히 따라 하기

4. 템플릿으로 시작

   「새 시트 만들기」에서 「추천 템플릿」을 열고 필요한 양식을 고릅니다. 영상은 「근태 내역」을 만든 뒤 「근태 업데이트」로 직원별 시간을 확인하는 과정까지 보여 줍니다. 자세히 따라 하기

급여 시트의 월 선택·수식·메모·템플릿 사용을 보여 줘요. 메뉴와 표시 항목은 시트 구성에 따라 다를 수 있어요. 급여 반영·확정·직원 명세서 공개는 급여 확정 흐름에서 이어서 확인하세요.

같은 동작 번호·영상·글 절차를 핵심 기능 소개, HR 소개, HR 사용자 가이드, 고객사 온보딩에서 함께 사용합니다. 번호 선택은 해당 시점부터 영상을 재생하며 제품의 데이터 변경을 실행하지 않습니다.

항목별 영상의 초기 로딩 확인

사용자 가이드의 개별 기능 영상 90편을 공통 GuideVideo로 연결했습니다. 모든 영상은 preload="none"·자동 재생 없음으로 유지합니다. 로컬 관리자 가이드에 첫 진입했을 때 플레이어 31개 중 재생 시작 0개, 영상 본문 요청 0건을 확인했습니다. 개발 서버가 반환한 300바이트의 .webm?import URL 모듈은 영상 본문 다운로드와 구분했습니다.

이 결과는 LCP·메모리·네트워크 성능 개선 수치가 아닙니다. 앱 대표 8편을 포함한 신규 WebM 98개는 약 360 MiB이며 파일을 한 번에 미리 불러오지 않도록 했습니다. 사용자 기기에서 선택 영상의 다운로드 크기·디코딩·전체화면 재생 성능은 별도 측정 대상입니다. 로딩 실패 시 포스터와 번호별 글 설명이 유지되고 번호 버튼이 비활성화되는 것도 실제 브라우저에서 확인했습니다. 배치·재생 검증과 기능별 촬영 범위를 함께 확인합니다.

직원 목록의 선택창과 팀 일괄 변경

PR #664는 직원 행의 팀·역할 선택창을 열 때 렌더링하도록 바꿔 닫힌 선택창까지 만드는 비용을 줄였습니다. PR #655는 팀 소속 일괄 변경을 순차 왕복 대신 묶어 처리합니다. 사용자 조작은 팀·구성원 관리와 직원 관리를 따릅니다.

이번 주간 검토에서는 병합 diff와 기존 설명만 확인했습니다. 현재 버전의 직원 수·화면 크기·브라우저·응답시간을 고정한 성능 측정을 하지 않았으므로 새 개선율이나 지연 수치는 기재하지 않습니다. 재측정 시 선택창 첫 열기·재열기, 많은 직원의 일괄 변경과 부분 실패를 각각 나눠 기록합니다.

관리자·직원 상세·급여 기간 로딩 분리

PR #803·#814·#818·#820은 새 시트 템플릿, 활성 관리자 페이지, 직원 상세, 급여 기간의 자료 요청 시점을 분리·통합했습니다. PR #852는 전체 페이지에 영향을 주는 :has() 선택자와 긴 근무 배지 표시를 정리했습니다. 유지보수에서는 첫 진입뿐 아니라 다른 탭으로 이동한 뒤 복귀, 직원 상세의 편집 탭 전환, 월 변경, 반복 모달 열기에서 필수 자료가 남아 있는지 확인합니다.

요청 수·테스트의 함수 호출 수 감소를 실제 페이지 로딩 시간 감소로 보고하지 않습니다. 이번 문서 작업에서는 가상 조직 화면 진입을 확인하며, 이전 버전과 동일 데이터·네트워크로 비교한 페이지별 속도 측정은 수행하지 않았습니다. 개선 전후의 사용자 체감 시간을 주장하려면 별도 측정이 필요합니다.

공통 화면 탐색 비용 변경의 확인 범위

PR #926·#929·#933은 필터 줄·메뉴·배경 상태 확인에서 관계없는 화면 변경의 재검사를 줄이고, #942는 직원 행의 고정 아이콘을 재사용합니다. 사용자 절차를 바꾸는 기능은 아닙니다. 해당 PR의 구현 근거와 이번 문서 검토를 연결하되, 이번 회차에서 동일 조건의 전후 성능 추적을 새로 측정하지 않았으므로 개선 시간·비율을 현재 성능 수치로 발표하지 않습니다.