[개발 회고] 그리드 그룹 기능 강화와 스타일 토큰화
개발 회고 — 2026-06-11
오늘 작업 요약
그리드 컴포넌트의 그룹 기능을 강화하고 관련 스타일을 토큰화한 작업. 4개 커밋에 걸쳐 컬럼 헤더 아이콘 정리, 그룹 요약 행 신규 기능 추가, 집계 드롭다운 UX 개선, 행 그룹 바 스타일 개선을 진행했고, 피벗 헤더 색상 토큰 분리 작업은 아직 커밋 전 상태로 남아있다.
- 컬럼 헤더 데이터타입 아이콘의 모드 간 일관성 처리 (merge 충돌 잔재 제거)
- 그룹 요약 행(Group Summary Row) 신규 기능 추가 및 코드 리뷰 버그 수정
- 집계 드롭다운 윈도우 경계 플립 처리
- 행 그룹 바 스타일 개선 및 add-row 높이 버그 수정
- 피벗 헤더 배경색 토큰 분리 및 행 그룹 패널 스타일시트 정리 (미커밋)
STAR 정리
Situation (상황)
그리드 컴포넌트에 그룹 요약 행 기능이 없었고, 헤더 아이콘은 merge 과정에서 남은 충돌 잔재로 모드 간 일관성이 깨져 있었다. 또한 피벗 헤더 배경색과 행 그룹 패널 스타일이 하드코딩되어 있어 모드별 대응이 어려운 상태였다.
Task (과제)
- 컬럼 헤더 아이콘의 모드 간 시각적 일관성 복구
- 그룹 요약 행 기능을 기존 그리드 렌더링 파이프라인에 통합
- 집계 드롭다운의 UX 문제(화면 경계 밖으로 잘리는 현상) 해결
- 행 그룹 바 스타일 개선과 함께 발생한 높이 버그 수정
- 피벗 헤더와 행 그룹 패널의 색상/스타일을 토큰 기반으로 전환
Action (행동)
- merge 충돌 후 남아있던 잔재 코드를 제거해 컬럼 헤더 데이터타입 아이콘이 모든 모드에서 동일하게 렌더링되도록 정리
- 그룹 요약 행 기능을 추가하면서 그리드 셀, 그리드 레이어, 집계 타입 선택 컴포넌트 등 7개 파일을 수정하고, 코드 리뷰 과정에서 발견된 버그를 함께 수정
- 집계 드롭다운이 화면(윈도우) 경계에 닿을 때 방향을 반전(flip)시키는 로직을 추가하고, 집계 아이콘 맵을 외부에서 재사용 가능하도록 export 처리
- 행 그룹 바 스타일을 개선하면서 발생한 add-row 높이 버그를 컴포넌트 인디케이터 리팩토링으로 수정
- 피벗 헤더 배경색을 모드별로 다르게 적용할 수 있도록 토큰을 분리하고, 행 그룹 패널 스타일시트에 폰트 웨이트 토큰을 추가, 미사용 삭제 아이콘 hover 색상 토큰은 제거 (아직 미커밋 상태)
Result (결과)
- 그룹 요약 행 기능이 실제 렌더링 파이프라인에 통합되어 동작함 (기능 동작 여부는 확인, 성능/안정성은 아직 정량 측정 전)
- add-row 높이 버그는 임시로 해소했으나, 근본 원인인 인덱스 기반 높이 계산 구조는 남아있어 향후 유사 버그 재발 가능성 존재
- 피벗 헤더 색상 토큰화 작업은 아직 검증 전 단계로, 색상 배열 개수 불일치 이슈가 발견되어 다음 작업으로 이월됨
실제 측정 가능한 지표
| 지표 | 확인 방법 | 비고 |
|---|---|---|
| 변경된 파일 수 (커밋별) | git diff --stat <commit>^ <commit> |
그룹 요약 행 커밋에서 7개 파일 변경 확인 가능 |
| 전체 커밋/파일 변경 규모 | git log --stat (오늘 범위) |
4개 커밋, 약 9개 파일 |
| 행 높이 계산 관련 회귀 발생 빈도 | 이슈 트래커에서 add-row/행 높이 관련 버그 리포트 추적 | 근본 원인 미해결 상태이므로 재발 가능성 모니터링 필요 |
| 피벗 헤더 색상 토큰 검증 결과 | 변경 전/후 스크린샷 비교 또는 Visual Regression 도구 | 색상 배열 개수 불일치 이슈가 실제로 해결됐는지 확인 |
| 집계 드롭다운 플립 동작 | 브라우저 DevTools에서 화면 경계 근처 드롭다운 위치 확인 | 다양한 뷰포트 크기에서 수동 확인 필요 |
추정 가능한 효과 (근거 포함)
- 그룹 요약 행 기능으로 사용자 데이터 파악 편의성 향상 (추정): 그룹별 집계 정보를 별도 조작 없이 확인할 수 있게 됨. 근거: 기능 추가 커밋에서 그룹 요약 행이 렌더링 파이프라인에 통합된 것을 확인함. 다만 실제 사용자의 작업 효율 개선 여부는 사용성 테스트 없이는 확정할 수 없음.
- 토큰화로 인한 스타일 유지보수성 개선 (추정): 하드코딩된 색상을 토큰으로 교체하면서 모드별 색상 관리가 코드 레벨에서 명시적으로 드러남. 근거: 피벗 헤더 배경색 토큰 분리 작업 및 폰트 웨이트 토큰 추가를 확인함. 다만 이 작업은 아직 미커밋 상태로, 실제 반영 및 검증 전이므로 효과를 단정하기는 이름.
더 측정하면 좋은 지표
- 행 높이 계산 로직의 성능: 대량의 행/그룹이 있는 그리드에서 인덱스 기반 계산 방식이 렌더링 시간에 미치는 영향 (React DevTools Profiler)
- 그룹 요약 행 기능의 E2E 테스트 커버리지: Cypress 테스트 작성 후 커버리지 리포트로 확인
- 피벗 헤더 색상 토큰 변경 전/후 Visual Regression 결과: Chromatic, Percy 등으로 실제 화면 차이 스냅샷 비교
- 집계 드롭다운 플립 로직의 회귀 여부: 다양한 화면 크기/스크롤 위치 조합에서 자동화 테스트로 확인
- merge 충돌 잔재 제거 전/후 번들 사이즈 변화: 불필요한 중복 코드 제거가 번들에 미친 영향 (Bundle Analyzer)
오늘 배운 것
- 그룹 요약 행처럼 겉보기엔 단순한 기능도, 기존 렌더링 파이프라인과 깊게 결합되어 있으면 사이드 이펙트(행 높이 누적 오류)가 발생할 수 있다는 것을 다시 확인함
- 모드별로 달라져야 하는 스타일(피벗 헤더 배경색 등)은 처음부터 토큰 체계로 설계해두지 않으면, 나중에 하드코딩된 값을 걷어내는 비용이 커진다는 점
- 호버/클릭 상태와 삭제 아이콘 스타일처럼 세분화된 UI 상태도 일관되게 토큰화해두면 유지보수 비용이 줄어든다는 것을 실감함
부족했던 점
- 그룹 요약 행 기능 추가 시 행 높이 계산 로직의 근본 구조(인덱스 기반)를 건드리지 않고 임시방편(add-row 높이 리셋)으로 해결해, 유사 버그가 재발할 여지를 남김
- 피벗 헤더 색상 배열 변경 시 색상 개수 검증을 사전에 충분히 하지 못해, 작업 중간에 불일치를 발견함 — 토큰 교체 전 체크리스트가 있었다면 방지 가능했을 이슈
- 그룹 요약 행처럼 로직이 복잡한 신규 기능임에도 오늘 E2E 테스트를 작성하지 못하고 다음 작업으로 미룸
내일 하면 좋은 작업
- 미커밋 상태인 피벗 헤더 스타일 변경 사항 검증 (테스트 케이스 실행, 색상 배열 개수 재확인)
- 그룹 요약 행 기능에 대한 E2E 테스트 작성 (Cypress)
- 행 그룹 패널 스타일시트 변경사항이 기존 UI에 미치는 영향 확인
- 인덱스 기반 행 높이 계산 구조에 대한 단계적 리팩토링 계획 수립
한 줄 요약
오늘은 그리드 그룹 기능 강화와 스타일 토큰화를 꾸준히 진행한 하루였다.
댓글남기기