[android] Material Design의 컴포넌트와 패턴

Material Design은 구글에서 만든 디자인 시스템으로, 안드로이드 앱을 디자인하는 데 유용한 가이드라인과 도구를 제공합니다. Material Design은 인터랙션과 움직임을 강조하고, 그림자와 깊이를 활용하여 사용자 경험을 향상시키는 것을 목표로 합니다.

주요 컴포넌트

툴바 (Toolbar)

툴바는 앱의 상단에 위치하는 반투명한 바로, 주로 앱의 제목이나 기능을 표시하는 데 사용됩니다. 또한, 사용자의 가장 많이 사용하는 기능에 빠르게 접근할 수 있도록 도와줍니다.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="앱 제목" />

플로팅 액션 버튼 (Floating Action Button)

플로팅 액션 버튼은 사용자가 가장 많이 사용하는 기능에 빠르게 접근할 수 있도록 돕는 버튼입니다. 주로 앱의 주요 작업을 수행하는 데 사용됩니다.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/colorAccent" />

카드뷰 (CardView)

카드뷰는 사각형 모양의 카드를 통해 콘텐츠를 보여주는 데 사용됩니다. 그림자를 통해 깊이를 만들어주어 Material Design의 그림자 이펙트를 적용할 수 있습니다.

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">
    
    <!-- 카드 내용 -->
    
</androidx.cardview.widget.CardView>

주요 패턴

모션

Material Design은 모션을 통해 사용자와의 상호작용을 강화시킵니다. 애니메이션전이를 활용하여 사용자의 주의를 끌고, 사용자 경험을 더욱 풍부하게 만듭니다.

타이포그래피

타이포그래피는 글꼴, 글자 크기, 줄 간격 등을 포함하여 텍스트를 다루는 디자인 요소를 말합니다. Material Design은 명확하고 읽기 쉬운 타이포그래피를 강조합니다.


Material Design은 안드로이드 앱을 디자인하는 데 필수적인 가이드라인과 도구를 제공합니다. Material Design의 컴포넌트와 패턴을 잘 활용하면, 사용자 경험을 향상시킬 수 있습니다.

참고: Material Design 공식 문서