버튼㉮ 시각보정
사용자들은 버튼 내 문구의 시각보정 유무를 쉽게 알아차린다. 따라서 서체 속성에 맞는 시각보정이 필요하다.
추천 서체의 텍스트 바운딩 박스 내 글자 위치를 확인하여 정중앙이 되도록 시각보정 하는 것을 추천한다.
비추천
서체에 따른 시각보정 없이 위 아래에 같은 값의 여백을 주는 것은 추천하지 않는다. 본 가이드라인에서 사용한 ‘애플산돌고딕네오’의 경우 글자가 텍스트 박스 위쪽에 있다.
비추천글자를 중앙보다 위쪽에 위치시키는 것은 추천하지 않는다. ㉯ 버튼 내 여백1개의 버튼이 하단에 홀로 배치되어야 하는 경우, 큰 글자크기를 반영한 상하 여백이 필요하다.
추천버튼에도 글자크기를 반영한
적절한 상하 여백이 필요하다.
비추천글자크기를 반영하지 않은 좁은 상하 여백은 시각적으로 답답할 수 있어 추천하지 않는다.
비추천 지나치게 넓은 상하 여백은 불필요하게 공간을 많이 차지한다는 인상을 줄 수 있어 추천하지 않는다.㉰ 버튼 2개의 가로 배열버튼 2개를 가로로 배열할 때, 적절한 글자크기와 버튼 간격이 필요하다.
추천사용자는 버튼 내 글자를 읽고 버튼을 누르는 경향이 있다. 따라서 버튼에는 글자 간 충분한 여백이 생길 수 있는 글자크기를 사용하는 것을 추천한다.
비추천[확인], [취소] 처럼 상반된 선택지를 제공할 때 두 버튼을 가로로 배열하는 경우가 많다. 하지만 버튼 크기가 너무 크면 사용자가 잘못 누를 가능성이 높아지므로, 버튼 크기를 과도하게 키우는 것은 추천하지 않는다. ㉱ 버튼 2개의 세로 배열버튼 2개를 세로로 배열하는 경우, 세로 배열의 특성을 반영하여 버튼 크기를 정해야 한다.
추천세로로 배열하는 경우, 컨텐츠 영역을 고려하여 버튼 면적을 정하는 것을 추 천한다.
비추천화면 내에서 세로 배열 버튼이 차지하는 면적은 가로 배열 때보다 크다. 따라서 사용자들이 컨텐츠 영역을 확보 할 수 있도록 지나치게 큰 버튼 사용을 추천하지 않는다.
㉲ 가로 배열과 세로 배열
큰글자버튼 2개의 배열에서 가로 배열보다 세로 배열을 사용한다.
추천버튼에서 적절한 여백을 가질 수 있으면서 한 손으로 쉽게 조작할 수 있는 세로 배열을 추천한다.
비추천
버튼 내 글자의 상하좌우에 충분한 여백이 없다면 가로 배열을 사용하는 것을 추천하지 않는다.