피그마 활용법(2)_1주차 정리

[수업 목표]

• 팝업과 모달을 이해합니다.
• 다이얼로그 컴포넌트를 만들면서 구조와 기능을 이해합니다.
• 컨트롤 요소들을 살펴보고, 체크박스와 라디오의 차이를 이해합니다.
• 지금까지 배운 컴포넌트 지식 및 기술을 활용해 디자인을 설계합니다.

---

01 컨테이너 컴포넌트와 모달
-컴포넌트 종류 중 컨테이너 컴포넌트
-굉장히 자주 사용할 ‘모달' UI개념에 대해 / 라이트박스
02 다이얼로그 컴포넌트
-다이얼로그 사용 시기(언제 써야 하는지) / 다이얼로그 직접 만들기
03 체크박스와 라디오
-언제 쓰는지, 무엇인지 / 두가지의 차이, 유의사항
04 UI키트 완성하기
-나만의 UI키트 와성함을 되돌아보기

1.모달
-합성 컴포넌트와 컨테이너 컴포넌트 : 컴포넌트+컴포넌트=컴포넌트(합성 컴포넌트)
(바텀시트, 다이얼로그, 리스트, 카드 등)
-모달(Modal) : 화면 위에 새로운 화면이 등장(팝업)
  • 윈도우 팝업 : 새로운 브라우저창을 띄움(모바일 앱에서는 불-도태)
  • 레이어 팝업 : 현재 화면 위에 가상의 레이어층을 올려줌(컴포넌트)
  • 모달의 개념 : (UI의 속성)사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것
  • 모달의 종류 : 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI
-라이트박스의 UX
  • 개념 : 스크림(Scrim;천.장막), 딤드(Dimmed;흐려짐), 딤레이어(DimLayer), 오버레이(Overlay)
  • 반 투명 층을 라이트박스(Lightbox) - 카메라 암실에서 가져온 표현
-모달 사용 시 주의사항 : 사용자를 방해 할 만큼 중요한 부분에만 사용

2.다이얼로그 컴포넌트
-다이얼로그(Dialog)의 뜻은 대화(Conversation) 대화 그 자체
  • 컨테이너-감싸고있는 껍데기
  • 헤더 - 제목, 부가설명 등 (썸네일, 아이콘, 닫기 버튼 등 들어갈 수 있음)
  • 액션 - 닫기 버튼
- 유의 사항 :
  ① 사용자가 A또는 B를 선택 / 사용자에게 경고 또는 확인 등을 표시(얼럿;Alert)
  ② 다이얼로그의 경우 라이트박스를 누르면 취소 또는 닫기를 누른 것과 비슷
  ③ 반면에, 얼럿의 경우에는 사용자가 반드시 알아야 하는 중요한 서비스 상태와 관련이 깊기 때문에 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러야 닫힘.
  ④ 사용자 흐름에서 필수로 거쳐야 할 때 사용
-다이얼로그 만들기

3. 컨트롤 요소 이해
- 컨트롤 컴포넌트의 뜻 : 여러가지 선택지 중 사용자가 선택할 수 있도록 하는 요소
- 종류 : 체크박스, 라디오, 스위치(토글), 슬라이더

 

4. 체크박스 컴포넌트
- 정의 : 여러 선택지 중 원하는 선택지 1개 이상 선택 할 때, 일반적으로 라벨과 같이 쓰임
- 의사 상태 : 2가지 상태 (체크 됨/ 체크 되지 않음)
- 특징 : 여러개를 선택 할 수 있음, 다른 선택지에 영향을 주지 않음, 0개 선택이 가능, 하위에서 일부만 선택 가능
- 기본 형태 만들기

5. 라디오 컴포넌트
- 정의 : 여러 선택지 중에 1개를 선택 할 때/ 라벨과 함께 쓰임
- 의사 상태 : 2가지 (선택 됨 / 선택 되지 않음)
- 특징 : 여러개를 동시에 선택 할 수 없음, 선택하면 다른 선택지에 영향 줌, 선택 해제가 불가능
사용자가 많이 선택하는 항목을 기본값으로 해두면 사용자 입장에서 편리
- 라디오 만들기

5. 컴포넌트 복습하기
(1) 컴포넌트
 • 개념 :
    ① 컴포넌트는 파운데이션을 조합
    ② 컴포넌트를 조합해서 또 다른 컴포넌트를 만들 수도 있음
    ③ 형태보다는 기능과 목적에 더 초점
  • 종류 :
    ① 6가지 종류(행동, 인풋, 인포메이션, 컨테이너, 내비게이션, 컨트롤)
    ② 디자인 시스템마다 종류와 이름은 모두 다를 수 있음
(2) 버튼 컴포넌트
  • 버튼 컴포넌트는 사용자의 행동을 실행하는 컴포넌트
  • 행동유도성 = 버튼을 버튼 답게
(3) 텍스트필드 컴포넌트
  • 사용자가 문자를 입력할 수 있는 컴포넌트
  • 유효성 검증 = 입력된 텍스트가 맞는지 확인하는 것
(4) 다이얼로그 컴포넌트
  • 제품 흐름에서 중요한 선택을 하게 해주는 컴포넌트
  • 모달 속성
  • 라이트박스와 함께 사용하는 것이 일반적
(5) 체크박스와 라디오 컴포넌트
  • 사용자가 다수 선택지 중에 원하는 것을 선택
  • 체크박스는 여러개를, 라디오는 하나만 선택
  • 형태와 기능이 유사하기 때문에, 차이를 명확하게 알아야 함