page title
디자인 시스템의 네이밍 규칙은 시스템 운영 및 관리 측면에서 매우 중요한 역할을 한다. 협업의 효율성을 높이며, 기획자, 디자이너, 개발자들이 작업을 명확히 구분하고 빠르게 이해할 수 있도록 돕는다.
디자인시스템에서 네이밍 규칙
디자인 시스템에서 네이밍 규칙은 일관성, 가독성, 그리고 확장성을 보장하기 위해 필수적이다. 네이밍 규칙을 철저히 지킴으로써 기획자, 디자이너, 개발자 간의 협업이 효율적으로 이루어지며, 파일을 찾거나 수정하는 과정에서 혼란을 줄일 수 있다. 잘 정의된 네이밍 규칙은 시스템의 유지보수를 용이하게 하며, 시스템이 확장될 때도 예측 가능한 구조를 유지할 수 있도록 한다.
네이밍 규칙은 주로 작업 파일, 토큰, 컴포넌트 명칭, 속성 표현에서 일관성을 보장하고, 직관적이며 의미 있는 방식으로 구조화하는 데 중점을 둔다.
네이밍 적용
- 작업 파일
- 디자인 토큰
- 컴포넌트 명칭, 속성
기본 규칙
논리 구조
각 구성 요소는 일관된 논리 구조에 따라 명명해야 한다. 네이밍은 예측 가능하고 변경 가능성이 적으며, 구조적으로 일관된 방식으로 작성하여 사용자가 이해하기 쉽도록 한다.
시각적 속성 배제
시각적 속성(예: 파란색 버튼, 둥근 모서리)을 포함해 네이밍할 경우, 요소가 변경될 때 일관성이 깨질 수 있다. 따라서, 시각적 속성을 배제하고 기능적 역할이나 용도를 기반으로 이름을 정의한다.
확장가능
새로운 구성 요소나 변형이 추가될 가능성을 고려하여, 확장 가능한 네이밍 구조를 사용한다. 예를 들어, 버튼은 “primary”와 “secondary”로 구분하고, 필요시 추가 속성을 부여해 확장할 수 있도록 한다.
일관성
모든 구성 요소의 네이밍에서 일관된 표기 방식을 사용한다. 예를 들어, 단어 간 구분을 하이픈(-)으로 통일하고, 언더바(_)를 사용하는 경우 특정 목적에 한정한다.
명확성
줄임말은 피하고, 명확한 표현을 사용하여 이해하기 쉽게 한다. 예를 들어, “bg”보다는 “background”를, “xs”보다는 “xsmall”을 사용해 의미를 명확히 전달한다.
작업 파일 내에서 규칙
KRDS 디자인 시스템의 작업 파일(피그마 파일 기준)은 페이지, 프레임, 컴포넌트 단위로 분리하여 관리하며 각 단위의 명칭은 모든 가이드에서 동일하게 사용한다. 디자인 토큰에 영향을 미치는 것과 미치지 않는 것으로 나눠지며, 각 규칙을 준수하여 사용한다.
토큰에 영향을 미치는 것
토큰에는 띄어쓰기를 사용할 수 없어 토큰에 사용되는 단어 구분은 (_), (__), (-)등 기호를 사용한다.
토큰을 관리하는 로컬 배리어블(Local variables)과 이를 연동해서 사용하는 로컬 스타일(Local styles), 코드에서 토큰으로 사용하는 컴포넌트 명은
규칙을 준수하여 사용한다.
(component)
코드와 동일하게 사용하기 위해 토큰명을 통일하여 사용한다.
- 모두 소문자 사용
- 컴포넌트 내 명칭 띄어쓰기는 언더바(_)사용
- 컴포넌트+유형은 컴포넌트 더블언더바(__)유형으로 사용
(local variable, local style)
디자인 파일에서 토큰을 표현하는 방식으로 명칭 사용에 주의한다.
- 모두 소문자 사용
- 띄어쓰기는 언더바(_)로 사용
- size-height와 같이 토큰의 분리는 하이픈(-) 사용
토큰에 영향을 미치지 않는 것
작업 파일 내에서 페이지나, 프레임 또는 컴포넌트를 구성하는 property 값은 토큰명과 상관이 없어 글자를 구분할 때 (-), (_)와 같은 기호를 사용하지 않고 띄어쓰기가 가능하다.
검색을 위해 영문+한글을 같이 사용한다.
- 띄어쓰기로 단어를 구분
- 영문 표기 (한글) / Main menu (메인 메뉴)
- 영문으로 사용 시 첫 글자만 대문자로 사용
- 커뮤니케이션을 위한 유니코드 활용
(작업중 ✍ , 완료 ✅ / 🎨 스타일가이드, 📌 메모 )
컴포넌트를 구성하는 property로 아래와 같이 사용한다.
- 띄어쓰기로 단어를 구분
- Name- 첫 글자 대문자
- value - 전체 소문자 사용
토큰 네이밍
토큰 네이밍은 재사용성과 확장성을 고려하여 간결하고 명확한 용어를 사용한다. 새로운 테마가 추가될 가능성을 염두에 두고, 모든 토큰을 유연하게 정의한다. 특히 숫자 척도와 같은 간결한 표현을 사용하여 의미를 쉽게 파악할 수 있도록 한다.
디자인 토큰 순서토큰 구분자
디자인 시스템에 적용된 토큰은 하이픈(-) 구분자를 사용하여 CSS와의 일관성을 유지하며, 이는 점(.)이나 슬래시(/)보다 가독성이 높다.
토큰의 주요 속성(Category)
토큰에서 사용되는 주요 속성값이다.
-
색상(Color)색상은 주요 색상, 시스템 색상, 팔레트를 구성한다.
- 주요 색상의 이름은 "primary", "secondary", “gray”처럼 간결하고 명확한 목적을 나타내며 ”bule”, “red”로 사용하지 않는다.
- 색상 계열의 표기는 "primary-10", "primary-20"처럼 숫자 척도를 사용하여 명도와 채도를 표현하며, 10의 단위로 증가시켜 색상의 변화를 나타내며, 세밀한 수치를 사용할 경우 5단위를 포함한다.
-
글자(Typography)타이포그래피 토큰은 글꼴, 크기, 줄 간격 등의 텍스트 스타일을 정의한다.
- 타이포그래피 토큰을 유형별로 구분하여 사용한다. (예: "font-family", "font-size", "line-height")
- 모든 크기 단위는 동일한 단위를 사용한다. (예: 픽셀 또는 rem)
-
숫자(number)숫자 토큰은 주로 컴포넌트 내부의 간격이나 컴포넌트 사이의 간격을 정의하는 간격(spacing), 모서리 둥글기(radius), 높이 값(size-height) 등을 정의한다.
- 작은 단계에서 큰 단계로 일관되게 정의한다.
- 4px와 8px의 배수를 기본으로 하며, 중간 단위로 2px 또는 10px을 추가하여 필요한 세부 단계를 제공한다.
- 역할이 있는 시멘틱 요소에는 "small", “medium” "large"처럼 크기를 명확히 표현한다.
- 시멘틱 요소에서 역할이 아닌 단계를 표기하는 경우 “1”,”2,”와 같이 표현할 수 있다.
세부 속성
토큰 네이밍에서 각 세부 속성은 namespace > theme > category > component > type > modifier 순으로 구성하여 네이밍 구조를 체계화한다.
-
이름 (Namespace)
코드에서 구분할 수 있도록 "krds"와 같은 네임스페이스를 사용한다.
krds 대한민국 정부 디자인 시스템 -
테마 (Theme)
디자인 시스템의 스타일을 정의하는 테마 이름은 "light", "dark"처럼 용도를 파악할 수 있도록 사용한다.
light high-contrast 일반 모드 / 선명한 화면 모드 -
속성 (Category)
카테고리는 디자인 토큰의 큰 범주로 모든 속성을 포괄할 수 있으며 "color", “typography”, "spacing"처럼 용도를 파악할 수 있도록 사용한다.
color typography spacing shape 색상 / 글자 / 간격 / 형태 -
컴포넌트 (Component)
컴포넌트는 UI 요소를 구성하며, "button", "card"와 같이 일관성 있는 이름으로 정의하여 시스템 내에서 쉽게 파악할 수 있도록 한다.
button input link card 버튼 / 인풋 / 링크 / 카드 -
유형 (Type)
유형은 "background", "surface" 등으로 카테고리 내에서 특정 기능이나 역할을 명시하며, 모든 유형은 일관되게 사용하여 명확성을 높인다.
background surface icon padding text 배경 / 표면 / 아이콘 / 패딩 / 텍스트 -
변형 (Variant)
카테고리의 변형은 "primary", "secondary", “danger”처럼 계층 구조와 시스템적 부분을 고려하여 명명하며, 시각적 변형을 명확히 전달한다.
primary secondary tertiary 계층 구조danger warning success info 시스템 -
요소 (Element)
요소는 컴포넌트의 하위 구성 요소로, "label", "body", "text"와 같이 용도에 맞게 명명하여 명확히 구분한다.
label title body line 레이블 / 타이틀 / 바디 / 라인 -
상태 (State)
상태는 "default", "hover"처럼 컴포넌트의 현재 상태를 나타내며, 각 상태는 일관된 네이밍을 사용한다.
default hover pressed 기본 상태selected unseleted indeterminate 선택 / 비선택 / 중립 -
크기 (Size)
크기는 "small", "large"와 같이 약어가 아닌 명확한 용어로 표현하며, 모든 컴포넌트에 일관되게 적용한다.
xxsmall xsmall small medium xlarge xxlarge large -
수정자 (Modifier)
수정자는 "rounded", "outlined"처럼 추가적인 스타일이나 변형을 나타내며, 명확한 의미 전달을 위해 간결한 용어를 사용한다.
rounded square 둥근 / 각진line fill 아웃라인 / 채워진subtler subtle bold bolder 강조 표현lighter lighte dark darker 밝기 표현
토큰 속성 네이밍
전체 토큰 내 속성값은 다르게 표현될 수 있는 요소를 정의하여 일관성 있게 관리하며, 디자인 시스템의 유지보수와 확장성에 기여한다.
| 구분 | 설명 |
|---|---|
| -light | 기본 모드 |
| -hight-contrast | 선명한 화면 모드 |
| 구분 | 설명 |
|---|---|
| -background | 전체 페이지 배경 |
| -surface | 엘리베이션 개념이 있는 표면 |
| -divider | 콘텐츠의 사이나 요소들 간의 시각적인 구분을 하기 위한 선 |
| -element | 컴포넌트의 외곽선, 박스의 테두리 |
| -action | 버튼을 제외한 통일관 상호작용을 하는 ui |
| -gap | 콘텐츠 또는 요소들 간의 간격 |
| -padding | 콘텐츠 또는 컴포넌트 내부의 여백 |
| -fill | 주로 컴포넌트, 아이콘, 그래픽 요소에서 채움 스타일을 표현 |
| -line | 주로 텍스트, 아이콘, 그래픽 요소의 선 스타일을 표현 |
| -alpha | 투명도 |
| -neutral | 중립적인 (상태 값이 없는 형태) |
| -on(background) | 배경이 있을 때 적용되는 유형 |
| -dim(dimmed) | 덮어지는 배경 |
| -transparency | 투명도 0으로 퍼블에서 필요한 토큰 |
| -inverse | 반대개념 (강조의 역할) |
| -static | 고정되는 변수 (모드가 변해도 변하지 않는 색상) |
밝기 표현
| 구분 | 설명 |
|---|---|
| -lighter | 더 밝은 |
| -light | 밝은 |
| -nomal | 기본 단계 |
| -dark | 어두운 |
| -darker | 더 어두운 |
강조 표현
| 구분 | 설명 |
|---|---|
| -subtler | 더 미묘한 |
| -subtle | 미묘한 |
| -bold | 진한 |
| -bolder | 더 진한 |
상태
| 구분 | 설명 |
|---|---|
| -default | 상호작용이 없는 기본 상태 |
| -hover | 마우스를 컴포넌트 위에 올렸을 때 상태 |
| -pressed | 컴포넌트를 누르고 있는 상태 |
| -focused | 초점이 맞춰진 상태 |
| -disabled | 상호작용이 불가한 비활성화된 상태 |
| -error | 오류 상태 |
| -active | 컴포넌트가 활성화된 상태 |
| -completed | 작업이 완료된 상태 |
| -view | 사용은 금지되어 있는 읽기 상태 |
| -seleted | 선택 |
| -unseleted | 비 선택 |
| -indeterminate | 중립 |