'머티리얼 디자인' 영상 시청

머티리얼 디자인의 철학과 적용 사례

DAY1, SESSION4 Material Design의 철학과 적용 사례

• https://tv.naver.com/v/4646104/list/272653

---

• 머티리얼 디자인을 왜 만들었을까?

  • 구글 디자인.. 너무 안좋았다...
  • UX, UI 에 대한 개념이 보편적이지 않았음
  • 2011년 holo 디자인으로 조금씩 개선됨
  • 구글에게 필요했던 것
    • 다양한 폼팩터와 서비스를 아우르는 일관된 디자인 시스템
    • 현대적이고 아름다운 디자인
    • 개발자가 이해하기 쉬운 디자인

• 머티리얼 디자인의 등장

  • 생산자가 생각한 방식보다도...
  • 사용자는 스스로가 편한 패턴으로 사용한다.
  • 아날로그 고유 속성에 중점
    • 물리적 속성
    • 형태 변환
    • 움직임
    • 높이
    • 음영
    • 객체 간 계층 구조

• 머티리얼 디자인의 중요 특징

  • 입체적 표면
  • 의미있는 모션
  • 인쇄물 같은

• 다량의 우수한 머티리얼 디자인 앱이 등장

---

어려웠던 점

• 부족한 엔지니어링 리소스

  • 제공되는 라이브러리의 한계
  • 디자인과 개발 프로세스 간의 연결이 자연스럽지 않음

• 비주얼 표현의 제약

  • 나만의 개성을 표한하기가 어려움
  • 안드로이드 앱을 위한 디자인이라고 착각하기 쉬움(편견)

• 새로운 머티리얼 디자인 둘러보기

  • 머티리얼 디자인 목표
    • 다양한 플랫폼에서 사용자에게 일관된 경험을 제공한다
    • Create
  • 머티리얼 디자인 주요 특징
    • 기존 3가지
    • 유연한 기반
    • 크로스 플랫폼

• 머티리얼 디자인

  • 머티리얼 시스템
  • 머티리얼 파운데이션
    • 머티리얼 디자인의 기반
    • 좋은 디자인이란? 질문에 대한 머티리얼 디자인의 제안
      • Environment
      • Layout
      • Navigation
      • Collaboration
      • Typography
      • Iconography
      • Shape
      • Motion
      • Interaction
      • Communication
    • 높이와 그림자
      • Before
        • 너무 까다롭다
      • After
        • 좀더 유연하게 허용해 주자
      • 모든 표면은 높이 값을 갖는다
      • 높이는 계층을 표현할 수 있다
      • 같은 계층에 속한 아이템은 동일한 높이 값을 갖는다
      • 사용자가 서로 다른 높이 값을 구분 할 수 있도록 테두리나 그 회 다른 시각적 요소가 사용되어야 한다.
      • 허용하지 않는 예시
        • 시각적으로 서피스(계층적인 콘텐츠)를 구분할 수 없을 때
  • 머티리얼 가이드라인

• 머티리얼 디자인 연구 사례 (프로토타이핑 앱)

  • 레시피 앱 - Basil
    • 탭
    • 메뉴 (새롭게 구성한 네비게이션 드로워)

• 머티리얼 가이드라인

  • 이전보다 훨씬 유연해짐
  • Material Theming (더 큰 우산 - Material Theme)
  • 독창적인 디자인 가능
  • 컬러 테마 (하나의 색을 선택하면 그에 알맞는 계층 색을 맞춰줌?)
    • 컬러 시스템 (색 세트)
    • 컬러 접근성
  • Typography (글자체) : 한글 적용됨
  • Iconography (아이콘)
  • Motion (Animation)
    • 더 과장되고 독창스러운 애니메이션도 허용
  • Tools
    • Theme Editor
      • 디자인 개발
      • Sketch (?)
      • Sticker Sheet (?)
    • Gallery
      • 개발된 디자인 공유 및 협업
      • 검토, 개선, 업데이트, 히스토리

• 새로운 Components

  • Bottom App Bar
  • Banner
  • Extended FAB (Floating Action Button)
  • Chips : 상단의 메뉴를 끄고 킬수 있도록
  • Image Lists
  • Text Fields
  • Backdrop

• 안드로이드에서 Material Design Components 사용하기

  • Develop (github)
  • Dependencies
    • com.android.material ~
  • lib
    • Custom View + Custom Style
  • .......... 글로 요약이 힘들다.