변수의 개념과 필요성 - by. UXKM

변수의 기본 개념

SCSS에서 변수는 $ 기호로 시작하며, 다음과 같이 선언하고 사용합니다.

변수를 사용하면 값을 한 곳에서 정의하고 여러 곳에서 재사용할 수 있습니다.
나중에 값을 변경해야 할 때도 변수 선언 부분만 수정하면 모든 곳에 자동으로 반영됩니다.

변수와 일반 값의 차이

변수를 사용하지 않으면 매번 값을 직접 입력해야 하지만, 변수를 사용하면 의미 있는 이름으로 값에 접근할 수 있습니다.

변수를 사용하면 #0a58ca가 무엇을 의미하는지 바로 알 수 있고, 색상을 변경할 때도 한 곳만 수정하면 됩니다.

값의 반복과 수정의 어려움

CSS에서는 같은 값을 여러 곳에서 반복해서 사용해야 할 때, 각각의 위치를 찾아서 일일이 수정해야 합니다.

만약 브랜드 색상이 #0a58ca에서 #0066cc로 변경된다면, 5곳을 모두 찾아서 수정해야 합니다.
실수로 하나라도 놓치면 일관성이 깨질 수 있습니다.

SCSS 변수를 사용하면 변수 선언 부분 한 곳만 수정하면 모든 곳에 자동으로 반영됩니다.

값의 의미 파악 어려움

CSS에서 #0a58ca나 16px 같은 값만 봐서는 무엇을 의미하는지 바로 알기 어렵습니다.

변수를 사용하면 값의 의미가 변수명으로 명확하게 드러나 코드를 이해하기 쉬워집니다.

일관성 유지의 어려움

CSS에서는 같은 목적의 값이라도 약간씩 다른 값이 사용될 수 있습니다.
예를 들어 "작은 간격"을 의미하는데 8px, 7px, 9px 등이 섞여 사용될 수 있습니다.

변수를 사용하면 같은 목적의 값은 항상 동일한 변수를 사용하므로 일관성이 유지됩니다.

디자인 시스템 구축

변수를 사용하면 디자인 토큰(Design Token)을 체계적으로 관리할 수 있습니다.
색상, 폰트, 여백 등을 변수로 정의해 두면, 전체 디자인 시스템의 일관성을 유지할 수 있습니다.

이렇게 토큰을 정의해 두면, 디자이너와 개발자가 같은 기준으로 작업할 수 있고, 디자인 변경 시에도 빠르게 대응할 수 있습니다.

브랜드 색상 변경 시나리오

프로젝트 중간에 브랜드 색상이 변경되는 상황을 가정해봅니다.

변수를 사용하면 수정 시간이 크게 단축되고, 실수할 가능성도 거의 없습니다.

팀 협업 시 효과

여러 명이 함께 작업할 때 변수를 사용하면 다음과 같은 효과가 있습니다:

• 일관성 보장: 모든 팀원이 같은 변수를 사용하므로 일관된 스타일 유지
• 의사소통 향상: "primary-color를 사용하세요"처럼 명확한 지시 가능
• 온보딩 시간 단축: 새 팀원도 변수 목록만 보면 프로젝트의 디자인 시스템을 빠르게 이해
• 코드 리뷰 효율성: 변수 사용 여부로 코드 품질을 빠르게 판단 가능

변수 선언

변수는 $ 기호로 시작하며, : 뒤에 값을 지정합니다.

변수명은 영문자, 숫자, 하이픈(-), 언더스코어(_)를 사용할 수 있으며, 숫자로 시작할 수 없습니다.

변수 사용

변수는 선언된 이후 어디서든 사용할 수 있습니다.

변수는 선언된 위치보다 아래에서만 사용할 수 있습니다. 변수를 사용하기 전에 먼저 선언해야 합니다.

변수 재할당

SCSS에서는 같은 변수명으로 다시 값을 할당할 수 있습니다.
나중에 할당한 값이 이전 값을 덮어씁니다.

변수 재할당은 조건부로 값을 변경하거나, 특정 범위에서만 다른 값을 사용할 때 유용합니다.