실무에서 자주 사용하는 변수 구성 예시 - by. UXKM

Publishing
SCSS
변수(Variables)로 스타일 관리하기
실무에서 자주 사용하는 변수 구성 예시

요약 설명
실무 프로젝트에서는 체계적인 변수 구성이 중요합니다.
색상, 폰트, 여백뿐만 아니라 브레이크포인트, 그림자, 전환 효과 등도 변수로 관리하면 일관된 디자인 시스템을 구축할 수 있습니다.

이 페이지에서는 실제 프로젝트에서 사용하는 변수 구성을 카테고리별로 나누어 상세히 살펴보고, 각 변수가 어떻게 활용되는지 예시와 함께 알아봅니다.

색상 팔레트 구성

실무에서는 체계적인 색상 팔레트를 구성하여 사용합니다.
브랜드 색상, 상태 색상, 중성 색상을 명확히 구분하여 정의하면, 디자이너와 개발자가 같은 언어로 색상을 이야기할 수 있습니다.

완전한 색상 변수 구성 예시

실무에서 사용하는 색상 변수 구성을 살펴봅니다.

								// ============================================
								// 브랜드 색상
								// ============================================
								$color-primary: #0a58ca;
								$color-primary-light: #3d7dd8;
								$color-primary-dark: #084298;
								$color-secondary: #6c757d;
								$color-secondary-light: #8e9ba7;
								$color-secondary-dark: #545b62;

								// ============================================
								// 상태 색상
								// ============================================
								$color-success: #28a745;
								$color-success-light: #5cb85c;
								$color-success-dark: #218838;
								$color-danger: #dc3545;
								$color-danger-light: #e4606d;
								$color-danger-dark: #c82333;
								$color-warning: #ffc107;
								$color-warning-light: #ffce3a;
								$color-warning-dark: #e0a800;
								$color-info: #17a2b8;
								$color-info-light: #46b8da;
								$color-info-dark: #138496;

								// ============================================
								// 중성 색상
								// ============================================
								$color-white: #ffffff;
								$color-black: #000000;
								$color-gray-100: #f8f9fa;
								$color-gray-200: #e9ecef;
								$color-gray-300: #dee2e6;
								$color-gray-400: #ced4da;
								$color-gray-500: #adb5bd;
								$color-gray-600: #6c757d;
								$color-gray-700: #495057;
								$color-gray-800: #343a40;
								$color-gray-900: #212529;

이렇게 구성하면 프로젝트에서 사용할 모든 색상을 한눈에 파악할 수 있고, 일관된 색상 사용이 가능합니다.

의미 기반 색상 변수

색상의 용도에 따라 변수를 구성하는 방법입니다.

								// ============================================
								// 텍스트 색상
								// ============================================
								$text-primary: #212529;
								$text-secondary: #6c757d;
								$text-muted: #adb5bd;
								$text-inverse: #ffffff;

								// ============================================
								// 배경 색상
								// ============================================
								$bg-primary: #ffffff;
								$bg-secondary: #f8f9fa;
								$bg-dark: #212529;

								// ============================================
								// 테두리 색상
								// ============================================
								$border-color: #dee2e6;
								$border-color-light: #e9ecef;
								$border-color-dark: #adb5bd;

의미 기반 네이밍은 색상의 용도를 명확하게 전달하므로, 어떤 상황에서 사용해야 할지 바로 알 수 있습니다.

타이포그래피 시스템

