기술을 뜯고, 사고를 담다.

5 분 소요

79개 커밋이 쌓이면 회귀는 이진 탐색이 된다

개발 회고 — 2026-07-10 (금)

오늘 작업 요약

캘린더 리스트뷰를 재구현하고 프레임/그리드 UI 전반을 개선하는 대규모 작업을 진행했다. 진행 중이던 리팩토링 브랜치로 전환한 이후 하루 만에 79개 커밋, 181개 파일 변경, 12,678줄 추가/5,390줄 삭제라는 큰 규모의 작업이 쌓였다.

  • 캘린더 리스트뷰 재구현 및 프레임/그리드 UI 전반 개선 — 날짜 표시·이벤트 렌더링 로직 재작성, 헤더 컨트롤 통합, 컴포넌트 헤더 레이아웃 개선, 스타일 토큰화
  • 그리드 핵심 컴포넌트(셀, 레이어, 컬럼 매니저) 연쇄 버그 수정 — 틀고정 마스킹, 그룹 헤더 색상, 선택 위치/인디케이터, 병합 행 교번 색상, 조건부서식 우선순위 정정
  • 폼 제목 편집/동기화, 행 드래그 순서 버그 수정
  • 찾기 위젯 사용성 개선 및 드롭다운 레이아웃 시프트 방지
  • 페이지 전체 UI 정비 — 내비게이션/상단바/목록 아이콘·색상, 그리드 셀 상태별 배경·테두리 통합, 인디케이터 컴포넌트 분리

STAR 정리

Situation (상황)

캘린더 리스트뷰의 날짜 표시와 이벤트 렌더링 타이밍이 서로 얽혀 있어 한쪽을 고치면 다른 쪽이 깨지는 상태였고, 그리드 쪽에서는 틀고정 마스킹, 그룹 헤더 색상, 선택 인디케이터, 병합 행, 조건부서식 등 여러 렌더링 로직이 동시에 활성화되면서 우선순위 충돌이 잦았다. 여기에 폼 제목 동기화, 행 드래그 순서, 드롭다운 레이아웃 시프트 등 크고 작은 UI 버그들이 함께 누적되어 있었다.

Task (과제)

  1. 캘린더 리스트뷰를 근본 구조부터 재구현
  2. 프레임/그리드 헤더 컨트롤을 통합하고 레이아웃을 정비
  3. 그리드 핵심 컴포넌트 간 강한 결합으로 발생하는 연쇄 버그를 하나씩 해결
  4. 폼 제목 동기화 및 행 드래그 순서 버그 수정
  5. 찾기 위젯과 드롭다운 등 세부 UX 개선
  6. 페이지 전반의 아이콘/색상/레이아웃을 일관되게 정비

Action (행동)

  • 캘린더 리스트뷰의 날짜 표시 로직과 이벤트 렌더링 로직을 재작성하고, 프레임 헤더와 그리드 헤더의 컨트롤을 통합해 레이아웃을 정비함. 컴포넌트 헤더 레이아웃을 개선해 프레임이 하나만 있는 경우에도 대응하도록 만들고, 색상/스타일을 토큰 기반으로 전환함
  • 틀고정 컬럼의 마스킹 처리와 행 추가 시 구분선 정렬을 수정하고, 그룹 헤더의 디자인 모드 색상 처리를 개선함. 선택 영역 컨테이너와 그리드 코어 로직에서 선택 위치/인디케이터 버그를 수정하고, 병합된 행의 교번 색상과 필터 인디케이터 렌더링을 개선함. 조건부서식의 커스텀 배경색과 짝수행/호버 배경색 간의 우선순위를 정리함
  • 폼 제목 동기화 로직을 개선하고, 행을 드래그로 재정렬할 때 선택 상태가 유지되지 않던 문제와 다중 선택 목록의 버그를 수정함
  • 찾기 위젯의 사용성을 개선하고, 드롭다운이 열리고 닫힐 때 페이지 레이아웃이 흔들리던 현상을 제거함
  • 내비게이션, 상단바, 페이지 목록, 워크스페이스 목록의 아이콘과 색상을 정비하고, 그리드 셀의 호버/선택/포커스 상태별 배경과 테두리를 통합함. 선택 인디케이터를 별도 컴포넌트로 분리하고 렌더링 영역을 격리함

