디자인 시스템을 구성하는 방법

Dong-gri
Dong-gri
Mar 6, 2017 · 13 min read

디자인 시스템이란 무엇인가요?

디자이너가 잘 만들어진 UI Kit을 좋아한다는 것은 널리 알려진 사실입니다. 하지만, 단순히 툴킷과 정해진 스타일 가이드를 이용하는 것을 뛰어넘어, 최근에는 이러한 프레임워크들을 하나로 합친 시스템을 직접 만들어내는 것에 주력하고 있습니다. 이런 시스템 설계에 중점을 둔 사내 팀을 두는 회사로는 ShopifyIntercom가 있습니다. 사람들은 체계적인 디자인의 중요성을 깨닫기 시작했고, 이러한 사고를 중요하게 생각합니다. 어쩌면 이런 디자인 시스템을 구축하지 않고도 사용할 수 있는 디자인 툴이 이미 존재하는지도 모르겠습니다.


디자인 시스템을 기반으로한 디자인 명세서 만들기

색상

가장 명확한 스타일 속성부터 시작해 봅니다. 그래야 컬러의 이름을 지정하고 저장하여 재사용할 수 있습니다.

브랜드 색
성공을 의미하는 초록색과 실패를 의미하는 빨강색
  • 테두리, 선, 획 또는 구분선에 대한 약간 어두운 회색
  • 부제목 및 본문, 인용구를 위한 중간 회색
  • 주 제목, 본문 및 배경에 대한 짙은 회색
최종 결정된색상 파레트

그림자

그림자는 UI에서 흔하게 사용되는 스타일 속성 중 하나입니다. 지금까지 봤던 것들을 통해 많은 디자이너들이 구성요소를 디자인 하는 동안 그림자를 이용한다는 것을 볼 수 있었습니다. 실제로 대부분의 스타일 속성에 동일하게 적용됩니다. 만약 투명도나 각도, father값 등이 다른 제각각의 그림자를 만든다면 이는 일관성 없는 UI로 변질되게 됩니다.

  • 마우스를 올렸을 때 그림자가 더 짙어지는 것
  • drop down, pop over 및 기타 유사한 구성 요소에 대한 강한 그림자
  • modal 창에 대한 거리감(입체감)을 주는 그림자
약한 그림자 부터 강한 그림자 까지

글꼴 크기

각 화면에 적절한 시각 계층 구조를 만들기 위해서는 다양한 글꼴 크기를 정해야 합니다.

  • 예를 들자면, 블로그에 있는 본문 글자 크기에 비해 약간 더 큽니다. (기본으로 사용하는 본문의 크기 12px)
  • 제목과, 하위제목의 크기를 크게 둘 때
  • 세션의 제목을 가장 큰 사이즈로 둘 때
  • 가격 책정 페이지에 나와 있는 가격의 크기가 상대적으로 큰 크기일 수 있습니다.
  • 본문의 인용구, placeholder, 기타 보조 텍스트등과 같이 몇몇의 작은 크기가 필요할 수도 있습니다.
글꼴 크기

둥근 모서리

이제 개별적인 스타일 요소들에 동일한 디자인 시스템을 적용하는게 문제입니다. 네 개의 모서리를 둥글게 하기 위해서는 다음의 사항들을 고려해야 합니다.

  • input box와 button에 필요한 조금더 둥근 곡면을 필요로 하는 요소들
  • 모달창, 카드 및 기타 큰 둥근 곡면을 필요로 하는 요소들.
2px, 4px and 8px 반지름 값을 가진 둥근 모서리

간격 띄우기

대부분의 디자인에서 가장 많이 사용하는게 빈 공간입니다. 제목에서 링크와 거리를 주거나, 목록의 요소와 요소사이를 띄우는 것이 여기에 해당합니다. — 간격의 크기는 임의적이거나 의도해서 적용하면 안됩니다.

자간

앞서 언급한 글꼴 크기는 텍스트 구성요소를 정하는 유일한 스타일 요소는 아닙니다. 자간은 큰 제목을 돋보이게 하거나, 더 작은 제목에 여유를 두어 숨을 쉬게 하는데에 사용할 수 있는 또 다른 유용한 속성입니다.


UI 라이브러리 만들기

디자인 명세서를 정했기 때문에, 이제 정해진 요소들을 가져와서 UI라이브러리를 만들 수 있습니다. 이러한 UI라이브러리는 독특하고 창의적인 디자인을 적용하는 것이 아닌, 사전에 정의한 스타일을 간단하게 html에 입히는 것입니다.

흔히 쓰는 일반 버튼

간단한 팔레트 구성요소로 시작해서 스타일 팔레트에서 사전에 정의한 스타일만을 사용하여 구성요소를 구성하는 방법을 설명하겠습니다.

기타 구성 요소

다시 말하지만, 여기에 쓰여진 색상과 글꼴 크기, 그림자 및 padding 값은 모두 앞서 정의한 디자인 명세서 디자인 시스템에서 가져옵니다.

여기서 좀 더 파고들면

몇 가지 구성 요소를 설계하고 구축하면 여러 구성 요소를 결합하여 dropdown 구성 요소와 같이 더 복잡한 구성 요소를 만들 수 있습니다.


길찾기 팁

  • 특정 구성 요소에는 사전에 디자인 명세서 디자인 시스템에서 정의하지 않는 값들이 필요합니다. (예: side bar가 필요할 때) 필요한 구성요소의 너비가 원래의 너비의 1/3에 불과합니다. 이 경우 다른 곳에 재사용할 수 없기 때문에 괜찮습니다. 이 글의 요점은 재사용 할 수 있는 스타일인데도 불구하고 임의로 바꾸어 재사용 할 수 없는 스타일로 만드는 것을 지양하자는 것입니다.
  • 사이트에 삽입한 구성요소들이 본연의 디자인 시스템에 따르도록 해주세요. 버튼, input, 제목 또는 기타 구성 요소에 여백을 추가하지 마세요. 사전에 정의한 디자인 명세서 디자인 시스템 값만 사용해야 합니다. margin은 경우에 따라 다르므로, 이를 감싸는 상위의 부모 div를 만들어 별도로 적용하는 것이 좋습니다. Harry Roberts가 이에 관한 좋은 포스팅을 올렸습니다.

guleum

Dong-gri LAB

Dong-gri

Written by

Dong-gri

making a dent in the universe.

guleum

guleum

Dong-gri LAB