서론
오늘은 Design System에 대한 개념을 다시 한 번 복습하며 기초를 다지는 시간을 가졌고, Design System Reference Copy 작업과 Copy한 Design Systemd을 활용해 화면구성을 해보는 시간을 가졌다.
Design System
조직・팀 또는 프로젝트가 일관되고 효율적으로 디자인을 구현하고 유지할 수 있도록 돕는 종합적인 Guide Line과 Resources의 집합체
> Design System 장점
- 일관성 있는 사용자 경험
- 원활한 커뮤니케이션과 협업
- 편리한 유지보수와 확장성
즉, Design System은 시각적요소와 기능적 요소(Component, Intrection) 포함
Design System 요소
> Style Guide
※ Style Guide는 Color, Font 등 시각적 요소에 집중함
Design System Detail 요소
> Color System
Brand Color, 보조 색상, 상태 색상 (Error, Complete, 경고 등) 정의
> Typography System
제목, 부제목, 본문, Caption의 서체, 크기, 자간 정의
- 기본 서체 (Font Family) 선정
- Text Style 정의 : 제목(H1, H2), 본문, Caption
- Font 크기, 자간, 줄 간격(Line Height) 설정
> Component Library
Button, 입력 Field, Card, Navigation Bar 등 재사용 가능한 UI요소
> Iconography & Imagery
Icon의 크기, 두께, Style 정의 / 일관된 Image Style Guide 설정
> Spacing
※ 보통 짝수의 배수로 Spacing
Design System 예시
아래는 'Socar'의 Design System이며 이 Design System을 통해 화면을 구성
Designer 개념
추가적으로 Design 직무에 대한 차이와 개념에 대해서도 알아보았다.
- UX(User Experience) Designer : 제품을 이용하는 User의 전체적인 경험을 Design
- UI(User Interface) Designer : User가 접하는 Interface를 Design
- GUI (Graphic User Interface) Designer : Graphic 기반의 시각적 Interface를 Design
- Interaction Designer : User와 제품 간의 상호작용 (동적 반응)을 Design
- Product Designer : 제품의 전체 Design 과정을 책임, User의 경험 뿐만 아니라 Business도 고려
활용해보기
위에서 배운 내용을 토대로 Design System Reference를 Search하는 시간을 가지고 Copy하는 작업을 가졌다. 또한 Copy본을 활용하여 Mobile UI화면 구성을 해보는 시간을 가졌다.
▼ 아래는 내가 'Figma'로 제작한 Design System과 UI화면 구성이다.
<Design System, UI화면구성>
App 화면을 구성하는 것에서도 다양한 직무가 있다는 것을 다시 한 번 알 수 있었고, 오늘 제작한 Design System을 Search하는 시간을 통해 시야가 더욱 넓어지는 것 같았다. 후에 UI 화면구성은 생각보다 어려웠지만 Design System을 통해 작성을 하니 확실히 효율이 올라가는 것 같아 Design System의 중요성을 알게 되었다.
