Material 3로 만드는 차세대 UX 디자인 비법 공개!

Material Design 3 Expressive 업데이트 완전 정복! 🚀

안녕! 오늘은 Material Design 3에 새로 추가된 'Expressive' 업데이트에 대해 알아볼 거야. 이걸 알면 더 멋지고 사용하기 편한 앱을 만들 수 있을 거야!

Material Design, 그거 뭔데? 🤔

Material Design은 구글이 만든 디자인 시스템이야. 앱을 예쁘고 사용하기 쉽게 만드는 데 필요한 규칙과 도구들을 모아놓은 거지. 구글 앱들 (지메일, 제미니 등)이 이걸로 만들어졌고, 안드로이드 공식 디자인 언어이기도 해.

Material 3 Expressive, 왜 나왔을까? ✨

Material 3은 2021년에 나왔는데, 더 자유롭고 다채로운 색깔, 개성을 더하자는 목표였어. 이번 'Expressive' 업데이트는 이 약속을 더 확실하게 지키기 위해 나왔어.

핵심은 '감성'이야! 🤩

• 감성적인 UI: 사용자가 앱을 보면서 기분이 좋아지고, 뭔가 느끼게 만드는 디자인을 말해. 독특한 모양, 눈에 띄는 색깔, 새로운 움직임 같은 걸로 말이지.
• 연구 결과: 사람들이 이런 감성적인 디자인을 더 좋아하고, 심지어 18~24세에서는 87%가 이런 디자인을 선호한다는 연구 결과도 있어!
• 사용성 UP!: 놀랍게도 감성적인 디자인은 사용하기도 더 편해. 중요한 부분을 더 빨리 찾을 수 있고, 나이 많은 사람들도 더 쉽게 사용할 수 있게 도와줘.

뭐가 새로 나왔을까? 🤩

이번 업데이트는 크게 새로운 컴포넌트와 새로운 스타일로 나눌 수 있어.

1. 새로운 컴포넌트 (부품들) 🛠️

• 앱 바 (App Bar) & 툴바 (Toolbar):
  • 앱 바는 이제 여러 줄의 글이나 이미지도 보여줄 수 있고, 가운데 정렬도 가능해졌어.
  • 툴바는 예전의 하단 앱 바를 대체하는데, 더 유연하게 움직이고 색깔로 상태를 표현할 수도 있어. 구글 채팅 앱에서도 볼 수 있을 거야!
• 버튼 (Button):
  • 크기, 모양(네모, 동그라미), 아이콘 크기까지 더 다양하게 설정할 수 있어.
  • 버튼 모양 바꾸기 (Shape Morphing): 버튼을 누르면 모양이 변하는 애니메이션도 가능해!
  • 분할 버튼 (Split Button): 버튼을 길게 누르면 메뉴가 나오는 기능도 추가됐어.
  • 버튼 그룹 (Button Group): 여러 버튼을 하나로 묶어서 토글이나 선택 기능을 만들 수 있어. 누르면 주변 버튼들이 살짝 눌리는 애니메이션도 있어!
• 플로팅 액션 버튼 (FAB) & FAB 메뉴:
  • FAB도 중간 크기가 추가돼서 접히는 폰트 같은 중간 크기 화면에 딱 맞게 사용할 수 있어.
  • FAB 메뉴: 예전 Material Design 2에 있던 기능인데, 버튼을 누르면 여러 메뉴가 펼쳐지는 기능이 다시 나왔어.
• 플로팅 툴바 (Floating Toolbar):
  • FAB를 누르면 나타나는 툴바인데, 위아래로 움직이거나 화면 밖으로 사라지게 할 수도 있어.
• 로딩 표시기 (Loading Indicator):
  • 콘텐츠가 로딩될 때 보여주는 새로운 표시기야. 독특한 모양으로 시선을 사로잡지.
• 진행 표시기 (Progress Indicator):
  • 선형/원형 진행 표시기에 선 두께나 물결 모양 같은 새로운 스타일이 추가됐어. 물결 모양은 진행 상황을 더 생동감 있게 보여줘!
• 네비게이션 바 & 레일 (Navigation Bar & Rail):
  • 네비게이션 바는 색깔이 더 선명해지고 레이아웃이 유연해졌어.
  • 네비게이션 레일은 태블릿 같은 큰 화면에서 접었다 폈다 할 수 있고, 아이콘 위치도 바꿀 수 있어.

2. 새로운 스타일 (디자인 요소) 🎨

• 모양 (Shape):
  • 이제 35가지 새로운 모양이 추가돼서 아바타나 버튼 같은 곳에 개성을 더할 수 있어.
  • 모양 바꾸기 (Shape Morphing): 버튼처럼 모양이 부드럽게 변하는 애니메이션도 가능해.
• 움직임 (Motion):
  • 애니메이션을 더 쉽게 만들 수 있도록 움직임 토큰 시스템이 생겼어. 복잡한 설정 없이 미리 만들어진 움직임으로 자연스러운 애니메이션을 만들 수 있지.
  • 스프링 (Springs): 스프링처럼 탄력 있고 자연스러운 움직임을 만들 수 있어.
  • 움직임 방식 (Motion Schemes): '표준'과 '표현적' 두 가지 기본 방식이 있고, 이걸 커스터마이징해서 사용할 수 있어.
• 색깔 (Color):
  • 텍스트와 아이콘 색깔이 더 밝아져서 브랜드 색깔이나 테마 색깔을 더 잘 표현할 수 있게 됐어.
  • 동적 색상 (Dynamic Color): 안드로이드 새 버전에서는 자동으로 업그레이드돼서 더 다채로운 색상과 높은 채도를 경험할 수 있어. 부드러운 색부터 강렬한 색까지 원하는 대로 고를 수 있지.
• 타이포그래피 (Typography):
  • 새로운 강조 스타일이 추가돼서 제목이나 중요한 글자를 더 눈에 띄게 만들 수 있어.
  • 구글 폰트 라이브러리를 활용해서 독특한 글꼴 디자인도 가능해.

이걸 어떻게 활용하면 좋을까? 💡

이 모든 기능들을 조합해서 앱의 특정 부분, 특히 가장 중요한 기능이나 콘텐츠를 보여주는 곳에 사용해봐. 그러면 사용자에게 특별한 경험을 선사하고, 앱의 가치를 더욱 빛나게 할 수 있을 거야!

더 자세한 내용은 design.google에서 확인할 수 있고, 코드나 가이드라인도 찾아볼 수 있어.

이번 업데이트로 여러분이 만들 멋진 앱들을 기대할게! #M3Expressive 해시태그로 소셜 미디어에 공유해줘! 😊