안녕~잘가~ Material Design (Bye bye Material Design)

이 글은Emin Durak Bye bye Material Design 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

다음 프로젝트를 위한 Material Design을 고려 중이신가요? 다시 한 번 생각해 보세요.
presentation
“Crystal Gradation” by Paul Klee (1921)

당신이 읽기 전에...

비판적 사고(critical thinking)를 가지고 쓰여진 텍스트를 읽기에는 너무 민감하다고 생각하신다면, 댓글을 남기시려면 염두에 두시기 바랍니다. 이 "도구"에 대한 이상하고 조건 있는 연결의 산물일 뿐이라는 코멘트는 감정적으로 주도되는 반응과 함께 작가들이 무관한 텍스트를 쓰는 데서 비롯되었습니다. 어떤 도구도 완벽하지 않으며, 그것들을 비평하는 것은 그들을 향상시키고 세상이 더 나은 곳이 되도록 도울 뿐이라는 것을 기억하세요. 게다가, 최소한, 이것은 여러분이 동의하지 않을 모든 권리를 가지고 있는 (웹 상의 다른 많은 사람들과는 달리) 의견 글이라는 것을 기억하세요.
Material Design(MDG hereafter)와 같은 설계 가이드라인이 달성하고자 했던 것은 먼저 크리에이터의 이익에 봉사하는 것이었고, 따라서 Google은 MDG를 위해 어떤 MDG를 말합니다. 그리고 그 결과 WWW의 최종 소비자를 위한 일종의 웹 사용능력을 만들게 되었습니다. 이 웹 사용능력은 기본적으로 매일 기본적인 정보를 소비하고 다른 플랫폼으로 이동하는 사람들을 위한 사용습관을 만드는 것을 의미합니다. 데이터를 지속적으로 소비하고 생산하지 않고 말이죠.
월드 와이드 웹은 거대한 정글입니다. 모든 것은 자연 그 자체와 마찬가지로 극소수의 우주에서 소음인자에 불과합니다.
먼저 Material Design이 적어도 21세기의 나머지 기간 동안 대부분의 용도에 적합하지 않은 이유를 설명하겠습니다.

잘못된 재단입니다

MDG는 수세기에 걸쳐 깊이 있는 design 지식(Gestalt, Vitrivius 등)을 가지고 구축되지 않았습니다. 그것은 단지 실제의 물질과 관련된 것으로 지어졌습니다. 그래서 그 이름은... 그들이 고려하고 복제하려고 했던 것은 읽고 쓰는 것의 재료이기 때문에 주로 종이인 재료의 실제적인 현상이었습니다(제 추측입니다).
이것은 웹을 위한 디자인에 있어 시기상조이고 얕으며 논쟁의 여지가 있을 정도로 잘못된 접근법입니다. 왜 그럴까요? 주된 이유는 정보의 인식이 종이마다 많이 다르며, 이 두 가지 거대한 개념들 사이에서뿐만 아니라 각각의 범위 내에서 서로 다른 맥락들도 있기 때문입니다.
먼저, "종이"와 "잉크"로, 무엇을 가리킵니까? 신문, 잡지, 소설, 백과사전, 삽화책, 어린이 책, 만화책, 포스터, 표지판이나 뭐 그런 것을 가리킵니까? 이러한 모든 영역에는 구현에 대한 개별적인 설계 원칙이 있으며, 그 사이에는 상호 교환할 수도 없습니다. 그렇다면 어떻게 완전히 다른 것에 적용시킬 수 있을까요?
웹은 그 자체로 매우 뚜렷하고 거대한 영역입니다.

쉐이드 포르노

MUI에는 어디에나 있는 종이 구성요소가 있습니다. 제가 본 그 어떤 솔루션에서도 시각적 정보가 채워져 있는 것은 아닙니다. 제 말은 당신이 일요일 아침에 읽을 때 신문 조각을 자르고 그 조각들을 서로 쌓아놓지 않는다는 거죠, 그렇죠?
MDG를 사용하는 Google 클라우드 플랫폼에서 다음을 확인합니다.
presentation
이유 없이 생성된 가상 3D 공간을 이해하려고 노력하지만, 시청자의 눈으로 착각하는 거리를 시뮬레이션하여 사용자의 관심을 끌려는 항목으로 인해 발생하는 혼란입니다...
저는 당신을 모르지만, 여러 사람들이 바자회에서 동시에 다른 것들을 팔려고 하는 것처럼 웹 페이지가 나타나는 것을 원하지 않아요.
사용자는 주어진 시간에 한 가지 주의를 기울이며, 일시적으로 상호 작용하는 모든 주어진 매체로 가장 잘 존중됩니다.
또 다른 예는 정말 흥미롭지만 이상한 예입니다. 아래의 이 사진에서 착시현상을 찾을 수 있습니까?
presentation
App Bar(위쪽)는 메인 wrapper위에 표시되지만 탐색은 표시되지 않습니다. 이 위치는 래퍼와 같은 높이로 표시됩니다. 그렇다면 현실에서는 어떻게 그런 일이 가능하겠습니까?
presentation
MDG와 마찬가지로 이 문제에 휘말려 아무데도 가지 못할 수 있습니다.
제가 이 특정 정보를 공유하고자 했던 이유는 사실 이 사례의 적용 범위를 벗어난다는 것입니다. MDG와 MUI에서 종이 구성요소를 사용하는 것은 어디서나 가능한 일이며, 주어진 모든 shades 때문에 디자이너와 개발자는 MDG를 채택할 경우 해결해야 할 문제에 직면해야 할 경우가 많습니다.

