공공기관 고도화 실전
SCSS와 CSS가 함께 쓰인 프로젝트 정리 방법
DDODDO_LAB
2026. 2. 24. 14:00
반응형
(고도화 실전: 레거시 정리 루틴)
고도화 프로젝트를 들어가면 흔히 이런 상태다.
- 어떤 사이트는 SCSS
- 어떤 사이트는 CSS
- 공통은 여기저기서 불러오고
- 파일명/경로 규칙도 제각각
이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.
정리는 코딩 전에 해야 한다.
1. 먼저 “목표”를 정하자 (중요)
혼재 프로젝트 정리는 2가지 선택지 중 하나다.
A. 완전 통합(추천: 신규/대규모 개편)
- 모든 스타일을 SCSS로 통일
- 구조 재설계 가능
- 초기 비용 ↑ / 유지보수 효율 ↑
B. 병행 운영(추천: 고도화/기간 촉박)
- 기존 CSS 유지
- 신규(v2/v3/v4 등)만 SCSS로 구성
- 리스크 ↓ / 속도 ↑
공공기관 고도화는 대부분 B가 현실적이야.
2. “현재 상태”를 30분 안에 지도 그리기
체크
- 어디가 SCSS인지 / 어디가 CSS인지
- 누가 공통인지 (common.css 같은 것)
- import 순서가 어떻게 되는지
- 빌드(컴파일) 방식이 있는지 없는지
실무 팁
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. 로드 순서 규칙 (이거 안 지키면 망함)
권장 로드 순서
- reset / base
- 공통 layout
- 공통 components
- 페이지 전용
- (필요 시) legacy override
즉, 뒤로 갈수록 강해진다.
6. “중복 제거”는 한 번에 하지 말자
혼재 프로젝트에서 중복 제거는
최종 단계에서 해야 한다.
단계 추천
- 신규(v2) 작업에 필요한 컴포넌트만 SCSS로 만들기
- 기존 CSS에서 “건드리는 영역”만 최소 정리
- 프로젝트 안정화 후 중복 제거(리팩토링 스프린트)
초반에 중복 제거 욕심내면
QA 직전에 폭발한다.
7. 실무에서 제일 안전한 운영 방식
“기존 CSS는 보호막”
- 레거시 CSS는 그대로 두고
- 신규 레이아웃/컴포넌트는 SCSS로 구축
- 필요한 경우만 레거시를 override
이러면
- 리스크 줄고
- 협업/검수 대응이 쉬워짐
8. ChatGPT를 여기서 어떻게 쓰냐 (자동화 포인트)
CSS → SCSS 정리 요청 프롬프트
아래 CSS를 SCSS 구조로 정리해줘.
- 중복을 줄이고
- 변수로 뺄 값(색상/여백/폰트)을 제안하고
- 컴포넌트 단위로 파일 분리 기준도 같이 알려줘.
“공통 컴포넌트 추출” 프롬프트
아래 스타일에서 버튼/테이블/폼 요소로 공통화 가능한 부분을 찾아서
components 단위로 분리 초안을 만들어줘.
정리
SCSS와 CSS가 섞여 있으면
정리의 핵심은 “통합”이 아니라
규칙을 만들고, 신규 영역부터 통일하는 것
이다.
고도화 프로젝트는 속도가 중요하고
안전하게 가야 한다.
반응형