디자인 시스템에 대해 알아봅니다.
▶디자인 시스템이란
- 다양한 페이지와 채널을 걸쳐 공통의 언어와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써 규모에 맞게 디자인을 관리하기 위한 표준 집합.
- 구성원 모두가 서비스를 일관적으로 관리할 수 있음.
▶디자인 시스템의 장점
1. Efficiency 효율성 확보
- 재사용이 가능한 컴포넌트로 시간을 단축.
2. UX Consistency 일관성 있는 사용자 경험
- ex) 맥북, 아이폰, 아이패드 어디에서든 일관성 있는 UI
3. Design at Scale 다양한 제품에 대응
- 웹뷰, 모바일뷰, 탭뷰 -> 효율성+일과성 확보
반응형
- 화면 크기가 변경될 때 컨텐츠와 레이아웃이 그 크기에 맞춰 유동적으로 조정되는 디자인.
- 이미지 크기가 뷰포트(브라우저에서 화면이 보이는 공간) 크기에 따라 조정된다.
- CSS 미디어 쿼리를 사용하여 특정 뷰포트 크기에 맞는 스타일을 적용.
적응형
- 여러 개의 고정된 레이아웃 크기를 기준으로 사용자의 화면 크기에 따라 가장 적합한 레이아웃을 보여준다.
- 미리 정해진 몇 가지 화면 크기에 맞는 고정된 레이아웃 지정.
- 화면이 작아져도 정해진 크기가 아니라면 요소가 잘리고 레이아웃이 바뀌지 않는다.
- 사용자의 장치나 브라우저를 감지하여 그에 맞는 레이아웃을 로드.
4. Collaboration 협업에 기여
- 구성원들이 모두 디자인 시스템을 확인하여 지식 격차를 줄일 수 있음
▶좋은 디자인 시스템
- 발전하고 진화함; 디자인 시스템은 완성되는 것이 아님.
- 공통의 목적과 가치를 지님; 디자인 시스템은 이를 이용하는 구성원가 팀에게 목적과 가치가 공유되는 것이 가장 우선시 되는 일.
▶디자인 시스템의 요소
1. 컬러
- 디자인 시스템의 기본 구성 요소
✔️접근성 ✔️충분한 대비 ✔️메인 컬러 정의 ✔️보조 컬러 정의 ✔️정보를 담은 색상 ✔️색채명 지정
2. 타이포그래피
- 브랜드를 만들 때 중점 두어야 할 시각적 요소
✔️서체(폰트) ✔️규모와 크기 ✔️글꼴 크기/두께 이름 정의 ✔️행간/자간 ✔️폰트 스타일, rem과 px, 색상, 접근성...
3. 아이콘
- 대상의 특징을 강조해 만드는 기호
- 개성을 부여하기 쉽고, 보편적으로 이해할 수 있음
✔️이해용이성(제일중요! 직관적으로 알 수 있게!) ✔️파일 종류 ✔️스타일 ✔️그리드 ✔️디테일
4. 컴포넌트
- 재사용 가능한 독립된 조각
- 독립된 컴포넌트들을 조합하여 페이지 구성
✔️아코디언 ✔️카드 ✔️뱃지 ✔️배너 ✔️버튼 ✔️칩 ✔️드롭다운 ✔️라벨 ✔️리스트 ✔️네비게이션 ✔️슬라이드 ✔️탭 ✔️텍스트필드 ✔️썸네일
5. 네이밍 규칙
- 컬러, 타이포그래피, 아이콘 등에 일정한 규칙을 정하여 상호 소통 시 헷갈리지 않고 정확한 작업이 가능하도록 함
✔️통일성 ✔️범용성(어디서든 사용 가능) ✔️사이즈 수정이 용이함
난 🥬