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

6 분 소요

세 개 층에서 동시에 터진 버그는 우연이 아니었다

개발 회고 — 2026-07-14 (수)

오늘 작업 요약

캘린더 리스트뷰 재구현부터 폼 데이터 유실 버그, 그리드 마스킹 정합성 문제까지 여러 계층에 걸친 수정을 하루에 진행했다. 총 7개 커밋, 100개 이상의 파일이 변경되었고, 이 과정에서 이미 스테이징해둔 변경사항을 이전 커밋에 병합하는 리베이스 작업도 함께 진행했다.

  • 캘린더 리스트뷰 재구현 및 프레임/그리드 UI 전반 개선 — 이미 스테이징된 컬럼 메뉴·그리드 변경사항을 원래 커밋에 병합
  • 폼 제목 편집/동기화, 행 드래그 순서, 다중 선택 목록 버그 수정 — 신규 특화 컴포넌트 및 유틸 작성, 회귀 테스트 추가
  • 폼 UI 아이콘/문구 정비 — 업로드·닫기·선택 아이콘 추가, 외래참조 아이콘 축소, 다국어 문구 업데이트
  • 그리드 핵심 컴포넌트의 틀고정 마스킹·행 추가 구분선·선택 인디케이터 위치 버그 수정
  • 그리드 헤더 선택 상태의 하단 테두리 정합성 수정 및 그룹 헤더 디자인 모드 색상 처리 개선
  • 폼 임시 저장 데이터와 조회 옵션 처리를 통합하고, 저장 실패 시 데이터가 유실되는 버그 수정
  • 그리드 가로 스크롤바가 노출될 때 폼의 새 행 생성 오버레이가 겹치던 문제 수정

STAR 정리

Situation (상황)

캘린더, 폼, 그리드 세 영역에서 동시에 버그가 발견됐다. 캘린더는 리스트뷰 레이아웃 문제, 폼은 임시 저장 데이터가 저장 실패 시 유실되는 문제, 그리드는 틀고정 영역과 선택 인디케이터의 위치가 어긋나는 문제였다. 폼 쪽은 특히 편집 화면과 조회 화면이 각자 임시 저장 상태를 따로 관리하고 있어서, 저장이 실패했을 때 한쪽은 복구되고 다른 쪽은 유실되는 불일치가 있었다. 또한 이미 스테이징해둔 컬럼 메뉴/그리드 변경사항을 별도로 커밋하지 않고 원래 관련 커밋에 합쳐야 하는 상황이었다.

Task (과제)

  1. 이미 스테이징된 변경사항을 원래 커밋에 자연스럽게 병합
  2. 폼의 제목 동기화, 행 드래그 순서, 다중 선택 버그를 근본적으로 해결하고 회귀 테스트로 커버
  3. 폼 UI 아이콘과 문구를 다국어와 함께 정비
  4. 그리드의 틀고정 마스킹과 선택 인디케이터 위치 문제를 여러 지점에 걸쳐 동시에 수정
  5. 그리드 헤더 선택 상태와 그룹 헤더 색상 처리를 정비
  6. 폼의 임시 저장/조회 옵션 처리를 통합하고 저장 실패 시 데이터 유실을 방지
  7. 그리드 스크롤바와 폼 오버레이가 겹치는 문제 해결

Action (행동)

  • 이미 스테이징되어 있던 컬럼 메뉴/그리드 관련 변경사항을, 대화형이 아닌 자동 스쿼시 방식의 리베이스로 원래 커밋에 합쳐 넣음. 이 과정에서 이후 이어지는 6개 커밋의 해시가 함께 갱신됨
  • 폼 제목 동기화 로직을 개선하고, 행을 드래그로 재정렬할 때 선택 상태가 유지되지 않던 문제와 다중 선택 목록의 버그를 수정함. 폼 필드 타입별로 특화된 신규 컴포넌트(담당자 선택, 업로드 플레이스홀더)를 작성하고, 날짜 포맷팅과 검색어 강조를 위한 유틸을 신설함. 관련 회귀를 검증하는 Cypress 테스트를 새로 작성함
  • 업로드, 닫기, 선택에 쓰이는 아이콘을 추가하고 외래참조 관련 아이콘 4개의 크기를 축소함. 관련 다국어(영/한) 문구도 함께 업데이트함
  • 틀고정 영역의 마스킹 처리, 행 추가 시 구분선 정렬, 선택 인디케이터의 위치 문제를 그리드 핵심 컴포넌트 여러 곳에서 동시에 수정함. 프레임 헤더 컨트롤의 마스킹 규칙도 함께 개선함
  • 그리드 헤더 선택 상태의 하단 테두리 정합성을 수정하고, 상위(그룹) 헤더의 디자인 모드 색상 처리 로직을 정비함
  • 폼의 임시 저장 레코드와 조회용 옵션 처리를 전담하는 유틸을 신설해 관련 컴포넌트들이 이를 공통으로 사용하도록 통합하고, 저장이 실패했을 때 데이터가 유실되던 버그를 수정함
  • 그리드에 가로 스크롤바가 나타날 때 그 높이가 계산에 반영되지 않아 폼의 새 행 생성 오버레이와 겹치던 문제를, 스크롤바 높이 계산 로직을 추가해 해결함

Result (결과)

  • 리베이스를 통해 스테이징된 변경사항이 관련 커밋에 자연스럽게 통합되어, 커밋 히스토리가 더 의미 있는 단위로 정리됨
  • 폼 관련 버그 세 가지(제목 동기화, 행 드래그, 다중 선택)가 수정되고 회귀 테스트로 커버됨
  • 그리드 마스킹/선택 인디케이터 버그는 여러 지점에서 동시에 수정했지만, 다른 선택 모드(범위 선택, 행 선택)에서 회귀가 없는지는 아직 재검증 전
  • 폼 데이터 유실 버그는 유틸 중앙화로 해결됐으나, 근본적으로는 폼 상태 관리 구조 자체를 재설계할 여지가 남아있음을 확인함
  • 별도로 진행 중이던 큰 폭의 UI 제거 작업(숨겨진 컬럼 목록 UI, 128줄 삭제)은 관련 테스트를 실행하기 전까지 커밋하지 않고 보류 상태로 남김

실제 측정 가능한 지표

지표 확인 방법 비고
커밋 수 및 변경 규모 git log --stat (오늘 범위) 7개 커밋, 100개 이상 파일 변경
리베이스로 병합된 파일 범위 git show (병합된 커밋) 컬럼 메뉴/그리드 관련 스테이징 변경사항
회귀 테스트 추가 개수 신규 Cypress 테스트 파일의 it() 블록 수 폼 제목 동기화/행 재정렬 테스트
마스킹 버그 수정 지점 수 git diff --stat (해당 커밋) 3곳에서 동시에 어긋나 있던 것으로 확인
보류 중인 미커밋 파일 git status ViewGrid 관련 변경 및 설정 파일 3개

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

  • 폼 상태 관리 통합으로 데이터 유실 위험 감소 (추정): 편집 화면과 조회 화면이 각자 관리하던 임시 저장 상태를 공통 유틸로 중앙화하면서, 저장 실패 시 한쪽만 복구되고 다른 쪽은 유실되는 불일치가 해소되었을 것으로 예상됨. 근거: 임시 저장/조회 옵션 처리를 전담하는 유틸이 신설되고 여러 컴포넌트가 이를 공통으로 참조하도록 바뀐 구조를 확인함. 다만 네트워크 타임아웃이나 동시 저장 같은 엣지 케이스에서 실제로 유실이 재발하지 않는지는 아직 테스트 전임
  • 커밋 히스토리 정리로 리뷰 용이성 향상 (추정): 자동 스쿼시 리베이스로 이미 스테이징된 변경사항을 관련 커밋에 합쳐 넣으면서, 이후 히스토리를 살펴볼 때 “이 변경이 왜 있었는지”를 더 명확하게 추적할 수 있게 되었을 것으로 예상됨. 근거: 별도 커밋으로 남기지 않고 관련 커밋에 통합한 것을 확인함. 실제 리뷰 시간 단축 효과는 다음에 히스토리를 참조할 때 체감할 수 있을 것으로 보임

