1주차 | 디자인 시스템 총정리!

 

디자인 시스템 총정리

 

 

1. 본인 간단한 소개

안녕하세요. 저는 산업디자인 전공자로, 제품 디자인, UX/UI, 브랜딩 등 다양한 분야에서 실무 경험을 쌓아왔습니다. 프리랜서로 활동하며 로고, 웹사이트, PPT 디자인 등 브랜드 아이덴티티 구축 작업을 진행했고, 회사에서는 전자제품 기획, 리서치, 모델링, 렌더링 등 제품 개발의 전 과정을 경험했습니다. 이러한 경험을 바탕으로, 사용자 중심의 디자인과 체계적인 프로세스의 중요성을 깊이 깨달았으며, 앞으로 더 전문적인 프로덕트 디자이너로 성장하고자 합니다.

 

미래 UX/UI 디자이너 비전 및 나의 방향

미래의 비전:

• 사용자 중심의 혁신:
  디지털 환경이 점점 복잡해짐에 따라, 사용자가 직면하는 문제를 심도 있게 이해하고 이를 혁신적인 디자인 솔루션으로 해결하는 것이 중요합니다.
• 통합적 디자인 시스템:
  디자인 시스템을 체계적으로 구축하여, 모든 디지털 접점에서 일관된 사용자 경험을 제공하는 것이 목표입니다.
• 데이터와 기술의 융합:
  사용자 데이터를 분석하고 최신 기술 트렌드를 반영하여, 실시간 피드백과 빠른 프로토타이핑으로 지속적으로 개선되는 디자인을 구현하고자 합니다.

내가 가고자 하는 방향:

• 협업 중심의 프로세스:
  개발자, 기획자 등 다양한 팀원들과의 원활한 소통을 통해, 아이디어가 실제 구현 가능한 솔루션으로 전환되도록 하는 데 주력할 것입니다.
• 실무에 최적화된 디자인:
  단순히 시각적인 아름다움뿐 아니라, 실제 사용자 행동과 상호작용을 고려한 실용적인 디자인을 추구합니다.
• 끊임없는 학습과 도전:
  최신 디자인 도구와 기술을 꾸준히 습득하고, 새로운 디자인 패턴과 인터랙션 기법을 실험하여 개인의 역량을 지속적으로 발전시키겠습니다.

 

2. 스터디 목표 공유

저의 스터디 목표는 지금까지 쌓은 경험을 토대로 UX/UI 디자인 역량을 더욱 심화하고, 디자인 시스템을 체계적으로 이해 및 적용하여 실무 프로젝트에 활용하는 것입니다.

• 전문성 강화: 최신 디자인 트렌드와 인터랙션 원칙을 학습하여 사용자 경험을 극대화하는 디자인을 구현합니다.
• 협업 역량 향상: 개발자와 원활하게 소통할 수 있도록 코딩 기초부터 심화까지 학습하여, 실제 구현 가능한 디자인을 만들어내고자 합니다.
• 체계적 디자인 프로세스: 기획부터 결과물 도출까지의 전 과정을 문서화하고 정리하여, 효율적이고 일관된 디자인 워크플로우를 구축하는 것을 목표로 합니다.

 

 

3. 디자인 시스템이란 

디자인 시스템은 브랜드의 일관된 아이덴티티와 사용자 경험을 유지하기 위해 만들어진 가이드라인과 재사용 가능한 디자인 컴포넌트들의 집합입니다.

• 핵심 요소: 컬러, 타이포그래피, 레이아웃, 아이콘, 버튼 등 각종 UI 요소 및 컴포넌트
• 목적: 디자인과 개발 간의 협업을 원활하게 하고, 다양한 플랫폼에서 일관된 디자인을 유지하며, 작업 효율성을 높이는 것
• 효과: 체계적인 디자인 관리와 빠른 프로토타이핑, 그리고 사용자 중심의 인터랙션 구현에 기여합니다.

 

예시

• 구글 머테리얼 디자인 (Material Design):
  물리적 세계에서 영감을 받아, 그림자, 깊이, 애니메이션을 활용하여 직관적이고 일관된 UI를 구현합니다.
• 애플 Human Interface Guidelines (HIG):
  iOS, macOS 등 애플 제품군의 사용자 경험을 위한 가이드라인으로, 미니멀하고 직관적인 디자인 원칙을 제시합니다.
