💡 25-05-13 (화)
열심히 하는 것도 중요하지만 그보다 더 중요한 것이 있다
바로 자신을 믿는 것
디자인 시스템
= 도구상자 (아이콘, 색상, 버튼, 자주 사용하는 요소, 가이드 라인 포함)
= 레고 블록 세트
-> 레고 블록(컴포넌트)을 조립해서 모든 것을 만들 수 있듯이 디자인 시스템의 요소들을 조합해서 다양한 화면을 만들 수 있다
▶️ 블록이 미리 정해져 있으니까 누가 만들어도 비슷한 느낌이 나고 빠른 조립 가능
🗣️ 버튼은 어떤 색으로 할까?
🗣️ 글씨는 어느 크기로?
🗣️ 간격은 얼마나?
→ 고민을 덜어주고 빠르고 효율적으로 디자인 할 수 있게끔 도와준다
▶️ 체계적인 구조 디자인 시스템을 통해 더 빠르고 효율적으로 디자인 결정을 내리며 프로젝트의 일관성을 유지할 수 있다
디자인 시스템 예시
💡 라인 디자인 시스템
https://designsystem.line.me/
💡 지마켓 디자인 시스템
https://gds.gmarket.co.kr/
💡 카본 디자인 시스템
https://carbondesignsystem.com/
💡 Atalassian 디자인 시스템
https://atlassian.design/
▶︎ 협업할때 사용하는 사이트
Confluence, Jira
디자인 시스템의 구조
기업마다 추구하는 가치와 제품, 서비스에 따라 다양한 구조를 가진다
일반적으로 개요, 파운데이션, 컴포넌트, 패턴,기타 등으로 구성되어있다
-> 무조건 5가지 요소가 다 들어가야 하는건 아님!
▶️ Foundations (기초요소)
: 디자인의 기본 언어, 브랜드의 정체성과 감성을 결정짓는 요소들
▪️ Breakpoints : 화면 크기가 달라질 때 레이아웃이나 스타일이 바뀌는 기준 지점
-> 변화가 일어나는 구간으로 생각하면 됨
▶️ Components (컴포넌트)
: 기초 요소를 조합해 만들어진 재사용 가능한 UI 단위
▪️ Input : 사용자가 텍스트나 정보를 입력할 수 있는 영역
-> 로그인, 회원가입, 검색창
▪️ Checkbox : 사용자가 하나 이상의 항목을 선택하거나 동의할 수 있게 해주는 작은 정사각형 입력 UI
▪️ Select : 여러 옵션 중에서 하나(또는 일부)를 고를 수 있게 해주는 드롭다운 형식의 입력 UI
-> 항공권 예매 시 출발지 / 도착지 선택, 쇼핑몰 사이즈 선택
▪️ 토스트 : 사용자가 어떤 작업을 했을 때 작게 잠깐 나타나는 알림 메시지이다
-> 화면 하단이나 상단에 자동으로 뜨고 사라짐
▪️ 모달 : 화면 중앙에 뜨는 팝업 창으로 사용자가 작업을 완료하거나 닫을 때까지 다른 걸 못 하게 막는 형태이다
▶️ Patterns (패턴)
: 여러 컴포넌트를 조합해서 만든 사용자 흐름 중심의 디자인
▪️ 두 가지 상태를 왔다 갔다 전환하는 동작이나 UI 요소 (켜기/끄기)
UX 문제 해결을 위한 구조화된 설계 방식, 사용자 흐름에 맞는 구성의 모범 사례를 제공한다
▶️ Templates (템플릿)
: 전체 페이지나 섹션의 구조를 뜻한다 = 자리배치 틀
제품의 UX 흐름을 시각적으로 구성할 때 사용한다 (디자인 X, 구성요소들 위치만 표시)
▶️ Style Guidelines (스타일 가이드라인)
: Foundation을 중심으로 전체 스타일을 설명하는 문서
-> 실무에서 쉽게 쓰기 위한 종합적인 메뉴얼
▶︎ 사용자의 입장, 브랜드 성격, 접근성, UX 원칙이 포함 되어있다
1~4와 같은 계열이 아니라는 점 알아두기
스타일 가이드
: Foundations을 어떻게 사용해야 하는지 알려주는 가이드라인 문서
-> 제품의 고유한 모양과 느낌
▶︎ 색깔을 내가 어떻게 써야 하는지
▶︎ 아이콘을 어디에 사용해야 하는지
▶︎ 구조를 어떻게 쓸지
▶️ 스타일 가이드는 디자인 시스템의 일부로서 제품에 사용하는 시각적 언어의 표준을 정의한 문서이기 때문에 디자이너와 개발자에게 유용한 자료로 사용된다
💡 라인 디자인 시스템 / 스타일 가이드 / 색상
https://designsystem.line.me/
💡 Skyscanner Backpack 디자인 시스템 / 스타일 가이드 / 아이콘 https://www.skyscanner.design/latest/components/icon/overview-GqEdq0zt
💡 에어비엔비 디자인 시스템 / 스타일 가이드 / 타이포그래피
https://airbnb.design/cereal/
💡 우버 디자인 시스템 / 스타일 가이드 / 컴포넌트
https://baseweb.design/components/
💡 카본 디자인 시스템 / 스타일 가이드 / 패턴
https://carbondesignsystem.com/patterns/dialog-pattern/
✏️ 버튼 - 베리언트 컴포넌트 세트로 만들어보기
▶︎ 스타일을 다 정의해놓고 create component set을 통해 한번에 베리언트 해준 다음 속성을 적용하는 방식
설계구조를 잘 짜는게 중요하다 ⭐️ (경우의 수 생각하기)
두가지 옵션이면 true/false, on/off
두가지 이상 옵션일 경우 드롭다운이 편리함
✏️ 스타벅스 환경설정 화면 - 컴포넌트 프로퍼티 속성 적용하기
베리언트 하기 전 아이콘들은 모두 컴포넌트화 하는거 잊지말기
Nested Instance : 컴포넌트 안에 또 다른 컴포넌트 인스턴스를 넣은 것
▶︎ 이미 만들어둔 컴포넌트를 나중에 다른 컴포넌트 안에 넣어서 재활용할 수 있게 해주는 기능
boolean(보임/안보임)은 무조건 appearance에서 설정 ‼️
