[제로베이스 UI/UX 파트타임 스쿨] 13주차 - (금) 컴포넌트 디자인 - Buttons & FAB

제로베이스 89일차 학습노트이다.
오늘은 Sketch 툴을 활용하여 컴포넌트 디자인 중 버튼(Button)과 플로팅 액션 버튼(FAB)에 대해 학습했다. 버튼은 사용자 인터페이스에서 가장 보편적으로 사용되는 요소로, 다양한 형태의 버튼을 실제로 구성해보고 디자인 가이드라인에 따라 레이아웃을 설계해보는 실습을 진행했다. 또한 FAB는 핵심 액션을 강조하는 요소로, 화면 내에서 어떻게 시각적으로 강조할 수 있을지 고민해보는 시간이 되었다.

---

오늘의 강의 내용

 

1. Buttons
Sketch를 활용해 다양한 유형의 버튼을 구성해보았다. 실습에서는 기본 버튼부터 시작해, 아이콘이 포함된 버튼, 외곽선으로만 구성된 아웃라인 버튼, 그리고 배경 없이 텍스트만 들어간 텍스트 버튼까지 다양한 스타일의 버튼을 디자인했다. 특히 Material Design 가이드를 참고하여 버튼의 최소 너비, 높이, 내부 여백, 타이포그래피 등의 기준을 맞추는 작업이 중요하게 다뤄졌다.

버튼마다 목적에 따라 색상, 강조도, 레이아웃이 달라지며, 예를 들어 아이콘과 함께 있는 버튼은 기능성을 강조하고, 텍스트 버튼은 부가적인 행동을 유도하는 데 사용된다. 하단에 전체 폭을 차지하는 ‘풀 버튼’ 형태도 실습했으며, 버튼 안에 우측 화살표 아이콘을 배치하여 행동의 방향성을 나타내는 디자인도 함께 구성했다. 이를 통해 버튼 하나에도 사용자 흐름을 유도하는 다양한 시각적 장치가 필요하다는 점을 학습했다.

 

2. FAB (Floating Action Button)
FAB는 사용자가 가장 많이 사용하는 핵심 기능을 강조하기 위해 사용하는 원형 버튼으로, 보통 화면 우측 하단에 고정되어 있다. 실습에서는 단일 FAB뿐 아니라 FAB를 눌렀을 때 확장되는 서브 액션 버튼들의 인터페이스도 구현해보았다.

---

Sketch의 도형 도구와 아이콘 배치를 통해 연필, 비행기, 알람, 가방 등 다양한 기능을 상징하는 FAB 아이콘을 만들었고, 이를 확장하여 직관적인 인터페이스를 구성했다. FAB는 사용자 시선을 빠르게 끌어야 하므로 단순하면서도 명확한 디자인이 중요하며, 한 화면에서 너무 많은 기능을 담지 않도록 제한하는 것도 디자인 고려 요소 중 하나라는 점을 배웠다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.