원자 설계 및 스케치 – 워크플로 개선 가이드

Sketch 및 Atomic Design은 설계자가 표준화 및 보다 효율적인 워크플로우를 허용하는 설계 시스템을 생성하는 데 사용할 수 있는 강력한 도구 및 방법론 세트입니다.

디자인 시스템: 입문서

디자인 시스템은 팀이 제품을 만들고 수명을 다하는 동안 공통 언어를 중심으로 통합하는 데 도움이 되는 재사용 가능한 구성 요소 및 지침 세트입니다.

대부분의 경우 디자인 시스템은 스타일 가이드와 컴포넌트 라이브러리로 구성됩니다. 여기에는 브랜드 가치뿐만 아니라 목소리와 어조와 같은 요소도 포함될 수 있습니다. 디자인 시스템의 핵심은 제품이나 브랜드에 대한 단일 정보 소스 역할을 하는 일련의 표준을 만드는 것입니다.

Google의 Material Design은 구조화된 UI 디자인 시스템의 한 예입니다. 머티리얼 디자인은 응집력 있는 Android 앱을 디자인하고 개발하기 위한 방법으로 2014년에 도입되었습니다.

또 다른 예는 Mailchimp의 Voice and Tone입니다. 목소리는 항상 같으면서도 상황에 따라 어조가 변하는 것을 묘사한다. 이를 인식하면 콘텐츠에 권한을 부여하고 브랜드에 개성을 부여하는 데 도움이 됩니다.

디자인 시스템을 만드는 데 사용할 수 있는 다양한 방법이 있지만 팀이 공통 언어와 일련의 표준을 통합할 수 있도록 하는 프레임워크를 선택하는 것이 좋습니다. Atomic Design은 이 두 가지 목표를 달성하는 프레임워크의 좋은 예입니다.

아토믹 디자인: 빌딩 디자인 시스템

2013년 Brad Frost가 도입한 방법론인 Atomic Design은 모든 디자인 시스템이 공존하는 일련의 빌딩 블록으로 정의될 수 있다는 아이디어를 기반으로 합니다.

다음은 Atomic Design의 구성 요소에 대한 간략한 개요입니다.

• 원자 . 디자인 시스템의 기본 빌딩 블록을 나타냅니다. 예를 들면 버튼이나 텍스트 스타일이 있습니다.
• 분자 . 하나의 단위로 함께 작동하는 원자 그룹. 분자는 유형의 UI 요소입니다. 예를 들어 버튼과 텍스트 필드를 그룹화하여 검색 양식을 만들 수 있습니다.
• 유기체 . 복잡한 구조에서 함께 작동하는 원자와 분자. 탐색 모음으로 그룹화된 검색 필드는 웹사이트에서 헤더 유기체를 형성합니다.
• 템플릿. 콘텐츠 구조를 정의하는 레이아웃에 구성 요소를 배치하는 페이지 수준 개체입니다. 예를 들어, 헤더 유기체를 가져와 홈페이지 템플릿에 배치합니다.
• 페이지. 최종 제품을 나타내는 템플릿의 인스턴스입니다.

“우리는 그 어느 때보다 더 많은 화면 크기와 더 많은 기능을 갖춘 더 많은 장치에서 더 많은 브라우저를 사용하여 더 많은 상황에서 더 많은 사용자를 위한 인터페이스를 만드는 임무를 맡고 있습니다. 참으로 힘든 일입니다. 고맙게도 디자인 시스템이 도움이 될 것입니다.”—Brad Frost가 Atomic Design 및 디자인 시스템 소개를 합니다.

Atomic Design을 사용하여 디자인 시스템을 만들고 유지 관리하면 디자이너가 팀 내에서 더 효율적으로 작업하고 더 나은 의사 소통을 할 수 있습니다. 디자인 시스템을 만들고 유지하기 위한 도구와 방법은 무수히 많지만 가장 좋은 도구는 우리에게 가장 친숙한 도구인 경우가 많습니다.

