✅ 압박면접 대응 시리즈 6편: CSS 전처리기(SASS, LESS) 장단점 & 실무 활용

✅ 압박면접 대응 시리즈 6편: CSS 전처리기(SASS, LESS) 장단점 & 실무 활용

압박면접에서 CSS 전처리기 질문은
“왜 굳이 SASS를 쓰셨나요? 그냥 CSS로 안 되나요?” 같은 식으로 시작합니다.
여기서 단순히 “편해서요”라고 답하면 바로 압박이 들어오죠.
따라서 구체적인 장단점 + 실무 사례까지 연결해서 답하는 것이 핵심입니다.

---

📌 1. CSS 전처리기란?

CSS 전처리기(Preprocessor)는 CSS에 변수, 함수, 중첩, 모듈화 같은 기능을 추가한 언어입니다.
작성된 코드는 빌드 과정에서 일반 CSS로 컴파일됩니다.

대표 도구: SASS, LESS, Stylus

---

📌 2. 장점

장점 설명

✅ 변수 사용	색상, 폰트 크기 등 공통 값 관리 용이
✅ 중첩(Nesting)	구조적으로 스타일 작성 가능
✅ 믹스인(Mixin)	반복되는 스타일 재사용
✅ 모듈화	파일 단위로 분리해 유지보수성 향상
✅ 조건/반복	로직 기반 스타일링 가능

$primary: #3498db;

.button {
  background: $primary;
  &:hover {
    background: darken($primary, 10%);
  }
}

---

📌 3. 단점

반응형

단점 설명

❌ 빌드 필요	CSS로 변환하는 과정이 필수
❌ 복잡성 증가	오히려 코드가 장황해질 수 있음
❌ 러닝 커브	초보자는 개념(믹스인, 함수) 학습 부담
❌ 최신 CSS 기능 중복	CSS 자체가 발전하면서 전처리기 필요성이 줄어듦 (CSS 변수, Grid 등)

---

📌 4. 압박면접 예상 질문 & 답변 포인트

❓ Q1. CSS 변수와 SASS 변수 차이는?

• 답변:
  • SASS 변수는 컴파일 타임에 치환
  • CSS 변수는 런타임에 적용 (JavaScript로 변경 가능)
    → 테마 변경, 다크 모드에는 CSS 변수가 유리

---

❓ Q2. 언제 SASS를 쓰고, 언제 순수 CSS를 쓰시나요?

• 답변 예시:
  • SASS: 대규모 프로젝트, 공통 스타일 관리 필요
  • CSS: 작은 컴포넌트 단위, 런타임 테마 변경 필요

---

❓ Q3. 실무에서 경험한 장단점은?

• 경험 사례:
  • 스타트업 시절, SASS 모듈화로 공통 UI 버튼 스타일을 관리
  • 새로운 컬러셋 적용 시, $primary-color 한 줄만 바꿔서 전체 반영
  • 그러나 빌드 오류로 배포 장애가 발생한 적 있음 → 이후 CI/CD 파이프라인에서 SASS 컴파일 단계 테스트 추가

---

📌 5. 면접장에서 어필할 한 줄 정리

“SASS는 대규모 프로젝트에서 스타일 일관성과 재사용성을 높이는 데 유리합니다.
하지만 런타임 테마 변경에는 CSS 변수가 더 적합하므로, 상황에 맞게 선택하는 것이 중요하다고 생각합니다.
실무에서는 SASS 변수를 활용해 색상 체계를 일원화해 유지보수 효율을 크게 높인 경험이 있습니다.”

---

압박면접,CSS,SASS,LESS,전처리기,스타일관리,UI개발,웹디자인,협업,면접준비

---

👉 다음 편은 React의 Virtual DOM이 실제 DOM보다 빠른 이유 압박 질문 대응으로 이어가면 좋습니다. 진행할까요?