디자인 시스템 구축하기 5부 : 보너스
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
디자인 시스템 구축하기
1부 - 준비
2부 - 컬러
3부 - 크기와 간격
4부 - 타이포그래피
5부 - 보너스
목차
1.아이콘
2.시간과 애니메이션
3.그림자
4.코너와 모서리
5.그리드 시스템
6.반응형의 브레이크 포인트
7.최종 소감과 팁
컬러, 공간 및 타이포그래피는 단단한 디자인 시스템을 위한 기본 구성요소이다. 브랜드를 만들 때 중점을 두어야 할 특유의 시각적 요소이기도 하다. 여기에 고려해야 할 몇 가지 보너스 요소들을 자세히 살펴보자.
간격과 색상 및 타이포그래피는 디자인 시스템 구축의 출발점일 뿐이다. 시스템에 필요한 구성 요소를 설계하기 전에 많은 원자 요소를 고려해야 하는데, 여기에 몇 가지 주의를 기울여야 할 것들이 있다.
1. 아이콘
색상, 간격, 타이포그래피 다음으로, 아이콘은 고려해야 할 중요한 요소이다. 아이콘은 독특하고 인지도 있는 브랜드를 만드는 데 도움이 된다.
그러나, 아이콘이 제품의 사용성을 향상할 것이라고 착각하면 안 된다. 아이콘이 사용성에 긍정적인 영향을 주기 위해서는 바로 인지될 수 있어야 한다. 그래서 아이콘을 만들려면, 여러분이 언제 아이콘을 사용해야 하는지도 고려해야 한다.
아이콘의 사용성을 좀 더 깊이 살펴보기 위해 이 주제와 관련된 다음의 글을 작성했다. “아이콘이 사용성을 저해할 수 있는가, 그리고 언제 아이콘을 사용해야 하는가?”
고려사항
당신이 디자인하고 디자인 시스템에 포함된 아이콘이 목적에 맞는지 확인해라. 작은 공간을 차지하는 아이콘은 더 큰 규모에서 사용되는 아이콘보다 디테일이 적어도 된다.
아이콘의 두께와 무게를 고려해라. 아이콘이 아웃라인인가 솔리드인가? iOS나 안드로이드용인지, 고유한 스타일을 가졌는지도 중요하다.
아이콘은 또한 앱을 나타내거나 WYSIWYG 편집기에서 기능적인 역할을 수행할 수도 있다. 아이콘의 사용 예시를 고려하여 적절하게 디자인해라.
Googles 머티리얼 디자인 시스템에서 제공한 예시이다. 각 아이콘의 애니메이션은 비주얼 디자인과 움직임에 맞춰져 있다.아이콘과 더불어 애니메이션도 고려해라. 애니메이션은 아이콘의 움직임을 윤택하게 만들고 즐거움을 더해준다. 또한 두 아이콘 간의 전환을 애니메이션화 하여 링크를 보여줄 수도 있다. (예: 비디오 플레이어에서 재생과 일시 중지 아이콘) 아이콘 애니메이션은 상태의 변화를 강조할 수 있다.
2. 시간과 애니메이션
개별 아이콘들의 애니메이션을 생각해보았다면, 디자인 시스템 레벨에서의 애니메이션을 생각해보는 건 어떨까? 이때 애니메이션 스타일에 어떤 특징을 반영할지 정한다. 애니메이션은 우아하고 매끄러워야 하며, 만족스러운 바운스가 있어야 한다. 타이밍을 고려해라. 애니메이션의 속도는 인터페이스의 ‘느낌(feel)’에 큰 영향을 줄 수 있다.
InVision은 Better Design이라는 무료 온라인 서적을 발표했는데, 여기에는 강력한 디자인 관행을 구축하는 것에 대한 깊은 통찰력이 담겨있다. 이 주제를 더 깊이 알고 싶다면 애니메이션 핸드북을 읽는 것도 좋다.
소프트웨어 디자인에서 애니메이션은 “텔링(telling)”을 “쇼잉(showing)”으로 대체하여, 디지털 제품을 더욱 실감 나게 하는 무한한 방법이다. 추상적인 개념을 보여주고, 제품을 더 실물처럼 느껴지도록 만들면서, 디지털 경험에 더 많은 감정을 불어넣을 방법을 애니메이션을 사용하여 배울 수 있다. — Ryan McLeod, 애니메이션 핸드북
3. 그림자
그림자는 대개 다양한 단계의 인터페이스를 구별하기 위한 시각적 신호로 사용된다. 구글(Google)의 머티리얼 디자인은 디자인 시스템에서 이 아이디어를 폭넓게 활용한다. 머터리얼 디자인에서의 높이 개념은 머터리얼 표면 사이의 거리로 측정된다.
표고 깊이를 설명하는 머티리얼 디자인의 일러스트레이션그림자를 체계적으로 고민하고, 그림자가 보이는 모습에 대한 사례를 기록해라. 요소 위로 마우스를 대면 어떻게 표현 될까? 가령 요소가 상승하여 그림자를 만들거나, 그림자가 없어지면서 눌러질 수 있다. 호버 상태, 팝업과 모달같은 경우에는 그림자를 어떻게 처리하는지 생각해라. 그리고 이러한 결정사항을 쉽게 재사용할 수 있도록 토큰에 매핑해라.
디자인 토큰에 매핑된 다양한 그림자 스타일4. 코너와 모서리
디자인 시스템 전체에 각진 코너를 사용하기로 하지 않았다면, 둥근 모서리를 토큰 방식으로 생각하고 싶을 것이다.
때때로 디자이너들은 버튼에 둥근 모서리를 사용하고 싶어 하지만, 코너는 테이블, 카드, 드롭 다운, 툴팁 등의 다양한 컴포넌트로 확장된다. 또한 활용 방식에 따라 코너를 다르게 처리하여 사용할 수도 있다.
디자인 토큰으로 추상화된 둥근 모서리코너는 둥근 모서리를 넘어 확장될 수 있으며, UI에 사용할 수 있는 모든 모양을 고려하여 토큰 시스템을 구축할 수 있다.
머터리얼 디자인의 기본 머터리얼은 모서리 및 각도, 곡선을 조정하여 커스텀이 가능하다.5. 그리드 시스템
그리드 시스템은 페이지에서 컴포넌트 레벨까지 패턴과 레이아웃을 만드는 데 도움이 된다. 또한 오랜 세월에 걸쳐 인쇄물과 디지털 디자인에서 사용하는 기본 디자인 도구이다.
Bootstrap에서 Zurb Foundation과 Material.io까지 웹에서 사용할 수 있는 모든 프론트엔드 디자인 시스템을 고려해라. 이들은 모두 일종의 그리드 시스템을 정의하였는데, 뷰 포트를 다양한 컬럼(12~16)으로 나누었으며, 그 사이의 거터 간격의 정의도 포함된다. CSS 그리드 레이아웃 모듈은 행과 컬럼이 있는 그리드 기반 레이아웃 시스템을 제공하므로, 플로트와 포지셔닝을 사용하지 않고도 웹 페이지를 더욱 쉽게 디자인할 수 있다.
간격과 크기가 어떻게 작용하는지 생각해라. 그리드 양쪽에 여백을 지정해야 하는 경우라면 너비가 고정인지 가변인지 정하는 게 좋다.
https://material.io/design/layout/responsive-layout-grid.html#
6. 반응형의 브레이크 포인트
베로니카 라두칸(Veronica Raducan)이 크리에이티브 팀에서 다음과 같은 글을 썼다. 지금과 같은 시대에 반응형 웹 디자인은 더는 특이점이 아니다. 사용자와 검색 엔진이 중요하다고 생각한다면 반드시 지켜야 할 표준이 된다.
반응형 디자인은 다양한 화면 크기에 ‘반응’하는 단일 디자인을 만드는 과정이다. 이후, 각 요소와 컴포넌트는 주어진 공간 내에서 편안하게 보이도록 화면의 크기에 따라 재배열된다. 위키피디아는 이를 "휴대폰에서 데스크톱 컴퓨터 모니터에 이르기까지, 다양한 기기에서 최소 크기 조정, 패닝 및 스크롤링을 통해 읽기 및 탐색이 쉽도록 최적의 보기 환경을 제공하는 사이트 접근방식”이라고 설명했다.
디자인이 분해되고 재조정이 필요할 때 다른 브레이크 포인트를 결정해라. 2016년에 출판되었지만, David Gilbertson의 “CSS 브레이크 포인트를 100% 수행하는 방법”이라는 브레이크 포인트 설정에 대한 아주 좋은 글이 있다.
이 글에서는 다음 세 가지 팁을 다룬다.
1) 브레이크 포인트를 바로 잡아라.
2) 범위의 이름을 분별력 있게 지정해라.
3) 선언해라.
7. 최종 소감과 팁
1) 디자인 시스템은 절대 완성되지 않고, 완벽하지 않을 거라는 생각으로 구성해라. 아무것도 없는 것보다 있는 게 낫다. 사용 전에 모든 요소가 준비될 때까지 기다리지도 마라. 디자인 시스템은 지속해서 발전할 것이다.
2) 디자이너와 개발자는 디자인 시스템을 구축할 때 브랜드와 긴밀하게 협력해야 한다.
3) 다양한 컴포넌트를 언제 어떻게 사용할지에 대한 원칙과 문서를 만들어라. 단순히 UI 키트와 코드를 가진 것만으로는 충분하지 않다.
4) 당신은 전혀 작지 않으며, 디자인 시스템 구축을 시작하는 것도 늦지 않았다. 디자인 시스템은 복잡하거나, 단순할 수 있지만 모든 사람의 니즈는 다르다. 이 모든 것은 디자인 시스템이 누구에게 서비스를 제공하는가에 달려있다.
illustration by Ouch.pics
저자 : Shane P Williams
원문 링크: https://uxdesign.cc/building-a-design-system-where-to-start-part-5-bonus-elements-2b4bdd614b9f
*무단 전재 및 재배포 금지(링크 공유 가능)
같은 시리즈, 다른 글
디자인 시스템 구축하기 1부 : 준비
https://brunch.co.kr/@thinkaboutlove/288
디자인 시스템 구축하기 2부: 컬러
https://brunch.co.kr/@thinkaboutlove/289
디자인 시스템 구축하기 3부 : 크기와 간격
https://brunch.co.kr/@thinkaboutlove/290
디자인 시스템 구축하기 4부 : 타이포그래피
https://brunch.co.kr/@thinkaboutlove/291
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
