핵심 UI 컴포넌트

Modifier 패턴

Modifier 패턴은 BEM 방법론의 한 부분으로, 기본 컴포넌트에 변형을 추가하는 방식입니다.
--primary, --sm 같은 Modifier를 사용하면 컴포넌트의 다양한 상태와 크기를 체계적으로 관리할 수 있습니다.
상태 스타일은 구조로 관리되므로, 새로운 변형을 추가하거나 기존 스타일을 수정할 때 예측 가능하고 안전합니다.

Modifier 구조의 장점 장점: 조합 가능성: 여러 Modifier를 조합하여 다양한 변형 생성; 명확한 의도: 클래스 이름만 봐도 어떤 스타일이 적용되는지 예측 가능; 유지보수성: 각 변형이 독립적으로 관리되어 수정 범위가 명확; 재사용성: 기본 컴포넌트 스타일을 재사용하면서 변형만 추가

Button 컴포넌트

Button은 가장 기본적이면서도 다양한 변형이 필요한 컴포넌트입니다.
type(primary, secondary), size(sm, md, lg), state(disabled, loading) 등 여러 차원에서 변형이 필요합니다.

기본 Button 구조

Button 컴포넌트의 기본 스타일과 구조입니다.

								@use "../tokens/color" as color;
								@use "../tokens/typography" as typo;
								@use "../tokens/spacing" as spacing;
								@use "../tokens/radius" as radius;

								.button {
									display: inline-flex;
									align-items: center;
									justify-content: center;
									min-height: 40px;
									padding: 10px 20px;
									font-size: typo.$font-size-base;
									font-weight: typo.$font-weight-medium;
									line-height: 1.5;
									border: 1px solid transparent;
									border-radius: radius.$radius-md;
									cursor: pointer;
									transition: all 0.15s ease-in-out;
									text-decoration: none;
									white-space: nowrap;

									&:hover {
										opacity: 0.85;
									}

									&:active {
										transform: translateY(1px);
									}

									&:focus {
										outline: 0;
										box-shadow: 0 0 0 0.2rem rgba(10, 88, 202, 0.25);
									}
								}

기본 Button 스타일에는 모든 버튼에 공통으로 적용될 스타일만 정의합니다.

Button Type Modifier (--primary, --secondary)

버튼의 타입에 따라 다른 색상을 적용합니다.

								// Primary 버튼
								.button--primary {
									background-color: color.$color-primary;
									color: #ffffff;
									border-color: color.$color-primary;

									&:hover {
										background-color: color.$color-primary-dark;
										border-color: color.$color-primary-dark;
										opacity: 1;
									}

									&:focus {
										box-shadow: 0 0 0 0.2rem rgba(10, 88, 202, 0.25);
									}
								}

								// Secondary 버튼
								.button--secondary {
									background-color: #ffffff;
									color: color.$color-primary;
									border-color: color.$color-primary;

									&:hover {
										background-color: color.$color-primary;
										color: #ffffff;
										border-color: color.$color-primary;
										opacity: 1;
									}

									&:focus {
										box-shadow: 0 0 0 0.2rem rgba(10, 88, 202, 0.25);
									}
								}

								// Success 버튼
								.button--success {
									background-color: color.$color-success;
									color: #ffffff;
									border-color: color.$color-success;

									&:hover {
										background-color: color.$color-success-dark;
										border-color: color.$color-success-dark;
										opacity: 1;
									}

									&:focus {
										box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
									}
								}

각 타입은 독립적으로 정의되므로, 새로운 타입을 추가하거나 기존 타입을 수정할 때 다른 타입에 영향을 주지 않습니다.

Button Size Modifier (--sm, --md, --lg)

버튼의 크기를 조절하는 Modifier입니다.

								// Small 버튼
								.button--sm {
									min-height: 32px;
									padding: 6px 12px;
									font-size: typo.$font-size-sm;
								}

								// Medium 버튼 (기본값)
								.button--md {
									min-height: 40px;
									padding: 10px 20px;
									font-size: typo.$font-size-base;
								}

								// Large 버튼
								.button--lg {
									min-height: 48px;
									padding: 12px 28px;
									font-size: typo.$font-size-lg;
								}

Size Modifier는 Type Modifier와 독립적으로 동작하므로, button--primary--lg처럼 조합하여 사용할 수 있습니다.

Button State (--disabled)

버튼의 상태를 나타내는 Modifier입니다.

								.button--disabled {
									background-color: #e9ecef !important;
									color: #6c757d !important;
									border-color: #e9ecef !important;
									opacity: 1;
									cursor: not-allowed;
									pointer-events: none;

									&:hover {
										background-color: #e9ecef !important;
										color: #6c757d !important;
										border-color: #e9ecef !important;
										opacity: 1;
										transform: none;
									}

									&:active {
										transform: none;
									}
								}

