CSS 변수와 SCSS 변수, 제대로 활용하는 법

퍼블리싱을 할 때 변수를 사용한다면 재사용 가능성이 높아져 코드가 간결해지고 일관된 디자인 시스템 유지할 수 있으며 유지보수 용이하다는 장점이 있습니다.
또한 웹사이트의 성능 측면에서도 이점을 가져올 수 있습니다.

많은 사람들이 퍼블리싱을 할 때 sass(scss)를 사용하여 작업을 진행합니다. sass(scss) 역시 자체 변수를 제공하고 있습니다. 그렇다면 css변수와 sass(scss) 변수는 각각 어떤 차이가 있으며 언제 사용하는 것이 좋을까요?

1. --color-red (CSS Custom Properties)

CSS 변수를 사용한 방식입니다. 이 변수는 브라우저에서 해석되며, 런타임에 동적으로 변경할 수 있습니다.
스타일을 재사용하고, JavaScript로 접근하거나 변경할 수 있다는 장점이 있습니다.
CSS의 모든 범위에서 사용할 수 있으며, 컴포넌트 외부에서도 접근 가능합니다.

:root {
  --color-red: #ff0000;
}

.my-component {
  background-color: var(--color-red);
}

2. $red (SCSS Variables)

SCSS는 컴파일 타임에 변수를 처리합니다. 즉, SCSS 파일을 컴파일할 때 변수의 값을 결정하고, 이후 CSS로 변환됩니다.
SCSS 변수는 JavaScript로 접근할 수 없으며, 동적으로 변경할 수 없습니다. 스타일 파일 내에서만 유효합니다.
스타일을 구성하는 데 매우 유용하지만, 컴포넌트 외부에서 재사용하거나 동적으로 변경하는 데는 불편할 수 있습니다.

$red: #ff0000;

.my-component {
  background-color: $red;
}

어느 방법이 더 나은가?

동적 스타일링이나 JavaScript와의 통합이 필요한 경우에는 --color-red처럼 CSS 변수(var())를 사용하는 것이 좋습니다. 예를 들어, 사용자 테마 변경 기능을 제공하고자 할 때 유용합니다.
컴파일 타임 최적화나 간단한 스타일 관리에는 $red와 같은 SCSS 변수를 사용하는 것이 더 효율적일 수 있습니다. SCSS 변수가 번들 크기 최적화에 도움이 될 수 있습니다.
따라서, 두 가지를 혼합하여 상황에 맞게 사용하는 것이 가장 좋은 방법입니다. 컴포넌트 내부에서 스타일을 정적으로 관리할 때는 SCSS 변수를, 동적으로 변경할 필요가 있는 값은 CSS 변수를 사용하는 것이 이상적입니다.

컴파일 타임 최적화란?
컴파일 타임 최적화(Compile-time Optimization)는 코드를 실행하기 전에 컴파일 과정에서 불필요한 연산을 제거하거나, 더 효율적인 코드로 변환하여 성능을 개선하는 과정을 의미합니다.

SCSS, TypeScript, C++ 같은 언어는 코드가 실행되기 전에 컴파일 과정을 거치는데, 이 과정에서 여러 가지 최적화가 이루어집니다.

[컴파일 타임 최적화의 핵심 개념]

1. 불필요한 연산 제거
코드에서 미리 계산할 수 있는 부분을 컴파일러가 실행 전에 해결하여 실행 시 불필요한 연산을 줄임
예: 2 * 10 같은 연산을 컴파일할 때 20으로 변환하여 실행 시 연산을 없앰

2. 중복 코드 제거
동일한 변수를 여러 번 참조하더라도, 이를 컴파일 과정에서 하나로 합쳐서 최적화함
SCSS에서 같은 색상을 여러 곳에서 사용하면, CSS에서는 한 번만 정의하도록 변환됨

3. 정적인 값 최적화
SCSS에서 변수를 선언하면 CSS 파일에서는 실제 값으로 변환되어 브라우저가 해석할 필요 없이 바로 적용 가능

$primary-color: #ff0000;
.button {
  color: $primary-color;
}

컴파일 후

.button {
  color: #ff0000;
}

SCSS 변수가 CSS 변수가 아닌 이유?
SCSS 변수 $primary-color는 컴파일이 끝난 후에는 존재하지 않고, 단순히 CSS 속성에 값이 직접 적용되기 때문.

4. 불필요한 코드 제거(Tree Shaking 효과)
SCSS에서 사용되지 않는 변수나 코드가 있으면 최종 CSS 파일에서 제거되어 번들 크기가 줄어듦
반면, CSS 변수를 사용하면 브라우저가 실행할 때 필요하지 않은 변수라도 여전히 존재할 수 있음

컴파일 타임 최적화의 장점
1. 브라우저의 부담을 줄여 성능 향상
SCSS는 컴파일 후 CSS가 되므로 브라우저가 변수를 해석할 필요가 없음

