Checkbox, Radio Button, 예제 따라하기 실습(TIL 4일차)

주요 컴포넌트 카테고리

• Actions /액션: 버튼(Button), 플로팅 액션 버튼(FAB)
• Communication /인포메이션: 스낵바(Snackbar), 토스트 메시지
• Containment /컨테이너: 카드(Card), 다이얼로그(Dialog)
• Navigation /내비게이션: 탭(Tab), 네비게이션 바(Navigation Bar)
• Selection /컨트롤: 체크박스(Checkbox), 라디오 버튼(Radio Button)
• Text inputs /인풋: 텍스트 필드(Text Field), 검색 바(Search Bar)

1. Selection

 1-1. Checkbox(체크박스)

• 목록에서 하나 이상의 항목을 선택하거나, 특정 항목을 켜거나 끌 수 있게 함
• 목록에서 여러 옵션을 동시에 선택할 수 있는 경우
• 라벨은 명확하고 간결
• 선택된 항목은 선택되지 않은 항목보다 눈에 띄어야 함

컨테이너, 아이콘으로 이루어져 있다.

컨테이너 영역은 18dp이지만 터치 영역은 48dp로 둔다

 

1.부모 체크박스가 일괄 선택할 수 있도록 해줌 2.토글은 공간을 많이 차지하므로 체크박스가 적합

또한 텍스트 라벨을 터치해도 선택되어야함

 1-2. Radio Button (라디오 버튼)

• 여러 옵션 중 하나의 항목만 선택할 수 있도록 함
• 라벨은 명확하고 간결
• 선택된 항목은 선택되지 않은 항목보다 눈에 띄어야 함
• 수평 배치는 피할 것

버튼 아이콘 크기 20dp 터치 영역 40dp

하지만 드롭다운 메뉴는 클릭 수와 인지적 노력 면에서 추가적인 단계를 요구함

 

 

--이후 피그마 실습

어제와 이어서 예제 따라 만들기 실습

카드 만들기도 많이 익숙해짐! 스위치 토글은 프로토타입으로 했었던 것 같은데... 무슨 방법이 맞는지 나중에 유튭 찾아봐야겠다

이제 베리언트 만드는 건 꽤 익숙해져서 레이어 네이밍 짓는 걸 유심히 보고 따라하는 중

그런데 아직도 리사이징 개념(Hug랑 fill)에서 헤맬 때가 있다

막힐 때 그냥 하나하나 눌러보면서 해결하는 중... 감으로 하면 안되는데 자꾸 감으로 하게 된다

나중에 조금 자세하게 포스팅하면서 개념을 다시 이해해야겠다!