Result (결과)

  • 하루 만에 79개 커밋, 181개 파일 변경이라는 대규모 작업이 완료되었으나, 변경 규모가 커서 각 커밋의 목적과 부작용을 개별적으로 추적하기 어려운 상태가 됨
  • 캘린더 리스트뷰는 근본 구조를 재작성했지만, 날짜 표시와 이벤트 렌더링 타이밍이 서로 얽혀 있어 완전히 안정화되었다고 보기는 이른 상태
  • 그리드 핵심 컴포넌트(셀, 레이어)의 강한 결합으로 인해, 한쪽을 수정하면 다른 쪽도 함께 재계산해야 하는 카스케이딩이 반복됨 — 근본적인 결합도 개선은 다음 작업으로 이월됨
  • Cypress 테스트의 testid 기반 선택자 일부가 HTML 구조 변경으로 깨졌을 가능성이 있어, 실제 통과 여부는 아직 전체 확인 전
  • 외부 라이브러리 빌드 결과물이 커밋에 포함되면서, 빌드 타임스탬프로 인한 불필요한 diff가 함께 섞여 들어간 상태

실제 측정 가능한 지표

지표 확인 방법 비고
커밋 수 및 변경 규모 git log --stat (오늘 범위) 79개 커밋, 181개 파일, 12,678줄 추가/5,390줄 삭제
Cypress 테스트 통과율 CI 전체 테스트 실행 결과 testid 선택자 깨짐 여부 포함해 확인 필요
회귀 발생 커밋 특정 git bisect로 문제 재현 구간 좁히기 커밋 수가 많아 수동 추적보다 이진 탐색이 효율적
외부 라이브러리 빌드 diff 오염 규모 빌드 산출물 커밋의 diff 중 타임스탬프만 바뀐 라인 수 확인 실질 변경과 노이즈 구분 가능
그리드 핵심 컴포넌트 결합도 셀 높이 변경 시 함께 수정해야 하는 파일 수 추적 리팩토링 필요성의 근거 자료로 활용 가능

추정 가능한 효과 (근거 포함)

  • 스타일 토큰화로 후속 수정 비용 감소 (추정): 색상과 크기를 하드코딩에서 토큰으로 전환하면서, 이후 UI 가이드가 바뀔 때 여러 곳을 개별 수정하지 않고 토큰 값만 바꾸면 되는 구조가 되었을 것으로 예상됨. 근거: 여러 컴포넌트에 걸쳐 색상/크기 값이 토큰 참조로 바뀐 것을 확인함. 다만 실제로 이후 UI 가이드 변경이 있을 때 수정 범위가 얼마나 줄어드는지는 다음에 유사한 변경이 있을 때 비교해봐야 확인 가능함.
  • 인디케이터 컴포넌트 분리로 렌더링 영역 격리 (추정): 선택 인디케이터를 별도 컴포넌트로 분리하고 캔버스 렌더링 영역과 분리하면서, 인디케이터 변경이 캔버스 전체 재렌더링을 유발하지 않게 되었을 것으로 예상됨. 근거: 컴포넌트가 별도로 분리된 구조 변경을 확인함. 실제 렌더링 성능 차이는 React DevTools Profiler로 측정해야 확정할 수 있음.

더 측정하면 좋은 지표

  1. Cypress 테스트 선택자 깨짐 비율: 전체 테스트 스위트를 돌려 실패한 테스트 중 실제 기능 문제와 선택자 문제를 구분해 집계
  2. 그리드 렌더링 성능: 병합 행, 조건부서식, 필터 인디케이터, 그룹 요약 행이 모두 활성화된 상태에서 React DevTools Profiler로 렌더링 시간 측정
  3. 회귀 버그 발생 위치 분포: 이번 79개 커밋 중 실제로 회귀를 유발한 커밋이 있다면, 어느 영역(캘린더/그리드/폼)에 집중되어 있는지 집계
  4. 빌드 산출물 diff 노이즈 비율: 외부 라이브러리 빌드 결과 커밋에서 실질 코드 변경과 타임스탬프성 변경의 비율
  5. CSS 우선순위 충돌 재현 빈도: 조건부서식/교번색/호버색이 동시에 걸리는 케이스를 자동화 테스트로 얼마나 커버하는지 확인