2. 번들 크기 최적화
불필요한 변수가 최종 CSS에 포함되지 않아 파일 크기가 작아짐

3. 더 빠른 스타일 렌더링
SCSS 변수를 직접 CSS 값으로 변환하면 브라우저가 실행 시 계산할 필요 없이 바로 적용

정적인 스타일(변경되지 않는 색상, 크기 등)은 SCSS 변수를 사용하여 컴파일 타임 최적화를 적용하는 것이 더 효율적
동적으로 변경해야 하는 스타일(테마 변경, 사용자 설정 적용 등)은 CSS 변수를 활용
✔ CSS 변수를 남발하면 성능이 저하될 수 있으므로, 필요한 경우에만 사용하고 기본적으로는 SCSS 변수를 사용하는 것이 가장 최적화된 방식입니다.

번들 크기 최적화란?
번들 크기 최적화(Bundle Size Optimization)는 애플리케이션에서 최종적으로 브라우저에 전달되는 파일(HTML, CSS, JavaScript 등)의 크기를 줄이는 작업을 의미합니다.

웹 애플리케이션을 실행할 때 필요한 리소스가 클수록 로딩 속도가 느려지고, 초기 페이지 렌더링이 지연될 수 있습니다. 특히 모바일 환경이나 저속 인터넷 환경에서 성능이 중요한 경우, 불필요한 코드와 리소스를 제거하여 번들 크기를 줄이는 것이 매우 중요합니다.

1. 페이지 로딩 속도 개선
→ 파일 크기가 작을수록 네트워크 전송 속도가 빨라지고, 브라우저가 더 빨리 실행할 수 있습니다.

2. 사용자 경험(UX) 향상
→ 빠른 로딩 속도는 사용자 이탈률을 줄이고, SEO(검색 엔진 최적화)에도 긍정적인 영향을 줍니다.

3. 브라우저 캐시 효율 증가
→ 불필요한 리소스를 제거하면 캐시가 더 효과적으로 작동하여 다시 방문한 사용자가 더 빠르게 페이지를 볼 수 있습니다.

4. 메모리 및 CPU 사용량 감소
→ 특히 저사양 기기에서 불필요한 코드가 줄어들어 앱이 더 부드럽게 실행됩니다.

SCSS 변수와 CSS 변수가 번들 크기에 미치는 영향

SCSS 변수를 사용하면 컴파일 시점에서 해당 변수가 고정된 값으로 변환되어 CSS가 생성됩니다. 즉, SCSS 변수는 실제로 CSS에 포함되지 않으며, 같은 변수를 여러 번 사용하더라도 중복 코드가 생기지 않습니다.

반면, CSS 변수를 사용하면 브라우저가 실행될 때(런타임) 해석됩니다. 따라서 브라우저가 var(--color-red)을 매번 해석해야 하며, 스타일이 중복되거나 불필요한 변수가 많아질 경우 렌더링 성능에 영향을 줄 수 있습니다.

✔ SCSS 변수를 사용하면
컴파일 타임에 변수 값이 직접 CSS에 삽입되므로 불필요한 변수 정의가 줄어들고 번들 크기가 줄어듦
최종 CSS 파일에 var(--color-red) 같은 변수가 포함되지 않음

✔ CSS 변수를 사용하면
런타임에 해석되므로 브라우저가 처리해야 할 작업이 증가할 가능성이 있음
하지만 동적인 스타일 변경(예: 테마 변경)이 필요할 때 유용

---

컴파일 과정이란?
컴파일(Compile)이란 프로그래밍 언어로 작성된 소스 코드를 컴퓨터가 실행할 수 있는 코드로 변환하는 과정을 말합니다.
ex) TypeScript나 SCSS는 브라우저가 직접 이해할 수 없기 때문에 JavaScript 또는 CSS로 변환해야 합니다.

컴파일 과정의 주요 단계
컴파일 과정은 일반적으로 다음과 같은 단계를 거쳐 실행 파일이나 최종 코드가 생성됩니다.

1. 전처리 (Preprocessing)
주석 제거, 불필요한 공백 제거, import나 @use 같은 외부 파일 포함
SCSS의 경우 @import된 파일을 하나의 CSS로 합치거나, 중복된 스타일을 정리

@import 'colors.scss';
.button {
  background-color: $primary-color;
}

⬇ 전처리 후

.button {
  background-color: #ff0000;
}
(SCSS에서 $primary-color가 실제 값으로 변환됨)

2. 토큰화(Tokenization)
소스 코드를 작은 단위(토큰)로 쪼개서 컴파일러가 이해할 수 있는 형태로 변환
예를 들어, color: red;라는 코드가 있으면 color, :, red, ; 같은 토큰으로 분리됨

