Dialog, Tab, Navigation Bar, Checkbox, Radio Button, Text Field 만들기 실습

[사전캠프_9/8]

• 퀘스트_컴포넌트 만들기_Containment: 카드(Card), 다이얼로그(Dialog)
• 퀘스트_컴포넌트 만들기_Navigation: 탭(Tab), 네비게이션 바(Nacigation Bar)
• 퀘스트_컴포넌트 만들기_Selection: 체크박스(Checkbox), 라디오 버튼(Radio Button)
• 퀘스트_컴포넌트 만들기_Text inputs: 텍스트 필드(Text Field), 검색 바(Search Bar)

​

​

컴포넌트 만들기_Containment: ​​카드(Card), 다이얼로그(Dialog)

출처) Material Design

https://m3.material.io/components/dialogs/overview

Dialogs – Material Design 3

 

• 다이얼로그(Dialog)
  • 대화상자로써 앱 컨텐츠 앞에 나타나 중요한 정보를 제공하거나 결정을 요청하는 창
  • 다이얼로그가 나타나면 앱의 모든 기능이 비활성화되며, 확인, 해제 또는 필요한 작업이 수행될 때까지 화면에 남아 있음
  • 중요한 정보에 대해서만 다이얼로그를 사용. 중요도가 낮거나 중간 수준의 정보는 스낵바를 사용함

​

• • Basic dialog와 Full-screen dialog

​

• • 다이얼로그는 가장 눈에 띄는 요소여야 한다.
  • 다이얼로그 뒤에 스크림을 추가하여 가시성을 높일 수 있다.
  • 스크림은 다이얼로그 동작이 완료될 때까지 다른 컨텐츠가 선택되지 않도록 한다

​

• Dialog 만들기 실습
  • 컴포넌트의 크기가 변해도 그에 대응하여 타이틀은 왼쪽 상단에, 체크 리스트는 중앙에, 버튼은 오른쪽 하단에 위치할 수 있도록 리사이징을 설정하며 실습하였다.

​

• Dialog 실습 완료

​

​

컴포넌트 만들기_Navigation: 탭(Tab), 네비게이션 바(Nacigation Bar)

출처)

https://m3.material.io/components/tabs/overview

Tabs – Material Design 3

https://m3.material.io/components/navigation-bar/overview

Navigation bar – Material Design 3

 

• 탭(Tab)
  • 탭은 동일한 계층 구조에 있는 관련 컨텐츠 그룹을 구성한다.

​

• • 1: 컨테이너 / 2: 배지(선택사항) / 3: 아이콘(선택사항) / 4: 라벨 / 5: 분할기 / 6: 활성 표시기

​

• • 기본탭과 보조탭

• • • 보조탭은 사용자가 더 자세한 정보를 얻을 수 있도록 다른 컨텐츠 내에 위치함

​

• • 활성표시기에 모서리 반경이 둥글다. 이러한 디테일이 들어갈 수도 있음.
  • 밑줄과 색상 변경으로 활성 탭과 비활성 탭을 구분

​

• • 탭은 일반적으로 4개까지 허용 됨. 5개 이상이면 비좁아 짐.

​

• Tab 만들기 실습
  • 각 탭마다 활성화 된 표시화면으로 만들어 두고 레이어 페널에서 활성표시기를 키거나 꺼두고, 색을 바꾸는 것으로 활성 상태를 변경할 수 있도록 해둠

​

• Tab 실습 완료

​

​

• 네비게이션 바(Navigation Bar)
  • 네비게이션 바를 통해 3~5개의 목적지에 접근할 수 있다.
  • 네비게이션 바는 사용자가 편리하게 접근할 수 있도록 창 하단에 위치한다.
  • 목적지는 아이콘과 레이블 텍스트를 표시된다.
  • 네비게이션 바 중 하나의 목적지는 항상 활성화되어 있다.

​

• • 일반적으로 모바일에선 수직 항목, 태블릿에선 수평 항목으로 배치되어 있다.

​

• • 네비게이션 바에서 레이블을 지우지 않도록 주의
  • 네비게이션 바는 항상 고정. 스크롤되지 않게 주의

 