오늘 배운 것

  • 대규모 UI 재구현을 여러 영역에서 동시에 진행하면, 각 컴포넌트가 미치는 영향 범위를 정확히 파악하지 않으면 회귀 버그가 늘어난다는 것을 다시 확인함. 한 곳의 높이·색상 변경이 예상보다 넓은 범위에 연쇄적으로 영향을 미쳤음
  • 색상과 크기를 하드코딩에서 토큰으로 전환하는 작업은, 당장은 번거로워 보여도 이후 수정 비용을 크게 줄여준다는 것을 실전에서 체감함
  • 병합 행, 조건부서식, 필터 인디케이터, 그룹 요약 행처럼 여러 렌더링 로직이 동시에 활성화되는 상황에서는, 렌더링 순서와 스타일 우선순위가 예측하기 어려워지므로 계층 구조와 책임 분리를 명확히 해야 한다는 것을 느낌
  • 커밋이 많아질수록 e2e 테스트의 선택자가 자주 깨질 수 있고, 테스트를 신뢰할 수 없게 되면 회귀 검증 비용이 급격히 늘어난다는 것을 확인함
  • 같은 기능이라도 “편집 모드용”과 “사용 모드용” 부분을 분리하거나, “구조 변경”과 “스타일 적용”을 분리해서 커밋하면 이후 리뷰와 추적이 훨씬 수월하다는 것을 다시 느낌

어려웠던 점 / 막힌 부분

  • 79개 커밋이라는 규모를 한 번에 다루다 보니, 각 커밋의 목적과 부작용을 추적하기 어려웠다. 중간에 버그를 발견했을 때 어느 커밋부터 문제가 생겼는지 찾으려면 이진 탐색(bisect) 방식이 필요한 상황이 됨
  • 캘린더 리스트뷰의 날짜 표시 로직과 이벤트 렌더링 타이밍이 얽혀 있어, 한쪽을 수정하면 다른 쪽이 깨지는 패턴이 반복됨. 근본 구조가 완전히 안정화되기 전까지는 예측이 어려운 상태
  • 그리드 셀과 레이어 컴포넌트가 강하게 결합되어 있어, 셀 높이가 바뀌면 레이어의 마스킹도 다시 계산해야 하는 카스케이딩이 계속 발생함
  • 조건부서식 커스텀 배경색, 짝수행 교번색, 호버 배경색이 동시에 활성화될 때 어느 것이 우선해야 하는지 명확하지 않아 CSS 우선순위 계산이 복잡해짐
  • HTML 구조가 자주 바뀌면서 기존 테스트의 선택자가 더 이상 유효하지 않은 경우가 발생했고, 테스트가 깨진 것인지 기능이 실제로 깨진 것인지 구분하기 어려운 상황이 반복됨
  • 외부 라이브러리의 빌드 결과물을 커밋에 포함시키다 보니, 빌드 시점의 타임스탬프 때문에 실질적인 변경이 없어도 diff가 발생해 리뷰 노이즈가 늘어남

내일 하면 좋은 작업

  1. 79개 커밋의 변경사항을 최종 검증하고 회귀 테스트 실행
  2. Cypress 테스트 전체 통과 여부 확인(선택자 깨짐 여부 포함)
  3. 리팩토링 브랜치 상태를 검토하고 메인 브랜치 병합 준비
  4. 캘린더 리스트뷰 재구현 관련 미해결 버그 확인(있다면 핫픽스)
  5. 그리드 셀/레이어 컴포넌트의 강한 결합도 개선 방안 검토
  6. UI 전체 시각적 리뷰(색상, 레이아웃, 아이콘 일관성)

한 줄 요약

오늘은 캘린더 리스트뷰 재구현과 그리드 UI 전반을 재정비하면서 79개 커밋의 대규모 변경을 완수했으나, 규모가 커질수록 회귀 테스트와 의존성 추적의 어려움을 실감한 하루였다.

댓글남기기

참고