Disabled 상태는 다른 Modifier와 함께 사용되어도 정상적으로 작동합니다.

Button 사용 HTML 예시

정의한 Button 컴포넌트를 HTML에서 사용하는 방법입니다.

								<!-- Primary: lg, md, sm, md(disabled) -->
								<div class="button-group">
									<button class="button button--primary button--lg">Primary Large</button>
									<button class="button button--primary button--md">Primary Medium</button>
									<button class="button button--primary button--sm">Primary Small</button>
									<button class="button button--primary button--md button--disabled">Primary Disabled</button>
								</div>

								<!-- Secondary: lg, md, sm, md(disabled) -->
								<div class="button-group">
									<button class="button button--secondary button--lg">Secondary Large</button>
									<button class="button button--secondary button--md">Secondary Medium</button>
									<button class="button button--secondary button--sm">Secondary Small</button>
									<button class="button button--secondary button--md button--disabled">Secondary Disabled</button>
								</div>

								<!-- Success: lg, md, sm, md(disabled) -->
								<div class="button-group">
									<button class="button button--success button--lg">Success Large</button>
									<button class="button button--success button--md">Success Medium</button>
									<button class="button button--success button--sm">Success Small</button>
									<button class="button button--success button--md button--disabled">Success Disabled</button>
								</div>

상태별 Button 적용 예시

※ 코드펜에서는 SCSS 파셜을 사용할 수 없으므로, 이 예시는 사용되는 토큰만을 하나의 SCSS 파일에 모아 작성한 예제입니다.

코드펜에서는 @use를 사용할 수 없으므로, 모든 토큰과 컴포넌트 스타일을 하나의 SCSS 파일에 작성합니다.
각 Type별로 Size (Large, Medium, Small)와 Disabled 상태를 순서대로 보여줍니다.

Card 컴포넌트

Card는 콘텐츠를 그룹화하여 표시하는 컨테이너 컴포넌트입니다.
일관된 스타일과 적절한 여백, 그림자 효과를 통해 콘텐츠를 명확하게 구분합니다.

기본 Card 구조

Card 컴포넌트의 기본 스타일입니다.

								@use "../tokens/color" as color;
								@use "../tokens/spacing" as spacing;
								@use "../tokens/radius" as radius;

								.card {
									display: flex;
									flex-direction: column;
									background-color: #ffffff;
									border: 1px solid rgba(0, 0, 0, 0.125);
									border-radius: radius.$radius-lg;
									overflow: hidden;
									box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
								}

								.card__header {
									padding: 1rem 1.25rem;
									border-bottom: 1px solid rgba(0, 0, 0, 0.125);
									background-color: rgba(0, 0, 0, 0.03);
								}

								.card__body {
									padding: 1.25rem;
									flex: 1;
								}

								.card__footer {
									padding: 0.75rem 1.25rem;
									border-top: 1px solid rgba(0, 0, 0, 0.125);
									background-color: rgba(0, 0, 0, 0.03);
								}

Card는 Header, Body, Footer로 구성되며, 각 영역은 선택적으로 사용할 수 있습니다.

Card Modifier

Card의 변형을 만드는 Modifier입니다.

								// Compact Card (작은 패딩)
								.card--compact {
									.card__header,
									.card__body,
									.card__footer {
										padding: 0.75rem 1rem;
									}
								}

								// Bordered Card (테두리 강조)
								.card--bordered {
									border-width: 2px;
									border-color: color.$color-primary;
								}

								// Shadow Card (그림자 강조)
								.card--shadow {
									box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
								}

Card 컴포넌트 적용 예시

※ 코드펜에서는 SCSS 파셜을 사용할 수 없으므로, 이 예시는 사용되는 토큰만을 하나의 SCSS 파일에 모아 작성한 예제입니다.

Badge & Tag 컴포넌트

Badge와 Tag는 작은 라벨이나 상태를 표시하는 컴포넌트입니다.
색상과 크기로 다양한 의미를 전달할 수 있습니다.

Badge 컴포넌트

Badge는 작은 원형 또는 둥근 모서리의 라벨입니다.

								@use "../tokens/color" as color;
								@use "../tokens/typography" as typo;
								@use "../tokens/spacing" as spacing;
								@use "../tokens/radius" as radius;

								.badge {
									display: inline-flex;
									align-items: center;
									justify-content: center;
									padding: 0.8em 1em;
									font-size: 0.75em;
									font-weight: typo.$font-weight-semibold;
									line-height: 1;
									border-radius: radius.$radius-full;
									background-color: #6c757d;
									color: #ffffff;
									vertical-align: baseline;
								}

								// Badge Type Modifier
								.badge--primary {
									background-color: color.$color-primary;
									color: #ffffff;
								}

								.badge--success {
									background-color: color.$color-success;
									color: #ffffff;
								}

								.badge--warning {
									background-color: color.$color-warning;
									color: #212529;
								}

								.badge--error {
									background-color: color.$color-error;
									color: #ffffff;
								}