​

• • 네비게이션 바는 창 가장자리에서 패딩을 사용. 동일한 너비의 세그먼트를 가진다.

​

• • 네이게이션 바는 화면 너비의 100%를 사용함

​

• • 디스플레이의 크기가 넓어질 때에도 네비게이션 바의 각 개체들의 간격을 동일하게 유지한다.

​

• • 선택한 네비게이션에는 채워진 아이콘을 사용하여 다른 네비게이션과 구별을 준다. 선택된 항목에 윤곽선으로 이루어진 아이콘을 지양한다.

​

• Navigation Bar 실습
  • 네비게이션 바의 길이가 길어져도 각 항목간의 패딩 값을 유지하고, 가운데에 위치하도록 함

​

• Navigation Bar 실습 완료

​

​

컴포넌트 만들기_Selection_체크박스(Checkbox), 라디오 버튼(Radio Button)

출처)

https://m3.material.io/components/checkbox/overview

Checkbox – Material Design 3

https://m3.material.io/components/radio-button/overview

Radio button – Material Design 3

 

• 체크박스(Checkbox)
  • 사용자가 목록에서 하나 이상의 항목을 선택하거나 항목을 켜거나 끌 수 있는 컴포넌트

​

• • 체크박스를 대체하는 라디오 버튼이나 스위치 버튼을 사용할 수도 있음
    • 목록에서 단일 옵션을 선택하려면 라디오 버튼
    • 목록에서 설정을 키고 끄거나, 더 자세한 옵션을 선택하려면 스위치 버튼

​

• • 텍스트 레이블을 선택해도 체크박스가 선택되도록 해야 함

​

• Checkbox 실습
  • 원형과 외곽선 원형 도형을 만든 뒤 Union으로 도형을 합쳐 버튼 아이콘을 만듬

​

• Checkbox, Radio Button 실습 완료

​

​

컴포넌트 만들기_Text inputs: 텍스트 필드(Text Field), 검색 바(Search Bar)

출처)

https://m3.material.io/components/text-fields/overview

Text fields – Material Design 3

 

• 텍스트 필드(Text Field)
  • 정보를 입력하는 등 사용자가 UI에 텍스트를 입력해야 할 때 텍스트 필드를 사용함

​

• • 구성

​

• • 오류상태를 전달할 수 있다. 오류 메시지는 해결 방법에 대한 지침으로 표시되며, 수정될 때까지 텍스트 필드 아래에 지원 텍스트로 표시됨

​

• • 텍스트필드는 채워진 형태와 윤곽이 있는 형태 두가지 유형이 있다.
    • 두가지 유형 모두 동일한 기능을 제공하므로 스타일에 따라 선택한다.

​

• • • 두가지 유형의 텍스트필드를 동시에 사용하지 않는다.
    • 다른 구역에서 사용하는 것은 가능하다

​

• • 컨테이너로 텍스트필드와 주변 컨텐츠의 대비를 만들어 발견 가능성을 높인다.

​

• • 모든 텍스트필드에는 라벨 텍스트가 있어야 하지만 인접 레이블로 표시된 경우, 라벨 텍스트는 생략된다.

​

• • 필수 텍스트는 별표(*)로 표기하여 나타낸다.

​

• • 1: 지원 텍스트 / 2: 문자 카운터 로 입력 필드에 대한 추가 정보를 전달한다.

​

• • 텍스트필드가 오류 상태일 땐 오류 아이콘을 표시해준다.

​

• • 텍스트필드 상호작용
    • 획의 색상과 두께를 변경하여 상호작용에 대한 명확한 시각적 단서를 제공

​

​

[회고]

지금은 컴포넌트들의 기본적인 형태 정도를 만들어보는 실습을 하고 있는데, 실제 화면 내에서의 컴포넌트들이 작동하려면 더 다양한 고려사항들이 있을 것 같다. 기본 형태에서 바뀔 수 있는 부분들을 고려하며 실습을 진행하면 더 도움이 될 수 있을 것 같다.