by Nov 18. 2019

(출처 : 이 기사는 [Make sense of rounded corners on buttons]를 번역 및 가공한 콘텐츠입니다.)

라운드형 버튼이 나을까요? 사각형 버튼이 나을까요?

사각형 버튼을 둥근 버튼으로 바꿔야 할까요? 둥근 버튼이 더 나은 사용성을 제공할까요?

우리는 버튼을 만들 때 어떻게 현명한 결정을 내릴 수 있을까요?

이런 의문들은 UX에서 라운드 버튼을 만들 때 마주할 수 있는 질문들입니다.

우리는 버튼 사이즈가 클수록, 버튼이 밝을수록, 쉐도우를 많이 넣을수록 버튼이 눈에 띈다는 것을 알고 있지만, 버튼과 다른 요소들과의 적절한 밸런싱을 찾는 건 항상 난제입니다.

버튼을 잘 보이게 하는 요소들

라운드형 버튼이 인지에 더 좋을까?

라운드 코너를 가진 버튼은 눈에 더 쉽게 보입니다.

카드를 정렬했을 때 카드가 라운드형 모서리를 가지고 있으면 카드의 전체 개수를 세기가 더 쉽습니다.

라운드형 코너는 모서리형 코너보다 더 눈에 잘 보입니다.

라운드형 코너의 카드가 더 눈에 잘 들어오는 현상은 카드의 라운드 된 모서리가 시각적으로 다른 요소들과 다르게 구분 지어주기 때문에 발생합니다.

반대로, 카드가 직각의 코너를 가지고 있다면 카드가 아닌 다른 요소들과 비슷해 보임으로써 라운드형 코너보다 상대적으로 유저들의 주의를 끌지 못합니다.

그리드 레이아웃에서 라운드형 코너는 그 역할을 더 잘 수행합니다.

예를 들어 터보텍스의 대시보드는 제일 맨 위의 공간에 라운드형 카드를 배치했는데, 이것은 직각 모서리로 이루어진 카드로 이루어진 가운데 공간보다 더 시선을 사로잡습니다.

터보텍스의 대시보드

완전한 라운드 형 버튼을 사용해야 할까?

완전한 라운드형 버튼은 충분한 공간이 있을 경우 뛰어난 인터페이스를 보여줍니다.

스포티파이의 모바일과 웹앱에서는 완전한 라운드 형태의 녹색 버튼이 콜투액션으로 사용되며, 매우 성공적으로 유저들의 주의를 끌고 있습니다.

스포티파이의 라운드형 버튼

앱을 사용할 때, 유저는 스포티파이 앱에 들어와서 음악을 플레이하고, 팟캐스트를 플레이하고, 플레이리스트를 발견하는 모든 주요 인터렉션을 녹색 버튼을 통해 바로 진행할 수 있습니다.

완전 라운드 된 버튼은 앨범과 리스트와 구분되는 특징을 만들며, 유저들이 좀 더 잘 '플레이'할 수 있게 도와줍니다.

스포티파이의 '플레이'버튼

완전한 라운드 형 버튼을 사용하지 말아야 할 때

그러나, 완전한 라운드형 버튼이 유저빌리티 이슈를 일으킬 때가 있습니다.

1. 완전한 라운드 형 버튼이 태그처럼 보일 때.

완전한 라운드 버튼이 태그처럼 보일 때 유저는 혼란스럽습니다: "내가 버튼이나 필터를 클릭하고 있는 건가?"

라운드형 버튼일까요? 태그 버튼일까요? 구분하기 어렵습니다.

2. 완전한 라운드 형 버튼 안에 화살표 같은 내용을 중첩해서 보여줘야 할 때

꺽쇠 아이콘을 품은 완전한 라운드형 버튼이 존재할 경우,

꺽쇠 아이콘이 효과적으로 터치되기 위해서는 쉐브론 아이콘이 (16*16이나 24*24px)을 가져야 합니다.

클릭 영역이 클릭하기엔 조금 작아 보입니다.

완전한 라운드형 버튼이 아니라 세미 라운드형 버튼을 대신 사용하면 쉐브론을 떠나서 전체 버튼을 팝업 버튼처럼 사용하도록 변경할 수 있습니다.

클릭을 하면, 모든 가능한 옵션을 나타낼 수 있고 이것은 더 효과적입니다.

완전한 라운드형 버튼은 끝이 라운드로 표시되어야 하기 때문에 라운드형 드롭다운을 두 개 띄우지 않는 한, 그 형태의 구현이 세미 라운드형 버튼보다 어렵습니다.

애플은 라운드 버튼을 액션 버튼으로 사용하는 것을 지양하고 있고, 완전한 라운드형 버튼은 주로 헬프 버튼이나 여러 가지 선택이 동시에 나타나는 라디오 버튼에서만 사용하고 있습니다.

3. 완전한 라운드형 버튼은 버튼을 쌓기 적절하지 않습니다

테이블이나 카드에서 버튼을 많이 쌓는 UI에는 라운드형 버튼이 적절하지 않습니다.

만약 데이터가 10줄이 있고 그 10줄에 각자 버튼이 있다면 우리는 10개의 라운드 버튼을 쌓아야 하며 마치 모든 버튼이 주요 액션 버튼처럼 보이게 될 겁니다.

이를 위한 대안으로는 맥 OS의 알림처럼 보더가 없는 버튼을 사용하던지, 버튼에 호버 했을 때만 옵션들이 보이게 하는 것입니다.

버튼을 최소화해서 나타냄으로써, 유저는 콘텐츠에 더욱 집중할 수 있을 것입니다.

버튼을 여러 개 쌓아야 할 경우 보더가 없는 버튼을 사용하세요

라운드 코너를 가진 버튼의 미적 측면

라운드 코너 버튼은 현대적으로 보입니다. 완전한 라운디드 버튼은 모바일에서 시작했고 웹 UI로 확장되었습니다. 라운드 코너는 시각적으로 심플해 보이며, 최적화되어 보이고, 개방적인 느낌을 전달합니다.

이것이 아마 많은 디자인 시스템이 라운드 코너를 사용하고, 아이콘과 버튼과 일러스트에도 라운드 스타일이 적용되는 이유일 것입니다.

크롬 브라우저의 최근 업데이트는 완전한 라운드를 가진 주소창을 차용해서 모바일에서의 둥근 서치바의 경험이 이어지도록 디자인되었습니다.

유저는 검색창에 검색을 하며 검색 결과를 주소창에서 간략히 볼 수 있습니다.

이 외에도 툴바나 캘린더, 지메일, 구글 드라이브에서도 라운드형 디자인을 쉽게 볼 수 있습니다.

결론

라운드형 버튼과 버튼을 사용하는데 맞고 그름은 없지만, 버튼 코너의 모서리를 디자인할 때는 사용자가 앱과 상호작용할 수 있도록 해주는 최적의 방향성을 가지고 설계돼야 하며 주의 산만한 요소들을 제거하고 내용에 집중할 수 있도록 해야 합니다.

감사합니다.

버튼의 둥근 모서리에 대한 이해

댓글