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

3 분 소요

border 하나 정하는 데도 컨벤션이 필요했다

개발 회고 — 2026-06-15 (월요일)

오늘 작업 요약

전체 UI에서 사용되는 컴포넌트 border 스타일을 체계적으로 일관화하고, 타임라인 캔버스의 시각적 디테일을 개선한 하루. 2개의 신규 커밋과 기존 커밋 확인을 포함해 총 18개 파일을 수정했고, 2개 파일은 아직 미커밋 상태로 남아있다.

  • 컴포넌트 body-border 시스템 일관화 — 변수 파일부터 Frame, Grid, Form, Chart, 타임라인, 페이지 리스트, 드롭다운 등 다수 컴포넌트에 적용
  • 타임라인 캔버스 스타일 개선 — box-shadow, border-radius, 배경색, 컬럼 구분선 시각 개선
  • 행 그룹 집계 타입 테스트 수정 — Cypress 행 그룹 테스트에서 그룹 요약 행 클릭 동작 재구현
  • 차트, 입력 폼, 그래프 뷰, 타임라인 컬럼 메뉴, 컬럼 메뉴, 드롭다운 등 다양한 컴포넌트 스타일/동작 미세 조정

STAR 정리

Situation (상황)

UI 전반에서 컴포넌트마다 border 스타일이 개별적으로 정의되어 있어 일관성이 부족한 상태였다. 타임라인 캔버스 역시 box-shadow, border-radius 등 시각 요소가 다른 컴포넌트와 어울리지 않는 부분이 있었고, 이전에 추가한 행 그룹 집계 기능에 대한 Cypress 테스트가 실제 클릭 동작과 맞지 않아 수정이 필요한 상태였다.

Task (과제)

  1. 전체 UI에서 반복되는 border 스타일을 공통 변수 기반으로 체계화
  2. 타임라인 캔버스의 시각적 디테일(그림자, 모서리, 배경, 구분선)을 개선
  3. 행 그룹 집계 타입 관련 Cypress 테스트를 실제 동작에 맞게 재구현
  4. 그 외 여러 컴포넌트의 스타일/동작을 세부 조정

Action (행동)

  • 공통 SCSS 변수 파일에 body-border 관련 값을 먼저 정의하고, Frame·Grid·Form·Chart 스타일시트와 그래프 캘린더·타임라인·페이지 리스트·드롭다운 컴포넌트까지 순차적으로 적용해 border 스타일을 일관화함
  • 타임라인 스타일시트와 컴포넌트에서 box-shadow, border-radius, 배경색, 컬럼 구분선을 개선해 다른 UI 요소와의 시각적 통일성을 높임
  • 행 그룹 테스트 파일과 Cypress 커스텀 커맨드를 수정해, 그룹 요약 행을 클릭했을 때의 동작을 실제 UI 동작에 맞게 재구현함
  • 차트 뷰, 입력 폼, 그래프 뷰, 타임라인 컬럼 메뉴, 컬럼 메뉴, 드롭다운 등 여러 컴포넌트에 걸쳐 스타일 및 동작을 미세 조정함

Result (결과)

  • border 스타일이 공통 변수를 통해 관리되면서, 이후 컴포넌트 추가/수정 시 개별적으로 border 값을 정의하지 않아도 되는 기반이 마련됨 (구조적 개선, 정량 측정 대상은 아님)
  • 타임라인 캔버스의 시각적 완성도가 개선됨 (육안 확인 기준, 별도 정량 지표는 없음)
  • 행 그룹 집계 타입 테스트가 실제 동작과 일치하도록 수정되어, 회귀 테스트로서의 신뢰도가 회복됨
  • 다만 Page.scss, GridManager.tsx, Dropdown.tsx 등 일부 변경사항은 아직 미커밋 상태로 남아 다음 작업으로 이월됨

실제 측정 가능한 지표

