SCSS와 CSS가 함께 쓰인 프로젝트 정리 방법

(고도화 실전: 레거시 정리 루틴)

고도화 프로젝트를 들어가면 흔히 이런 상태다.

• 어떤 사이트는 SCSS
• 어떤 사이트는 CSS
• 공통은 여기저기서 불러오고
• 파일명/경로 규칙도 제각각

이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.

정리는 코딩 전에 해야 한다.

 

 

 

1. 먼저 “목표”를 정하자 (중요)

혼재 프로젝트 정리는 2가지 선택지 중 하나다.

A. 완전 통합(추천: 신규/대규모 개편)

• 모든 스타일을 SCSS로 통일
• 구조 재설계 가능
• 초기 비용 ↑ / 유지보수 효율 ↑

B. 병행 운영(추천: 고도화/기간 촉박)

• 기존 CSS 유지
• 신규(v2/v3/v4 등)만 SCSS로 구성
• 리스크 ↓ / 속도 ↑

공공기관 고도화는 대부분 B가 현실적이야.

---

2. “현재 상태”를 30분 안에 지도 그리기

체크

1. 어디가 SCSS인지 / 어디가 CSS인지
2. 누가 공통인지 (common.css 같은 것)
3. import 순서가 어떻게 되는지
4. 빌드(컴파일) 방식이 있는지 없는지

실무 팁

style.css 하나만 보지 말고
HTML에서 실제로 로드되는 순서를 먼저 잡아.

“어떤 파일이 최종 승자(override)인지”가 핵심임.

 

---

3. 절대 먼저 하지 말아야 할 것

❌ SCSS로 다 옮기기부터 시작
❌ 파일명 바꾸기부터 시작
❌ 공통을 먼저 뜯기

먼저 해야 하는 건 “규칙” 만들기야.

---

4. 추천 구조 (병행 운영 기준)

고도화(v2) 기준으로 새 폴더에 규칙을 만든다.

예시:

• /assets/css/ (기존 유지)
• /assets/scss/ (신규)
• /assets/css/v2.css (컴파일 결과)

SCSS 폴더 구조 예시

• scss/00_settings/ (변수, 색상, z-index)
• scss/01_tools/ (mixin, function)
• scss/02_generic/ (reset, normalize)
• scss/03_base/ (typography, base)
• scss/04_layout/ (header, footer, grid)
• scss/05_components/ (button, table, form, modal)
• scss/06_pages/ (페이지 전용)
• scss/main.scss (엔트리)

핵심은 “공통 컴포넌트”를 SCSS로 관리하게 만드는 것.

---

5. 로드 순서 규칙 (이거 안 지키면 망함)

권장 로드 순서

1. reset / base
2. 공통 layout
3. 공통 components
4. 페이지 전용
5. (필요 시) legacy override

즉, 뒤로 갈수록 강해진다.

---

6. “중복 제거”는 한 번에 하지 말자

혼재 프로젝트에서 중복 제거는
최종 단계에서 해야 한다.

단계 추천

1. 신규(v2) 작업에 필요한 컴포넌트만 SCSS로 만들기
2. 기존 CSS에서 “건드리는 영역”만 최소 정리
3. 프로젝트 안정화 후 중복 제거(리팩토링 스프린트)

초반에 중복 제거 욕심내면
QA 직전에 폭발한다.

---

7. 실무에서 제일 안전한 운영 방식

“기존 CSS는 보호막”

• 레거시 CSS는 그대로 두고
• 신규 레이아웃/컴포넌트는 SCSS로 구축
• 필요한 경우만 레거시를 override

이러면

• 리스크 줄고
• 협업/검수 대응이 쉬워짐

---

8. ChatGPT를 여기서 어떻게 쓰냐 (자동화 포인트)

CSS → SCSS 정리 요청 프롬프트

아래 CSS를 SCSS 구조로 정리해줘.
- 중복을 줄이고
- 변수로 뺄 값(색상/여백/폰트)을 제안하고
- 컴포넌트 단위로 파일 분리 기준도 같이 알려줘.

 

“공통 컴포넌트 추출” 프롬프트

아래 스타일에서 버튼/테이블/폼 요소로 공통화 가능한 부분을 찾아서
components 단위로 분리 초안을 만들어줘.

 

 

---

정리

SCSS와 CSS가 섞여 있으면
정리의 핵심은 “통합”이 아니라

규칙을 만들고, 신규 영역부터 통일하는 것

이다.

 

고도화 프로젝트는 속도가 중요하고
안전하게 가야 한다.