UI UX 기본 구성 요소 정리

토글 (Toggle button / toggle switch)

예 , 아니오와같은 2가지로 구분될 때 사용한다,

토글 버튼을 사용하기 위해서는 기존의 값이 존재하는지 확인해야한다.

라디오 버튼 

 

라디오 버튼은 여러개의 선택지 중 하나를 택할 때 사용해야한다.

너무 선택지가 많으면 적합하지 않고 

많을 경우는 드롭다운 리스트를 사용하는 것이 보편적이다.

선택지가 없을 경우는 토글을 쓰면 된다.

 

체크 박스 버튼 

체크버튼은 여러 항목 중 1개 이상을 선택할 때 사용함 체크박스는 특성상 옵션 값으로 사용한다.

체크박스 버튼은 레이블이 터치영역에 반드시 포함되어져야 한다. > 선택지 글자들도 터치 영역에 해당되어져야한다는 말인데, 이 부분이 누락되는 경우가 가끔있으니 주의해야한다.

 

 

플로팅 버튼

플로팅 버튼은 액션 버튼 줄여서 부르는 말이고 FAB라고도 함.

CTA(call to action)역할을 잘 수행함.

 

 

폰트

폰트의 기준은 16px

최소 폰트 11px 

 

서체

sanserif : 가나다   - 깔끔하고 가독성이 높음. 현대적이고 사용가능한 폰트가 최소폰트 크기가 더 낮음

serif :  가나다 - 가독성을 떨어 뜨릴 수 있음. 

 

자간 

자간은 글자 사이의 간격을 말함 평균 자간 값은 -15에서 50 정도가 좋음

 

행간 

행간사이의 간격을 말함. 

행간은 웹에서 일반적으로 수정을 하지 않고 사용하는 경우가 많음 . 보통 10~30%를 추가하기도 함.

 

모바일에서 본문 행간은 150%내외로 설정하는 것이 좋음

여백이 있어서 가독성이 좋음.