인간-기계 상호 작용

MDG는 주로 모바일(특히 Play Store의 Android 앱)용으로 제작되었습니다. 모바일은 단지 "작은 화면"만을 의미하지는 않습니다. 또한 손가락 대 마우스와의 상호 작용을 의미합니다. 손가락은 마우스보다 훨씬 크며, 장치와 화면에서 작동하기 위해 구현된 감도와 동작이 다릅니다. 또한 모바일에서 한 화면에서 수행할 수 있는 작업은 크기 문제로 인해 데스크톱에서 수행하는 작업보다 훨씬 제한적입니다. MDG와 MUI가 적절한 방식으로 처리될 정도로 많은 세부 정보가 있지만, 이러한 세부 정보가 반드시 대부분의 애플리케이션의 요구 사항과 상황에 잘 부합하는 것은 아닙니다.
주로 Android 또는 일반적으로 모바일에서 앱을 개발하고 있지만 설계 리소스가 많지 않은 경우 MDG를 채택하여 많은 이점을 얻을 수 있습니다. 그럼에도 불구하고 모든 것을 부여받은 대로 받아들이지 않고 자신의 필요에 맞게 맞춤화할 수 있도록 하는 것이 매우 권장됩니다. 그럼에도 불구하고, 이것은 결국 당신이 다른 모든 사람들로부터 영감을 받은 자신만의 지침을 만드는 것보다 더 많은 시간이 걸릴지도 모릅니다.

압도적인 피드백 지표

우선 이 방법이 사용자가 특정 터치 스크린 장치에서 터치하는 위치를 표시하기 위한 좋은 방법이라는 점을 인정해야 합니다. 핑거 스크린의 접점이 모호한 특성을 고려할 때 말입니다. 사용자들이 바로 그들이 어디에 손을 대는지 알 수 없기 때문에 그것은 또한 필요했습니다.
하지만, 세상에, 이건 쉽게 압도될 수 있어요.
presentation
여러분은 이것을 오래 사용하는 것은 고사하고 10초 이상 동안 볼 수 있나요?
MDG는 모바일 장치의 최종 소비자를 위해 개발되었기 때문에(대부분 Android 앱의 경우), 사용 빈도가 상당히 낮은 것으로 간주되었습니다(앱당). 따라서 시각적으로 상당히 공명(만지거나 클릭할 때 클릭하는 위치를 나타내는 원 애니메이션)이 있는 것처럼 많은 상호 작용을 만들었습니다. 이는 모바일 앱의 역학을 잘 모르는 사용자가 즉각적인 피드백을 통해 자신의 상호 작용을 쉽게 이해할 수 있기 때문입니다. 따라서 다른 앱을 사용할 때도 전체 경험에서 일관성이 있습니다.
그럼에도 불구하고 이러한 상호 작용은 데이터 집약적인 애플리케이션을 짧은 시간 동안 사용한 후 원하는 작업으로부터 주의를 딴 데로 돌리는 사용자에게는 쉽게 압도적일 수 있습니다. 전화기에서 가끔 특정 앱을 사용하여 소파에 앉아 있는 사람들의 습관에는 많은 차이점이 있습니다. — 데이터 로드가 많은 데스크톱 애플리케이션을 지속적으로 사용하는 사람들은 아마도 돈을 받는 일상 업무의 요구 사항으로 사용할 수 있습니다.
따라서 주로 데스크톱과 모바일, 사용 빈도가 낮은 데스크톱을 설계할 때 고려해야 할 차이점이 매우 많습니다.

데이터 원본 구성 요소의 수가 부족합니다

데이터 기반 구성 요소는 무엇입니까? 이 구성 요소는 기본적으로 지정된 데이터 콘텐츠 자체를 표시, 입력 또는 사용자 정의하는 두 가지 구성 요소 중 하나를 위해 설계 및 구축된 구성 요소입니다. 예를 들어, 도면에는 일부 항목이 포함될 수 있지만, 도면(Drawer)에는 데이터 원본이 아닌 구성요소가 있습니다. 반면에 표(Table), 양식(Form) 또는 피드(Feed)도 데이터에서 유래한 구성요소의 좋은 예입니다. 지정된 링크를 클릭하여 해당 구성 요소가 속한 라이브러리도 볼 수 있는 각 구성 요소의 좋은 예를 볼 수 있습니다.
presentation
형태는 아마도 우리 시대의 가장 많이 사용되는 구성 요소이기 때문에 일관성 있게 설계하고 구축하기가 어렵다. MUI 라이브러리에는 이 라이브러리를 처리하는 구성 요소도 없습니다(기본 입력 구성 요소만 있음). 예로는 Ant.design에서 좋은 구성 요소로 받아들입니다.

