material design

zmin·2022년 8월 5일
frontend주저리주저리
0

그냥 아래 페이지들 읽으면서 그냥 메모하듯이..두서없이 적은 글씨(글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 처리 된 것은 단 하나만 존재해야 하는 것

  • navigation: 여러개 존재할 수 있으나 이 경우 레이블을 붙임
  • search
  • main: 실제 컨텐츠가 담기는 큰 컨테이너
  • banner: semantic tag의 header. 보통 페이지가 바뀌어도 일정하게 유지
  • complementary: main 과 독립적인 sidebar
  • contentinfo: semantic tag의 footer.
  • region: semantic tag의 section. main 내부에서 중첩되어 사용되며 같은 주제를 가지는 것들이 동일한 region을 가짐
  • form

레이블 같은 경우 이미지의 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을 할 때 고려해야할 것들…

  • Environment
    • Surfaces
      • 세상은 3d, 우리가 만드는 화면도 구조적으로 봤을 때는 3d 다. 물론 페이지 자체에 두께가 있는 것이 아니라 얼마나 더 위쪽에 있나, 공간상의 위치
        그림자를 주는 것도 납작한 거에 주변에 그림자를 칠해주는 게 아니라 표면에서 얼마나 멀리 떨어져있나를 생각
      • solid → 이벤트가 material을 통과하여 발생할 수 없음
        • 서로가 서로를 통과하는 것도 안됨 그냥 하나의 표면이라고 생각
        • 어플/웹을 3d 공간으로 생각하는 것이 좋음
      • 같은 material이지만 위치에따라 다른 depth(z)를 가질 수 없음 → 평면이기 때문에
      • 고정되어있는 크기일 수도, 늘어나거나 줄어들 수 있는 크기일수도, 내부 컨텐츠가 scroll 되는 표면일수도
      • surface 내부에 또 surface 가 존재할 수도 있음 → layout
      • 각 surface는 구분이 가도록 만들어줘야한다.
    • Elevation
    • shadow
      • 앞 쪽에 위치하도록 해야함 그니까 화면을 너무 정면 위에서 바라본게 아니라 살짝 기울여서 아래쪽에서 본 것 마냥
      • 디자인 적인 요소라기 보단 실제 그림자인 것처럼 생각하기
  • Layout
    • 한 화면을 구성하는 margin, column, gutter
    • 컨텐츠영역을 정의하는 column → 큰 컨텐츠를 위해서라면 여러개의 column을 쓸 수 있음
    • gutter → 각 column 사이의 여백 → 컨텐츠를 구분하는 역할
    • margin 전체 컨텐츠와 edge사이의 거리
  • Spacing method
    • 4dp baseline → 큰 값을 원할 때는 이제 4의 배수로 설정, 값을 줄 때 좀 더 편해짐 (17 19 이런 숫자가 없기 때문에..)
    • padding
      • content column 내부에서 각 요소 사이의 거리, ui element 사이의 거리를 말함
    • dimension
      • ui element의 크기
    • alignment
    • Component behavior
      • 화면타입에 따라 각 컴포넌트가 어디에 위치하고 어떻게 이동하는지 정의
    • Responsive pattern
    • applying density
      • density scale은 보통 음수방향으로 작아지는 것 처럼 → default가 있고 compact가 있음
      • density를 키우는 방법은 위에서 말한 spacing method
      • 최소 touch target을 48dp로 맞춰줘야함→ 누를 수 있는 영역 확보
        • ios의 경우 44dp 를 추천
  • Navigation
    • Lateral navigation : 같은 계층
    • forward navigation : 아래계층
    • reverse navigation : 위 계층
profile
zmin
308 Permanent Redirect
이전 포스트

?

다음 포스트

react와 server side rendering

0개의 댓글