웹 버튼 디자인 - web beoteun dijain

▼아티클 원문 보기▼

7 basic types of buttons in UI design

Every designer should know the essentials of a well-packed website or app! Those are catchy headings, quality content, graphics filled with…

broworks.medium.com

**의역/오역 다수**

모든 디자이너는 잘 된 웹/앱의 필수 요소를 알아야 합니다.

그 필수 요소에는 잘 디자인된 헤드라인, 퀄리티 있는 콘텐츠, 정보와 연관성 있는 여러 그래픽들, 매력적인 디자인 등이 있습니다.

이것들은 효과적인 웹페이지와, 서비스 이용자들과의 원활한 커뮤니케이션을 위하여 필요한 것입니다.

그러나, 웹/앱 상에서 커뮤니케이션과 연결에 가장 큰 부분을 차지하는 것은 사실상 페이지의 가장 작은 파트라고 볼 수 있는 버튼에 있습니다.

버튼은 UI 디자인의 모든 곳에 있습니다.

또한 버튼은 항상 사용자를 집중시켜 어떤 행동을 하도록 유도하는 역할을 합니다.

이 작은 요소는 사용자로 하여금 어디서든 어떠한 액션을 시작하게도, 끝내게도 하며 결정을 내리도록 합니다.

그렇기 때문에 서비스 내에서 제공한 여러 표지를 이용해 사용자의 액션을 유도하려는 디자이너에게 버튼은 매우 중요한 부분입니다. 

당신은 웹/앱 서비스를 통해 사용자가 구매를 하고, 연결되고, 무언가 그들에게 유용한 것을 찾기를 원합니다.

그리고 사용자의 행동을 이끄는 요소들은 무조건 버튼입니다.

UI 디자인에서의 버튼 기본 유형 7가지를 이제부터 알아보겠습니다.

1. Floating action buttons (플로팅 액션 버튼)

플로팅 액션 버튼은 주요한 정보를 전달합니다.

이 FAB 버튼은 페이지의 모든 콘텐츠 너머에 위치합니다. 이것들은 기본적으로 사용자를 이끄는 역할을 하는데요, 컨텐트 너머 방문자의 주의를 끕니다. FAB 버튼은 페이지의 모든 레이어의 맨 위에서, 흥미로운 디자인으로 배치되어있기 때문에 사용자로 하여금 그냥 지나치지 못하게 하는 역할을 합니다.

또한 때로는 버튼이 사용자를 따라가도록 디자인을 하는 경우도 있습니다.

이 집요한 디자인의 버튼은 유저들에게 가장 중요한 정보를 전달하는 버튼이기 때문에 무엇보다 눈에 띄어야 한다는 특징이 있습니다.

그렇기 때문에 FAB 버튼은 웹 사이트 또는 앱과 가장 관련이 있는 작업 유도합니다.

다른 말로 하면, FAB 버튼은 사이트나 앱의 목적이 무엇인지에 따라 인터페이스에서 가장 기대하는 동작을 지시합니다.

이 버튼은 몇 가장 중요한 액션을 말하지만, 텍스트는 거의 포함하고 있지 않습니다.

디자인적으로는 대개 아이콘이 들어있는 동그란 모양의 심플한 모양으로 되어 있습니다.

2. Filled buttons (채워진 버튼)

Filled 버튼은 무엇보다 효과적으로 액션을 유도하는 버튼입니다.

Filled 버튼은 콘텐츠 안에서 쉽게 눈에 띄도록 볼드(bold)한 디자인이 특징입니다.

채워져 있는 디자인과 함께 색상으로 가장 눈에 띄는 디자인을 가지고 있는데. 그 이유는 사용자로 하여금 가능한 빠르게 인식되어야 클릭을 유도할 수 있기 때문입니다.

이러한 버튼의 채워져 있는 디자인은 이 버튼을 핵심 CTA 버튼이 되도록 합니다.

명심해야 할 것은 이 Filled 버튼은 사용자를 끌어당기고, 주의를 끄는 것이기 때문에 중요한 행동을 촉구하기 위해 사용되어야 한다는 것입니다. 이 버튼은 네모난 형태를 가지고, 직접적인 메시지를 갖는 텍스트를 대체로 포함하기 때문에 FAB와는 다릅니다.

