사전캠프

[내일배움캠프] UX/UI4기 사전캠프 5일차 : 컴포넌트 만들기

늘늘이야 2024. 4. 30. 23:48

✍️ 컴포넌트가 무엇인지 이해하기

: 사용자 인터페이스를 만들기 위한 대화형 구성 요소.

: 목적에 따라 작업, 격리, 통신, 탐색, 선택, 텍스트 입력 등의 범주로 구성할 수 있음.

 

📍Actions

: 사람들이 목표를 달성하는 데 도움이 됨

 

1. Common Buttons (공통버튼) : UI에서 대부분의 작업을 프롬프트함.

  • 선택적 선행 아이콘을 포함할 수 있음
  • 5가지 유형 : 상승, 채우기, 채우기 색조, 윤곽선, 텍스트. 
  • 컨테이너의 모서리는 완전히 둥글고 라벨 텍스트에 맞을 정도로 넓음.

  1. Elevated button (상승)
  2. Filled button (채우기)
  3. Tonal button (채우기 색조)
  4. Outlined button (윤곽선)
  5. Text button (텍스트)

2. Extended FAB : 기본 작업을 수행하는 데 도움이됨.

  • 화면에서 가장 일반적, 중요한 작업에 사용
  • 아이콘과 텍스트가 모두 포함
  • 가장 눈에 띄는 버튼
  • 일반 FAB이 명확하지 않을 수 있는 경우 사용

  1. Extended FAB with both icon and label text (아이콘과 레이블 텍스트를 모두 포함한 확장 FAB)
  2. Extended FAB with icon (아이콘 없이 확장 FAB)

3. Floating action buttons : 기본 작업을 수행하는 데 도움이 됨.

  • 화면에서 가장 일반적, 중요한 작업에 사용
  • FAB의 아이콘이 명확하고 이해하기 쉬운지 확인
  • 콘텐츠가 스크롤될 때 화면에 FAB가 유지됨
  • 3가지 크기 : FAB, Small FAB, Large FAB

  1. FAB
  2. Small FAB
  3. Large FAB

