이 글은 Naming conventions: Organizing your design system을 번역, 의역, 재구성한 글입니다.
디자인 시스템(Design System)을 구축할 때 흔히 저지르는 실수
디자인 시스템을 새로 구축하게 되면 독특하고 차별화된 무언가를 만들기 위해 노력한다. 색상 스타일 이름이나 파일명에 기깔나는 이름을 짓는 방식으로 말이다. 그렇게 만들어진 디자인 시스템은 오히려 업무 효율을 떨어뜨리고 만다.
디자인 시스템 명명 규칙의 필수 조건
1. 명확성, 직관성, 자명함 (Clarity, obviousness, self-evidence)
명칭은 애매모호하지 않고 뚜렷한 의미를 가지고 있어야 의미를 혼동하지 않고 바로 이해할 수 있다. 약어(acronym, abbreviation)을 쓰더라도 바로 어떤 것을 의미하는지 파악할 수 있어야 한다.
2. 조직적 일관성 (Consistency and organization)
명칭은 일정한 순서와 규칙을 지니고 있어야 찾고 사용하기가 쉽다. 동일한 객체에 대해서는 동일한 명칭을 적용하는 통일성이 있어야 하며, *컴파운드(compound) 컴포넌트에 대한 명칭을 정할 때도 이러한 일관성이 드러나야 한다. 이러한 명칭의 순서와 규칙은 미리 논의되고 결정되어야 한다.
*컴파운드(compound)란, 여러가지 디자인 패턴을 섞어둔 집합체를 의미함
3. 접두사와 접미사의 활용 (Prefixes and suffixes)
서로 다른 타입의 디자인 요소(element)를 구분하기 위해서 접두사나 접미사를 활용하는 것이 좋다. 버튼(button)을 btn, 라벨(label)을 lbl로 줄여 명칭의 앞 뒤에 붙이는 방식으로 말이다.
4. 카멜 케이스나 케밥 케이스와 같은 스펠링 규칙 (Camel case, Kebab-case)
명칭을 만들 때 스펠링 적용에 있어서 특정 스타일을 사용해야 한다.
- 카멜 케이스(Camel case): 첫 글자를 소문자로 표기하고 이후 문자들의 시작은 대문자로 표기하는 방법,
camelCase - 케밥 케이스(Kebab case): 바(-)를 이용해 단어를 구분하는 방법,
kebab-case - 스네이크 케이스(Snake case): 언더바(_)를 이용해 단어를 구분하는 방법,
snake_case - 파스칼 케이스(Pascal case): 단어의 시작을 모두 대문자로 시작하는 방법,
PascalCase
5. 상호배제성 (Uniqueness)
명칭 사용에 있어서 충돌을 방지하기 위해 중복 사용을 지양한다.
6. 버전 관리 (Version control)
숫자나 날짜를 표기하여 각 디자인의 이력(history)를 추적하고 최신 버전의 디자인을 사용할 수 있도록 한다.
7. 문서화 (Documentation)
디자인 시스템에 대한 문서화를 지속적으로 업데이트 하여 새로운 팀원들이 빠르게 적응할 수 있도록 한다.
효과적인 디자인 시스템 구조화 방법들
1. 알파벳 순서로 분류를 만든다
2. 디자인 원자(design atom)에 맞는 분류를 만든다
- 컬러와 폰트: 컬러, 폰트, 스타일에 관련된 디자인 요소들
- 레이아웃(layout)과 그리드(grid): 페이지 상의 구조와 배치(distribution)를 정의하는 컴포넌트(component)
- 상호작용 요소(interactive element): 버튼, 링크, 드롭다운과 같이 상호작용 기능을 지닌 것들
아토믹 디자인(Atomic design)은 브래드 프로스트(Brad Frost)의 방법론으로, 디자인 시스템을 크게 다섯 가지 요소로 분류한다.
(1) 원자(atom)
디자인 원자는 텍스트 스타일, 버튼, 아이콘, 인풋 필드, 체크박스와 같이 가장 작은 단위의 디자인 블록을 의미한다. ‘최소 단위의 디자인 블록’은 의미를 잃지 않는 선에서 가장 작게 쪼개어진 디자인 요소를 의미한다.
(2) 분자(molecule)
분자 디자인은 여러 원자들이 합쳐진 형태로 비교적 기능을 갖춘 요소이지만, 실질적인 가치를 발휘하기 위해서는 유기체의 부분으로써 역할해야 한다.
(3) 유기체(organism)
디자인 원자와 분자가 묶인 집합체로, 다른 컴포넌트 없이도 그 자체로 기능을 할 수 있는 디자인 단위다.
(4) 템플릿(template)
실제 컨텐츠가 없는 디자인 행렬(matrices)를 의미하며, 여러 유기체들이 모여 하나의 레이아웃을 구성한 단위다.
(5) 페이지(page)
특정 템플릿들이 모인 인스턴스를 의미한다.
3. 사용 목적(functionality)에 따른 분류를 만든다
- 탐색(Navigation): 사이트나 어플리케이션으로 이동하는 요소들을 분류해놓은 것
- 양식(form)과 인풋(input) 요소: 버튼, 텍스트 박스, 체크 박스와 같이 양식에서 사용되는 요소들을 분류해놓은 것
- 미디어 요소: 이미지, 비디오, 갤러리와 같은 멀티미디어 컴포넌트를 분류해놓은 것
- 표시(indicator) 및 알림(notification): 진행 바(progress bar), 오류 메시지, 알림 등을 분류해 놓은 것
- 페이지 구조: 헤더, 푸터, 사이드바와 같은 페이지의 구조적 요소들을 분류해놓은 것
4. 컨텐츠 타입에 따른 분류를 만든다
- 텍스트 컨텐츠: 제목, 문단, 인용 등의 요소
- 멀티미디어 컨텐츠: 이미지, 비디오, 아이콘과 같은 요소
- 목록: 숫자 목록, 글머리 기호와 같은 목록과 관련된 요소
- 표: 표의 스타일과 디자인 요소
- 양식: 인풋 요소, 버튼, 드롭다운 등의 요소
5. 디자인의 복잡성(complexity)에 따른 분류를 만든다
- 기본(essential) 요소: 버튼과 텍스트 필드와 같이 단순한 디자인 요소
- 컴파운드 요소: 카드와 패널과 같이 여러 기본 요소들을 조합하여 만든 디자인 요소
- 페이지: 다양한 컴포넌트와 디자인 요소들을 포함하여 완성된 페이지
6. 사용 맥락에 따른 분류를 만든다
홈페이지, 프로필, 블로그와 같이 특정 사용 맥락에 따른 단위로 묶는 것