스케치와 함께 원자 설계를 사용하는 방법

Atomic Design을 사용하여 디자인 시스템을 개발하기 위한 훌륭한(그리고 이미 친숙한) 도구는 Sketch입니다. 디자인 시스템의 핵심을 정의하는 데 필요한 요소인 원자, 분자 및 유기체를 만들 수 있는 캔버스를 제공합니다.

원자 만들기

Sketch에서 심볼, 레이어 스타일 및 텍스트 스타일의 세 가지 유형의 원자를 만드는 것으로 시작합니다.

기호. 기호는 재사용 가능한 구성 요소에 불과합니다. 제품 전체에서 인스턴스화할 수 있으므로 한 번만 정의됩니다. 예를 들어 화살표 기호(원자)는 테두리 색상, 크기 등과 같은 속성으로 정의할 수 있습니다. 그러면 매번 다시 만들 필요 없이 이 기호를 재사용할 수 있습니다.

레이어 스타일 . 레이어 스타일은 모든 레이어에서 일관되게 유지되는 재사용 가능한 시각적 스타일 요소입니다. 예를 들어, 이전에 정의한 화살표의 채우기 색상입니다.

텍스트 스타일. 레이어 스타일과 유사한 텍스트 스타일은 유사한 텍스트 개체 간에 일관성을 보장하는 재사용 가능한 요소입니다. 예를 들어, h1 요소의 글꼴 크기와 색상을 정의합니다. Google 문서 또는 Microsoft Word의 텍스트 스타일과 유사한 방식으로 작동합니다.

기호, 레이어 스타일 및 텍스트 스타일을 정의할 때 Sketch는 "/"(슬래시)를 사용하여 기호 및 텍스트 스타일 메뉴에서 계층 범주로 나눌 수 있습니다. 명명 규칙을 따르고 마스터 범주 집합이 잘 정의되어 있으면 파일에 체계적인 구조가 제공되어 혼란과 불일치가 줄어듭니다.

다음은 Sketch에서 기호, 텍스트 및 레이어 스타일에 대한 계층 범주를 만드는 몇 가지 방법입니다.

Atoms/ 아래에서 제안된 명명 규칙을 사용하여 기호를 나타낼 수 있습니다.

• 자산
• 버튼
• 입력 컨트롤
• 이미지
• 항해
• 정보

레이어 스타일을 기호로 변환하지 않으므로 의미 그룹으로 식별하는 것으로 충분합니다. 다시 Atoms 를 사용하여 /:

• 채우기
• 테두리
• 그림자
• 그라디언트

레이어 스타일과 유사하게 Atoms /에서 텍스트 스타일을 만드는 방법은 다음과 같습니다.

• 제목
• 신체
• 표제
• 라벨
• 연결

통합된 디자인 언어는 단지 정적인 규칙과 개별 원자의 집합이 되어서는 안 됩니다. 진화하는 생태계가 되어야 합니다.—시각 언어 구축에 관한 에어비앤비.

분자 생성

Atom은 제품 디자인 지침의 기본 부분을 정의하지만 그 자체로는 완전히 유용하지 않습니다. 일부 기능을 유도하기 위해 우리는 원자를 결합하고 분자를 만듭니다.

검색 기능을 생성하기 위해 레이블(원자)을 입력 버튼(원자)과 결합하는 것은 일반적으로 사용되는 분자 요소의 좋은 예입니다.

여기에 약간의 회색 영역이 있을 수 있으므로 주의하십시오. 코드 수준 의 버튼은 원자로 간주되지만 디자인 수준 의 버튼은 레이어 스타일과 텍스트 스타일 원자를 그룹화하기 때문에 분자로 간주됩니다. 혼동을 피하기 위해 코드 수준 요소에 대해서만 생각하는 것이 좋습니다.

