[10분 UX·UI] 구글 디자인 시스템 요약해보기
Material Design의 Foundation(1)
기본 정의
2014년 시작, 초보자에게 입문하기 좋은 디자인 시스템, 대다수의 안드로이드 앱 서비스들이 따르는 디자인 시스템
기본 개념을 한번 정리해보자.
Material
종이와 잉크를 화면 인터페이스에 녹여내려고 노력
스큐어모피즘과 미니멀리즘 디자인의 장점을 극대화
아이폰의 계산기 앱에 나타난 스큐어모피즘. 하지만 스티브 잡스가 사망한 뒤 새 OS에서 스큐어모피즘을 탈피했다. [출처] 디자인 프레스 2016Skeuomorph(스큐어모피즘)
대상을 원래 그대로의 모습으로 사실적 표현하는 디자인 기법(초창기)
애플은 이 디자인을 통해 디지털 세계에서 현실과 같은 감각을 적용 → 낯선 디지털 환경을 접하는 사용자에게 아날로그 기억을 활용하여 높은 Affordance(행동 유도성)을 확보 → 사용자 편의성을 증대
[출처] 미니멀리스트 디자인의 주요 원칙 - 브런치Minimalism(미니멀리즘)
사용자들이 디바이스에 익숙해지면서 불필요한 정보들을 제거하고 단순하면서 직관적인 정보를 찾고자 함
미니멀리스트 웹디자인 사례, 구글의 검색 홈 화면은 15년간 큰 변화가 없다.
머터리얼 디자인은 두 기법 사이에서 장점을 극대화하고 단점을 극복하는 방향으로 탄생하게 되었어
디자인 원칙 3가지
머터리얼 디자인은 메타포이다. 현실 세계의 물리적인 부분에서 영감을 받았다.
대담하고 그래픽적이고 의도적이다. 위계와 의미부여, 집중을 통해 더 좋은 사용자 경험을 제공한다.
모션을 통해 의미를 전달한다.
컴포넌트 카테고리는 5가지로 나눈다. (다음 글이 올라오면 차차 확인 가능!)
1. Display - 카드, 리스트, 시트
2. Navigation - 내비게이션, 탭
3. Action - FAB(플로팅 액션 버튼)
4. Input - 텍스트 필드, 칩, 셀렉션 컨트롤
5. Communication - 배너, 다이얼로그
오늘은 Foundation안에 어떤 내용들이 들어가는지 이해하는 것을 목표로 해보자
디자인의 기본이 되는 요소들은 Environment라고 부르고 있고 Surfaces, Elevation, Light and shadows 3가지로 나누고 있어. 대략 가이드에 맞춰서 디자인해달라는 내용이야.
Surfaces
항상 그림자를 통해 depth를 표현해달라는 말
Surfaces는 이렇게 늘어나면서 다양한 내용을 담을 수 있데.
Elevation
두 Surfaces 사이의 거리감 주는 것을 뜻해.
나중에 공부할 컴포넌트별로 거리 수치를 다 정해두었는데 다 외우기는 비추천!
예를 들어 Dialog는 왜 가장 바닥에서 멀리 떨어져 보이게 수치를 설정했는지 의도를 파악하는 것이 나중에 도움이 될 것 같아.
Light and shadows
바로 위에서 본 Elevation과 이어지는 개념이야.
여러 명의 디자이너가 각자 하다 보면 항상 그림자 스타일을 다 다르게 사용하는 일이 비일비재한데… 이는 전체적인 통일성을 무너뜨릴 수 있어서 초반에 꼭 그림자 스타일을 조율하면서 작업하는 게 좋을 것 같아.
실습해보기
나만의 Shadow 스타일을 만들어보자. 기존에 내 입맛대로 막 만들었다면 이번에는 4가지 종류로 구분해서 작업해보고 내 디자인에 명확히 적용해보는 거야.
복사해서 쓸 수 있는 피그마 템플릿을 간단하게 만들었어. 활용하고 싶은 사람들은 참고!
