CSS 중복 코드를 줄이는 간단한 방법: 초보 코드 리뷰 Before & After
1. 주제 소개
프론트엔드 초보 코드에서 가장 빠르게 늘어나는 것이 CSS 중복입니다. 버튼마다 비슷한 스타일을 따로 쓰고, 카드마다 거의 같은 여백과 그림자를 반복하고, 색상값을 여기저기 직접 입력하다 보면 파일이 길어지고 관리가 어려워집니다. 처음엔 눈앞의 화면만 맞추면 되기 때문에 문제를 느끼기 어렵지만, 디자인이 조금만 바뀌어도 수정 범위가 급격히 커집니다. 예를 들어 브랜드 컬러를 바꾸는 요청이 들어왔을 때 하드코딩된 색상값이 20군데 이상이면 수정 누락 가능성이 매우 높습니다.
이번 글에서는 CSS 중복을 줄이는 가장 단순하고 효과적인 기준을 Before & After 관점으로 정리합니다. 핵심은 복잡한 아키텍처가 아니라 반복되는 패턴을 공통화하는 습관입니다. 공통 속성은 베이스 클래스로 묶고, 변하는 부분만 modifier로 분리하며, 자주 쓰는 값은 변수로 관리하면 중복이 빠르게 줄어듭니다. 이 방식은 코드 양을 줄이는 데서 끝나지 않고, 디자인 변경 대응 속도까지 높여 줍니다.
2. 핵심 내용
첫 번째 기준은 "같은 모양의 컴포넌트"를 찾는 것입니다. 예를 들어 기본 버튼, 취소 버튼, 저장 버튼은 색상만 다르고 패딩, 폰트 크기, 라운드, 전환 효과가 동일한 경우가 많습니다. 이때 `.btn`에 공통 속성을 모으고 `.btn-primary`, `.btn-danger` 같은 변형 클래스를 추가하면 중복 선언이 크게 줄어듭니다. 두 번째 기준은 디자인 토큰화입니다. 색상, 간격, 폰트 크기처럼 반복되는 값은 CSS 변수로 빼두면 정책 변경 시 유지보수가 쉬워집니다.
세 번째는 레이아웃 유틸리티 정리입니다. `display: flex`, `align-items: center`, `gap: 8px` 조합이 자주 반복된다면 유틸 클래스나 공통 컴포넌트 클래스로 추출할 수 있습니다. 네 번째는 선택자 과도화를 피하는 것입니다. `.page .content .card .header .title`처럼 긴 선택자는 재사용성을 떨어뜨리고 중복을 유도합니다. 역할 중심의 짧고 예측 가능한 클래스 구조를 유지하면 중복이 생겨도 빨리 발견할 수 있습니다.
중요한 점은 모든 CSS를 한 번에 재작성하지 않는 것입니다. 우선 중복률이 높은 영역부터 공통화하고, 새로 추가되는 화면에 같은 규칙을 적용하면 점진적으로 코드베이스가 정리됩니다. 작은 반복 제거가 쌓이면 최종적으로 파일 크기와 수정 비용이 함께 줄어듭니다.
3. 적용 방법
실무에서 바로 쓰기 좋은 순서는 다음과 같습니다. 먼저 스타일 파일을 훑으며 동일 속성 묶음을 찾습니다. 다음으로 버튼, 카드, 배지처럼 반복되는 컴포넌트 단위의 베이스 클래스를 만들고, 색상이나 상태 차이는 modifier 클래스로 분리합니다. 이후 자주 쓰는 색상과 spacing 값을 `:root` 변수로 올립니다. 마지막으로 기존 화면이 깨지지 않는지 페이지별로 빠르게 확인하면서 점진적으로 치환합니다.
| 중복 유형 | Before | After |
|---|---|---|
| 버튼 스타일 반복 | 각 버튼 클래스에 동일 패딩/폰트/보더 중복 | `.btn` 공통 + `.btn-*` 변형으로 분리 |
| 값 하드코딩 | 색상/간격 값을 파일 곳곳에 직접 입력 | CSS 변수로 중앙 관리 |
| 레이아웃 선언 반복 | flex 정렬 조합을 블록마다 복사 | 공통 유틸 클래스 또는 래퍼 컴포넌트화 |
| 과도한 선택자 깊이 | 긴 체이닝으로 재사용성 저하 | 짧은 역할 중심 클래스 구조로 단순화 |
Before 상태에서는 새 컴포넌트를 만들 때 기존 코드를 복사해 수정하는 패턴이 반복됩니다. After 구조에서는 공통 클래스와 변수 조합으로 빠르게 조립할 수 있어 생산성이 높아집니다. 또한 스타일 충돌이 발생했을 때 원인을 찾는 경로가 짧아집니다. 즉 CSS 중복 제거는 미관보다 유지보수 안정성을 만드는 작업입니다.
4. 정리
CSS 중복을 줄이는 핵심은 큰 기술보다 기본 원칙의 일관성입니다. 공통 속성 묶기, modifier 분리, 변수화, 선택자 단순화라는 네 가지를 지키면 초보 코드도 빠르게 정돈됩니다. 디자인 변경이 잦은 프로젝트일수록 이 차이가 크게 드러납니다. 오늘은 최소한 버튼 하나, 카드 하나만이라도 공통화해 보세요. 작은 정리가 쌓이면 파일 전체가 가벼워지고, 협업 시 "어디를 고쳐야 하는지"가 명확해집니다. 좋은 CSS는 길이가 짧은 코드가 아니라, 변경에 강한 코드입니다.
5. 자주 묻는 질문
Q1. 변수와 공통 클래스를 너무 많이 만들면 복잡해지지 않나요?
무분별하게 늘리면 복잡해질 수 있습니다. 그래서 "반복 3회 이상" 같은 기준을 두고 공통화하면 과한 추상화를 피할 수 있습니다.
Q2. 기존 CSS가 이미 길어서 어디부터 시작해야 할지 모르겠어요.
변경이 자주 일어나는 컴포넌트부터 시작하세요. 보통 버튼, 폼, 카드 영역에서 중복 제거 효과가 가장 빠르게 나타납니다.
Q3. 프레임워크 없이도 이 방식이 유효한가요?
네, 순수 CSS에서도 충분히 유효합니다. 오히려 기본 원칙을 먼저 잡아두면 이후 어떤 프레임워크를 쓰더라도 일관된 구조를 유지하기 쉽습니다.