[TIL] 1011 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 3주차

6-10강

 

디자인 시스템

UI자체 뿐만이 아니라 UI의 규격, 스펙, 용례, 주의사항등에 대한 종합적인 제품 가이드라인

[이를 만들기 위한 필요역량]
- 만들고자 하는 제품 전체를 관통하는 통찰력, 집중력
- UI에 대한 깊은 이해: 확장성 있게, 코드 구조에 영향을 주지 않도록
- 코드에 대한 이해가 어느정도 필요
- 이를 플랫폼 디자이너라 함
- UI를 목적에 맞게 잘 설계하고 가이드라인을 만들어야 함
- 경력자가 제작해야 효율적 디자인 시스템이 만들어짐
* UI키트 수준이어도 무조건 나쁜건 아니다.
* 적은 인원에 소통이 원활한 조직은 오히려 문서화가 비효율적

팀과 제품의 발전 단계에 따라 UI가이드 or 디자인시스템 취사 선택할 것

[디자인 시스템의 장단점]

장점
1)디자인을 반복 사용, 시간과 비용 절감 -> 중요한 업무에 집중 가능
2)동일 품질의 제품 설계 가능 -> 팀 전체가 일관성 있게 일할 수 있음, 제품에 대한 신뢰도 상승

단점
1)시간 소요: 개발/기획자와의 합의 과정 필요.
2)실용성 결여될 수 있음: 필요/사용하는 것에 비해 과하게 많아짐. 업데이트에 시간 소요
3)새로운 디자인 기회 감소, 혁신 어려움: 새로운 아이디어, 다양한 UI제작에 소극적. 팀과 서비스가 경직될 우려

>즉, 시스템을 만든다면 어디까지 만들지 팀과 매우 신중하게 의논하는 과정 필요

---

 

디자인 시스템의 구성 요소와 원리

[아토믹 디자인 시스템]
원자가 모여 분자가 되듯, 요소들을 규칙대로 결합하여 유의미한 구성체가 된다는 의미에서 비롯된 것

[참고 레퍼런스]
■Google Meterial system
https://m3.material.io/

■Line design system
https://designsystem.line.me/LDSM
+UX라이팅에 대한 부분도 언급되어 있음

■밀리의 서재/ Millie Design Library
https://brunch.co.kr/@milliedesign/9
+피그마파일도 공개되어 있음

■세일즈포스/ Lightening Design system
https://www.lightningdesignsystem.com/

■Design system DB(일리야 그레벤)
https://designsystems.surf/

 

---

 

[UI의 분류(절대적이지는 X)]
1)액션(Action): 사용자가 중요한 행동을 수행할 때 사용-버튼
2)인풋(Input): 사용자의 입력을 받을 때 사용-텍스트필드, 드롭다운할 수 있는 셀렉트 박스
3)인포메이션(Information): 사용자에게 서비스의 상태나 안내사항을 전달 할 때-토스트 메세지, 스액바, 라벨
4)컨테이너: 컴포넌트 여러개가 결합된 하나의 덩어리-카드, 바텀시트, 리스트같은 복잡한 구조
5)네비게이션(Navigation): 사용자가 페이지 이동할 때 사용 - 네비게이션바, 앱 바, 화면 하단의 탭 바, 사이드 바 등
6)컨트롤(Control): 사용자가 설정이나 값을 수정할 때 사용 - 라디오, 체크박스, 스위치 등

[의사(Pseudo) 상태]
- 컴포넌트의 가상의 상태를 표시할 때 사용
- 가짜의, 가상의(Pseudo, 수도)상태라 함
- 버튼이 가진 가상의 상태를 나타내는 것
- 예를 들어, 마우스 오버 시 버튼의 컬러가 임시로 바뀌는 것

---

 

컴포넌트

: 컴포넌트를 공부할 때에는 모양이 아닌, 정의와 뜻에 집중해야 함
: 행동유도성(Affordance). 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 함. 

: 이렇게 행동을 유도하는 속성, 어포던스라 함
: Affordance에 기반하여, UI를 디자인할 때에는 심미적인 완성도 보다는 버튼의 목적을 우선 생각해서 설계해야 함

 

---

