UI 디자인 시스템 가이드

이 문서는 일관된 UI 구현과 유지보수를 위한 디자인 시스템 가이드입니다.
컴포넌트, 네이밍 규칙, 스타일 원칙 등 통합된 기준을 제공합니다.

UI 클래스 입력 순서 가이드

is-* 클래스는 UI 컴포넌트의 속성을 조합할 때 사용되는 상태/속성 표현용 클래스입니다.
일관성과 가독성을 위해 아래 순서를 따릅니다.

순서	구분	예시	설명
1️⃣	Sizes	`is-sm`, `is-lg`	요소의 크기를 결정하는 클래스
2️⃣	Colors	`is-primary`, `is-secondary`, `is-negative`	주요 색상 또는 테마 컬러 지정
3️⃣	Shapes	`is-rounded`, `is-circle`, `is-square`	모서리 형태 또는 외곽 형태 지정
4️⃣	Variants	`is-outline`, `is-ghost`, `is-soft`	스타일 변형 또는 다른 스타일 버전 지정
5️⃣	States	`is-active`, `is-disabled`, `is-loading`, `is-selected`	활성/비활성 등 UI 상태 표현
6️⃣	Etc.	`with-`, `has-`, `js-*`	상태 감지를 위한 보조 클래스나 JavaScript 제어용 클래스 등 `with-panel` (구성 요소 포함 강조), `has-error` (상태 강조), `js-toggle`, `js-active`

Variants는 UI 컴포넌트 전반에 is-* 형태로 붙여 배경, 테두리 등 시각적 스타일 변형을 정의할 때 사용합니다.

Variant	배경	테두리	용도 및 설명
`is-bare`			배경과 테두리를 모두 제거하여 완전히 투명한 상태로 만듭니다. (리셋용도)
`is-ghost`			기본 상태에서는 배경이 투명하며, 호버하거나 활성화될 때 컬러가 나타나 강조됩니다.
`is-plain`			흰색 배경과 함께 단순한 형태로, 주로 기본 스타일에 사용됩니다.
`is-surface`			배경에 그림자를 추가해 계층감을 주는 스타일입니다.
`is-outline`			테두리를 강조하여 경계를 명확히 구분할 때 사용됩니다.
`is-transparent`			배경을 완전히 투명하게 만들어 주는 스타일로, 주로 is-outline 과 같이 사용합니다.
`is-translucence`			배경을 반투명하게 만들어 주는 스타일로 기본 컬러는 검정색입니다.
`is-solid`			배경을 단색으로 채워 강조할 때 사용합니다.

is-bare

is-ghost

is-plain

is-surface

is-outline

is-transparent
+
is-outline

is-translucence

is-solid

Sizes는 UI 컴포넌트 전반에 is-* 형태로 붙여 크기를 정의할 때 사용합니다. 요소의 높이, 너비, 비율 등을 직관적으로 제어할 수 있습니다.

Size	설명
`is-xs ~ is-xl`	기본적인 크기 구분을 위해 사용하며, `is-2xs` 또는 `is-8xl`과 같이 더 작은 사이즈나 더 큰 사이즈로 확장할 수 있습니다.
`is-fit`	요소의 콘텐츠 기준으로 맞춤 크기를 적용할 때 사용합니다. (예: 버튼 내부 텍스트에 딱 맞게)
`is-full`	부모 요소 기준으로 너비나 높이를 100% 채울 때 사용합니다.
`is-ratio-[가로x세로]`	`aspect-ratio: 4 / 3` 과 같은 형태로, 비율 기반의 크기를 정의할 때 사용합니다. `is-ratio-16x9` 등으로 확장할 수 있습니다.

요소의 형태에 따라 접미사를 붙여 이름을 짓습니다.

선으로 이루어진 기본형은 접미어 없이 is-[name] 형태로 사용합니다.

면으로 채워진 형태는 -solid 접미어를 붙여 is-[name]-solid 형태로 정의합니다.

{shape}는 아이콘 외곽 형태를 나타내는 접미어로, 다양한 모양을 조합할 때 사용됩니다.
대표적으로 circle (원), square (각진 사각형), rounded (둥근 사각형), triangle (세모) 등이 있습니다.