SCSS 스타일시트 중복 제거와 구조 정리로 유지보수성 개선

SCSS 전역 변수 및 컨테이너 width 규칙 통일

2026-01-23. 코드 품질 개선 작업. 기능은 그대로 유지하면서 구조를 다듬었음.

기능이 계속 추가되면서 스타일시트 영역의 코드가 비대해지기 시작했음. 하나의 함수가 너무 많은 일을 하거나, 같은 로직이 여러 파일에 흩어져 있거나, 네이밍이 실제 역할을 반영 못 하는 케이스들이 쌓였음.

중복 제거
동일한 처리 패턴이 여러 곳에서 반복되고 있었음. 공통 모듈로 추출해서 한 곳에서 관리하도록 변경함.

책임 분리
한 클래스가 너무 많은 역할을 하고 있던 부분을 역할별로 분리했음. 각 모듈이 하나의 명확한 역할만 갖도록 경계를 재설정함.

네이밍 정리
변수명, 함수명, 파일명이 맥락을 반영하도록 수정함.

Before: doProcess(), handleAll(), manage()
After:  validateRequest(), calculateFee(), saveResult()

기능 동작이 달라지지 않았는지 확인하기 위해 기존 테스트 케이스 전부 돌렸음. 리팩토링의 핵심은 외부 동작을 유지하면서 내부 구조를 개선하는 것.

기능 동작은 그대로인데 코드 구조가 바뀌면 어떤 효과가 있는지 실감했음. 같은 기능을 수정해야 할 때 이전에는 여러 파일을 뒤져야 했는데, 정리 후에는 수정 포인트가 명확해져서 작업 시간이 줄었음.

리팩토링을 자주 하면서 느끼는 건, 코드는 처음부터 완벽할 수 없다는 거임. 요구사항도 변하고 이해도도 달라지기 때문에, 주기적으로 다듬는 게 자연스러운 과정임. '완성된 코드'라는 개념 자체가 없다고 생각함.