1.버튼 컴포넌트
- 컴포넌트 중 '액션'에 해당
- 누름으로서 주요 동작수행

- 4가지 구성요소

   (1)컨테이너(Container)
   :내부 요소를 감싸는 프레임
   :버튼 높이는 컨테이너 내 상하 여백+내부 요소 높이

   (2)라벨/레이블(Label)
   :버튼의 행동 안내
*UI에서 사용자가 입력하는 것을 텍스트, 사용자에게 안내하는 글을 레이블이라고 함

  (3)리딩 엘리먼트(Leading Element)
  : 라벨 앞에 붙는 요소(플러스 아이콘 같이)

  (4)트레일링 엘리먼트(Training Element)
  : 라벨 뒤에 붙는 요소(돋보기 아이콘 같이)

*LTR/RTL
일반적으로 좌->우(Left to Right)로 읽기 때문에 LTR이라면, 아랍 문화권에서는 RTL(Right to Left)이기 때문에, 상기 리딩과 트레일링의 개념은 문화권에 따라 기준이 달라짐.


- 버튼 종류
  1)Box button: 일반버튼, Solid button, Filled button
  2)Outline button: Ghost button, Empty button
  3)Split button: 한 버튼 내 여러버튼(텍스트+드롭다운 버튼)
  4)Text button: 배경색/테두리 없는 버튼(링크 버튼과 다름)

 

---

 

2.텍스트필드 컴포넌트

- 컴포넌트 중 '인풋'에 해당
- 사용자가 무언가 입력할 수 있게 하는 컴포넌트(텍스트 박스)

 

   (1)인풋 컨테이너

   : 글자를 입력하는 부분

 

   (2)라벨/레이블

   : 입력해야하는 값이 무엇인지 알려주는 텍스트

 

   (3)리딩/트레일링 엘리먼트

 

   (4)헬퍼 텍스트

   : 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

 

[Place holder(플레이스 홀더)]

:플레이스(Place)+홀더(Holder)의 합성어로, '자리표시자'를 뜻함

:생년월일 입력 텍스트 박스 내에 '예시)881003'으로 적힌 것과 같은 것

:사용자가 입력하기 시작하면 사라지고, 삭제하면 나타남

:입력값의 조건을 적지 말 것(비밀번호 제작시, '대문자 포함 8자 이상'과 같은 것)

:조건 대신 입력 예시만 넣을 것. 조건은 '헬퍼 텍스트'로 기재(텍스트박스 상하단에)

 

[Validation check(유효성 검사)]

: 사용자가 입력한 텍스트가 유효한지 검사해주는 것

: 예시)입력한 텍스트에 문제가 있으니 다시 확인해주세요

: 유효성 검사를 하는 이유

  - 구매/소통 과정 방해하는 요소 최소화(미리 언질)

  - 이를 통해 사용자가 앱 사용시 싫증 방지

  - 부정적인 언어를 사용하기 보다, 자연스럽게 차선책이나 해결책 제안

---

3. 컨트롤 컴포넌트

- 사용자가 선택할 수 있는 옵션을 제공하는 컴포넌트

- 체크박스, 라디오, 스위치(토글), 슬라이더

 

- 요소 설계시 주의할 점

  : 타 UI에 비해 크기가 매우 작아 터치가 어려움

  : 요소 자체는 작아도, 그 주변 최소 범위를 생성해줘야 함

  : 요소끼리의 줄간격이 넉넉해야함(다른 것을 선택하려다 같이 눌러짐)

  : 컨트롤 요소(체크박스, 라디오 등)+라벨의 높이값을 동일하게 해줘야 오토레이아웃 시 깔끔하게 묶임

 

- 체크박스: 여러선택지 중 1개 이상 선택할 때에 사용

- 라디오박스: 여러 선택지 중 1개'만' 선택할 때 사용

  (*미선택시에도, 사용자가 가장 많이 선택하는 선택값에 체크가 되어있어야 함)

 

---

 

UI의 기능주의적 관점

- 버튼의 생김새는 모두 다르지만 모두 버튼으로 인식함
- 버튼이 '하는 일' 기준으로 생각하기 때문에
- 따라서 UI공부 시, 형태가 아닌 UI의 목적과 기능에 초점을 둘 것!