하지만, 모든 Filled 버튼이 항상 일반적인 작업이나 예상되는 작업에 대한 내용만을 유도하는 것은 아닙니다.

어쨌든 핵심 CTA에는 항상 웹/앱 서비스에서 가장 필수적인 작업을 포함하고 있습니다.

3. Ghost buttons (고스트 버튼)

고스트 버튼은 naked(벌거벗은) 또는 empty(텅 빈)라고도 불립니다. 그 이유는 단순하게도, 그 버튼이 그렇게 보이기 때문입니다.(텍스트 또는 아이콘이 들어있는 아웃라인 형식의 버튼은 무언가 감춰진 듯한 모양과 섬세한 색감이 있다.)

당신에게 이 버튼이 어떻게 보이냐고 묻는다면 아마 당신은 누가 디자인에서 이런 밋밋한 요소를 필요로 하겠냐고 의아해할 것입니다.

그러나, 이 고스트 버튼은 매우 유용합니다.

고스트 버튼은 2순위의 정보를 제공합니다. 우리가 앞서 필드 버튼은 메인 액션을 불러온다고 하였는데, 고스트 버튼은 종종 그것과 함께 하며 몇 사이드 액션을 불러오는 역할을 합니다. 

이러한 액션은 디자인을 할 때에, 당신이 겉으로 드러내고 싶지는 않지만 어느 정도 강조하고 싶은 부분을 의미합니다. 결국, 고스트 버튼은 보조 콘텐츠에 적합합니다.

고스트 버튼의 디자인은 단정하며 눈에 띄지 않는다는 특징을 가집니다.

사용자들은 가장 먼저 채워져 있고 볼드한 디자인의 CTA 버튼을 인지할 것입니다. 그러고 나서야 몇 보조적인 정보를 가진 동반자, 고스트 버튼을 볼 것입니다.

고스트 버튼은 항상 당신에게 어떤 또 다른 선택지와 더 많은 옵션을 보여줍니다. 

4. Raised buttons (튀어나온 버튼)

Raised 버튼은 흥미로운 요소입니다. 사용자에게 비주얼적인 경험을 만들어내기 때문인데요.

이 버튼은 문자 그대로 '누를 수' 있어 보인다는 특징을 가집니다.

Raised 버튼은 3차원으로 솟아있기 때문에 마치 키보드 버튼처럼 보입니다 

버튼이 위로 올라간 상태에서 직접 메시지가 표시됩니다. - 여길 누르세요.

이러한 버튼은 사용자가 버튼을 클릭하고 싶어 하도록 유도하기도 더 좋고, 다양한 콘텐츠에 또한 적합하기 때문에 다른 유형의 CTA 버튼을 위로 올리는 방식으로 이용을 할 수도 있습니다. 그렇게 했을 때에 버튼은 사용자에게 더 많은 집중을 일으킬 것이고, 다른 요소(버튼)들과 더 명확히 구별시켜주는 역할을 할 것입니다.

더불어, 이 버튼의 이러한 독특한 외형을 통해 모든 뷰를 더 상호작용적이게, 그리고 조금 더 액션에 준비되어 있는 것처럼 보이게 해 줄 수도 있습니다.

5. Dropdown buttons (드롭다운 버튼) 

원 클릭에 모든 액션을 완료할 수 있는 버튼.

드롭다운 버튼은 사용자들이 한 번의 클릭을 통하여 콘텐츠를 드러내거나, 숨기도록 하는 버튼입니다.

이것은 웹/앱 페이지에서 콘텐츠를 줄이고, 또 디자인을 보기 깔끔하게 만드는데 도움을 줍니다.

이 버튼은 "몇 가지 콘텐츠가 숨겨진다"는 말을 전달하는 텍스트 또는 아이콘을 포함한 디자인으로 작업이 됩니다.

이 버튼을 누름으로서, 사용자는 사이트의 모든 콘텐츠를 볼 수 있게 되거나, 콘텐츠가 페이지의 너무 많은 공간을 차지 않도록 전체 섹션을 숨기게 됩니다.

