디자인 시스템 스터디 | 구글 메테리얼 가이드 | 컴포넌트 별 명칭과 특징, 레이아웃 및 그리드 시스템

 

리디자인 스터디에 이어서 디자인 시스템 스터디도 6주간 진행했습니다.

 

원래 새로운 앱 프로젝트를 겸하기도 했었는데, 각자 다른 프로젝트들로 바쁘기도 하고 생각했던 볼륨대로 프로젝트 기획이 완성되지 않는 문제로 인해서 각자 따로 진행하고 있던 다른 프로젝트를 진행하기로 했습니다.

그에 대한 포스트는 디자인 시스템 스터디 포스트와 별개로 업로드할 예정입니다.

 

이번 스터디에서는

- 디자인 시스템은 무엇인지

- 어떤 것의 가이드를 어떤 식으로 정의하고 있는지

-우리가 참고할 만한, 일반화된 가이드가 있을지

를 중심으로 각자 구글 메테리얼 가이드, 애플 휴먼인터페이스 디자인의 내용을 정리하여

새롭게 알게 된 내용을 PT 형식으로 발표해주는 시간을 가졌습니다.

 

두어번 건너뛰어지긴 했으나, 어쨌든 디자인 시스템이 무엇인지 알고 가기에는 충분한 시간이었던 것 같습니다.

또한 각기 디자인 시스템의 전체를 다루지 않고있고, 레이아웃, 간격, 아이콘, 색상, 컴포넌트 정도의 일부분만을 참고하여 학습했습니다. 디자인 시스템이란 어차피 제품*서비스*회사 별로 각기 다르게 정의될 수 있는 것이기 때문에 특정 디자인 시스템을 전부 모방하기는 어렵기 때문입니다. 그럴 필요도 없구요. 단지 구글과 애플의 디자인 시스템이 오랜 시간 발전되어졌기 때문에 더 정교하고 공학적인 근거를 기반으로 하기 때문에 이를 참고로 하는 것입니다.

 

 

 

**

스터디에 사용된 디자인 시스템 이미지들은 모두 구글 메테리얼 디자인에서 가져온 것이며

이 포스트는 상업적인 목적을 가지고 있지 않은 학습 콘텐츠임을 밝힙니다.

 

컴포넌트의 종류가 많아 임의로 4개의 그룹으로 나누어 학습했습니다.

이걸 다 알아야 하나요? 라고 했을 때 최소한 어떤 컴포넌트가 어떻게 불리우는지 정도는 파악하는게 개발자와의 커뮤니케이션에 도움이 될 것이라고 하겠습니다. 아래 관련 아티클을 첨부합니다.

PM을 위한 디자이너/개발자와의 커뮤니케이션 꿀팁

스터디에서는 각 컴포넌트의 이름과 특징, 구체적인 인터렉션 방법 등에 대해서 공유했으나

텍스트로 관련 설명을 정리해두지 않아서 포스트에는 함께 올리지 못하는 점 양해바랍니다.

구글과 애플의 디자인 시스템에서 각기 다르게 정의되는 컴포넌트들이 있기 때문에(위 아티클을 보셨다면 아시겠지만) 이를 유의하면서 공부하면 좋을 것입니다.

주변에 친한 개발자가 있다면, 함께 디자인 시스템을 공부해보는 것도 큰 도움이 됩니다.

 

저는 웹을 작업하지 않아서 웹의 가이드는 생략했습니다만, 최근들어 웹 디자인의 필요성을 다시금 느끼고 있어 추후 추가할 예정입니다. 우선 모바일을 중심으로 설명드리겠습니다.

 

일반적으로 360 * 640 의 해상도를 최소로 작업하게 된다고 합니다.

이에 따르면 상하좌우의 마진은 16dp가 되고 피그마를 사용하시는 분들은 칼럼과 로우의 개수와 거터 값을 각기 표대로 정의내리면 그리드 시스템이 완성됩니다. 조금 더 큰 해상도를 기준으로 작업하신다면(폭이 600~904 사이일때는)마진값이 32dp라고 하네요. 칼럼과 로우 개수는 동일하며 거터 값은 8dp가 됩니다. 두 배가 되는 군요.

 

많이들 익숙하실 내용입니다.

격자 그리드는 8dp를 중심으로 하며, 텍스트, 아이콘 등 일부 컴포넌트의 한해 4배수의 값을 사용한다는 내용입니다.

어떤 컴포넌트에서 4배수를 쓰는지는 명확하지 않지만 일반적으로 4배수 값을 사용하고 여백(마진 등), 간격 등에서는 8배수를 사용한다면 적절할 것 같습니다.

 

 

그렇게 배수단위로 작업을 하다보면 위에서 만들었던 칼럼과 로우에 딱 떨어지지 않기도 하는데,

괜찮습니다. keyline이라고 하는 그리드 시스템에 맞지 않더라도 해당 스크린의 일관성을 부여하는 개념이 있습니다. 

물론 이것도 4, 8배수 법칙을 기반으로 합니다.

요약하면 UI디자인에서 어떤 것을 배치할 때 4, 8배수 법칙이 가장 상위하고, 그 다음이 키라인, 제일 마지막이 칼럼과 로우 가이드라는 것입니다. 즉 칼럼, 로우를 정의 내리더라도 해당 가이드는 단순 참고용으로만 사용하면 되고 모든 컴포넌트들이 딱딱 떨어질 필요가 없다는 것이 됩니다.

딱 맞출 필요가 없다- 고 해버리면 디자인 시스템의 의미가 퇴색되어 버리죠.

네, 꼭 반드시 특정한 값을 정의한대로 사용해야 하는 컴포넌트들도 있습니다. 

이미지, 아이콘, 면적있는 UI 컴포넌트(버튼 등)이 그렇습니다.

특히 아이콘은 OS 별로 겹치는 부분이 많기 때문에 어떤 사이즈로 구성되는지 알 필요가 있습니다.

기본적으로 24*24dp의 사이즈로 아이콘의 그래픽이 정의되고, 마진 값이 12dp 씩 상하좌우로 들어가게 됩니다.

이 마진 값에 의해서 아이콘의 터치 타겟이 실제 그래픽 영역에 비해 넓어지는 것입니다.

48dp의 터치타겟은 위에도 언급되었었지만 실제크기로는 7~10mm 정도로 손가락으로 터치했을 때 평균적인 면적이라고 합니다. 즉 아무리 작은 컴포넌트라도 최소 터치타겟을 48*48dp로 설정해야 할 것입니다.