Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
늘 여기를 보라고 ^^ 수십번도 더 이야기를 들었으나 영어라서 보기 싫다는 이유만으로 계쏙- 미뤄왔던 읽기.
머테리얼 측정
머테리얼 디자인 레이아웃은 시각적으로 균형을 이룬다. 대부분의 측정은 8배수 그리드에 맞춰 정렬된다, 전체적인 레이아웃과 간격 모두!
더 작은 컴포넌트 (아이콘과 타입같은) 은 4배수 그리드에 맞춰 정렬될 수 있다.
반응형 레이아웃 그리드
머테리얼 디자인 반응형 레이아웃 그리드는 컴포넌트와 요소의 배치에 대한 가장 중요한 가이드다. 반응형 레이아웃 그리드는 레이아웃간의 일관성을 보장한다, 스크린 사이즈와 방향에 맞춰 조정되어.
간격 설정법(?) Spacing method
베이스라인 그리드와 키라인, 패딩padding 그리고 증분incremental(증가하는 부분) 간격을 사용해 비율, 컨테이너 및 터치 타겟을 조정한다.
베이스라인 그리드 (기준 격자)
8배수 그리드
모든 컴포넌트는 모바일, 타블렛, 데스크탑 위한 8배수 베이스라인 그리드에 정렬되어야 한다.
4배수 그리드
컴포넌드 안에 있는 아이콘과 타입 그리고 몇몇 요소가 4배수 그리드에 정렬될 수 있다
4배수 베이스라인(기준) 그리드
타입(글자)는 버튼이나 리스트 아이템 같은 컴포넌트 안에서 중앙일 때 4배수 그리드 외부에 위치할 수 있다. 그리드 외부에 위치에 있지만, 컴포넌트 사이에서 중앙일 때, 텍스트는 수직으로 가운데 정렬되어 나타날 수 있다.
간격 Spacing
간격 설정법은 반응형 레이아웃 그리드보다 더 세분화된다. 간격 설정법은 레이아웃과 컴포넌트 안에서 어떻게 요소(엘리먼츠) 배치하는 가에 대한 규칙들이다.
얼라인먼트 Alignment(정렬)
얼라인먼트는 컴포넌트 사이에 요소의 위치
패딩Padding
패딩은 컴포넌트 안에서 요소들 사이의 공간이다.
UI 요소 사이의 공간을 의미한다. 패딩은 키라인에 대한 대체 간격 방식으로 8dp 또는 4dp 단위로 측정된다.
패딩은 수직 및 수평으로 측정할 수 있으며 레이아웃의 전체 높이에 걸쳐서는 안 된다.
패딩에 값을 주면 css스타일을 준 값 자체가 넓어진다 (컨텐츠 안에 들어가는 space가 넓어짐)
디멘션Dimensions (치수)
디멘션은 컴포넌트 요소의 넓이와 높이를 나타낸다.
앱 바 또는 목록과 같은 일부 구성 요소는 요소의 높이만 간략히 설명한다. 이러한 요소의 높이는 8dp 그리드에 맞춰야 한다. 그들의 너비는 뷰포트 너비에 반응하기 때문에 지정되지 않는다.
추신 : 여기 웹디자인 예뻐서 나중에 개발자도구로 훔쳐봐야겠다. 깔끔하고 아주 예쁨. 링크 복사 아이콘마저 깔끔하다.
위에 머테리얼 가이드를 읽어도 뭔가 와닿지 않는다면! (난 안 와닿음..뭐든 해봐야 함) 🙃
반응형 웹디자인 responsive web
youtu.be/8-uJ_4136uI 원래 기존에 디자인에 대해서만 공부했을 때, 디자인을 어떤 디바이스에 맞춰서 해야 하느냐는 질문을 했었고 그때 찾았던 답은 각각 기기별로 해야 한다는 것이었다. 그렇다면
growingooj.tistory.com
반응형 웹을 어떻게 코딩으로 할 수 있는지 + 디자이너가 그리드 잡는 법까지 강의 영상을 모아두었다