일관된 타이포그래피를 위한 폰트 변수 시스템을 구성합니다.
제목, 본문, 캡션 등 용도별로 폰트를 정리해 두면, 새로운 화면을 설계할 때도 “어떤 크기·굵기를 써야 할지”를 빠르게 결정할 수 있습니다.

							// ============================================
							// 폰트 패밀리
							// ============================================
							$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
							$font-family-heading: Georgia, "Times New Roman", serif;
							$font-family-mono: "Courier New", Courier, monospace;

							// ============================================
							// 폰트 크기
							// ============================================
							$font-size-xs: 12px;
							$font-size-sm: 14px;
							$font-size-base: 16px;
							$font-size-lg: 18px;
							$font-size-xl: 20px;
							$font-size-xxl: 24px;
							$font-size-h1: 32px;
							$font-size-h2: 28px;
							$font-size-h3: 24px;
							$font-size-h4: 20px;
							$font-size-h5: 18px;
							$font-size-h6: 16px;

							// ============================================
							// 폰트 굵기
							// ============================================
							$font-weight-light: 300;
							$font-weight-normal: 400;
							$font-weight-medium: 500;
							$font-weight-semibold: 600;
							$font-weight-bold: 700;

							// ============================================
							// 줄간격
							// ============================================
							$line-height-tight: 1.2;
							$line-height-normal: 1.5;
							$line-height-relaxed: 1.8;

간격 시스템 (Spacing System)

일관된 간격을 위한 체계적인 여백 변수 시스템을 구성합니다.
간격 시스템이 정리되어 있으면, 페이지 곳곳의 margin·padding을 감으로 맞추는 대신 정해진 단계 안에서 선택할 수 있어 디자인 일관성이 높아집니다.

8px 기반 간격 시스템

8px를 기본 단위로 하여 배수 관계로 간격을 정의하는 방식입니다.

								// 8px 기반 간격 시스템
								$spacing-1: 8px;   // 8px * 1
								$spacing-2: 16px;  // 8px * 2
								$spacing-3: 24px;  // 8px * 3
								$spacing-4: 32px;  // 8px * 4
								$spacing-5: 40px;  // 8px * 5
								$spacing-6: 48px;  // 8px * 6

								// 또는 의미 기반 네이밍
								$spacing-xs: 4px;
								$spacing-sm: 8px;
								$spacing-md: 16px;
								$spacing-lg: 24px;
								$spacing-xl: 32px;
								$spacing-xxl: 48px;

8px 기반 시스템은 디자인 도구(피그마, 스케치 등)와도 잘 맞아 실무에서 많이 사용됩니다.

4px 기반 간격 시스템

4px를 기본 단위로 하는 더 세밀한 간격 시스템입니다.

								// 4px 기반 간격 시스템
								$spacing-1: 4px;
								$spacing-2: 8px;
								$spacing-3: 12px;
								$spacing-4: 16px;
								$spacing-5: 20px;
								$spacing-6: 24px;
								$spacing-8: 32px;
								$spacing-10: 40px;
								$spacing-12: 48px;

브레이크포인트 변수

반응형 디자인을 위한 미디어 쿼리 브레이크포인트를 변수로 관리합니다.
브레이크포인트를 변수로 모아두면, 디자인 시안이 바뀌거나 지원 기기 범위가 달라져도 한 곳만 수정해 전체 레이아웃을 조정할 수 있습니다.

							// 모바일 (기본)
							$breakpoint-sm: 576px;   // 작은 태블릿
							$breakpoint-md: 768px;   // 태블릿
							$breakpoint-lg: 992px;   // 데스크톱
							$breakpoint-xl: 1200px;  // 큰 데스크톱
							$breakpoint-xxl: 1400px; // 초대형 화면

							// 부트스트렙 기준 (기본)
							$grid-breakpoints: (
								xs: 0,
								sm: 576px,
								md: 768px,
								lg: 992px,
								xl: 1200px,
								xxl: 1400px
							);

							// 부트스트렙 최대 너비 기준
							$container-max-widths: (
								sm: 540px,
								md: 720px,
								lg: 960px,
								xl: 1140px,
								xxl: 1320px
							);

브레이크포인트를 변수로 관리하면 반응형 디자인 변경 시 한 곳만 수정하면 됩니다.

							$breakpoint-md: 768px;

							.container {
								width: 100%;

								@media (min-width: $breakpoint-md) {
									max-width: 720px;
								}
							}

그림자 변수