Forgotten Anchor는 언급되지도 않습니다(Anchor is not even mentioned).

이 섹션은 글 발행 후 추가했습니다(2018년 1월 25일).
MDG에는 버튼 전용 섹션이 4개 있습니다.
그러나 HTML 역사상 가장 근본적인 요소 중 하나인 앵커(anchor)에 관한 정보는 없습니다: <a />
저는 개인적으로 이것이 매우 슬프다고 생각합니다. 어떤 것도 약속하지 않고도 WWW를 탐색할 수 있는 링크가 만들어집니다. 그것들은 웹의 상호 운용성의 기초입니다. 일부 기사에서 다른 기사로 연결되는 링크를 클릭하고 웹 읽기를 탐색할 수 있습니다. 이 모든 것은 이 기능을 지원하는 하이퍼링크 덕분입니다. 또한 앵커 또는 단지 "링크"는 웹 응용 프로그램 내에서 탐색하는 데 종종 사용됩니다. 이것은 웹의 매우 근본적인 측면일 뿐입니다(fundamental aspect of the web).
버튼과는 대조적으로, 앵커들은 또한 문단의 활자를 보존하는 동시에 시각적 혼란 없이 단락에서 뛰어내릴 수 있는 수단을 제공함으로써, 읽고 쓰는 능력을 일관적으로 유지하는 좋은 방법입니다.
그럼에도 불구하고 Material Design은 언급조차 하지 않습니다. 이것은 제게 있어 주로 또는 심지어 안드로이드만을 위해 만들어졌다는 증거입니다.

결론

Material Design 가이드라인과 그에 따라 만들어진 라이브러리는 이전에 21세기 인터넷 사용자들에게 필요한 많은 문제들을 다루었습니다. 그 중 가장 중요한 것은 전반적인 경험의 "일관성"일 뿐입니다. 100개의 다양한 UI를 사용할 때, 우리는 버튼이 무엇인지, 그리고 메뉴가 무엇인지를 알고 싶어합니다.
디자인 가이드라인이나 단지 디자인 자체가 "나쁘다"거나 "허접"하거나 충분히 널리 퍼진 경우, 사용자가 그에 따라 습관을 만들기 때문에 사용자들에게 일관성이 있게 됩니다. Material Design는 사람들이 Facebook 뉴스 피드를 시청하는 사람들로부터 적극적으로 결정을 내리고 버튼을 클릭할 수 있는 노드로 변화시키는 보다 매력적인 사용 습관을 형성하는 좋은 패턴을 이루었다고 생각합니다.
하지만, 제가 말하고자 하는 것은 사용자들이 웹 사용능력(web literacy)을 더 잘 경험할 수 있도록 하는 것입니다. 우리는 더 이상 화려한 버튼이나 화려한 전환이 필요하지 않습니다. 우리는 더 섹시한 새 라이브러리는 필요 없어요. 우리가 필요한 것은 사람들에게 더 나은 정보를 제공하고, 기본적인 인간의 인식 패러다임을 다루는 더 좋고 건강한 지침을 만드는 것입니다. 우리는 게스탈트 원칙(Gestalt Principles), 비트리비우스 원칙(Vitrivius Principles), 그리고 역사에서 만들어진 다른 어떤 것들로부터 영감을 얻을 수 있는 선택의 여지가 없습니다.
만약 여러분이 다른 사람을 필요로 한다면, 연구하는데 시간을 좀 내주세요, 그리고 다른 사람의 도움으로 정제되고 합성된 것을 만드는 것(create one)을 두려워하지 마세요. 개인적으로 (Alibaba가 만든) ant.design은 제가 이것에 대한 연구를 계속하도록 영감을 주고 더 자세히 설명하도록 했습니다.
다음은 이미 사용할 수 있는 가이드라인과 라이브러리의 혼합입니다.
Doruk Demircioğlu 덕분에 다음과 같은 이점을 얻을 수 있었습니다.
https://adele.uxpin.com/
  • https://react.semantic-ui.com/introduction
  • https://ant.design/docs/spec/introduce
  • https://www.lightningdesignsystem.com/ (added 25th Jan 2018)
  • http://grommet.io/
  • http://www.oracle.com/webfolder/ux/middleware/alta/index.html
  • https://www.sap.com/sweden/products/fiori.html
  • https://primer.github.io/
  • https://purecss.io/
  • https://foundation.zurb.com/
  • https://vmware.github.io/clarity/
  • http://rizzo.lonelyplanet.com/
  • 더 많습니다...

이 글은 번역 글입니다. 원본 링크입니다.
https://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4


https://www.facebook.com/groups/224179755005643/
안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp