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

5 분 소요

수동 호출 9곳을 콜백 하나로 지운 날

개발 회고 — 2026-07-13 (월)

오늘 작업 요약

새 페이지 생성 시 그리드 레이아웃이 어긋나는 버그를 근본적으로 해결하고, 별개로 보고된 footer 경계 버그를 조사했다. 이어서 스테이징된 변경사항을 코드 리뷰하며 두 건의 버그를 추가로 발견해 수정했다.

  • 새 페이지 생성 시 그리드 레이아웃 버그 수정 — 가로 스크롤바 높이가 반영되지 않던 문제를 임시 봉합이 아닌 근본 구조 변경으로 해결
  • footer/스크롤바 경계 버그 검토 — 여러 가설을 검토했으나 실제 증거로는 재현되지 않아 미해결 보류
  • 스테이징된 변경사항 코드 리뷰 — 컬럼 메뉴 아이콘 상태 오류와 캘린더 스타일 중복 두 건 발견 및 수정

STAR 정리

Situation (상황)

새 페이지를 생성할 때 그리드의 가로 스크롤바 높이가 레이아웃 계산에 반영되지 않아 화면이 어긋나는 문제가 있었다. 이 값은 렌더링 엔진(캔버스 기반) 내부에서만 관리되고 있어, React/MobX 상태 레이어로 노출되지 않는 구조였다. 그래서 레이아웃이 바뀔 수 있는 지점마다 개발자가 일일이 동기화 호출을 넣어줘야 했는데, 이 방식은 새로운 진입 지점이 생길 때마다 놓치기 쉬운 구조적 약점을 갖고 있었다. 별개로, 컬럼이 7개인 경계 상황에서 footer가 겹쳐 보인다는 보고도 있었다.

Task (과제)

  1. 스크롤바 높이 미반영 문제를 임시방편이 아니라 구조적으로 해결
  2. footer 겹침 현상의 재현 조건과 근본 원인 파악
  3. 스테이징된 변경사항을 검토해 잠재적 버그를 사전에 걸러내기

Action (행동)

  • 처음에는 렌더링 엔진이 갖고 있는 스크롤바 상태 값을 React 쪽 컴포넌트가 읽을 수 있도록 값을 끌어오는 통로를 만들고, 상태 관리 레이어에 해당 값을 관찰 가능한 상태로 추가한 뒤, 레이아웃이 바뀌는 지점에서 수동으로 동기화를 호출하도록 수정함
  • 하지만 컬럼을 새로 추가하는 특정 경로에서는 이 수동 호출이 빠져 있어 버그가 재발함. 해당 경로에도 동기화 호출을 추가해 우선 동작을 확인함
  • 최종적으로는 임시 봉합 대신 구조를 바꾸기로 결정함. 렌더링 엔진 쪽에 “스크롤바 상태가 바뀔 때마다 알려주는” 콜백을 새로 만들고, 엔진의 크기 재계산 로직 마지막 단계에서 이 콜백이 항상 호출되도록 통합함. 그 결과 여러 지점(9곳)에 흩어져 있던 수동 호출을 전부 제거하고, 모든 레이아웃 변경 경로에서 자동으로 동기화되는 구조로 바꿈
  • footer 겹침 현상은 footer 위치 계산 순서, 화면 고정(sticky) 상태에서의 범위 제한 로직 등 여러 가설을 검토함. 실제 화면 스크린샷과 개발자 도구로 상태를 직접 확인한 결과, 기존부터 있던 경계 케이스이며 실제 기능상 문제는 없는 것으로 판단해 미해결로 보류함. 조사 과정에서 추가했던 임시 디버그 코드는 다시 되돌림
  • 스테이징된 변경사항을 코드 리뷰하는 과정에서, 컬럼 메뉴의 “연결된 그리드로 이동” 아이콘이 정렬 상태의 활성/비활성 클래스를 그대로 복사해와 잘못 쓰이고 있던 것을 발견해 연결된 그리드의 존재 여부를 기준으로 수정함. 또한 캘린더 스타일시트에서 주간/일간 뷰에 중복되어 있던 스타일 블록을 공용 믹스인으로 통합하고, 컴파일된 CSS가 기존과 동일한지 검증함

Result (결과)

  • 스크롤바 높이 동기화 문제가 콜백 기반 구조로 통합되어, 이전처럼 새로운 진입 지점이 생길 때마다 수동 호출을 빠뜨릴 위험이 구조적으로 사라짐
  • footer 겹침 현상은 근본 원인을 특정하지 못한 채 “경계 케이스, 기능적 문제 없음”으로 보류됨 — 재발 시 다시 조사해야 할 여지가 있음
  • 코드 리뷰를 통해 스테이징 단계에서 두 건의 버그(아이콘 상태 오류, 스타일 중복)를 사전에 발견해 배포 전에 수정함

실제 측정 가능한 지표

