티스토리 뷰
오늘은 구글 Material Design 네이밍을 살펴보려고 한다.
디자인 시스템을 아예 분석하고 싶지만, 도저히 어떻게 해야 하는지 모르겠다.
그 전에, 네이밍을 살펴보는 이유는 다음과 같다.
1. 신규 서비스의 디자인 시스템을 빠르게 구축하기 위해
2. 개발자와의 효율적인 소통을 위해
이번 사이드 프로젝트를 통해 처음 개발자와 소통하며 일을 하게 됐고 이 과정에서 어떤 이슈가 생길지 모르기 때문에
미리 내가 아는 선에서는 나름의 준비를 하고자 한다.
-
구글 Material Design
구글에서 제공하는 디자인시스템 파일을 다운 받아 피그마에서 열면 폰트와 색상의 이름을 확인할 수 있다.
폰트
display, headline, body, label, title 로 나뉘어져 있으며 각 카테고리마다 large, medium, small 로 동일하게 구분되어있어
인식이 빠르고 외우기가 쉽다.
폰트의 크기는 짝수, 홀수 상관없이 자유로운 것 같지만 텍스트의 line height, 줄간격은 모두 4의 배수로 설정되어있다.
한 가지 궁금한 점은 카테고리가 어떤 순서로 지정되었는지 모르겠다. title이 body보다 위에 있어야 한다고 생각하는데, 저렇게 둔 이유는 아직 모르겠다.
display부터 body까지는 모두 regular, label은 medium, title은 large- regular, medium과 small은 medium
이건 어떤 규칙이 있는 건지 모르겠다. 아마 진짜 구글에서 사용하기 위해 분류해 놓은 것 같다.
다른 디자인시스템은 어떻게 되어있는지 궁금해서 바로 피그마 커뮤니티에서 디자인시스템을 받아 열어봤는데 카테고리별로 폰트 두께가 여러가지로 정리되어있다. 나는 후자의 방식이 더 편하게 느껴지니 디자인시스템 구축할 때 참고해야겠다.
색상
첫 번째 분류로 white, black, sys, ref, key-colors, source 로 나뉘어져 있다.
sys는 시스템, ref는 레퍼런스
이때 신기한 점은 여태 프로젝트에서 white 와 black 을 neutral color로 분류했었는데 여기서는 아예 카테고리 밖으로 나와있어서 이유가 궁금해졌고, 혼자 추측하기로는 아마 가장 많이 사용되기 때문에 편의성, 접근성을 위해 뎁스를 깊게 두지 않기 위함이 아닐까 싶다.
아까 열어본 다른 디자인시스템에서도 white와 black은 카테고리 밖으로 나와있다. 내가 추측한 이유가 틀릴지라도 일단 따라해야겠다.
두 번째 분류로는 primary, secondary, tertiary, error, neutral, netural-variant
가장 밝은 색이 100, 가장 어두운 색이 0으로 분류되어있다.
이 부분도 신기했던 게 여태까지 완전 반대로 인식하고 디자인시스템을 잡았기 때문인데 방금 열어본 디자인시스템에서도 구글과는 반대로 되어있었다.
색상 단계를 보면 0부터 100까지 10 간격으로 나뉘어져있고 조금 더 세밀한 분류가 필요할 때는 5 간격으로 나눠둔 것 같다.
그런데 98, 99... 뭘까
아마 5 간격으로 나누고서도 진짜 세밀하게 분류를 해야 할 때 1 간격으로 자유롭게 조정되는 것 같다.
-
스타일 분류 체계와 네이밍을 살펴본 결과, 내가 작업하기 편한 방식을 찾는 게 우선이라는 생각이 들었다.
디자이너인 내가 작업하기가 편해야 같이 협업하는 다른 동료들에게도 설명하기 쉬울 것 같아서.
그리고 네이밍을 분석하기 전에 디자인시스템에 관한 글을 몇 개 읽어봤는데 가장 많이 하는 실수가 너무 복잡한 디자인 시스템을 만드는 것이라고 나와있었다. 이런 내용을 참고해서 내가 아닌 다른 사람이 봤을 때도 이해하기 쉬운, 불필요한 분류(=쓸데없는 이해 비용이 들어감)가 없는 디자인시스템을 구축하는 것을 목표로 잡았다.
사실 토큰화를 찍먹하고서 디자인시스템을 세분화하면 할수록 작은 단위로도 관리가 가능하니까 편리할 것 같다고 생각했고 사이드프로젝트에서 MVP로 시장성을 검증하는 단계를 거칠 거지만 구글 머티리얼 시스템 정도의 디자인 시스템을 만들어야 하나 겁에 질려있었다.
다음은 토큰을 JSON으로 추출해 토큰 네이밍도 살펴보고자 한다.
도움이 되었던 아티클