–
컨셉 디자인은 그리 좋아하지 않지만, 특정 카테고리에 대한 UI Kit은 한 번씩 살펴보게 됩니다. 고민의 과정은 자세히 들여다 볼 수 없지만, 이렇게 표현하고 구성할 수 있겠다는 정보를 얻을 수 있기 때문인데요. 저는 사이드 프로젝트를 진행할 때 더 큰 도움을 받고 있어요. 오늘은 오랜만에 피그마 기준, 다양한 화면과 컴포넌트, 스타일 등의 구성을 확인할 수 있는 UI 라이브러리를 소개하고자 합니다.
–
348개 컴포넌트, 36개 화면이 담긴 UI 라이브러리
라이브러리는 다크모드와 라이트모드 각각 36개 화면을 기본적으로 확인할 수 있는 구성이에요.
페이스북 페이지를 통한 단순 소개가 아니라, 블로그를 통해 더 자세히 소개 하는 이유는 스타일 라이브러리, 반응형 고려, 화면을 구성하는 다양한 컴포넌트 활용, 오토 레이아웃 등이 (피그마 기준) 모두 적용, 개별 확인이 가능하기 때문입니다.
실제로 피그마에서 하나씩 페이지를 확인해봤는데요. 스타일 라이브러리에는 사용된 컬러와 타이포 등이 자세히 정리되어 있었습니다. 이는 두 가지로 다시 활용할 수 있는데요. 하나는 스타일 라이브러리를 직접 구성할 때의 참고 자료, 또 하나는 실제 화면에 쓰인 컬러를 다시 쓰고자 할 때 입니다.
상황 별 버튼도 잘 정리되어 있어요. 꽤 자세히 적용되어 있어 컬러와 같이 다양한 용도로 활용할 수 있다는 장점이 있습니다.
앱 화면 구성 시 활용된 아이콘도 확인할 수 있습니다.
컴포넌트와 스타일을 확인한 뒤, 이를 실제 적용해 구성한 전체 화면을 볼 수 있어요. 앞서 말씀드린 것처럼 라이트 모드와 다크 모드 각 36개씩 확인 할 수 있습니다. 온보딩, 가입, 검색, 탐색, 상세 등 다양한 화면이 준비되어 있어 참고하기 좋아요.
다크모드가 함께 제공 되기에 일종의 가이드처럼 함께 비교할 수 있다는 것도 좋습니다.
–
현재 무료로, 피그마 파일로 내려받아 활용할 수 있어요. 이정도 수준의 라이브러리를 무료로 들여다보고 활용할 수 있다는 것 자체가 가장 큰 매력이 아닐까 싶네요! 더 자세한 내용은 ‘이 곳’을 통해 확인해주세요!
–