더 측정하면 좋은 지표

  1. 그리드 선택 모드별 회귀 여부: 범위 선택, 행 선택 등 다른 선택 모드에서 마스킹/인디케이터 수정이 의도치 않은 영향을 주는지 전수 확인
  2. 폼 데이터 유실 버그의 엣지 케이스 커버리지: 네트워크 타임아웃, 동시 저장, 브라우저 탭 전환 시나리오를 자동화 테스트로 추가
  3. 보류 중인 UI 제거 작업의 실제 영향 범위: 관련 Cypress 테스트(프레임 확장, 컬럼 가시성)를 실행해 실제 회귀 여부 확인
  4. 캘린더 리스트뷰와 월간/연간 뷰 간의 시각적 일관성: Visual Regression 도구로 세 뷰의 스크린샷 비교
  5. 리베이스로 병합된 커밋의 diff 정확성: 리베이스 전/후 최종 코드 상태가 의도한 대로 동일한지 diff로 재확인

오늘 배운 것

  • 캘린더(레이아웃), 폼(상태 관리, 데이터 유실), 그리드(UI 정합성, 마스킹)에서 동시에 버그가 발생하는 것은 우연이 아니라, 프레임·그리드·컴포넌트 계층 간 상태 동기화와 레이아웃 계산이 서로 긴밀하게 얽혀 있기 때문이라는 것을 다시 확인함
  • 이미 스테이징된 변경사항을 이전 커밋에 자연스럽게 병합할 때, 대화형이 아닌 자동 스쿼시 리베이스가 실용적인 선택지가 될 수 있다는 것을 배움. 커밋을 잘게 나누는 것과 하나로 모으는 것 사이에서 유연한 균형점을 제공함
  • 마스킹이나 고정 영역처럼 여러 컴포넌트가 얽힌 버그는, 한 지점의 값만 고쳐서는 해결되지 않고 경계 정의부터 렌더링까지 전체 흐름을 함께 검토해야 한다는 것을 다시 느낌
  • 대규모 UI 제거처럼 영향 범위가 큰 변경은, 관련 테스트를 실행해 검증하기 전까지는 커밋하지 않고 신중하게 대기하는 것이 중요하다는 것을 확인함

어려웠던 점 / 막힌 부분

  • 캘린더, 폼, 그리드, 입력 컴포넌트에서 동시에 버그가 발생하다 보니, 각각의 근본 원인과 수정 범위를 한 번에 판단하기 어려웠다. 결국 커밋별로 영향을 검증하는 방식(Cypress 수동 실행, 관련 컴포넌트 코드 검색 등)으로 하나씩 진행함
  • 그리드의 고정 영역 경계와 선택 인디케이터 위치가 세 지점에서 동시에 어긋나 있어, 어느 지점에서 문제가 시작됐는지 특정하려면 캔버스 렌더링, CSS 마스킹, 좌표 계산을 모두 이해해야 했다. 수정 후에도 한 지점의 변경이 다른 곳에 영향을 주지 않는지 재검증이 필요한 상태
  • 폼의 임시 저장 데이터 유실 문제는, 편집 화면과 조회 화면이 각자 상태를 관리하던 근본적인 설계 문제에서 비롯된 것이었다. 이번엔 유틸로 중앙화해 해결했지만, 더 근본적으로는 폼 상태 관리 구조 자체를 재설계할 여지가 남아있음
  • 숨겨진 컬럼 목록 UI를 제거하는 대규모 변경(128줄 삭제)은 관련 테스트를 실행하기 전까지 회귀 여부를 확신할 수 없어, 현재 커밋하지 않고 대기 중인 상태로 남김

내일 하면 좋은 작업

  1. 보류 중인 UI 제거 변경사항 검증 — 관련 Cypress 테스트(프레임 확장, 컬럼 메뉴 관련 케이스) 실행
  2. 미커밋 상태인 파일 3개(UI 제거 변경분, 환경 설정 파일 2개) 검토 및 커밋 여부 결정
  3. 캘린더 리스트뷰 재구현 이후 월간/연간 뷰와의 UI 일관성 최종 검증
  4. 폼 데이터 유실 버그 수정 후 엣지 케이스 테스트 — 네트워크 타임아웃, 동시 저장, 브라우저 탭 전환
  5. 그리드 마스킹 수정 후 다른 선택 모드(범위 선택, 행 선택)에서 회귀가 없는지 확인

한 줄 요약

캘린더부터 폼, 그리드에 이르기까지 여러 컴포넌트의 다층적 버그를 동시에 정리하면서, 자동 스쿼시 리베이스로 커밋을 효율적으로 통합하고, 대규모 UI 리팩토링은 신중하게 검증 대기하는 생산적인 하루였다.

댓글남기기

참고