디자인 가이드ㅣ스타일 가이드ㅣ디자인 시스템ㅣ호버ㅣ토글ㅣ글래스모피즘ㅣ인디케이터

호버(Hover)

피그마 디자인 도구에서 마우스를 요소 위로 움직일 때 나타나는 시각적 효과를 말한다

 

 

 

토글(Toggle)

버튼, 스위치 등의 UI 요소를 클릭하거나 터치하여 특정 기능을 켜거나 끌 때 사용되는 용어

 

 

 

글래스모피즘(Glassmorphism)

유리와 관련된 소재의 시각적 효과를 따라 하는 디자인 트렌드. 투명한 유리 판과 같은 효과를 내고 배경, 텍스트, 아이콘 등의 요소들이 유리 뒤로 흐르는 듯한 느낌이 난다.

 

 

 

인디케이터 (Indicator)

어떠한 상태, 위치, 조건을 나타내는 아이콘 또는 표시 요소

작업 진행 상태를 나타내는 프로그레스 바, 배터리 아이콘, 현재 페이지 위치를 표시하는 페이지 인디케이터 등

사용자에게 시스템의 상태나 작동 중인 기능에 대한 시각적 정보를 제공한다

 

 

 

디자인 가이드 (Design Guide)

프로젝트에 대한 규칙을 포함하는 문서

디자인 프로세스, 색상, 폰트, 레이아웃, 아이콘 및 기타 디자인 요소

일관된 디자인 유지 가능

프로젝트의 시각적 통일성 보장

디자인 팀과 다른 팀들과의 협업과 이해 촉진

 

 

 

스타일 가이드 (Style Guide)

시각적인 디자인 요소에 중점을 둔 문서

로고, 색상 팔레트, 폰트, 이미지 스타일 등의 시각적인 구성 요소

브랜드 또는 제품의 시각적인 일관성 유지

디자인 팀 및 개발자들이 동일한 시각적인 스타일 공유

 

 

 

디자인 시스템 (Design System)

디자인 가이드, 스타일 가이드, 컴포넌트, 패턴, 템플릿을 다루는 문서

제품이나 서비스의 일관된 디자인 보장

디자인 팀 및 개발자들 간의 협업에 도움

컴포넌트의 재사용, 개발과의 통합, 사용자 경험의 향상을 위한 지침 제공

전체적인 제품 또는 서비스의 일관된 경험을 제공

 

 

 

디자인 시스템의 장점

시간 단축과 효율성 향상

페이지와 채널 전반의 시각적 일관성 향상

동일된 언어 사용 촉진

더 복잡한 문제에 더 집중할 수 있음

기여자를 위한 참조 및 교육 도구로 활용

강력하고 시대를 초월한 브랜드에 기여

 

 

 

디자인 시스템 가이드 순서

1. 기존 디자인 프로세스를 철저히 분석한다

 

2. 브랜드 알파벳을 결정한다

 

3. UI 감사 수행 (불일치가 있는 영역 확인, 제품에서 제일 많이 사용되는 필수적 요소 확인)

 

4. 시스템 설계 원칙 수립 (무엇을 만들고 있는가? 만드는 이유는 무엇인가? 어떻게 구축할 것인가?)

 

5. 컴포넌트 라이브러리 빌드 (UI의 모든 기능 및 장식 요소가 포함되어야 한다) 구성을 짜는 단계

 

6. 규칙 설정

1) 엄격한 규칙 - 새로운 패턴이나 구성 요소를 도입할 때 엄격한 프로세스를 따른다

2) 느슨한 규칙 - 더 나은 디자인을 만들 수 있다고 생각하면 제약을 따르지 않고 제작할 수 있다

 

7. 거버넌스 모델 선택 (담당자 및 프로세스 하는 그룹을 명확하게 정하는 단계)

1) 단독 모델 - 개인 또는 개인 그룹이 디자인 시스템 프로세스를 직접 지배한다

2) 중앙 집중식 모델 - 한 팀이 담당하여 시스템의 벌전을 이끌고 있다

3) 연합 모델 - 여러 그룹의 여러 사람이 설계 프로세스를 주도한다

 

8. 컴포넌트 구조 정의 (성공적인 시스템 디자인은 재사용 가능성이 높기 때문에 재사용할 수 있게 만들기)

[재사용 가능한 구성 요소의 기준]

1) 모듈형 - 독립적인 구성 요소와 상호 교환 가능한 요소

2) 컴포저블 - 기존  컴포넌트를 융합하여 새로운 컴포넌트를 생성한다

3) 사용자 지정 가능 - 다양한 컴텍스트에서 작동하는 지정 가능한 구성 요소이다

 

9. 모든 팀이 통일된 언어를 사용해야 한다

 

10. 정기적으로 변경 사항을 전달해야한다

 

 

[Uber의 디자인 시스템 주요 속성]

브랜드 아키텍처 / 구성 / 목소리 톤 / 모션 / 일러스트레이션 / 사진 / 도상학 / 색상 / 로고 / 타이포그래피