–
버튼, 체크박스, 토글 스위치, 카드, 로딩 애니메이션은 우리가 서비스를 구성하거나 사용하면서 가장 많이 접하는 인터페이스 구성요소입니다. 이들은 모두 사용자의 선택(행동)에 따라 명확한 피드백을 제공할 수 있어야 하는, 인터랙션 등과도 밀접하게 연관된 대상이라고 할 수 있는데요. 그래서 오늘은 앞서 언급한 다섯 가지 구성요소를 다양한 예제로 확인, 무료로 소스를 복사해 사용할 수 있는 서비스를 소개하고자 합니다.
‘Uiverse’는 기본적으로 다섯 가지 UI 구성요소를 제공합니다. 왼쪽 메뉴를 통해 원하는 대상을 선택할 수 있어요. 눈에 띄는 건 메뉴 아래 ‘탑 크리에이터’입니다. 이곳에 등록된 구성요소를 한명이 제작하고 공유한 것이 아닌, 여러 사용자가 각자 작업한 내용을 공유하기 때문입니다. 덕분에 탐색을 하다가 마음에 드는 스타일이 있다면 만든 사람을 선택해 유사한 작업물을 이어서 확인할 수 있어요.
특정 구성 요소에 마우스를 가져가면 적용된 효과를 확인할 수 있으며, 어떤 언어로 활용할 수 있는지 정보를 볼 수 있습니다. 체크박스만 하더라도 18개가 등록되어 있어, 적용하고자 하는 서비스나 대상에 맞는 결과를 쉽게 찾아볼 수 있다는 장점이 있습니다.
특정 구성요소를 클릭하며 상세 화면으로 이동하게 되는데, 이곳에서 효과를 더 자세히 확인하는 것은 물론 HTML, CSS 등의 내용도 살펴볼 수 있습니다. 복사 기능을 제공하기에, 마음에 드는 대상은 손쉽게 복사 후 적용할 수 있어요.
작성일 기준, 등록된 UI 구성요소는 아래와 같습니다.
- 버튼 133개
- 체크박스 18개
- 토글 스위치 20개
- 카드 디자인 50개
- 로딩 애니메이션 54개
버튼이 압도적으로 많지만, 그 외 구성요소 역시 다양하게 준비되어 있어 활용도가 높은 곳이라 생각합니다. 게다가 여러 명의 크리에이터가 계속 활동하고 있어 그 수와 범위는 계속 늘어나지 않을까 싶어요. 아래의 서비스와 함께 사용하신다면, 원하는 인터페이스 구성요소를 상대적으로 쉽게 적용할 수 있는 기회가 될 수 있을 거라 생각합니다. 자세한 내용은 ‘링크’를 참고해주세요!
- 상황 별 UI 사운드를 확인, 다운로드 받을 수 있는 곳!
- 24개 로딩애니메이션을 소스와 함께 제공해주는 곳!
- 헤드라인, 버튼 등 다양한 UI 구성 요소를 효과와 함께 확인할 수 있는 : UIUI.dev
–