UI 요소에 깊이감과 계층감을 주는 그림자 효과를 일관되게 적용하기 위해 그림자 변수를 활용합니다.
카드, 모달, 버튼 등 다양한 컴포넌트에서 그림자 값이 중복되거나 일관성이 깨지는 것을 방지하기 위해, 크기별로 그림자를 변수로 정의하여 재사용합니다.

							$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
							$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
							$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
							$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

							.card {
								box-shadow: $shadow-md;
							}

							.modal {
								box-shadow: $shadow-xl;
							}

전환 효과 변수

버튼 클릭, 호버, 툴팁 표시 등 인터랙션에서 자연스러운 전환 효과를 만들기 위해 시간 변수를 활용합니다.
각 요소마다 다른 전환 시간을 사용하거나 임의의 값을 지정하면 애니메이션 속도가 일관되지 않아 사용자 경험이 저하될 수 있습니다. 따라서 빠름(fast), 보통(normal), 느림(slow) 등의 단계별로 시간 변수를 정의하여 일관된 애니메이션 속도를 유지합니다.

							$transition-fast: 0.15s;
							$transition-normal: 0.3s;
							$transition-slow: 0.5s;

							.button {
								transition: background $transition-normal;
							}

							.tooltip {
								transition: opacity $transition-fast;
							}

테두리 변수

입력 필드, 카드, 버튼 등 다양한 UI 요소에서 일관된 테두리 스타일을 적용하기 위해 테두리 변수를 활용합니다.
각 요소마다 테두리 너비, 반경(radius), 색상을 직접 지정하면 값이 중복되거나 일관성이 깨질 수 있습니다. 따라서 테두리 너비, 반경, 색상을 변수로 정의하여 재사용함으로써 디자인의 일관성을 유지하고 유지보수를 용이하게 합니다.

							// 테두리 너비
							$border-width: 1px;
							$border-width-thick: 2px;

							// 테두리 반경
							$border-radius-sm: 4px;
							$border-radius-md: 8px;
							$border-radius-lg: 12px;
							$border-radius-full: 9999px;

							// 테두리 색상
							$border-color: #dee2e6;
							$border-color-light: #e9ecef;

완전한 변수 파일 예시

실무에서 사용하는 완전한 변수 파일 구성을 예시로 살펴봅니다. 모든 변수를 한 파일에 체계적으로 정리한 예시입니다.

							// ============================================
							// 색상 변수
							// ============================================
							$color-primary: #0a58ca;
							$color-secondary: #6c757d;
							$color-success: #28a745;
							$color-danger: #dc3545;
							$color-warning: #ffc107;
							$color-info: #17a2b8;
							$color-white: #ffffff;
							$color-black: #000000;
							$color-gray-100: #f8f9fa;
							$color-gray-500: #adb5bd;
							$color-gray-900: #212529;

							// ============================================
							// 타이포그래피
							// ============================================
							$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
							$font-size-base: 16px;
							$font-size-sm: 14px;
							$font-size-lg: 18px;
							$font-weight-normal: 400;
							$font-weight-bold: 700;
							$line-height-normal: 1.5;

							// ============================================
							// 간격 시스템
							// ============================================
							$spacing-xs: 4px;
							$spacing-sm: 8px;
							$spacing-md: 16px;
							$spacing-lg: 24px;
							$spacing-xl: 32px;

							// ============================================
							// 브레이크포인트
							// ============================================
							$breakpoint-sm: 576px;
							$breakpoint-md: 768px;
							$breakpoint-lg: 992px;
							$breakpoint-xl: 1200px;

							// ============================================
							// 그림자
							// ============================================
							$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
							$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
							$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

							// ============================================
							// 전환 효과
							// ============================================
							$transition-fast: 0.15s;
							$transition-normal: 0.3s;
							$transition-slow: 0.5s;

							// ============================================
							// 테두리
							// ============================================
							$border-width: 1px;
							$border-radius-sm: 4px;
							$border-radius-md: 8px;
							$border-radius-lg: 12px;
							$border-color: #dee2e6;

							// ============================================
							// 컨테이너 너비
							// ============================================
							$container-sm: 540px;
							$container-md: 720px;
							$container-lg: 960px;
							$container-xl: 1140px;

