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

4 분 소요

아이콘 하나도 다국어와 함께 가야 하는 이유

개발 회고 — 2026-07-09 (목)

오늘 작업 요약

폼 UI의 아이콘/문구 정비를 마무리해 커밋했고, 이어서 Form 컴포넌트 자체의 UI 개선과 Select 컴포넌트 정비, 관련 Cypress 테스트 작성을 진행했다. 완료된 커밋 1건 외에, 11개 파일 수정과 4개 신규 파일 추가, 1개 미추적 테스트 파일이 진행 중인 상태로 남아있다.

  • 폼 UI 아이콘/문구 정비 완료 및 커밋 — 업로드·닫기·선택·필수 표시·행 추가 신규 아이콘 추가, 외래참조 아이콘 크기 축소, 번역키 추가/정리
  • Form 컴포넌트 UI 개선 진행 중 — 편집/조회 폼 페이지와 입력 폼 다중 수정, 신규 특화 컴포넌트 작성, 유틸 함수 분리
  • Select 컴포넌트 개선 — 선택 옵션 UI/UX 정비 및 스타일 리팩토링
  • Cypress 테스트 작성 진행 중 — Form 관련 테스트 케이스 추가
  • 그리드 스타일 라이브러리 통합 수정

STAR 정리

Situation (상황)

폼 UI의 아이콘들이 크기가 일관되지 않았고, 업로드/필수 표시 등에 필요한 아이콘과 안내 문구가 다국어 대응 없이 부족한 상태였다. 더 이상 쓰이지 않는 번역키도 남아있었다. 한편 Form 컴포넌트 자체는 필드 타입별 커스터마이징이 컴포넌트 하나에 몰려있어 관리가 어려웠고, 날짜 포맷팅이나 검색어 강조 같은 로직도 여러 컴포넌트에 흩어져 중복될 여지가 있었다.

Task (과제)

  1. 폼 UI 아이콘 세트를 정비하고 관련 안내 문구를 다국어로 추가
  2. 사용하지 않는 번역키 정리
  3. Form 컴포넌트를 필드 타입별로 나눠 관리 가능한 단위로 분리
  4. 날짜 포맷팅, 검색어 강조 같은 공통 로직을 재사용 가능한 유틸로 분리
  5. Select 컴포넌트의 UI/UX와 스타일 리팩토링
  6. Form 관련 기능에 대한 Cypress 테스트 작성

Action (행동)

  • 업로드, 닫기, 선택, 필수 표시, 행 추가에 쓰이는 신규 아이콘을 추가하고, 외래참조 관련 아이콘 4개의 크기를 축소해 전체 UI의 시각적 균형을 맞춤
  • 폼 안내 문구와 업로드 안내에 대한 번역키를 영문/한글 모두 추가하고, 더 이상 사용되지 않는 번역키(hide_selection)를 제거
  • 편집 폼 페이지, 조회 폼 페이지, 입력 폼 컴포넌트를 다중 수정하고, 스타일시트에서 레이아웃/간격/아이콘 배치를 정비
  • 담당자 선택 옵션, 업로드 플레이스홀더처럼 Form 기능에 특화된 신규 컴포넌트를 작성해 필드 타입별 커스터마이징이 독립적으로 가능하도록 분리
  • 날짜 포맷팅과 검색어 강조 로직을 별도 유틸 함수로 분리해 여러 컴포넌트에서 재사용 가능하도록 만듦
  • Select 컴포넌트의 UI/UX를 정비하고 스타일을 리팩토링함
  • Form 관련 기존 테스트 케이스를 수정하고, 폼 제목 동기화 및 행 재정렬 관련 신규 테스트 파일을 작성함(아직 커밋 전)
  • 그리드 스타일 라이브러리 전반을 통합 수정함

Result (결과)

  • 폼 UI 아이콘/문구 정비는 완료되어 커밋됨(9개 파일 변경, 123줄 추가/27줄 삭제)
  • Form 컴포넌트 개선, Select 컴포넌트 개선, 신규 Cypress 테스트는 아직 진행 중 상태로, 11개 파일 수정과 4개 신규 파일이 미커밋 상태로 남아있음
  • 다중 계층(컴포넌트, 스타일, 유틸, 테스트)이 동시에 바뀌면서, 각 변경의 의존 관계를 명확히 하지 않으면 검증이 어려워지는 상황을 겪음
  • Form UI가 아직 확정되지 않은 상태에서 작성한 테스트 케이스 일부는, 기능이 바뀔 때마다 선택자가 깨질 가능성이 있어 안정화 이후 재검증이 필요한 상태

실제 측정 가능한 지표