4. lcon buttons : 탭 한 번으로 사소한 작업을 수행할 수 있음.

  • 아이콘 버튼은 명확한 아이콘을 사용해야 함
  • 2가지 유형 : 표준, 포함
  • 마우스를 올리면 버튼의 동작을 설명하는 도구 설명이 표시됨 (아이콘 이름 아님)
  • 선택되지 않은 상태 : 윤곽선 스타일 아이콘
  • 선택한 상태 : 채워진 스타일 아이콘

  1. Standard icon button (표준 아이콘 버튼)
  2. Contained icon button (including filled, filled tonal, and outlined styles) (포함된 아이콘 버튼(채움, 채움 톤 및 윤곽선 스타일 포함)

5. Segmented button : 옵션을 선택하고, 보기를 전환하고, 요소를 정렬하는 데 도움이 됨

  • 아이콘, 레이블 텍스트 또는 둘 다 포함할 수있음
  • 2가지 유형 : 단일 선택, 다중 선택
  • 2~5개 항목 사이의 간단한 선택에 사용 (항목이 많거나 복잡한 항목은 칩을 사용)

  1. Single-select segmented button (단일 선택)
  2. Multi-select segmented button (다중 선택)

 

📍Communication

: 통신 구성 요소는 유용한 정보를 제공함.

 

1. Badges (뱃지) : 탐색 항목 및 아이콘에 대한 알림, 개수 또는 상태 정보를 표시함.

  • 라벨이나 숫자를 포함할 . 수있음
  • 2가지 유형 : 소형, 대형
  • 아이콘 경계 상자 내부의 앵커 배지(아이콘 위쪽 끝 부분)
  • 콘텐츠를 '+'를 포함하여 4자로 제한함.
  • 기본 색상 매핑 유지

  1. Small badge (on a navigation item) 작은 배지(항법 항목에 있음)
  2. Large badge (on a navigation item) 대형 배지(항법 항목에 있음)
  3. Large badge with max characters (on a navigation item) 최대 문자가 포함된 대형 배지(내비게이션 항목)

2. Progress indicators (진행률 표시기) : 프로세스 상태를 실시간으로 보여줌.

  • 2가지 구성 : 선형, 원형
  • 모든 인스턴스(로드 등)에 동일한 구성을 사용
  • 절대로 장식용으로 사용하지 말 것
  • 모션을 통해 시선을 끌 것
  • 참고 : 새로운 스타일은 현재 MDC-Android에서만 사용할 수 있음

  1. Linear progress indicator (선형진행표시기)
  2. Circular progress indicator (원형진행표시기)

3. Snackbar (스낵바) : 화면 하단에 앱 프로세스에 대한 짧은 업데이트를 표시함.

  • 사용자 경험을 방해해서는 안됨
  • 일반적으로 UI 하단에 표시됨
  • 저절로 사라지거나 사용자가 조치를 취할 때까지 화면에 남아 있을 수 있음

 

4. Tooltips (툴팁) : 도구 설명에는 간략한 레이블이나 메시지가 표시됨

  • 도구 설명을 사용하여 버튼이나 기타 UI 요소에 추가 컨텍스트를 추가할 것
  • 2가지 유형 : 플레인, 리치
  • 아이콘 버튼의 요소나 동작을 설명하려면 일반 도구 설명을 사용할 것
  • 풍부한 도구 설명을 사용하여 기능의 가치 설명과 같은 추가 세부정보 제공
  • 풍부한 도구 설명에는 선택적 제목, 링크 및버튼이 포함될 수있음.

  1. Plain tooltip (플레인 툴팁)
  2. Rich tooltip (리치 툴팁)

📍Containment

: 버튼, 메뉴, 칩과 같은 기타 구성 요소를 포함하여 정보와 작업이 포함됨.

 

1. Bottom sheets (하단 시트) : 화면 하단에 고정된 보조 콘텐츠가 표시됨

  • 소형 및 중형 창 크기에서는 하단 시트를 사용할 것
  • 2가지 유형 : 표준, 모달
  • 콘텐츠는 추가적이나 보조적이어야 함 (앱의 주요 콘텐츠가 아님)
  • 기본 콘텐츠와 상호작용하기 위해 하단 시트를 닫을 수 있음.

  1. Standard bottom sheet (표준 하단 시트)
  2. Modal bottom sheet (모달 하단 시트)

2. Cards (카드) : 단일 주제에 대한 콘텐츠와 작업이 표시됨

  • 관련 요소를 포함하려면 카드를 사용할 것
  • 3가지 유형 : 상승형, 채워짐, 윤곽선
  • 콘텐츠에는 이미지부터 헤드라인, 지원 텍스트, 버튼, 목록 등 무엇이든 포함될 수 있음
  • 다른 구성 요소도 포함 가능
  • 내용에 따라 유연한 레이아웃 크기 가능

  1. Elevated card (상승형)
  2. Filled card (채워짐)
  3. Outlined card (윤곽선)

3. Carousel (회전목마) : 화면 안팎으로 스크롤할 수 있는 항목 모음을 표시

   

 

📍Navigation

📍Selection

📍Text inputs

오늘은 1주차부터 밀린 강의를 몰아 듣고, 정리하느라

데일리 미션 진도가 많이 안나갔다 ㅠㅠ

내일 이어서 마무리하는 걸로 하고~!

 

사전캠프 루틴에 최대한 맞춰서 따라가려고 했는데

하다 보니 1주차 화요일 개인과제를 깜빡했다 🤭

나중에 이어서 추가해야지~~

 

12시전에 아슬아슬 TIL 제출했다ㅎ

오늘도 알찬 하루였어 !!

피그마 너무 재밋는거 아니야 !!

아직은 좀 버벅이는 데 내가 강의 들으면서

정리한 부분 보면서 이것 저것 해보니 적용이 된다..!! 신기

24/4/30

글을 새로 만드려다가 한 페이지에 정리하는 게 좋을 것 같아서.. 일단 몰아 넣기..

익숙하지 않은 피그마로 하나씩 예제를 그리면서 하니깐 시간이 좀 걸린다 ^^,,

오늘 아티클 스터디 과제도 이미 제출했고~

느리더라도 조금씩 다 직접 만들어봐야지 !!ㅎㅎ

24/05/02