2014년 롤리팝이 나오면서 같이 나온 머티리얼 디자인에대해서 

머티리얼 디자인은 구글용 웹사이트나 앱에 적용할 통일화된 디자인으로 레이아웃, 스타일, 애니메이션, 등 웹 디자인에 필요한 모든 요소에 대해 정의를 하고 이에 따를 것을 요구하고 있습니다. 

우선영어로 써있는것을 번역하였는데 맞는 건지는 모르겠습니다,


머티리얼은 3D world이다.


머티리얼 환경은 모든 개체가 x, y 및 z 치수가 3 차원 공간을 의미한다.Z 축은 수직 양의 Z 축 뷰어를 향해 연장하여, 디스플레이의 평면에 정렬된다. 모든 재료의 시트는 Z 축을 따라 하나의 위치를 점유하고 표준 1DP 두께를 갖는다.

빛과 그림자.

머티리얼환경에서 가상 라이트는 네모난 종이를 비춥니 다. 주위의 빛이 모든 각도에서 부드러운 그림자를 만들면서 키 라이트는 방향성의 그림자를 만듭니다.

머티리얼환경에서의 그림자는이 두 광원에 의해 주조됩니다. 응용 프로그램 개발에서 그림자는 광원이 z 축을 따라 다양한 위치에 자재의 시트에 의해 차단되었을 때 발생합니다. 웹상에서 그림자는 y 축을 조작하여 표시하고 있습니다. 다음 예제에서는 6dp 높이의 카드를 보여줍니다.


물리적 특성.

1. 머티리얼은 X 및 Y 치수 (DP 측정) 및 균일한 두께 (1DP)을 변화하고있다.


2. 머티리얼은 그림자를 캐스팅 합니다.

그림자는 머티리얼 요소 사이의 상대적인 높이 (Z-위치)에서 자연적으로 발생.
그림자는 머티리얼 요소 사이의 상대적인 높이를 묘사.


http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsSmZ5VlNBRHBXNXM/inline%20whatismaterial-materialprop-physicalprop-PaperShadow_01_xhdpi_008.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.)

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. 머티리얼 콘텐츠는 어떤 모양이든 색상이든 표시된다.
   하지만 두꼐는 표현하지 않는다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsUGtDSTgtekFORGs/whatismaterial-materialprop-physicalprop-InkDisplay_xhdpi_006.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.)

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


4. 머티리얼의 컨텐츠는 머티리얼안에서는 독립적인 동작을 할수있지만
   머티리얼 범위 내로 국한된다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsT2ZXakpkaGp4bzQ/whatismaterial-materialprop-physicalprop-InkBehavior_xhdpi_006.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties



5. 머티리얼은 입체(고체?)이다.

do
입력이벤트는 오직 foreground 머티리얼에만 영향을 미칩니다. 


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


6. 여러개의 머티리얼 요소는 공간에서 동시에 동일한 점을 점유 할 수 없습니다.

대신에 머티리얼 요소를 분리하기 위한 하나의 방법은 고도를 사용하여 동시에 동일한점의 점유를 방지합니다.


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties



7. 머티리얼은 다른 물질을 통과 할 수 없습니다.

고도를 변경하는 경우, 예를 들어, 하나의 마티리얼의 시트는 또 다른 머티리얼 시트를 통과 할 수 없습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsc2VZVUJ5bFNscFU/whatismaterial_properties_physical_07_xhdpi_009.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


머티리얼 변형.

1. 머티리얼은 모양을 변경할 수 있습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsMndnRld3dl9nVU0/whatismaterial-materialprop-transformingmaterial-PaperShape_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


2. 머티리얼은 평면을 따라서 증대되거나 축소됩니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsLVpqQ0pBOXY3WDQ/whatismaterial-materialprop-transformingmaterial-PaperShapeLinear_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. 머티리얼은 굴절하거나 접히지않는다.


4. 머티리얼의 여러개의 시트는 또다른 하나의 머티리얼의 시트와 합칠 수 있습니다.
5. 머티리얼의 시트가 분할할때 머티리얼의 시트는 다시 합쳐질수 있습니다.


※머티리얼의 이동(운동)

1. 머티리얼은 자발적을 생성 또는 그밖에 환경으로 소멸 될 수 잇다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTUF0YzJrX0xfWmc/whatismaterial-materialprop-movementmaterial-PaperPointExpand_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


2. 머티리얼은 축 방향으로 이동할 수 있습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsYXIyWl9fZURydTA/whatismaterial-materialprop-movementmaterial-PaperMove_xhdpi_008.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. Z 축 방향 운동은 전형적으로 머티리얼과 사용자의 상호 작용의 결과이다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQW1HYnpicTVySG8/whatismaterial-materialprop-movementmaterial-Material_Response_xhdpi_003.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


원래는 동영상이 있어야지 저 글귀들이 이해가 아주 잘가는데 설마 있겠나싶지만 저작권이 혹시 있을지도 몰라서...
아무튼 직접 해당 페이지에 들어가셔서 보시면 잘이해되실겁니다.

이글의 원본은
http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material
이곳에 있습니다.


728x90
반응형

+ Recent posts