• IBM Carbon Design System:
  복잡한 비즈니스 환경에 적합한 체계적인 UI 구성 요소와 패턴을 제공하며, 일관된 사용자 경험과 협업 효율성을 높입니다.
• 마이크로소프트 Fluent Design System:
  빛, 깊이, 움직임 등의 요소를 활용해 사용자 인터랙션에 생동감을 주며, 다양한 플랫폼에서 통일된 경험을 구현합니다.
• Atlassian Design Guidelines:
  Atlassian 제품의 일관성을 유지하며, 디자이너와 개발자 간의 협업을 원활하게 하는 체계적인 디자인 시스템입니다.
• Ant Design:
  주로 중국의 Ant Financial에서 개발한 React 기반 UI 라이브러리와 디자인 언어로, 빠른 프로토타이핑과 일관된 사용자 경험 제공에 중점을 둡니다.

 

 

하단의 예시들도 참고할 수 있습니다.

 

 

https://spotify.design/stories/design/design-systems

Stories

 

 

https://designsystem.line.me

LINE Design System

https://socarframe.socar.kr/8bb3aba4a/p/8246da-button

SOCAR FRAME · zeroheight

 

 

 

4. 디자인 시스템 예시 및 선정

여러 디자인 시스템 사례를 살펴보면서, 저는 구글의 Material Design이 가장 인상 깊었습니다. Material Design은 구글이 제시하는 시각적 언어와 인터랙션 원칙을 통해, 다양한 기기와 플랫폼에서 일관된 사용자 경험을 구현할 수 있도록 돕는 체계적인 디자인 시스템입니다.

 

5. Material Design 특징 요소 분석

선택 이유:

• 일관성과 확장성: Material Design은 명확한 가이드라인을 통해, 모바일, 웹, 데스크탑 등 다양한 환경에서도 통일된 디자인을 유지할 수 있도록 지원합니다.
• 모듈화된 컴포넌트: 재사용 가능한 UI 컴포넌트와 디자인 패턴을 제공하여, 디자인 작업의 효율성을 극대화하고 개발과의 협업에도 큰 도움이 됩니다.
• 세밀한 인터랙션 가이드라인: 사용자의 행동과 애니메이션 효과에 대한 구체적인 가이드가 포함되어 있어, 사용자 경험(UX)을 향상시키는 데 중요한 역할을 합니다.
• 시각적 명료성: 색상, 타이포그래피, 레이아웃 등 시각적 요소들이 조화를 이루어, 심미적이면서도 기능적인 디자인을 구현할 수 있도록 돕습니다.

Material Design은 단순한 시각적 디자인을 넘어, 사용자와의 상호작용 전반을 고려한 통합적인 접근 방식을 제공하기 때문에, 디자인 시스템의 모범 사례로서 매우 매력적이라고 생각합니다.

피그마 Variants 활용법

피그마 Variants란?
Variants 기능은 여러 컴포넌트의 상태(예: 기본, hover, active 등)를 하나의 그룹으로 묶어 관리할 수 있게 해주는 도구입니다. 이를 통해 디자인 시스템 내에서 반복적인 요소들을 보다 체계적으로 관리하고 재사용할 수 있습니다.

활용 방법:

• 상태 관리의 효율성:
  버튼, 토글, 입력 필드 등 다양한 UI 요소의 여러 상태를 하나의 컴포넌트로 통합해 관리함으로써, 디자이너와 개발자 모두에게 명확한 기준을 제공합니다.
• 일관된 디자인 유지:
  Variants를 활용하면 디자인 시스템 전반에서 동일한 스타일과 인터랙션 패턴을 쉽게 적용할 수 있어, 사용자 경험의 일관성을 높일 수 있습니다.
• 빠른 프로토타이핑 및 피드백:
  디자인 변경 사항이 필요할 때, Variants를 통해 빠르게 여러 상태를 수정할 수 있어 프로토타이핑과 사용자 테스트 과정에서 실시간 반영이 용이합니다.
• 협업의 가시성 향상:
  디자인 시스템 내에 Variants를 활용하면, 다른 팀원들이 각 컴포넌트의 다양한 상태와 기능을 쉽게 이해하고 구현할 수 있도록 돕습니다.

 

이와 같이 디자인 시스템을 통해 디자인의 일관성을 유지하고, 협업 및 실무 효율성을 높일 수 있습니다. 앞으로도 이러한 체계적인 접근 방식을 스터디와 실무에 적극적으로 적용하여, 보다 완성도 높은 디자인 결과물을 만들어내고자 합니다.