Tag 컴포넌트

Tag는 Badge보다 더 넓은 형태의 라벨입니다.

								@use "../tokens/color" as color;
								@use "../tokens/typography" as typo;
								@use "../tokens/spacing" as spacing;
								@use "../tokens/radius" as radius;

								.tag {
									display: inline-flex;
									align-items: center;
									padding: 0.5rem 1rem;
									font-size: typo.$font-size-sm;
									font-weight: typo.$font-weight-medium;
									border-radius: radius.$radius-md;
									background-color: #f8f9fa;
									color: #495057;
									border: 1px solid #dee2e6;
								}

								// Tag Type Modifier (Badge와 동일한 패턴)
								.tag--primary {
									background-color: #cfe2ff;
									color: #084298;
									border-color: #b6d4fe;
								}

Badge & Tag 사용 HTML 예시

								<!-- Badge & Tag 사용 HTML 예시 -->
								<div class="badge-group">
									<span class="badge">Default</span>
									<span class="badge badge--primary">Primary</span>
									<span class="badge badge--success">Success</span>
									<span class="badge badge--warning">Warning</span>
									<span class="badge badge--error">Error</span>
								</div>

								<div class="tag-group">
									<span class="tag">Default Tag</span>
									<span class="tag tag--primary">Primary Tag</span>
								</div>

Badge & Tag 컴포넌트 적용 예시

※ 코드펜에서는 SCSS 파셜을 사용할 수 없으므로, 이 예시는 사용되는 토큰만을 하나의 SCSS 파일에 모아 작성한 예제입니다.

Divider 컴포넌트

Divider는 콘텐츠를 시각적으로 구분하는 구분선입니다.
수평선, 수직선, 텍스트가 포함된 구분선 등 다양한 형태로 사용됩니다.

							@use "../tokens/color" as color;
							@use "../tokens/spacing" as spacing;

							.divider {
								width: 100%;
								height: 1px;
								background-color: color.$color-border;
								border: none;
								margin: spacing.$spacing-4 0;
							}

							// 수직 Divider
							.divider--vertical {
								width: 1px;
								height: 100%;
								margin: 0 spacing.$spacing-4;
							}

							// 텍스트가 포함된 Divider
							.divider--with-text {
								display: flex;
								align-items: center;
								text-align: center;
								height: auto;
								margin: spacing.$spacing-4 0;

								&::before,
								&::after {
									content: '';
									flex: 1;
									height: 1px;
									background-color: color.$color-border;
								}

								&::before {
									margin-right: spacing.$spacing-3;
								}

								&::after {
									margin-left: spacing.$spacing-3;
								}
							}

컴포넌트 조합

정의한 컴포넌트들을 조합하여 더 복잡한 UI를 만드는 방법입니다.
컴포넌트는 독립적으로 동작하면서도 함께 사용될 수 있어야 합니다.

Card, Button, Badge 조합 HTML 예시

								<!-- Card, Button, Badge 조합 HTML 예시 -->
								<div class="card-demo">
									<div class="card">
										<div class="card__header">
											<h3>프리미엄 플랜</h3>
											<span class="card__badge">Best</span>
										</div>
										<div class="card__body">
											<p class="card__price">₩29,000<span>/month</span></p>
											<p class="card__desc">Spacing & Radius 토큰을 활용해 카드의 여백과 모서리를 일관되게 관리합니다.</p>
										</div>
										<div class="card__footer">
											<button class="card__button">시작하기</button>
										</div>
									</div>
								</div>

각 컴포넌트는 독립적으로 동작하므로, 조합해도 스타일 충돌이 발생하지 않습니다.

컴퍼넌트 조합 예시

※ 코드펜에서는 SCSS 파셜을 사용할 수 없으므로, 이 예시는 사용되는 토큰만을 하나의 SCSS 파일에 모아 작성한 예제입니다.

정리

핵심 UI 컴포넌트 구성에 대해 알아본 내용을 정리합니다.

Modifier 패턴: 기본 컴포넌트에 변형을 추가하는 체계적인 방법
Button 컴포넌트: Type(--primary, --secondary), Size(--sm, --md, --lg), State(--disabled) Modifier
Card 컴포넌트: Header, Body, Footer 구조와 다양한 Modifier
Badge & Tag: 작은 라벨과 상태 표시를 위한 컴포넌트
Divider: 콘텐츠 구분을 위한 구분선 컴포넌트
컴포넌트 조합: 독립적인 컴포넌트들을 조합하여 복잡한 UI 구성

다음 페이지에서는 폼과 인터랙티브 컴포넌트를 구성하는 방법을 알아봅니다.