그냥 아래 페이지들 읽으면서 그냥 메모하듯이..두서없이 적은 글씨(글X)라 그냥 아래 링크 읽으시는거 추천, 추후 또 추가될 수 있음
https://m3.material.io/
https://material.io/
프론트엔드 직무에서 유의해야할 것들.. 이런 디자인 시스템에 대한 이해도가 있어야 나혼자 구성할 때도 잘 하고 주어진 디자인도 구조적으로 잘 구현해 낼 수 있음
단순히 생김새만 말하는 것이 아니라 동작 방식과 역할 등을 같이 고려
각 요소를 좀 개별의 것들로 보고 구조를 짜는게 좋다. → 독립적인 것으로 생각
요소마다 나름의 정해진 depth가 있고 이를 고려해서 배치해야함
→ 뭔가 일부러 shadow를 더 주고 올라오게 만들고 그런게 아니라 실제 종이로 걔네를 쌓는다고 생각하면 좋을 듯 → component
미적인 부분도 분명 중요하지만 이외에도 많은 것을 고려해야함
접근성 같은 경우 마우스 없이 키보드 만으로도 페이지 전체를 탐색할 수 있어야하고 스크린리더가 화면의 컨텐츠를 빠짐없이, 순서대로 잘 읽어줄 수 있어야 하는 등 사용자가 웹/앱에 어떻게 접근해도 이용할 수 있도록 환경을 제공해야한다. 물론 이제 거기서 사용자 경험을 더 향상시킬 수 있는 추가적인 디자인이 더 필요하겠지만.
이런 사용자 경험은 결국 사용자가 자신의 상태와 서비스 내에서의 위치(지금 어떤 페이지에 있는지)를 명확하게 알아야하고 어떤 것을 할 수 있으며 원하는 것을 하기 위해서 어떻게 해야하는지를 분명하고 쉽게 알 수 있도록 하는 것이 중요한 것 같다. 사용자를 헷갈리게 하지 말자. ‘이걸 누르세요!’ 같이 튜토리얼을 매 화면, 매 접속마다 해줄 수 없으니 사용자가 그 행동을 하고 싶은 기분이 들게 끔 만들어야한다.
이러한 것도 포함하는 것이 material design. 이대로 하지 않고 나만의 디자인을 만들 수도 있겠으나 썩 좋을 것 같진 않다.
아이콘이 24dp 여도
터치타겟 : 48dp / 포인터타겟 : 44dp / 타겟 스페이싱: 8dp
→ 각각의 요소를 쉽게 누를 수 있도록해주는 최소한의 공간(너무 넓어도 이상)
→ 이런 input들도 순서를 잘 맞춰줘야한다, 실제 시각적인 순서는 물론(위에서 아래, 왼쪽에서 오른쪽) 키보드의 탭을 눌렀을 때 포커싱되는 순서(그래서 포커싱 됐을 때 디자인의 변화를 주는 것이 좋음)도 고려
이미지의 경우 alt를 작성해 주는 것이 좋다. SEO는 물론이고 스크린리더를 사용할 때 대신 읽어지기 때문. 간단히 표현하는 것이 좋으며 길어지는 경우 아예 캡션으로 빼는 것이 좋다.
웹의 경우 semantic html, 앱의 경우 기본 제공되는 디자인 등을 웬만하면 그대로 이용하는 것이 좋다. 만드는 입장에서도 효율적이고 사용하는 입장에서도 이미 익숙한 디자인이기 때문에 쉽게 이해하고 사용할 수 있기 때문이다.
semantic html등을 이용해서 구성하는 웹의 경우 아래와 같은 landmark를 제시하고 있다. bold 처리 된 것은 단 하나만 존재해야 하는 것
레이블 같은 경우 이미지의 alt와 caption처럼 모든 정보를 다 표시할 수 없을 때 부가적으로 설명하기 위해 자주 사용하게 된다. 이때 accessibility label의 경우는 생김새나 요소의 종류(버튼,텍스트필드 등)를 적어두는 것이 아니라 이것과 상호작용하면 어떤 행위를 할 수 있는지 또는 어떤 정보를 얻는지 등을 적어주는 것이 좋다. 만약 딱히 필요해 보이는 요소가 아니라면 필요하지 않은 요소라는 것을 명시해 주는 것도 이후 스크린 리더와 같은 보조 장치를 사용하는 사용자 경험에 도움이 된다.
보통 화면의 크기같은 경우는 앱과 관련되는 경우가 많지만 하지만 여전히 웹도 이를 활용하여 반응형으로 구성하면 좋을 것
body를 구성하는 column과 margin gutter 같은 경우 정말 30px column으로 5개가 들어가야해! 이런걸 지정하기보단 content를 구성할ㄷ 때의 기준을 잡으라는 것이다. → css 로 표현한다면 calc(var(—column) * 6 + var(—margin) * 5 … )
이런 식으로 생각할 수 있을 것 같음
위에서 기본 제공 컴포넌트를 사용하는 것이 좋다고 했지만 차라리 형태가 바뀔 수 있음 일반적 dialog에서 bottom sheet라든가
아이패드처럼 큰 화면에서 사용되는 앱의 경우 웹처럼 커서/포커스/hover 스타일도 지정해주는 것이 좋음 → 트랙패드나 마우스를 이용할 수도 있기 때문에(접근성 고려?)
→ 그래서 고려해줘야 하는 경우가 생각보다 많음
버튼의 경우 enabled / disabled / hover / active / focus 를 모두 고려해주게 됨 → 다른 부가적인 입력도 있겠지만 (내생각)보통의 어플들이 어떤 것을 터치함으로써 사용되기 때문에 버튼이 꽤나 많이 쓰일 수 밖에 없다고 생각(사실 어떤 것이든 간편하게 상호작용할 수 있는 대표적 요소기도..)
가로 세로를 돌릴 수 있을 때 현재 사용자가 어느 요소에 집중하고 있는지(목록 or 글) 을 고려하여 화면이 변경되었을 때도 집중하고있던 부분을 강조시켜야함
요즘 폴더블폰이 많이나오는 만큼 해당 hinge부분에도 정보가 위치되어 접히는 경우를 최대한 피해야한다.
이런 material design을 할 때 고려해야할 것들…