4. A Design System
디자인 시스템은 프로젝트가 아닙니다. 그것은 서비스 제품입니다.
스타일 가이드는 디자인 프로세스의 결과물입니다.
디자인 시스템은 살아있으며, 로드맵 및 백로그가 있는 자금 지원 제품으로
생태계를 제공합니다.
A Design System isn’t a Project. It’s a Product, Serving Products.
A style guide is an artifact of design process.
A design system is a living, funded product with a roadmap & backlog,
serving an ecosystem.
- Nathan Curtis -
001 디자인시스템이란?
5. 001 디자인시스템이란?
여러가지 응용 프로그램을 구성하기 위해 결합할 수 있는
명확한 표준에 따라 재사용 가능한 구성 요소의 모음
타이포, 색상, 모양, 아이콘 등과 같은 스타일 가이드를 포함하는
모든 포괄적인 UI 구성 요소 집합
비주얼 언어는 디자인 표준의 핵심으로 브랜드 개성을 표현하고
일관된 사용자 경험을 창출하는데 필수적인 역할
디자인 시스템
6. 스타일가이드VS 디자인 시스템
스타일 가이드
디자인 시스템의 스타일, 패턴, 실습 및 원리를 나타내는 물리적 또는 디지털 표현
색상, 타이포그래피, 브랜드, 아이콘 등 기본을 정의하는 일련의 규칙
[패턴 라이브러리] 회사 전체에서 사용하기 위한 디자인 패턴 집합으로
코드 예제, 디자인 지침 및 사용 사례가 포함되어있는 재사용 가능한 관련 구성 요소 세트.
스타일 가이드를 구성 할 수 있는 일부
디자인 시스템
디자인 및 개발을 위한 더 나은 방법 및 프로세스
“살아 있는 것” 지속적인 업데이트 최신 구성 요소 업데이트 유지 되는 문서
스타일 가이드와 패턴 라이브러리는 훨씬 견고한 디자인 시스템의 일부
001 디자인시스템이란?
9. UI Components 구성요소
패턴 라이브러리, 재사용 가능한 UI 요소 및 웹
사이트의 일관성을 유지하는 코드
Design Principles 디자인 원리
조직에서 온라인 경험을 설계하는 방법을 정의하
는 일련의 지침. 의사 결정을위한 프레임 워크
Content Guide 콘텐츠 가이드
웹 사이트에서 일관된 목소리를 유지하는데
도움이되는 콘텐츠 제작자를 위한 가이드 라인
Service Manual 서비스 매뉴얼
디지털 거버넌스 및 디지털 프로젝트 관리 방법을
다루는 문서
디자인시스템4요소
001 디자인시스템이란?
10. 우리는 페이지를 디자인하지 않고, 구성요소의 시스템을 설계하고 있습니다.
We’re not designing pages, we’re designing systems of components.
—Stephen Hay
Brad Frost
디자인 시스템을 생성하기 위한 방법론
웹 사이트 레이아웃을 기본 구성 요소로 분해하여 사이트 전체에서 재사용
견고한 디자인 시스템을 만들고 유지 관리하는 데 필요한 모든 것을
상세하게 설명하여 이전보다 더 높은 품질의 일관성있는 UI를 신속하게 출시
Atomic Design
001 디자인시스템이란?
11. 제품의 모든 화면을 디자인 한 다음 작은 구성 요소로 잘라서
UI 키트를 만드는 방법
Atomic design: how to design systems of components
001 디자인시스템이란?
12. Atomic design: how to design systems of components
Atomic 시작으로 나머지를 만드는 방법
001 디자인시스템이란?
14. Atoms 원자
화학 원자는 모든 물질의 기본 구성 요소 / 더이상 분해할 수 없는 UI 요소
입력, 레이블 및 버튼과 같은 기본 HTML 태그 (인터페이스를 구성하는 기본 구성 요소)
패턴 라이브러리의 컨텍스트 참조용으로 유용
색상 팔레트, 글꼴 및 애니메이션과 같은 인터페이스의 더 눈에 보이지 않는 측면과 같은 추상 요소도 포함
Atomic Design
001 디자인시스템이란?
15. Molecules 분자
화합물의 가장 작은 기본 단위
새로운 특성을 취하거나 기능을 완성하기 위해 결합된 원자의 단순한 조합
Form 결합하여 기능적 요소를 형성 / 검색 양식
Atomic Design
001 디자인시스템이란?
16. Organisms 유기체
분자들이 결합하여 유기체 형성
비교적 복잡하고 구분 된 인터페이스 영역을 형성하는 분자 그룹
유사하거나 상이한 분자 유형으로 구성
헤더 : 로고, 탐색, 검색 형태 소셜 미디어 채널의 목록과 같은 다양한 요소로 구성
반복적 그리드 : 쇼핑 상품리스트
Atomic Design
001 디자인시스템이란?
17. Template 템플릿
페이지를 구성하기 위한 유기체 그룹으로 구성 / 페이지의 기본 콘텐츠 구조에 집중
레이아웃 적용하여 구성 요소 배치, 디자인 컨텐츠 구조 보여줌
구체적, 추상적인 분자와 유기체에 대한 문맥 제공
html 와이어 프레임으로 시작 궁극적인 최종 산출물
Atomic Design
001 디자인시스템이란?
18. Pages 페이지
템플릿의 특정 인스턴스
실제 컨텐츠들이 어떻게 비쥬얼적으로 보여질지 페이지를 통해 구현
기본 설계 시스템의 효과를 테스트하는 데 필수적
실제 디자인 컨텍스트를 보다 효과적으로 대처
Atomic Design
001 디자인시스템이란?
20. 시각적구성요소
동일하게 유지되는 구성요소
• typeface
• base unit
구별할 수 있는 구성 요소
• font size
• measure (line length)
• leading (line height)
Typography
Colour
Shape or form
Grids and layouts
Interface
Animation
001 디자인시스템이란?
23. 002 필요성및 이점
더 똑똑하고 빠른 디자인
디자인 시스템을 활용함으로써 전략적 설계와 솔루션 중점
디자인 프로세스 간소화. 더 많은 작업 수행
디자인 시스템
일관성 없는 스타일, 상호작용, 디자인 원리와 연결이 끊어진 인터페이스
디자인시스템은 단기 설계 결정을 제거, 설계 및 개발 오버헤드를 줄임
팀이 유지보수가 아닌 혁신에 집중 디자인 및 기술 부채를 점검하는 데 도움
혼란과 불일치 감소 (일관성)
혼란스러운 사용자가 발생 표준화 된 구성 요소 및 워크플로우를 만들어
예측 가능하고 이해하기 쉬운 경험 제공
일관성은 사용자의 성공과 만족도를 높여줌
24. 빠른 프로토타입
디자인 시스템에서 컴포넌트를 가져와 새로운 기능을 신혹하게 생성 및 테스트
Fail faster. Succeed sooner - David Kelley, IDEO
더 빠른 반복
디자인 구성 요소에 쉽게 액세스. 더 빨리 이동하여 단순한 반복과 실험
A good idea is worthless without impeccable execution and a commitment to iterate.
– Zach Klien, Co-founder, VIMEO
사용 편의성 향상
일관된 경험으로 사용성 향상. 복잡한 애플리케이션을 사용할 때 문제, 마찰 지점 및 인식 과부하 줄임
일련의 테스트 및 검증 된 구성 요소를 사용하여 일관성 있는 경험을 얻게 되면
복잡성이 줄어들고 개발 프로세스가 진행되는 동안 문제가 줄어듬
002 필요성및 이점
27. 003 디자인시스템구축
UI 인벤토리 작성
시각적 디자인 언어 만들기
Color
Typography
Sizing and spacing
Image
UI 패턴 라이브러리 생성
각 구성 요소의 용도와 사용시기
28. UI 인벤토리 작성
"An interface inventory is similar to a content inventory, only instead of sifting through
and categorizing content, you’re taking stock and categorizing the components making up
your website [or product]. An interface inventory is a comprehensive collection of the bits
and pieces that make up your interface."
— Interface Inventory, Brad Frost
인터페이스 인벤토리는 콘텐츠 인벤토리와 비슷하지만 콘텐츠를 탐색하고 분류하는
대신 재고를 확보하고 웹 사이트 [또는 제품]를 구성하는 구성 요소를 분류합니다.
인터페이스 인벤토리는 종합적인 비트 조각으로 당신의 인터페이스를 구성합니다.
설계한 모든 것을 스크린 샷으로 가져와 인터페이스에 사용 된 모든 디자인 패턴을
나열하고 설명하고, 불일치 사항 기록
003 디자인시스템구축
29. UI 인벤토리 작성
1. 인터페이스와 코드를 검토하고 찾을 수 있는 모든 색상과 텍스트 스타일을 나열
2. UI 패턴의 스크린 샷을 찍거나 프로젝트의 패턴 복사. 모든 스크린 샷을 한 곳에 담음
3. 목적 (예 : 단추, 양식 필드, 탐색 등)을 기준으로 패턴 분류
4. 패턴 간의 불일치를 표시하고 팀을 위한 프리젠테이션 작성
003 디자인시스템구축
30. UI 인벤토리 작성
그라디언트, 화살표, 테두리 등의 불일치 재사용되는 버튼 스타일이 적은 인터페이스
003 디자인시스템구축
31. UI 인벤토리 작성
시각적 디자인 언어 만들기
시각적 디자인 언어는 디자인 시스템의 핵심
네 가지 주요 카테고리로 구성
각 디자인 요소가 화면의 모든 구성 요소에서 수행하는 역할 고려
Color
Typography
Sizing and spacing
Image
003 디자인시스템구축
32. Color
브랜드를 나타내는 1-3 원색이 포함
색상에 흰색과 섞인 색상 (검정색과 혼합 된 색상)을 추가
그런 다음 색상에 대해 다른 음영 생성
시각적 디자인 언어 만들기
angular color generator
003 디자인시스템구축
33. Typography
표제와 본문 복사를위한 1개의 글꼴과 코드의 고정 폭 글꼴이 포함
기본 제목, 보조 제목, 레이블, 카드 제목, 본문 내용 및 버튼 같은
용도별 입력 체계 스타일 나열
시각적 디자인 언어 만들기
003 디자인시스템구축
34. Sizing and spacing
각 요소와 레이아웃이 일정하게 유지
크기조정, 폼 및 기타 유사한 구성 요소에 대해 재사용 할 수 있는
폭, 높이 및 선 높이 세트 정의
시각적 디자인 언어 만들기
003 디자인시스템구축
35. Image
일러스트레이션과 아이콘에 대한 지침을 설정하고 상황에 맞는 최상의 이미지 형식을 사용
Oracle Alta UI는 원근감, 획 및 색상과 같은
스타일 지침을 설명합니다.
시각적 디자인 언어 만들기
003 디자인시스템구축
36. UI 패턴 라이브러리 생성
이미 수행 한 시각적 감사 (디자인 요소의 시각적 품질을 고려함)와 달리
이 단계는 UI의 실제 구성 요소를 살펴봄. 현재 생산중인 UI의 모든 부분과 조각을 모으기
모든 버튼, 양식, 모달 및 이미지를 의미함. 필요없는 것을 병합하고 제거
미리 정의된 스타일을 구성요소에 매핑 / 스타일 팔레트에 정의된 것으로 사용
각 구성 요소의 용도와 사용시기
문서 라이브러리와 표준은 패턴 라이브러리와 디자인 시스템과 구별 / 문서화 단계 중요
003 디자인시스템구축