$color: #ff0000;
.button {
  color: $color;
}

⬇ 토큰화 후

[$color, =, #ff0000, ;, .button, {, color, :, $color, ;, }]

3. 구문 분석(Parsing)
토큰을 문법적으로 분석하여 트리 구조(AST, Abstract Syntax Tree)를 생성
CSS의 경우 속성: 값 형태로 분석되고, SCSS의 경우 변수나 믹스인 등이 적용된 상태로 변환됨

.button {
  color: $color;
}

⬇ 구문 분석 후 (AST)

Root
 ├── Rule: ".button"
 │   ├── Declaration: "color"
 │   ├── Value: "$color"

4. 변환(Transformation)
SCSS, TypeScript 같은 고급 언어를 CSS, JavaScript로 변환
최적화 과정도 이 단계에서 수행됨 (예: 사용되지 않는 변수 제거, CSS 중복 제거)

$color: #ff0000;
.button {
  color: $color;
}

⬇ 변환 후 (CSS로 컴파일)

.button {
  color: #ff0000;
}
(SCSS 변수 $color가 사라지고, 실제 값 #ff0000만 남음)

5. 코드 최적화(Optimization)
필요 없는 코드 제거 (Tree Shaking)
변수 값을 고정된 값으로 대체 (컴파일 타임 최적화)
CSS에서는 사용되지 않는 스타일을 제거하고, 중복된 코드를 줄임

$color: #ff0000;
.button {
  color: $color;
}
.card {
  color: $color;
}

⬇ 최적화 후

.button, .card {
  color: #ff0000;
}
(공통 스타일을 하나로 합쳐서 파일 크기 줄임)

6. 코드 생성(Code Generation)
최적화된 결과를 최종 코드로 변환하여 출력
SCSS → CSS, TypeScript → JavaScript로 변환됨
브라우저가 실행할 수 있도록 읽기 쉬운 형태로 변환

(SCSS → CSS)
$primary-color: #ff0000;
.button {
  background-color: $primary-color;
}

⬇ CSS 코드 생성

.button {
  background-color: #ff0000;
}

컴파일 과정이 중요한 이유
✔ 웹 성능 최적화 → 불필요한 코드 제거로 번들 크기 감소
✔ 브라우저 부담 감소 → 미리 변환된 CSS/JS 사용으로 실행 속도 향상
✔ 코드 유지보수 용이 → SCSS, TypeScript 같은 언어를 사용하여 가독성 높은 코드 작성 가능

SCSS는 컴파일 과정을 통해 최적화된 CSS를 생성하므로, 최종적으로 브라우저 성능이 좋아지고 파일 크기가 줄어드는 효과가 있습니다.

---

SCSS에서 같은 색상을 여러 곳에서 사용하면, CSS에서는 한 번만 정의하도록 변환?

SCSS에서 같은 색상을 여러 곳에서 사용하면, 컴파일 과정에서 중복된 스타일을 최적화하여 CSS에서 한 번만 정의되도록 변환됩니다.
이를 통해 불필요한 코드가 제거되고, CSS 파일 크기가 줄어드는 효과가 있습니다.

예제 1: 중복된 SCSS 코드 → CSS 최적화
SCSS 코드 (중복된 변수 사용)

$primary-color: #ff0000;

.button {
  color: $primary-color;
}

.card {
  color: $primary-color;
}

.title {
  color: $primary-color;
}

컴파일 후 생성된 CSS (최적화 적용)

.button, .card, .title {
  color: #ff0000;
}

👉 CSS에서는 중복된 스타일을 하나로 묶어 .button, .card, .title에 적용하도록 변환됨!
✅ 이렇게 하면 CSS 파일 크기가 줄어들고, 브라우저가 스타일을 렌더링하는 속도가 빨라짐

예제 2: SCSS 믹스인을 사용한 경우

$primary-color: #ff0000;

@mixin text-color {
  color: $primary-color;
}

.button {
  @include text-color;
}

.card {
  @include text-color;
}

2️⃣ 컴파일 후 CSS

.button, .card {
  color: #ff0000;
}

중복된 color: #ff0000;를 제거하고, 선택자를 하나로 합쳐서 최적화

정리

• SCSS에서는 같은 색상을 여러 요소에서 사용하면, CSS로 변환될 때 자동으로 중복된 스타일을 묶어 최적화
• 이를 통해 CSS 파일 크기를 줄이고, 브라우저 성능을 향상시킬 수 있음
• 반면, CSS 변수를 사용하면 같은 변수를 여러 번 참조해도 최적화되지 않음 (var(--primary-color)를 계속 사용해야 함)

결론: 정적 스타일(변경되지 않는 색상, 크기 등)에는 SCSS 변수를 사용하는 것이 번들 크기 최적화에 유리함!

Tree Shaking 효과란?
Tree Shaking은 사용되지 않는 코드(Dead Code)를 제거하여 최종 번들 크기를 줄이는 최적화 기법입니다.
이 기법은 주로 JavaScript 번들링 과정에서 적용되지만, SCSS에서도 사용되지 않는 스타일을 제거하는 방식으로 적용될 수 있습니다.

"사용하지 않는 코드는 포함하지 않는다!"

Tree Shaking의 원리
Tree Shaking은 "죽은 코드 제거(Dead Code Elimination)"의 한 방법으로, 다음과 같이 동작합니다.

적용 대상
JavaScript → 사용되지 않는 함수, 변수, import 제거
SCSS → 사용되지 않는 스타일, 미사용된 믹스인(Mixin) 또는 변수 제거
CSS → 사용되지 않는 스타일 선택자 제거 (PurgeCSS, Tailwind의 JIT 모드 등)

Tree Shaking이 동작하는 예제
1. JavaScript에서의 Tree Shaking

• 사용되지 않는 코드가 있는 경우

// utils.ts
export function usedFunction() {
  console.log("이 함수는 사용됨");
}
export function unusedFunction() {
  console.log("이 함수는 사용되지 않음");
}
// main.ts
import { usedFunction } from "./utils";
usedFunction();
⬆ 여기서 unusedFunction()은 어디에서도 사용되지 않으므로 Tree Shaking 과정에서 제거됨

번들링 후 최적화된 코드

// 최적화 후
function usedFunction() {
  console.log("이 함수는 사용됨");
}
usedFunction();

unusedFunction()은 완전히 삭제되어 최종 번들 크기가 줄어듦

2. SCSS에서의 Tree Shaking
SCSS에서는 사용되지 않는 변수, 믹스인, 스타일이 자동으로 제거됩니다.

• 사용되지 않는 스타일이 있는 SCSS 코드

$primary-color: #ff0000;
$unused-color: #00ff00; // 사용되지 않음
.button {
  color: $primary-color;
}
@mixin unusedMixin {
  background: blue;
}
⬆ $unused-color와 @mixin unusedMixin은 코드에서 사용되지 않음

컴파일 후 최적화된 CSS

.button {
  color: #ff0000;
}
사용되지 않은 $unused-color와 @mixin unusedMixin이 제거됨

CSS 파일 크기가 줄어들고, 브라우저가 불필요한 스타일을 로드할 필요 없음

3. CSS에서의 Tree Shaking (PurgeCSS)
CSS에서는 사용되지 않는 클래스가 최종 빌드 파일에서 제거될 수 있습니다.
예를 들어, Tailwind CSS의 JIT(Just-In-Time) 모드나 PurgeCSS가 Tree Shaking을 적용합니다.

원본 CSS 파일

.button {
  color: red;
}
.card {
  background: blue;
}
⬆ .card 클래스가 프로젝트에서 한 번도 사용되지 않는다면?

Tree Shaking 적용 후

.button {
  color: red;
}

.card 스타일이 완전히 삭제됨!
불필요한 CSS가 제거되어 번들 크기가 최적화됨

Tree Shaking의 장점
✅ 번들 크기 감소 → 필요 없는 코드가 제거되므로 로딩 속도가 빨라짐
✅ 렌더링 성능 향상 → 브라우저가 불필요한 스타일을 해석할 필요 없음
✅ 코드 유지보수 용이 → 불필요한 코드가 사라져 관리가 쉬워짐

결론

• Tree Shaking은 SCSS, JavaScript, CSS 등에서 사용되지 않는 코드를 제거하는 최적화 기법
• SCSS에서는 미사용된 변수, 믹스인, 스타일을 제거하여 최적화
• JavaScript에서는 사용되지 않는 함수, import를 제거하여 번들 크기 축소
• CSS에서는 사용되지 않는 스타일 선택자를 제거(PurgeCSS, Tailwind JIT)
  
  즉, Tree Shaking은 불필요한 코드 없이 가볍고 빠른 웹 애플리케이션을 만드는 필수 최적화 기법!

적용하기

그렇다면, 언제 SCSS 변수를 쓰고, 언제 CSS 변수를 써야 할까?

SCSS 변수가 유리한 경우
정적 스타일을 정의할 때 (예: 주 색상, 여백, 폰트 크기 등)
불필요한 중복 코드 없이 CSS 크기를 줄이고 싶을 때

CSS 변수가 유리한 경우
다크 모드/라이트 모드처럼 동적으로 스타일을 변경해야 할 때
JavaScript에서 값을 변경해야 할 때 (예: document.documentElement.style.setProperty('--color-red', '#ff0000');)

"번들 크기 최적화를 원하면 SCSS 변수를 기본으로 사용하고, 동적인 스타일 변경이 필요한 경우 CSS 변수를 선택하는 것이 가장 효율적인 방법입니다."