이렇게 구성하면 프로젝트의 모든 디자인 토큰을 한 곳에서 관리할 수 있습니다.

변수 활용 예시

정의한 변수들을 실제 컴포넌트에 활용하는 예시를 살펴봅니다.

버튼 컴포넌트

여러 변수를 조합하여 버튼 스타일을 작성합니다.

								$color-primary: #0a58ca;
								$color-white: #ffffff;
								$spacing-sm: 8px;
								$spacing-md: 16px;
								$font-size-base: 16px;
								$font-weight-bold: 700;
								$border-radius-md: 8px;
								$transition-normal: 0.3s;
								$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
								$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

								.button {
								  // 색상
								  background: $color-primary;
								  color: $color-white;
								  border: none;

								  // 여백
								  padding: $spacing-sm $spacing-md;

								  // 폰트
								  font-size: $font-size-base;
								  font-weight: $font-weight-bold;

								  // 테두리
								  border-radius: $border-radius-md;

								  // 그림자
								  box-shadow: $shadow-sm;

								  // 전환
								  transition: all $transition-normal;
								  cursor: pointer;

								  &:hover {
								    background: darken($color-primary, 8%);
								    box-shadow: $shadow-md;
								    transform: translateY(-1px);
								  }

								  &:active {
								    background: darken($color-primary, 12%);
								    box-shadow: $shadow-sm;
								    transform: translateY(0);
								  }

								  &:focus {
								    outline: 2px solid lighten($color-primary, 20%);
								    outline-offset: 2px;
								  }
								}

카드 컴포넌트

카드 컴포넌트에서도 다양한 변수를 활용합니다.

								$color-white: #ffffff;
								$color-gray-200: #e9ecef;
								$color-gray-700: #495057;
								$color-gray-900: #212529;
								$color-primary: #0a58ca;
								$spacing-sm: 8px;
								$spacing-md: 16px;
								$spacing-lg: 24px;
								$font-size-base: 16px;
								$font-size-lg: 18px;
								$font-weight-normal: 400;
								$font-weight-bold: 700;
								$border-radius-md: 8px;
								$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
								$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
								$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
								$transition-normal: 0.3s;

								.card {
									// 배경과 테두리
									background: $color-white;
									border: 1px solid $color-gray-200;
									border-radius: $border-radius-md;
									overflow: hidden;

									// 여백
									padding: $spacing-lg;
									margin-bottom: $spacing-lg;

									// 그림자
									box-shadow: $shadow-md;

									// 전환
									transition: all $transition-normal;

									&:hover {
										box-shadow: $shadow-lg;
										transform: translateY(-2px);
									}

									.card__title {
										font-size: $font-size-lg;
										font-weight: $font-weight-bold;
										color: $color-gray-900;
										margin-top: 0;
										margin-bottom: $spacing-md;
									}

									.card__body {
										font-size: $font-size-base;
										color: $color-gray-700;
										line-height: 1.6;
										margin-bottom: $spacing-md;
									}

									.card__link {
										color: $color-primary;
										font-size: $font-size-base;
										font-weight: $font-weight-bold;
										text-decoration: none;
										transition: color $transition-normal;

										&:hover {
											color: darken($color-primary, 10%);
											text-decoration: underline;
										}
									}
								}

정리

실무에서 자주 사용하는 변수 구성 예시에 대해 알아본 내용을 정리합니다.

색상 팔레트: 브랜드 색상, 상태 색상, 중성 색상을 체계적으로 구성
타이포그래피 시스템: 폰트 패밀리, 크기, 굵기, 줄간격을 변수로 관리
간격 시스템: 8px 또는 4px 기반으로 일관된 간격 체계 구축
브레이크포인트: 반응형 디자인을 위한 미디어 쿼리 값 변수화
그림자, 전환, 테두리: 시각적 효과를 위한 변수 구성
통합 관리: 모든 변수를 한 파일에 체계적으로 정리하여 관리

다음 페이지에서는 CSS 변수와 SCSS 변수의 차이를 자세히 비교해봅니다.