분자/ 에 속하는 주요 범주는 다음과 같습니다.

• 정보
• 항해
• 입력 컨트롤

분자는 상호 작용 방식으로 제품을 형성하기 시작하므로 위의 범주를 추가로 정의하는 것이 좋습니다. 이 경우 패턴 라이브러리를 나타내는 하위 범주 집합을 정의합니다.

• 드롭다운 목록
• 토글
• 슬라이더
• 탭
• 쪽수 매기기
• 진행 표시기
• 날짜 필드
• 텍스트 필드
• 체크박스
• 라디오 버튼
• 모듈

유기체 생성

유기체는 원자와 분자의 그룹입니다. 그들은 또한 다른 유기체의 일부가 될 수 있습니다.

원자와 분자와 달리 유기체는 우리가 디자인하는 제품에 추상적으로 포함되어 있지 않습니다. 특정 작업으로 쉽게 식별할 수 있는 구체적이고 재사용 가능한 구성 요소입니다. 그들의 구조는 원자나 분자보다 더 복잡합니다.

앞서 정의한 검색 필드를 네비게이션 바(분자), 로고(원자)와 같은 다른 구성 요소와 그룹화하면 유기체가 생성됩니다. 예를 들어 탐색 모음이나 달력이 있습니다.

분자와 같은 유기체는 동일한 범주와 하위 범주에 속할 수 있습니다.

다음은 Organisms/에 대해 만들 주요 범주입니다.

• 정보
• 항해
• 입력 컨트롤

분자와 마찬가지로 유기체에 대한 하위 범주도 생성합니다.

• 드롭다운 목록
• 토글
• 슬라이더
• 탭
• 쪽수 매기기
• 진행 표시기
• 날짜 필드

지금까지는 대부분의 UI가 이미 디자인되었으므로 이제 디자인에 필요할 때 구성 요소의 인스턴스를 호출하는 것만 큼 간단합니다.

잘 구성된 3개의 주요 카테고리 세트를 찾을 수 있는 Sketch 도구 모음의 삽입 패널을 사용하여 직접 검색하거나 다음과 같은 플러그인을 사용하여 의미 그룹별로 이러한 각 구성 요소를 쉽게 찾을 수 있습니다. 스케치용 러너.

Runner for Sketch 는 끝없는 메뉴에서 항목을 찾는 대신 사용할 수 있는 일련의 키보드 명령을 제공하여 디자이너의 작업 흐름을 최적화합니다. 예를 들어, 삽입 이라는 단어를 입력하고 탭 키를 누르고 필요한 구성 요소를 찾을 수 있습니다.

atom 을 입력하면 드롭다운 목록에 해당 범주에 속하는 모든 요소가 표시됩니다. 원자와 분자가 범주를 공유하면 원자만 보이고 모든 분자는 무시됩니다.

포장하기

Sketch와 Atomic Design은 함께 사용하여 설계 워크플로를 개선하고 효과적인 설계 시스템 프레임워크를 촉진하는 강력한 도구 세트입니다.

Atomic Design은 원자 , 분자 및 유기체 의 개념을 구성 요소 기반으로 사용하여 설계자가 제품 생성 및 수명 동안 공통 언어를 중심으로 통합할 수 있도록 지원합니다.

디자이너는 Sketch와 같은 도구를 사용하여 프로젝트의 최종 단계에서 개발자를 포함하여 디자인 팀의 모든 사람이 수용하는 일련의 표준과 보다 효율적인 워크플로를 제공하는 Atomic Design을 구현할 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 효과적인 디자인 프레임워크를 구축하는 방법
• 디자인 시스템 및 패턴 이해하기
• 스케치 스타일 가이드, 라이브러리 및 UI 키트를 만드는 방법
• 스타트업에 스타일 가이드가 필요한 이유
• Zeplin Sketch 플러그인 – 설계와 엔지니어링 간의 워크플로 브리지