일관된 디자인 시스템을 설계하고, 구축하기 위한 팁 (UI 라이브러리)
본 글은 Colm Tuite님이 작성한 글을 허락을 받아 제 나름대로의 의역을 덧붙여 번역한 것입니다. 어줍짢은 영어실력에 번역기와 사전 배경지식들을 더해 번역한 것으로 오역이 많을 수 있다는 점 미리 양해 부탁드립니다.
저는 항상 디자인 시스템에 관한 질문을 받아왔습니다. 그래서 지난 몇 년 동안 Marvel, Bantam 그리고 Modulz와 같은 프레임워크를 이용하면서 제가 배웠던 것들을 공유하고자 합니다.
디자인 시스템이란 무엇인가요?
디자이너가 잘 만들어진 UI Kit을 좋아한다는 것은 널리 알려진 사실입니다. 하지만, 단순히 툴킷과 정해진 스타일 가이드를 이용하는 것을 뛰어넘어, 최근에는 이러한 프레임워크들을 하나로 합친 시스템을 직접 만들어내는 것에 주력하고 있습니다. 이런 시스템 설계에 중점을 둔 사내 팀을 두는 회사로는 Shopify와 Intercom가 있습니다. 사람들은 체계적인 디자인의 중요성을 깨닫기 시작했고, 이러한 사고를 중요하게 생각합니다. 어쩌면 이런 디자인 시스템을 구축하지 않고도 사용할 수 있는 디자인 툴이 이미 존재하는지도 모르겠습니다.
디자인 시스템은 프레임 워크, UI Kit 또는 컴포넌트 라이브러리 이상의 역할을 합니다. 스타일 가이드와 코드 가이드라인도 뛰어넘고요… 디자인 시스템은 그것들을 합한 것보다 훨씬 더 큰 영향력을 발휘합니다. 디자인 시스템은 사이트를 다루는 진화된 새로운 방법입니다.
회사문화·사명을 시작으로 브랜딩, 카피라이팅, 라이브러리 및 기타 디자인을 다루는 언어를 통틀어 좋은 디자인 시스템에는 많은 것들이 담겨 있습니다. 높은 수준의 디자인 완성도는 모든 디자인 시스템의 가장 중요한 척도이지만, 회사의 목적에서 본다면, 당신은 당신이 누구인지, 당시 이 역할과 당신이 제품에 대한 Look&Feel, 그리고 기능적인 요소를 필요로 할 것입니다.
의역:
기존에 존재하는 bootstrap와 같이 만들어진 프레임워크를 사용하면 좋지만, 이런 프레임워크는 디자인 퀄리티만 높을 뿐, 회사의 브랜드 아이덴티티를 담아내지 못한다는 한계가 있습니다.
이런 중요한 요소들을 확보한다면, 해당 지식들을 기반으로 탄탄한 디자인 언어로 표현해낼 수 있습니다.
디자인 시스템을 기반으로한 디자인 명세서 만들기
의역:
원문에서는 디자인 스타일 파레트라고 쓰여있으나 확실한 이해를 돋구기 위해 디자인 명세서라고 지칭합니다.
삐까뻔적한 구성요소를 디자인하기 전에, 우선 우리는 구성요소의 기반들을 마련해야 합니다. 제품을 모두 분해해 뼈대만 남은 상태처럼 말이죠. 이 일이 모두 끝났다면, 더 이상 사전에 정의되지 않은 스타일이 우리 사이트에 존재해서는 안됩니다.
이를 가장 쉽게 표현할 수 있는 말은, ‘여러번 재사용 가능한 스타일 모음’ 정도 되겠습니다.
우리는 더 이상 분해가 불가능 해질 때 까지 분해할 필요가 있습니다. 이때 CSS 스타일 속성을 다룬 명세서를 활용하면 좋습니다. 대부분의 디자인 명세서의 요소들은 고정값만 허용하기 때문에 인터넷의 모든 웹사이트에서 다시 사용할 수 있습니다. 커스텀이 가능한 속성은 궁극적으로 우리 사이트를 다른 사이트들로 부터 차별화 할 것입니다. 우리가 만들 디자인 명세서는 사이트의 모든 측면을 설계하고 구축하는 데 사용됩니다.
디자인 명세서가 완성되면, 그 이후로는 사전에 정의되지 않은 스타일과 요소들이 사이트에 존재해서는 안됩니다.
색상
가장 명확한 스타일 속성부터 시작해 봅니다. 그래야 컬러의 이름을 지정하고 저장하여 재사용할 수 있습니다.
우리는 기본 브랜드 색상으로, 파란색을 선택했습니다. 보조 브랜드 색상으로는 파란색과 보색관계인 오렌지색을 선택했습니다.
보통 심리적 관습에 의해 성공과 실패를 전달하는 뜻으로 정해진 색인 초록색과 빨강색을 색상표에 추가해봅니다. 검은색과 노란색과 같이 대비가 큰 색도 좋습니다.
마지막으로, 우리가 필요한 것은 회색입니다. 대다수의 UI들은 다음과 같은 이유로 회색을 사용 합니다.
- 배경에 사용되는 매우 밝은 회색
- 테두리, 선, 획 또는 구분선에 대한 약간 어두운 회색
- 부제목 및 본문, 인용구를 위한 중간 회색
- 주 제목, 본문 및 배경에 대한 짙은 회색
물론, 이외의 용도로 더 많은 회색이 필요할 수 있습니다. 아마 본문에는 세 가지 다른 명도가 필요할 것이라 생각됩니다. Stroke Shades — [의역: 두 가지 다른 회색]을 선호 할 수도 있습니다. 요점은 미리 필요한 스타일과 그에 따른 색을 정해두어 나중에 사이트 어느곳에서나 재사용할 수 있다는 것입니다.
마지막으로, 각 색상별로 색조 또는 명도를 변형한 것을 추가할 수 있습니다. 밝은 배경 또는 어두운 선을 추가하기 위한 구성요소로서 디자인 할 때 유용할 수 있습니다.
그림자
그림자는 UI에서 흔하게 사용되는 스타일 속성 중 하나입니다. 지금까지 봤던 것들을 통해 많은 디자이너들이 구성요소를 디자인 하는 동안 그림자를 이용한다는 것을 볼 수 있었습니다. 실제로 대부분의 스타일 속성에 동일하게 적용됩니다. 만약 투명도나 각도, father값 등이 다른 제각각의 그림자를 만든다면 이는 일관성 없는 UI로 변질되게 됩니다.
한걸음 뒤로 물러나서 우리가 그림자를 사용해서 얻으려고 하는 것이 무엇인지 생각해봅시다. 우리는 각각의 UI 구성요소 마다 약간의 원근감을 주려고 하지만 많은 구성요소 대부분이 동일한 효과를 보인다는 것은 사실 부정할 수 없습니다. 이제 그림자 스타일을 개별 구성요소를 디자인 명세서로 바꾸는 것에 대해 고민해 봅시다.
다음의 네 가지 그림자는 시스템의 모든 구성 요소를 스타일링 하기에 충분해야 합니다.
- 상호작용하는 구성요소로의 행동을 유도하는 약한 그림자
- 마우스를 올렸을 때 그림자가 더 짙어지는 것
- drop down, pop over 및 기타 유사한 구성 요소에 대한 강한 그림자
- modal 창에 대한 거리감(입체감)을 주는 그림자
글꼴 크기
각 화면에 적절한 시각 계층 구조를 만들기 위해서는 다양한 글꼴 크기를 정해야 합니다.
악보에 나와 있는 음표와 마찬가지로, 글꼴 크기에 대한 적당한 비례감을 지켜야 합니다. 적당한 비례감은 부드럽고, 문서의 위계를 나타내는 시각단서가 될 수도 있고, 규칙에 따른 율동감을 주기 때문입니다. 처음 이것에 대해 다소 위압적이고 딱딱해 지루했었지만, 운이 좋게 몇몇의 용자들이 우리들을 위해 대신 수년간 연구했습니다. Tim Brown은 다양한 글꼴 크기를 비교할 수 있는 휼륭한 웹사이트를 만들었습니다. Adam Morse는 다이어토닉(diatonic type) (특정한 스케일 위에 그 스케일의 음만을 쌓아 올려 만들어진 코드 — 화성학 용어)을 적용한 글꼴크기 공식을 오픈소스로 공개했습니다. — [의역: 다이어토닉이라는 기법을 기반으로 일정한 비율의 글자 크기 공식을 만든 것 같습니다. 예를 들면 ‘일반 타이포에서 줄 간격의 크기는 자간사이 길이보다 길어야 한다.’ 처럼요.] 일반적으로 대부분의 웹에서는 3장도(Major Third)가 가장 적합합니다. — [의역: 작곡용어로 2온음의 간격을 둔 음정인 것을 보아, 이 역시 특정 간격으로 글자 크기를 지정한 공식을 가리킵니다.]
다음 단계에서는 대략 필요로 하는 글꼴 크기를 결정하고, “3장도 눈금”에 그려줍니다.
- 기본단위 (1em)은 일반적으로 가장 많이 쓰이는 기본 텍스트 크기입니다. 1em은 16px와 동일합니다.
- 예를 들자면, 블로그에 있는 본문 글자 크기에 비해 약간 더 큽니다. (기본으로 사용하는 본문의 크기 12px)
- 제목과, 하위제목의 크기를 크게 둘 때
- 세션의 제목을 가장 큰 사이즈로 둘 때
- 가격 책정 페이지에 나와 있는 가격의 크기가 상대적으로 큰 크기일 수 있습니다.
- 본문의 인용구, placeholder, 기타 보조 텍스트등과 같이 몇몇의 작은 크기가 필요할 수도 있습니다.
둥근 모서리
이제 개별적인 스타일 요소들에 동일한 디자인 시스템을 적용하는게 문제입니다. 네 개의 모서리를 둥글게 하기 위해서는 다음의 사항들을 고려해야 합니다.
- check box, tag와 label등과 같이 작은 곡면을 필요로 하는 요소들
- input box와 button에 필요한 조금더 둥근 곡면을 필요로 하는 요소들
- 모달창, 카드 및 기타 큰 둥근 곡면을 필요로 하는 요소들.
참고: 아바타 등의 원으로 이루어진 요소를 만들려면 50%의 반지름값이 필요합니다. (ex: border-radius: 50%)
간격 띄우기
대부분의 디자인에서 가장 많이 사용하는게 빈 공간입니다. 제목에서 링크와 거리를 주거나, 목록의 요소와 요소사이를 띄우는 것이 여기에 해당합니다. — 간격의 크기는 임의적이거나 의도해서 적용하면 안됩니다.
이러한 유형과 마찬가지로, 간격 띄우기를 사용해서 각 구성요소와 레이아웃이 일정하게 유지되도록 할 수 있습니다. 필자가 가장 좋아하는 간격 스타일은 Material design의 8dp 그리드 시스템입니다. Elliot Dahl은 8dp 그리드 시스템을 사용했을 시의 이점에 대해 별도로 포스팅을 작성했습니다. (영문)
8dp 체계를 사용하면서, 우리는 여러 가지 개별요소와 레이아웃을 설계하는데에 있어 다양한 간격을 사용할 수 있습니다.
또한 우리는 이 간격 값을 이용해서 크기를 조정하거나, form 형식, 아바타등과 같이 유사한 다른 요소에 대해 재사용할 수 있는 간격 값들을 설정할 수 있습니다. 이런 구성 요소는 웹 사이트 전체에서 서로 나란히 나타나기 때문에 동일한 간격을 적용하면 서로 간격이 맞지 않는 등의 불일치 문제를 해결 할 수 있습니다.
자간
앞서 언급한 글꼴 크기는 텍스트 구성요소를 정하는 유일한 스타일 요소는 아닙니다. 자간은 큰 제목을 돋보이게 하거나, 더 작은 제목에 여유를 두어 숨을 쉬게 하는데에 사용할 수 있는 또 다른 유용한 속성입니다.
3개 또는 4개의 문자 값을 다음과 같이 조정할 수 있습니다.
UI 라이브러리 만들기
디자인 명세서를 정했기 때문에, 이제 정해진 요소들을 가져와서 UI라이브러리를 만들 수 있습니다. 이러한 UI라이브러리는 독특하고 창의적인 디자인을 적용하는 것이 아닌, 사전에 정의한 스타일을 간단하게 html에 입히는 것입니다.
이 단계에서는 아직 디자인 명세서에 정의되지 않은 개별 스타일들은 필요하지 않습니다. 개별 스타일들은 이미 디자인 명세서를 만들기 이전 디자인 시스템을 설계하는 과정에서 진행한 사항이기 때문입니다. 이제부터는 색상, 글꼴의 크기, 여백, 너비, 높이와 같이 웹을 구성하고 레이아웃을 디자인하는데 필요한 모든 스타일들은 디자인 명세서에서 가져와서 사용해야 합니다. 몇몇은 비합리적이고 쓸데없다고 느껴질 수도 있지만, 반대로 이렇게 하지 않아 디자인 통일성이 깨지는 일이 부지기수입니다.
Dave Rupert는 최근 트위터 설문조사를 통해서 모달창 안에 있는 버튼의 스타일을 덮어 쓰는 코드를 어디에 둘 것인지 물었습니다.
Harry Roberts (그가 한 멋진 작업을 확인해보세요)는 위 질문에 대한 자신의 생각을 포스팅 했습니다. 그 후 Jonathan Snook은 자신의 생각을 덧붙여 포스팅 했습니다. 필자는 Harry Roberts와 Jonathan Snook의 결론에 동의하지만, 궁극적으로 이런 토론들은 불필요하다고 생각합니다.
디자인 스타일을 재사용하려는 의도로 디자인 명세서와 UI라이브러리를 만들어 놓고 특정 부분의 한 곳을 수정한다는 것은 모순입니다. 이는 처음에 디자인 시스템과 명세서를 통해 UI 라이브러리를 만든 목적을 상실합니다. 다른 스타일을 덮어씌우는 것은 대게 초기 디자인 단계에서 충분한 계획을 세우지 않아 생기는 경우가 많기 때문입니다.
사이트에서 사전에 정의한 디자인 명세서의 디자인 시스템을 무시할 때마다 디자인 일관성이 떨어집니다. 사이트 전체에 있는 구성요소를 산발적으로 수정하면 더 이상 일관된 디자인 시스템을 사용할 수가 없습니다. 이렇게 된다면 초기 목적을 상실하고 디자인 시스템이 뒤죽박죽 되어버리겠죠.
이제 몇 가지 공통된 구성요소를 살펴보고 위에 사전에 우리가 정의한 디자인 명세서의 디자인 시스템을 사용하여 디자인하는 방법들을 알아보겠습니다.
흔히 쓰는 일반 버튼
간단한 팔레트 구성요소로 시작해서 스타일 팔레트에서 사전에 정의한 스타일만을 사용하여 구성요소를 구성하는 방법을 설명하겠습니다.
기타 구성 요소
다시 말하지만, 여기에 쓰여진 색상과 글꼴 크기, 그림자 및 padding 값은 모두 앞서 정의한 디자인 명세서 디자인 시스템에서 가져옵니다.
여기서 좀 더 파고들면
몇 가지 구성 요소를 설계하고 구축하면 여러 구성 요소를 결합하여 dropdown 구성 요소와 같이 더 복잡한 구성 요소를 만들 수 있습니다.
이 dropdown 구성 요소는 앞에서 정의한 기본 디자인 명세서 디자인 시스템 이외의 별도의 스타일을 사용하지 않습니다. 이 방법을 사용하여 전체 구성 요소 라이브러리를 디자인 한 다음 더 넓은 레이아웃으로 이동하고 마지막으로 다른 페이지 혹은 사이트 전체에 이를적용할 수 있습니다.
길찾기 팁
- 특정 구성 요소에는 사전에 디자인 명세서 디자인 시스템에서 정의하지 않는 값들이 필요합니다. (예: side bar가 필요할 때) 필요한 구성요소의 너비가 원래의 너비의 1/3에 불과합니다. 이 경우 다른 곳에 재사용할 수 없기 때문에 괜찮습니다. 이 글의 요점은 재사용 할 수 있는 스타일인데도 불구하고 임의로 바꾸어 재사용 할 수 없는 스타일로 만드는 것을 지양하자는 것입니다.
- 사이트에 삽입한 구성요소들이 본연의 디자인 시스템에 따르도록 해주세요. 버튼, input, 제목 또는 기타 구성 요소에 여백을 추가하지 마세요. 사전에 정의한 디자인 명세서 디자인 시스템 값만 사용해야 합니다. margin은 경우에 따라 다르므로, 이를 감싸는 상위의 부모 div를 만들어 별도로 적용하는 것이 좋습니다. Harry Roberts가 이에 관한 좋은 포스팅을 올렸습니다.
Bantam CSS 프레임 워크를 기반으로 한 본격적인 CSS 툴킷에서 위 글에 다룬 모든 구성 요소와 더 많은 기능을 넣을 예정입니다. 이 프로젝트는 Modulz를위한 것입니다. 제가 하고있는 사이트에 적용된 디자인 명세서를 직접 사용하고 싶다면 Twitter에서 알려주세요. 충분한 관심들이 모이면, 이를 외부에 오픈소스로 공개할 생각입니다.
Thank you for calling Colm Tuite, who allowed you to accept the translation.
가볍게 생각하고 번역했는데 상당히 어렵습니다. 계속 다듬어야 할것 같네요.
