디자인 시스템을 만들 때 모든 것을 독창적이고 다르게 만들고 싶을 것입니다. 색상 스타일이나 파일에 대한 최고의 이름을 생각해내고 싶은 것이 그 예입니다. 결과적으로 현재와 미래의 시스템을 설정하기 위한 디자인 시스템을 확장하려면 일반적으로 더 많은 작업이 필요합니다.
명명 규칙을 도입을 통해 디자이너와 개발자 간의 효과적인 협업을 구축하여, 모든 프로젝트를 더 쉽게 구현하고 이해하는 데 도움을 줄 수 있습니다.
원칙
명명 규칙은 프로젝트의 원칙과 목표를 정의합니다.
디자인 시스템의 명명 규칙에는 다음과 같은 몇 가지 원칙이 있습니다.
1. 명쾌함과 분명함
이름은 명확하고 모호하지 않게 명명하여, 팀 구성원이 그 의미(공허한 두문자어 및 모호한 약어)를 쉽게 이해할 수 있어야 합니다.
2. 일관성과 조직
이름은 정해진 순서를 따라야 합니다. 이는 동일한 개체에 대해 동일한 이름을 사용하는 데 있어 통일성과 각 복합 이름이 생성되는 방식의 일관성을 모두 의미합니다. 이름과 속성의 순서는 미리 정의되고 합의되어야 합니다. 오브젝트와 파일을 더 쉽게 찾고 사용할 수 있게 만들 것입니다.
3. 명확한 자기 설명
각 이름은 요소의 기능이나 목적을 나타내야 합니다. (설명이 포함된 이름)
4. 접두사 및 접미사
다양한 유형의 요소를 구별하기 위해 접두사 또는 접미사를 도입할 수 있습니다. 예를 들어 버튼에는 "btn"을, 레이블에는 "lbl"을 사용할 수 있습니다.
5. CamelCase나 kebab-case를 사용하세요.
모든 이름에 사용할 철자 스타일을 선택하세요. 예로는 camelCase(첫 번째 단어에는 소문자, 그 뒤에는 대문자) 또는 kebab-case(하이픈으로 구분된 단어)가 있습니다.
6. 독창성
사용법 충돌을 피하기 위해 이름을 반복하지 마세요.
7. 버전 관리
버전 제어를 사용하여 파일의 최신 버전을 지정합니다. 이름 끝에 정보를 추가하여 버전을 트래킹할 수 있습니다. 버전 번호와 날짜를 사용하는 것이 가장 편리합니다.
8. 문서
새로운 동료나 새로운 개발 팀이 프로젝트에 빠르게 익숙해지고 참여할 수 있도록 명명 규칙을 설명하는 문서를 보관하세요.
사용자 인터페이스 요소 및 템플릿 분류
명명 규칙은 프로젝트의 원칙과 목표를 정의합니다.
디자인 시스템의 명명 규칙에는 다음과 같은 몇 가지 원칙이 있습니다.
사용자 인터페이스 요소와 템플릿을 분류하는 것은 디자인 시스템을 구성하고 체계화할뿐만 아니라, 명명 규칙을 위한 필수 단계입니다.
다음은 일반 분류를 사용하여 UI 요소 및 템플릿의 명명 규칙을 구성하는 방법에 대한 예입니다.
1. 기본 요소
- 버튼: btn-primary, btn-secondary, btn-submit 등
- 텍스트 필드: input-text, textarea 등
- 아이콘 : icon-heart, icon-search 등
- 제목: heading-h1, heading-h2 등
2. 컨테이너 및 마크업
- 콘텐츠 블록: content-block, text-block 등
- 그리드: grid-container, grid-row, grid-col 등
- 카드 : card, card feature 등
3. 네비게이션 요소
- 메뉴: menu-main, menu-footer 등
- 탐색 링크: nav-link, nav-dropdown 등
- 페이지 매김: pagination, pagination-item 등
4. 컨트롤 및 포맷
- 체크박스 및 토글: checkbox, toggle-switch 등
- 양식: form-login, form-registration 등
- 드롭다운 목록: dropdown, select-option 등
5. 미디어 요소
- 이미지 및 비디오: img-thumbnail, video player 등
- 갤러리: gallery, gallery-item 등
- 슬라이더: slider, slider-item 등
6. 페이지 구조 및 구성 요소
- 머리글 및 바닥글: header, footer 등
- 콘텐츠 블록: feature section, info-block 등
- 소셜 요소: social icons, share-button 등
7. 스타일 및 테마
- 색상: colour-primary, colour-accent 등
- 글꼴: font-heading, font-body 등
- 테마: theme-light, theme-dark 등
8. 기능적 요소
- 검색 및 필터링: search bar, filter dropdown 등
- 알림: notification, alert box 등
- 로딩 표시기: loader, spinner 등
이러한 분류는 디자인 시스템의 요소와 템플릿에 대해 체계적이고 일관된 이름을 만드는 데 도움이 됩니다. 편리하지만 다른 것도 있습니다.
요소와 UI 템플릿을 카테고리나 섹션으로 분류하여 구조를 정의할 수도 있습니다. 이를 위해 다음과 같은 실용적인 접근 방식 중 하나를 사용할 수 있습니다.
01. 알파벳순으로 목록을 만들어 보세요.
02. Design atoms 에 따라 섹션을 생성합니다.
- 색상 및 글꼴 : 색상, 글꼴 및 스타일과 관련된 요소
- 레이아웃 및 그리드 : 페이지 요소의 구조와 분포를 정의하는 구성 요소
- 인터랙티브 요소 : 버튼, 링크, 드롭다운 목록 및 상호 작용 기능이 있는 기타 측면
03. 기능별로 나누기
- 네비게이션 : 사이트 또는 애플리케이션 탐색과 관련된 요소
- 포맷 및 입력 요소 : 양식에 사용되는 버튼, 텍스트 상자, 확인란 및 기타 요소
- 미디어 요소 : 이미지, 비디오, 갤러리, 기타 멀티미디어 구성요소
- 인디케이터 및 알림 : 진행률 표시줄, 오류 메시지, 알림 등
- 페이지 구조 : 머리글, 바닥글, 사이드바 및 기타 구조 요소
기능별로 분류하고 이름을 지정하는 흥미로운 변형을 보려면 디자인 시스템의 명명 규칙을 참조하세요.
04. 콘텐츠 유형별로 카테고리를 생성하세요.
- 텍스트 내용 : 제목, 단락, 인용문 등
- 멀티미디어 콘텐츠 : 이미지, 동영상, 아이콘 등
- 목록 : 번호가 매겨진 목록, 글머리 기호 목록 및 기타 목록 항목
- 테이블 : 테이블 형식 요소 및 테이블 스타일
- 양식 : 입력 요소, 버튼, 드롭다운 목록 등
05. 복잡도에 따른 구분
- 필수 요소 : 버튼, 텍스트 필드 등의 간단한 구성 요소
- 복합 요소 : 요소는 카드, 패널 등 필수 요소를 구성
- 페이지 : 다양한 구성 요소와 요소를 포함하는 완성된 페이지 레이아웃
06. 사용 맥락에 따른 분류를 구현합니다.
- 홈 페이지 : 홈 페이지와 관련된 요소입니다.
- 개인 프로필 : 사용자 프로필에 사용되는 요소입니다.
- 상품 및 카탈로그 : 상품 및 카탈로그의 진열과 관련된 요소입니다.
- 블로그 : 기사 및 기타 콘텐츠를 표시하는 데 사용되는 구성 요소입니다.
특정 접근 방식을 선택하는 것은 프로젝트의 요구 사항에 따라 다릅니다. 또한 언제든지 여러 접근 방식을 결합할 수 있습니다.
명명 규칙을 만드는 모든 단계에서 도움 되는 리소스 및 툴
사용자 인터페이스 지침 - 가장 널리 사용되는 39가지 참조 시스템을 기반으로 사용자 인터페이스 구성 요소의 디자인/코드를 표준화하는 방법에 대한 완벽한 가이드입니다.
구성 요소 갤러리 — 최고의 디자인 시스템의 예를 기반으로 사용자 인터페이스를 구축하는 모든 사람을 위한 UI 구성 요소 저장소입니다.
UI의 구성 요소 — 단일 책임 원칙을 기반으로 하는 UI 요소 목록입니다.
Briney, Kristin A.의 파일 명명 규칙 워크시트에는 메타데이터 선택, 메타데이터 인코딩 및 구성, 버전 정보 추가, 적절한 파일 이름 형식 지정이 포함되어 있습니다.
Onfido를 사용하여 디자인 시스템을 구성하고 있습니다.
-
저자 : Sergushkin
원문 링크: https://medium.com/ux-planet/naming-conventions-organizing-your-design-system-a203e3895017
'ᴜx > ᴀʀᴛɪᴄʟᴇ' 카테고리의 다른 글
| 아토믹 2.0 - 디자인 시스템을 위한 아토믹 디자인 재검토 (0) | 2022.04.16 |
|---|---|
| 4개의 스프린트로 기존 프로덕트에 대한 디자인 시스템 구축 (0) | 2022.04.08 |
| 8배수보다 4배수 디자인이 유연한 이유 (0) | 2022.03.31 |
| 디자인 시스템, 컬러 네이밍 정하기 (0) | 2022.03.31 |
| 우버 디자이너가 Figma에서 256개의 새로운 디자인 시스템 구성 요소를 프로그래밍 방식으로 구축한 방법 (0) | 2022.03.30 |
댓글