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

제로베이스 87일차 학습노트이다.
오늘은 Sketch에서의 컴포넌트 디자인 챕터 중 App Bars(앱 바)와 Tabs(탭)에 대한 실습 수업을 진행했다. 화면 구조에서 자주 사용되는 핵심 UI 요소들을 직접 디자인해보며 Sketch의 심볼 활용 방식과 모바일 환경에서의 UI 설계 감각을 익히는 시간이었다.

---

오늘의 강의 내용

 

1. App Bars
App Bar는 모바일 UI 상단에 위치하며, 주로 앱의 타이틀, 내비게이션 아이콘(예: 메뉴 버튼), 액션 아이콘(예: 검색, 공유 버튼) 등이 포함되는 요소이다. 오늘 실습에서는 가장 기본적인 구조의 앱 바를 만들어보며, 타이틀 텍스트를 중앙 정렬하고 좌측에는 햄버거 메뉴 아이콘, 우측에는 검색 및 공유 아이콘을 배치해보았다.

이러한 구성은 사용자에게 명확한 정보 구조를 제공하고, 주요 기능을 빠르게 접근할 수 있도록 도와준다. 또한 심볼로 제작해 다양한 화면에서도 재사용할 수 있도록 구성하였으며, 아이콘 및 텍스트 스타일은 스타일 시스템을 활용해 일관성을 유지했다.

 

2. Tabs
탭은 사용자 인터페이스 내에서 다양한 콘텐츠나 페이지 간의 전환을 제공하는 구성 요소로, 오늘은 탭이 3개로 구성된 기본 구조를 중심으로 실습했다. 탭은 일반적으로 상단 혹은 하단에 배치되며, 사용자의 주요 탐색 흐름을 구성하는 데 사용된다.

실습에서는 ① 텍스트만 들어가는 탭, ② 아이콘만 들어가는 탭, ③ 아이콘과 텍스트가 함께 들어가는 탭의 세 가지 형태를 각각 디자인해보았다. 각 탭은 선택 상태(active)와 비선택 상태(inactive)를 시각적으로 구분하기 위해 색상과 강조선 등을 다르게 설정하였다. 심볼을 활용하여 하나의 구조를 반복적으로 사용할 수 있도록 구성하고, 오버라이드 기능을 통해 각 탭의 텍스트와 아이콘을 다르게 설정할 수 있도록 했다.

---

앱 바와 탭은 모바일 UI에서 가장 기본적이면서도 반복적으로 사용되는 구성 요소들이다. 오늘 구성한 컴포넌트들은 앞으로의 앱 디자인 실습에서 상단 및 하단 내비게이션 영역에 적용할 수 있으며, Sketch의 심볼 시스템을 활용해 다양한 앱 페이지에 효율적으로 배치하고 관리할 수 있을 것으로 기대된다.

 

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