사용자는 이러한 드롭다운 버튼을 통해 오버 로딩 없이 많은 콘텐츠를 가진 페이지를 이용할 수 있습니다.

6. Hamburger button (햄버거 버튼)

햄버거 버튼은 우리 모두가 알고 있는 것입니다. - 우리가 메뉴라고 부르는 버튼

햄버거, 메뉴 버튼은 거의 페이지의 맨 위에 있는 요소입니다.

이것은 콘텐츠와 사이트의 조직에 대한 정보를 제공해줍니다. 많은 사람들이 이러한 햄버거 버튼을 버튼의 한 타입으로서 생각하지 않는 경향이 있습니다. 왜냐하면 이것은 UI 디자인에서 항상 필요한 요소로, 버튼이 아닌 다른 종류의 것으로 구분되어왔기 때문입니다.

햄버거 버튼은 사실상 드롭다운 버튼이라고 볼 수 있습니다. 그러나 드롭다운 버튼보다는 더 특정한 목적을 가진 버튼(메뉴바를 디스플레이하기 위한 버튼)

이것은 모든 사이트, 앱에 반드시 필요한 요소입니다. 단순히 일반적으로 쓰이기 때문만이 아니라, 햄버거 버튼은 사용자들이 서비스 내에서 길을 찾고 페이지를 인식하는데 도움을 주고, 디자인적으로도 매력적 이어 보이게 사용할 수도 있습니다. 그러므로 이 내비게이션의 메인 요소는 다른 디자인 요소와 마찬가지로 잘 디자인이 되어야 합니다.

7. Toggle buttons (토글 버튼)

유저가 선택을 반드시 하기를 강요하는 버튼.

토글 버튼은 유저가 선택할 수 있는 옵션을 가진 흥미로운 유형의 버튼입니다.

이 버튼은 사이트에서 당신이 묻는 질문에 사용자에게 답을 듣기에 좋은 방법입니다.

또한 이 버튼을 이용해 많은 옵션을 제공하게 된다면, 당신은 유저가 서칭 하기에 더 편하도록 만들 수 있습니다. 

한 예시로, 서치 할 때에 토글 버튼을 이용한 고작 몇 번의 클릭으로 사용자들은 쉽게 필터를 이용할 수 있습니다.

(이렇게 유용한 버튼이기 때문에 왜 인터넷 전체에 토글 버튼이 넘쳐나지 않는지 의문일 정도)

게다가, 우리는 그 버튼의 사용성이 아직 전부 이용되지 않았다고 생각합니다.

그러므로, 설문, 사이트 게임, 서치, 그리고 유저들이 한 가지 또는 여러 옵션을 선택해야 하는 '어디서든' 이 토글 버튼을 이용하는 것을 고려해보길 바랍니다.

그리고 이 버튼의 디자인은 평범하거나 단순하거나 때때로 꽤 예술적일 수 있습니다.
토글은 아이콘 또는 라벨을 포함하기 때문에 당신은 토글에 어떤 옵션을 넣어서 디자인을 할지 선택할 수 있습니다.

우리는 웹사이트, 그리고 다른 인터페이스에서 표현과 기능이 다른 여러 가지 버튼을 보았습니다.

우리는 어려워 보이고, 단순해 보이는 여러 가지 버튼들을 이용할 수 있습니다. 디자인적으로 매력적 이어 보이는 버튼, 텍스트를 포함하는, 포함하지 않는 버튼, 필수/보완 버튼 등등.

결론은 이 모든 버튼이 매우 유용하다는 것입니다. 이러한 기능은 사용자와 서비스 설계자 모두에게 사이트를 사용하고 유지 관리하는 것을 보다 더 쉽게 해 줍니다.

이것은 버튼들은 사이트 내의 전체 콘텐츠의 주변에 항상 함께 있는 필수적인 포인트들이라고 말할 수 있습니다.

그렇기 때문에 당신은 그 버튼들 사이에 꼭 따라야 하는 계층이 있다는 것을 알고 있어야 합니다.

버튼은 웹/ 앱 사이트의 두뇌와도 같기 때문에 여러분이 버튼들을 여러분의 사이트에 추가하고 외관을 디자인할 때, 보다 더 전략적으로 접근할 필요성이 있습니다.