원티드 디자인 라이브러리: 오픈소스로 공개

원티드가 ‘원티드 디자인 라이브러리’를 공개했습니다. 자사의 디자인 조직에서 높은 품질을 유지하면서 효율적으로 디지털 프로덕트를 설계하기 위해 구축한 디자인 시스템입니다. 다양한 기술을 바탕으로 오랜 시간 단단하고 촘촘하게 쌓아올린 디자인 시스템을 누구나 사용할 수 있게 피그마 커뮤니티에 오픈 소스로 등록했습니다.

©Wanted

초보자도 유용하게 사용할 수 있는 디자인 기초 요소로 구성됐습니다. 색, 타이포그래피, 그리드, 아이콘 등 기초적인 파운데이션(Foundation)과 다양한 환경에서 많이 사용하는 주요 요소인 엘리먼트(Element)로 나뉩니다.

색은 의미에 맞게 쓰는 색과 법칙에 맞게 쓰는 팔레트로 구성됩니다. 의미론적 색에는 맥락과 용도에 따라 색에 이름을 붙였습니다. 예를 들어 주색이 주는 자극의 정도에 따라 Normal, Strong, Heavy라고 표현합니다. 라이트, 다크 테마에 적합한 색도 제공합니다.

©Wanted

팔레트는 흑백과 주요 색상을 단계별로 표현했습니다. 자연에서의 색 변화에 알맞게 명도와 채도를 자연스럽게 표현했습니다. 구글의 머티리얼과 반대로 이름 마지막에 붙은 숫자가 높을수록 밝아집니다.

©Wanted
©Wanted
©Wanted

글꼴은 프리텐다드와 원티드 산스로 구성됐습니다. 다양한 맥락에서 사용할 수 있게 여러 버전의 의미론적 위계가 잘 정돈되었습니다. 용도별로 어떻게 사용하는지 가이드라인도 포함됐습니다. 일본어를 위한 프리텐다드 JP도 지원합니다.

©Wanted
©Wanted

그리드는 전체 화면과 간격, 레이아웃에 관한 규칙을 상세하게 제공합니다. 2단, 3단, 12단 그리드를 모바일과 데스크탑 화면 크기에 맞게 구성합니다. 다양한 기본 아이콘을 제공하며 굵기와 같은 여러 옵션도 제공합니다. 안드로이드나 iOS와 같은 OS의 특성에 맞게 써야하는 요소도 준비됐습니다. 각 요소마다 상세한 가이드라인이 첨부됐습니다.

©Wanted
©Wanted

원티드 디자인 팀은 더 나은 디자인을 위해 새로운 기술과 기법을 적극적으로 반영해 왔습니다. 디지털에 특화된 프리텐다드, 원티드 산스와 같은 서체를 개발했고 다양한 맥락에 사용할 수 있는 배리언츠와 디자인 토큰, 서비스 전체를 훑어볼 수 있는 버드 아이뷰와 같은 파일을 만들기도 했습니다. 앞으로도 디자인 엔지니어링 영역에서 혁신을 만들어나갈 모습이 기대됩니다.

더 보기 및 출처

최근 소식

디자인 나침반 아카데미

최근 글

베란다

유럽 소도시의 작은 카페 같은 곳. 컨셉만 따서 인테리어한 것이 아니라 정말

글이 없습니다.