지표 확인 방법 비고
제거된 수동 동기화 호출 개수 git diff 에서 제거된 호출 지점 수 9곳으로 파악됨
콜백 통합 전/후 코드 변경 규모 git diff --stat (해당 커밋) 렌더링 엔진과 상태 관리 레이어에 걸친 변경 범위 확인 가능
footer 겹침 재현 여부 7컬럼 경계 상황을 실제로 재현해 스크린샷/DevTools로 확인 오늘은 재현되지 않는 것으로 판단, 추후 재확인 필요
캘린더 스타일 통합 후 컴파일 결과 동일성 통합 전/후 컴파일된 CSS diff 비교 실제로 동일 검증 완료
코드 리뷰에서 발견된 버그 수 리뷰 코멘트/수정 커밋 개수 2건(컬럼 메뉴 아이콘, 스타일 중복)

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

  • 콜백 기반 통합으로 향후 유사 버그 재발 가능성 감소 (추정): 스크롤바 상태 동기화를 렌더링 엔진의 크기 재계산 로직 마지막 단계에 통합하면서, 앞으로 레이아웃이 바뀌는 새로운 진입 지점이 추가되어도 별도의 수동 호출 없이 자동으로 동기화될 것으로 예상됨. 근거: 기존에 흩어져 있던 9곳의 수동 호출을 제거하고 단일 콜백으로 대체한 구조 변경을 확인함. 다만 실제로 새로운 진입 지점이 추가되는 시점에 이 구조가 의도대로 작동하는지는 그때 가서 확인해야 함.
  • 코드 리뷰를 통한 배포 전 결함 예방 (추정): 스테이징 단계에서 아이콘 상태 오류와 스타일 중복을 발견해 수정함으로써, 실제 사용자에게 노출되기 전에 두 건의 잠재적 결함을 걸러냈을 것으로 예상됨. 근거: 코드 리뷰 과정에서 두 건의 수정이 이뤄진 것을 확인함. 다만 이 버그들이 리뷰 없이 배포되었을 때 실제로 얼마나 영향을 미쳤을지는 가정에 불과함.

더 측정하면 좋은 지표

  1. 콜백 통합 이후 스크롤바 관련 회귀 발생 빈도: 이후 컬럼 추가/삭제 등 새로운 레이아웃 변경 기능이 추가될 때 동일 버그가 재발하는지 추적
  2. footer 겹침 현상의 실제 재현 조건: 컬럼 수, 화면 크기, 스크롤 위치 조합을 체계적으로 바꿔가며 재현 스크립트 작성
  3. 코드 리뷰에서 발견되는 버그 유형 분포: 이런 리뷰 과정을 몇 차례 더 거치며, className 복붙이나 스타일 중복처럼 반복되는 패턴이 있는지 집계
  4. 캘린더 스타일 통합 후 실제 렌더링 성능 차이: 믹스인 통합이 CSS 번들 크기나 파싱 시간에 미치는 영향을 Bundle Analyzer로 확인
  5. 엔진-스토어 간 데이터 흐름 재설계의 필요성 검증: 이번처럼 노출되지 않은 내부 상태가 또 있는지 렌더링 엔진 API를 전수 조사

오늘 배운 것

  • 렌더링 엔진과 React/MobX 상태 레이어 사이에서 특정 정보(스크롤바 상태 등)가 노출되지 않으면, 개별 지점마다 수동 호출을 흩뿌려야 하는 구조적 취약점이 생긴다는 것을 다시 확인함. 이번에는 콜백 패턴으로 훅을 단일화했지만, 더 근본적으로는 엔진과 상태 관리 레이어 사이의 데이터 흐름 자체를 재설계할 여지가 있다는 것을 느낌
  • footer 버그를 다루면서, 가설만으로 여러 번 수정을 시도하는 것보다 실제 스크린샷과 콘솔 로그 같은 증거를 먼저 확보하는 것이 훨씬 빠르고 확실하다는 것을 다시 배움. 예측 기반 코딩보다 실제 데이터 확보가 우선이라는 점
  • 코드 리뷰가 스테이징 단계에서 실제로 버그를 잡아내는 것을 확인함. className을 복붙하다 생긴 오용이나 스타일 중복 같은 문제는, 자동화된 도구보다 맥락을 아는 사람의 검토가 더 효과적이라는 것을 느낌

어려웠던 점 / 막힌 부분

  • 스크롤바 동기화 버그를 처음 수정했을 때, 컬럼을 새로 추가하는 경로를 놓쳐서 임시로 해결된 것처럼 보였지만 다시 재발했다. 컬럼 생성 UI의 모든 진입점(헤더 우클릭 메뉴, 버튼 등)을 처음부터 완전히 파악하지 못했던 것이 원인이었고, 다음부터는 관련 기능을 수정하기 전에 전체 진입점을 먼저 매핑해봐야 할 것 같다는 생각이 듦
  • footer 버그는 정확한 근본 원인을 특정하지 못한 채 “경계 케이스”로 보류하게 됨. 화면 배치와 sticky 동작의 세부 로직이 복잡해서, 스크린샷만으로는 확인하기 어려운 부분이 있었음

내일 하면 좋은 작업

  1. 스크롤바 동기화 콜백 변경사항을 브랜치에서 검증하고, 이전에 남아있던 9곳의 수동 호출이 실제로 모두 제거되었는지 재확인
  2. footer 버그를 기능적 문제가 없다고 최종 판단한다면 백로그로 옮기거나, 재현 조건을 명확히 문서화할지 검토
  3. 캘린더 스타일 통합 이후 다른 뷰(월간, 연간)와의 스타일 일관성 재검증

한 줄 요약

구조적 문제(상태 동기화)를 콜백 패턴으로 해결하면서 동시에, 실제 증거를 바탕으로 디버깅하는 것의 중요성을 배우는 하루였다.

댓글남기기

참고