지표 확인 방법 비고
완료된 커밋의 변경 규모 git show --stat 아이콘/문구 정비 커밋: 9개 파일, 123줄 추가/27줄 삭제
진행 중인 변경 규모 git diff --stat (unstaged) 11개 파일 수정 + 4개 신규 파일 + 1개 미추적 테스트 파일
제거된 번역키 사용 여부 코드베이스 전체에서 해당 키 검색(grep) 실제로 참조하는 곳이 없는지 재확인 필요
신규 유틸 함수의 재사용 범위 유틸 함수를 import하는 파일 개수 확인 날짜 포맷팅/검색어 강조 유틸이 실제로 몇 곳에서 쓰이는지 확인 가능
Cypress 테스트 통과 여부 CI 실행 결과 Form UI 확정 전 작성한 테스트라 선택자 깨짐 여부 확인 필요
Grid.scss/Select.scss 스타일 충돌 여부 브라우저에서 실제 렌더링 확인 또는 CSS 우선순위 분석 도구 두 스타일시트가 겹치는 셀렉터가 있는지 확인 필요

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

  • 아이콘/문구 정비로 폼 사용 경험의 일관성 향상 (추정): 아이콘 크기를 통일하고 관련 안내 문구를 다국어로 함께 정비하면서, 사용자가 폼을 사용할 때 느끼는 시각적 일관성이 높아졌을 것으로 예상됨. 근거: 아이콘 크기 축소와 번역키 추가가 같은 커밋에서 함께 이뤄진 것을 확인함. 다만 실제 사용자가 느끼는 일관성 개선 정도는 정성적 피드백 없이는 확정할 수 없음.
  • 유틸 함수 분리로 코드 중복 감소 (추정): 날짜 포맷팅과 검색어 강조 로직을 별도 유틸로 분리하면서, 이후 유사 기능이 필요한 컴포넌트에서 중복 구현할 필요가 줄어들 것으로 예상됨. 근거: 두 유틸 파일이 신규로 분리되어 여러 곳에서 재사용 가능한 형태로 작성된 것을 확인함. 실제 재사용 빈도는 이후 다른 컴포넌트에서 얼마나 import되는지 추적해봐야 확인 가능함.

더 측정하면 좋은 지표

  1. 아이콘 정비 전/후 폼 화면의 Visual Regression 비교: 아이콘 크기·배치 변경이 실제로 어떤 시각적 차이를 만들었는지 스크린샷으로 기록
  2. 신규 유틸 함수의 실제 재사용 횟수: 코드베이스 전체에서 몇 개 컴포넌트가 해당 유틸을 사용하는지 추적
  3. Cypress 테스트 안정성: Form UI가 확정된 이후 테스트를 재실행해 선택자 관련 실패가 얼마나 발생하는지 확인
  4. Grid.scss/Select.scss 스타일 우선순위 충돌 여부: 실제 브라우저에서 두 스타일이 겹치는 요소가 있는지 점검
  5. 제거된 번역키로 인한 영향: 배포 후 해당 키를 참조하는 코드가 남아있어 발생하는 오류가 있는지 모니터링

오늘 배운 것

  • 아이콘 크기나 스타일처럼 작아 보이는 UI 조정도, 관련 다국어 번역과 함께 진행하면 폼 전체 경험의 일관성을 크게 높인다는 것을 확인함. 아이콘은 단순 이미지가 아니라 UX 메시지의 일부라는 점을 다시 느낌
  • 날짜 처리나 검색어 강조 같은 작은 유틸 함수라도 분리해두면, 여러 컴포넌트에서 필요할 때 중복 코드를 줄이고 일관성을 유지할 수 있다는 것을 확인함
  • 폼 필드 타입별로 특화된 단위 컴포넌트로 쪼개면, 커스터마이징 시 관리가 단순해지고 테스트도 독립적으로 가능해진다는 것을 배움
  • 컴포넌트, 스타일, 유틸, 테스트가 동시에 바뀌는 작업은 각 계층의 의존성을 명확히 하지 않으면 검증이 어려워지므로, 커밋 단위를 의도적으로 분리하는 것이 중요하다는 것을 다시 느낌

어려웠던 점 / 막힌 부분

  • 11개 파일을 한 번에 수정하다 보니 각 파일의 변경 목적이 흩어져서, “왜 이 파일을 수정했는가”를 나중에 추적하기 어려워짐. 변경 단위를 작게 유지하는 것의 중요성을 다시 느낌
  • Form 컴포넌트 UI가 아직 확정되지 않은 상태에서 Cypress 테스트 케이스를 미리 작성하다 보니, 기능이 바뀔 때마다 테스트 선택자가 깨질 가능성이 생김. 테스트는 기능이 어느 정도 안정화된 후 작성하는 것이 더 효율적이라는 것을 느낌
  • Select 컴포넌트 스타일과 그리드 스타일시트 전체 수정이 겹치면서 스타일 우선순위 충돌 가능성이 커짐. CSS 모듈화의 필요성을 다시 확인함

내일 하면 좋은 작업

  1. Form 컴포넌트 기능 개발을 완료하고 모든 수정 파일을 병합/커밋
  2. 신규 특화 컴포넌트(담당자 선택 옵션, 업로드 플레이스홀더)의 기능 테스트 및 검증
  3. 날짜 포맷팅/검색어 강조 유틸 함수 통합 테스트 실행
  4. Cypress 테스트 케이스 최종 검증 및 모든 테스트 통과 확인
  5. 그리드/Select 스타일 우선순위 검토 후 회귀 테스트

한 줄 요약

오늘은 폼 UI 기초 정비를 마치고 개선 작업을 본격적으로 진행하면서, 다중 계층 변경 시 추적과 테스트 신뢰성을 동시에 확보하는 것의 어려움을 배운 하루였다.

댓글남기기

참고