지표 확인 방법 비고
변경된 파일 수 git diff --stat (오늘 범위) 18개 파일 수정 확인 가능
커밋 수 및 구성 git log (오늘 범위) 신규 커밋 2개 + 기존 커밋 확인
border 관련 스타일 중복 제거량 변경 전/후 SCSS 파일에서 하드코딩된 border 값 개수 비교 공통 변수 적용 전후 비교로 정량화 가능
Cypress 테스트 통과 여부 CI 파이프라인 실행 결과 행 그룹 집계 타입 테스트 재구현 후 실제 통과하는지 확인 필요
미커밋 파일 변경 규모 git diff --stat (unstaged) Page.scss, GridManager.tsx, Dropdown.tsx 대상

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

  • 스타일 유지보수 비용 감소 (추정): border 스타일을 공통 변수로 관리하게 되면서, 이후 새 컴포넌트를 추가하거나 기존 스타일을 변경할 때 개별 파일마다 값을 다시 정의할 필요가 줄어듦. 근거: 변수 파일에 값을 먼저 정의하고 9개 이상의 스타일/컴포넌트 파일에 순차 적용한 작업 내용을 확인함. 다만 실제 유지보수 시간 단축 효과는 이후 유사 작업이 반복될 때 비교해봐야 확인 가능함.
  • 테스트 신뢰도 회복 (추정): 실제 동작과 어긋나 있던 Cypress 테스트를 재구현함으로써, 해당 테스트가 다시 회귀 방지 역할을 할 수 있게 됨. 근거: 테스트 파일과 커스텀 커맨드가 함께 수정된 것을 확인함. 실제로 이후 회귀를 잡아내는지는 CI 실행 이력으로 추적 가능함.

더 측정하면 좋은 지표

  1. SCSS 변수 적용 전/후 코드 중복도: 정적 분석 도구(stylelint 등)로 하드코딩된 색상/border 값 잔존 개수 비교
  2. 타임라인 캔버스 렌더링 성능: box-shadow 등 추가된 시각 효과가 렌더링 비용에 영향을 주는지 React DevTools Profiler로 확인
  3. Cypress 테스트 안정성: 재구현한 행 그룹 테스트를 CI에서 여러 번 반복 실행해 flaky 여부 확인
  4. border 일관화 작업의 시각적 영향 범위: Visual Regression 도구로 오늘 변경된 모든 컴포넌트의 스크린샷 비교
  5. 미커밋 변경사항의 리스크: Page.scss, GridManager.tsx, Dropdown.tsx의 diff 크기와 영향 범위를 사전에 리뷰

오늘 배운 것

  • 대규모 UI 스타일 일관화 작업은 공통 변수(SCSS)를 먼저 정의한 뒤 컴포넌트별로 적용하는 순서가 유지보수 측면에서 훨씬 효율적이라는 점을 다시 확인함
  • border, box-shadow처럼 기본적인 시각 요소도 팀 차원의 컨벤션을 정해두면, 전체 UI가 일관된 인상을 주는 데 생각보다 큰 영향을 미친다는 점
  • 기능 구현 후 작성한 테스트라도, 실제 UI 동작이 바뀌면 함께 갱신하지 않으면 테스트가 오히려 신뢰할 수 없는 상태가 될 수 있다는 점

부족했던 점

  • Page.scss, GridManager.tsx, Dropdown.tsx 등 일부 변경사항을 오늘 커밋까지 마무리하지 못하고 미완 상태로 남김
  • border 일관화처럼 넓은 범위에 영향을 미치는 작업임에도, 변경 전/후 시각적 차이를 스크린샷 등으로 기록해두지 않아 나중에 회고하거나 리뷰어에게 설명하기 어려울 수 있음
  • 행 그룹 테스트를 재구현했지만, CI에서 안정적으로 통과하는지 반복 검증은 아직 하지 않음

내일 하면 좋은 작업

  1. 미커밋 상태인 Page.scss, GridManager.tsx, Dropdown.tsx 변경사항 검토 및 정리
  2. 특정 문서 파일들의 추적 제외 상태가 유지되고 있는지 확인
  3. 진행 중인 UI 브랜치의 남은 작업 범위를 확인하고 다음 단계 계획 수립
  4. border 일관화 작업에 대한 Visual Regression 스냅샷을 뒤늦게라도 남겨두기

한 줄 요약

오늘은 UI 컴포넌트 스타일을 체계적으로 정비하고 타임라인 시각을 개선한 하루였다.

댓글남기기

참고