8. UX 시작하기(5)-디자인 가이드라인
UX디자이너를 위한 디자인 가이드라인 사이트 소개
배경지식 없이 당장 웹/앱 서비스를 기획해야 한다면, 당장 실무에서 활용할 수 있는 좋은 레퍼런스들이 있다. 바로 기업들이 디자이너들을 갈아넣어만든 정보와 리소스를 참고하는 것.
무료로 공개되어 있어서 누구나 볼 수 있는, 잘 정의된 디자인 가이드라인 사이트들을 소개한다.
5. 디자인 가이드라인
Apple
https://developer.apple.com/design/human-interface-guidelines/
Human Interface Guidelines라 불리는 애플의 디자인 가이드라인. 세세하게 이건 몇 픽셀, 이건 무슨 컬러, 이런 식으로 강제하는 대신 원칙적인 기준만 제시하고 있다. 예를 들어 "Navigation" 부분을 보면, 내비게이션은 항상 명확한 길을 제시해야 한다, 터치 제스쳐가 유동성을 만드는 데 사용되어야 한다(예. Swipe로 이전 페이지로 돌아갈 수 있어야 한다), 등, 좋은 UX를 만드는 데 필요한 원칙적인 내용만 기재되어 있으며 이를 실제로 응용하여 적용하는 것은 온전히 디자이너의 몫으로 돌리고 있다. 스마트폰의 기준점을 만들었다고 볼 수 있는 애플의 UX/UI에 대한 철학이 고스란히 드러나 있어 공부를 위해서라도 한 번 봐 두면 좋다.
종이와 펜의 물성을 활용해서 만들었다는 구글의 Material Design Guideline이다. 애플의 가이드라인과는 정 반대로, Material Design Guideline은 매우 세세하게 컴포넌트의 값들(픽셀, 컬러 등)을 제시하고 있고, Do & Dont's를 상세한 이유까지 곁들여 제공하고 있으며, 가이드가 잘 적용된 예시 앱까지 보여준다. GUI를 하나도 할 줄 모르는데 GUI를 직접 그려야 하는 경우가 생긴다면, 이 가이드만 충실하게 참고해도 하나의 서비스를 전부 다 디자인할 수 있는 수준. 상단 'Tools' 탭에서는 아이콘 등 바로 활용 가능한 리소스를 다운받을 수 있다. (이정도면 디자이너 일자리 다 빼앗는 수준)
물론 이런 Low Level의 정보만 제공하는 것이 아니라 어떤 철학과 원칙에서 이 가이드 항목이 만들어졌는지에 대해서도 이야기하고 있으므로 UX디자이너로서의 안목을 키우기에도 좋은 내용이 많다.
참고로 구글의 디자이너들이 Material 가이드라인을 만들었던 과정을 담은 영상이 있는데, 그들이 어떤 고민을 했고 이를 어떻게 풀어냈는지 엿볼 수 있어 재미있다. (링크)
IBM
https://www.carbondesignsystem.com/
IBM의 디자인 가이드라인인 Carbon Design System.
오픈소스를 지향하고 있고 IBM 소속이 아닌 외부 디자이너의 참여를 권장한다. 따라서 아이콘 같은 것들을 직접 만들어서 올릴 수도 있는데, 그래서인지 리소스가 꽤 충실하다. 또한 아이콘을 직접 그린다면 패딩은 몇 픽셀로 하고 어떻게 export 해야 좋은지, 이런 기초적인 실무적 내용까지 안내해주고 있어 비전공자라도 그대로 따라서 만들어볼 수 있는 수준의 정보를 제공한다.
특징적인 것으로, 서비스에 들어가는 문구를 어떻게 쓸 것인가를 정의한 'Content'에 대한 부분이 있다. 이러한 문구를 작성하는 것도 UX디자이너/기획자의 역할 중 하나인데, 잘 해야 하지만 아무도 가르쳐주지 않는 것들이므로 참고로 읽어보면 도움이 될 것 같다.
Audi
https://www.audi.com/ci/en/guides/user-interface/introduction.html#
제조업체임에도 잘 짜여진 가이드라인을 운용하는 Audi. 커뮤니케이션, 브랜딩, 사운드 등 다양한 분야의 가이드라인을 함께 확인할 수 있으며 UI/UX에 대한 내용도 깔끔하게 정리되어 있다. 자동차 회사의 UI/UX 가이드라니 차량 내 인포테인먼트 시스템에만 국한되었을 것 같은 느낌이지만 여기서는 PC, 모바일 등의 고객 접점 채널을 중심으로 가이드라인이 제공되고 있다. Google처럼 아주 상세하지도, 그렇다고 Apple처럼 아주 선언적이지도 않으면서 디자인 원칙과 어느정도 상세한 가이드라인이 함께 제공되고 있다. 각각의 컴포넌트에 대한 마크업 코드도 바로 확인할 수 있도록 제공하고 있는 것이 특장점.
Uber
브랜드 가이드의 일부로서 디자인 시스템이 포함되어 있다. GUI 뿐 아니라 오프라인 제작물까지를 모두 아우르는 가이드가 별도 구분 없이 함께 제공되고 있는 것이 특징적이다. 브랜드 디자인, 온라인/오프라인 디자인이 별개가 아니며 같은 철학과 규칙 안에서 디자인되어야 한다는 것을 보여주는 사례로서 참고할 만 하다.
LNB 하단에 토글 버튼이 있는데, 이 버튼을 On하면 보고 있는 화면 상에 그리드가 보여지며, 텍스트 위에 커서를 올리면 해당 텍스트가 어떤 폰트이고 사이즈, 자간, 줄간격은 어떤지를 보여주는 툴팁이 제공된다. 재미있는 기능.
Wework
Ray라 불리는 wework 디자인 시스템(유명한 가구 디자이너 Ray Eames의 이름을 따왔다고 한다). 디자이너를 위한 용도라기보다는 귀하신 몸개발자들의 수고로움을 더는 것을 가장 우선순위에 둔 구성을 보여주고 있다. 그래서인지 디자인 철학 등의 설명적인 내용 보다는 마크업에 바로 적용할 수 있도록 코드를 전면적으로 제공하므로, 마크업을 조금 할 줄 아는 디자이너라면 마음에 드는 컴포넌트들을 직접 사용해볼 수 있다는 장점이 있다. '우리 디자인은 이래야 한다'는 선언적 내용도 좋지만, 이런 형태의 가이드라인이 디자이너-개발자 간 커뮤니케이션 비용을 최소화할 수 있어서 실무적으로는 좀 더 효용성이 있을 것 같다.
Microsoft
https://www.microsoft.com/design/fluent/
Fluent Design System이라 명명된 MS의 디자인 시스템으로서, 회사의 방대한 서비스 포트폴리오에 걸맞게 Web, Windows, iOS, Android의 4가지 플랫폼별로 구분하여 내용이 정리되어 있다. 단순히 자체 제작한 내용만 있는 것이 아니라, 각 플랫폼별로 해당 제조사의 가이드라인이나 폰트 등을 링크해두고 있어서 집결지 같은 느낌이 있다. 특히 가장 좋은 것은 다양한 디자인 툴을 커버하는 툴킷을 제공한다는 것. Sketch와 Figma는 기본적으로 제공하고 있고, Windows의 경우 XD, 포토샵, 일러스트레이터용 툴킷까지 지원하고 있다. 자바스크립트 라이브러리와 CSS 스타일시트도 제공하고 있다.
NUGU (SKT)
https://developers.nugu.co.kr/docs/voice-service-design-guideline/
GUI를 다루는 가이드라인은 많지만, VUI(음성 인터페이스)에 대한 가이드라인은 흔하지 않기 때문에 소개하게 되었다. GUI와는 상이한 VUI의 특성과 이에 따른 서비스 경험 설계에 대해 잘 정리되어 있으며, Play Builder라는 데모 프로그램을 통해 실제로 시나리오를 만들어 볼 수 있다.
RIDI
전자책 서비스인 리디북스를 운영하는 RIDI의 디자인 시스템. Principle, Writings, Colors, Web, App의 5개 카테고리로 구분되어 있다. Beta 버전으로 아직 내용이 많지는 않으나, Writings 카테고리의 경우 서비스 내에서 텍스트를 어떻게 사용할 것인지에 대해 정의되어 있어 참고하기 좋다. 한국어로 된 디자인 시스템 중 이처럼 문구 적용에 대한 가이드라인까지 정의해둔 레퍼런스가 별로 없으므로 실무에 매우 좋은 참고자료가 될 듯 하다.
스포카
도도포인트로 유명한 스포카의 디자인 가이드라인. 로고타입, 색상, 타이포그래피, UI요소, 사진, 그래픽 리소스의 카테고리로 이루어져 있으며, '타이포그래피' 카테고리에서는 핀테크 유니콘인 '토스'에서도 사용중인 '스포카 한 산스' 폰트를 다운받을 수 있다. 'UI요소'에서는 그리드 및 버튼 등의 컴포넌트에 대해 정의되어 있는데, 이 컴포넌트들을 직접 눌러볼 수 있도록 개발되어 있어 Hover, Active, Disabled 등의 효과를 직접 조작해보면서 확인할 수 있다.
특이한 점은 '사진' 카테고리가 있다는 것인데, 포토그래피가 서비스의 전반적인 톤에 많은 영향을 주는데도 디자인 시스템에서 잘 다루지 않는 부분인데 스포카의 디자인 시스템에서는 서비스에 바로 적용이 가능한 사진들이 아카이브 되어 있어 참고할만 하다. 그러나 실무에서는 필요할 때마다 사진을 촬영해서 사용할 수 없으니 보통은 Getty Images 같은 곳에서 사진을 구매해서 적용할 때가 많은데, 이런 경우 참고가 가능하도록 '우리 서비스의 톤은 이러이러하니 사진의 톤도 이러이러한 것을 고르면 좋겠다' 라는 가이드도 함께 제공되었더라면 더 좋았겠다는 생각은 든다.
※번외로 Zeroheight라는 서비스가 있는데, 디자인 가이드라인 홈페이지를 쉽게 만들 수 있는 서비스이다. 개발 신경 쓸 필요 없이 내용만 채우면 홈페이지를 뚝딱 만들 수 있으므로 가이드라인 구축을 생각하고 있는 디자이너들에게 참고가 될 것 같다.
'UX 시작하기' 시리즈 글 링크
