[TIL] AI 디자이너 베이스 캠프 D-8

피그마 강의 3-6~3-8(이론까지)

 

디자인 시스템의 이해

 

디자인시스템이 필요한 이유

• 웹,앱 이라는 제품(프로덕트)을 제작하는데 디자이너와 개발자, 기획자 모두의 의견이 필요하고, 사용자들의 편의에 따라 수정되어야 하는 경우가 생긴다.  즉, 혼자 프로덕트를 제작하는게 아니기 때문에 UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고 개발자도 같은 생각을 해야한다.  그래서 기본 디자인 틀! 같은 시스템이 필요한 것

디자인 시스템의 목적

• 반복적으로 사용하는 UI를 효율적으로 관리
• 팀전체가 같은 수준으로 이해할 수 있도록 관리

디자인시스템의 장/단점

[장점]

• 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어든다. (효율성UP)
• 누가 만들어도 동일한 품질의 제품을 설계할 수 있다.(품질, 신뢰도 UP)

[단점]

• 다양한 형태의 UI를 모아 하나로 모아 하나로 통일하는 과정이 어렵다.(과한 논의로 오히려 효율성DOWN)
• 필요한 건 몇개 없는데 그에 비해 UI가 과하게 많아질 수 있다. (유지보수비용UP)
• 새로운 디자인이 필요할 때 디자인 시스템을 활용하려다 보니 혁신이 줄어든다. (창의성,독창성DOWN)

---

디자인 참고 링크

 

https://m3.material.io/

Material Design

https://designsystem.line.me/LDSM

LINE Design System for Messenger

https://brunch.co.kr/@milliedesign/9

millie Design Library 2.0

https://www.lightningdesignsystem.com/2e1ef8501

Lightning Design System 2

 

 

https://designsystems.surf/

Design Systems Database & Gallery

 

최신 디자인 시스템을 계속해서 업데이트해서 습득할 수 있도록 해야한다.

---

UI디자인 기본

 

UI의 분류

• 액션(Action) : 사용자가 중요한 행동을 수행할 때 사용 / 버튼 등
• 인풋(Input) : 사용자의 입력을 받을 때 사용 / 텍스트 필드(글자입력란), 셀렉트 박스 
• 인포메이션(Information) : 정보 전달 알림 서비스 / 토스트 메시지, 스낵바, 라벨 등
• 컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트. / 카드, 바텀시트, 리스트 
• 내비게이션(Navigation) : 사용자가 페이지를 이동할때 사용 / 네비게이션바, 상단 앱 바, 하단의 탭 바, 사이드 바
• 컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용 / 라디오, 체크박스, 스위치 등

의사 상태 (Pseudo State)

Pseudo 는 가짜의, 가상의 뜻으로. 컴포넌트의 가상의 상태를 표시할 때 사용

ex) 버튼에 마우스를 올렸을 때 색깔이 바뀌는 것, 실제로 버튼이 눌린 것도 아니고, 다른 걸로 바뀐것이 아님.

 

---

UI만들기 실습(1)

버튼 컴포넌트 : '누름'의 동작을 수행하는 요소

버튼을 봤을 때 누가봐도 이건 '누르는 것' 이라는 행동을 유도하는 행동 유도성(Affordance)이 꼭 필요하다. 

 

버튼의 구조

• 컨테이너(Container) : 내부 요소를 감싸고 있는프레임
• 라벨/레이블(Label) : 버튼의 행동을 안내하는 글자(텍스트)
• 리딩엘리먼트(Leading Element) : 버튼 라벨보다 앞쪽에 있는 요소
• 트레일엘리먼트(Trailing Elemnet) :버튼 라벨보다 뒤쪽에 있는 요소

*우리나라는 LTR(Left To Right)로 읽는 문화권이라서, 왼쪽에있는게 리딩 엘리먼트임.

 

버튼의 종류

1. 박스버튼, 일반버튼 : 색상이 꽉찬 솔리드 버튼
2. 아웃라인버튼,고스트버튼 엠티버튼 : 내부 컬러가 없는 테두리(Outline)만 있는 속이 빈 버튼
3. 스플릿 버튼 : 주요액션과 보조액션을 제공해야할때 사용하는 버튼, 누르면 하부 메뉴가 나오는 버튼.
4. 텍스트 버튼 : 배경색이나 테두리 없이 글자로만 이루어진 버튼, 일반적으로 별로 중요하지 않은 기능을 수행할 때 쓴다.

---

[오늘의 느낀점]

디자인 시스템의 개념을 파악하고, UI제작에 있어 실질적으로 사용하는 다양한 버튼들과 버튼의 목적 및 기능들을 살펴볼 수 있어서 좋았다.

실습에 익숙해 질 수 있도록 이론도 잘 익혀놓아야 겠다.