[Figma] 피그마 활용_디자인 시스템

#1 Goals

 ▼ 학습 목표

• 팝업과 모달을 이해
• 다이얼로그 컴포넌트를 만들고 그 그조와 기능을 이해
• 컨트롤 요소들을 살피고 체크박스와 라디오의 차이 이해
• 컴포넌트 지식 및 기술 활용해 디자인을 설계

 

#2 Learning Content

 1. 컴포넌트

  ❑ 합성 컴포넌트와 컨테이너 컴포넌트

• 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또느 ㄴ컴포넌트가 여러개 합쳐진 형태
• 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 존재

 

2. 모달 UI

  ❑ 팝업

• 팝업 : 팝하고 튀어나온다는 의미로 UI에서는 현재 화면 위에 새로운 화면을 띄우는 것
  • 윈도우 팝업 : 인터넷 창을 하나 더 띄우는 방법인데, 보안상에 이유로 현재는 잘 사용하지 않음
    -> 새로운 인터넷 창이 뜨기 때문에 사용자 입장에서는 매우 불편.
  • 레이어 팝업 : 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식
    -> 새로운 창을 띄우는 것이 아니라, 현재 화면에서 컴포넌트로 만든 레이어(층)을 하나 더 보여주는 개념
• 모달 : 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻함
  모달(modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나
  
  
• 라이트박스 : 모달 UI 팝업 시, 뒤에 가려진 화면은 사용할 수 없다는 걸 보여주기 위한 반투명한 층
  * 라이트박스는 사용자에게 모달과 배경을 명확하게 분리해주고 집중해야 하는 부분을 안내하기 위한 목적(반드시 사용은 아님)
  * 라이트박스 빈 공간을 누른다는 것은 해당 UI에서 뒤로가기(or 취소하기)
  ◈ 라이트박스는 사용자의 자연스러운 흐름을 방해하는 셈이고, 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점에 사용해야 하는 것이 모달이다.

 

3. 다이얼로그 컴포넌트의 정의

  ❑ 정의

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
• 컨테이너 컴포넌트이면서, 동시에 모달 속성을 가진 컴포넌트

  ❑ 다이얼로그의 구조

• 컨테이너(Container)
  - 다이얼로그 안에 있는 요소들을 감싸고 있는 프레임을 뜻함
• 헤더(Header)
  - 다이얼로그의 제목, 부가설명 등이 들어간 제목
• 액션(Action)
  - 사용자의 액션을 요하는 것을 뜻함 (인터랙션)

 

4. 컨트롤 요소

  ❑ 컨트롤 컴포넌트의 뜻

• 컨트롤 컴포넌트는 사용자가 선택지를 특정할 수 있도록 하는 요소
• 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소

  ❑ 체크박스 컴포넌트

• 체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트
• 체크박스는 여러개 선택할 수 있고 아무것도 선택하지 않을 수 있다.

  ❑ 라디오 컴포넌트

• 여러 선택지 중 무조건 1개를 선택할 때 사용하는 컨트롤 컴포넌트
• 라디오는 여러개를 동시에 선택할 수 없다.