디자인을 하다보면 아이디어를 표현하는데 있어 한계를 종종 느끼곤 합니다. 평면적으로 보이는 디자인에 애니메이션이 한스푼 가미된다면 더 풍성하고 완성도 있는 디자인을 선보일 수 있겠죠. 재미와 사용성이 좋아지는 건 덤이고요. 엘리먼트를 효과적으로 디자인하기 위해 참고하기 좋은 uiverse.io 사이트를 소개합니다.
uiverse란?
UI(사용자 인터페이스)와 Universe(우주)를 조합한 uiverse는 4000개 이상의 UI 엘리먼트를 개인 또는 기업이 상업적으로 무료로 이용할 수 있는 사이트입니다.
Explore 3000+ Free UI Elements: CSS & Tailwind
Library of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.
uiverse.io
버튼, 체크박스, 토글스위치, 카드, 폼 등 다양한 ui 구성 요소들을 라이브러리에서 볼 수 있습니다. HTML 및 CSS코드가 제공되어 동작 여부를 확인 후 프로젝트에 직접 적용해 볼 수 있습니다.
하단에 Copy to Figma 버튼을 선택하여 디자인을 피그마로 내보낼 수도 있습니다. 이미지가 아닌 구성 요소를 그대로 가져올 수 있어 색상 및 효과 등을 내 프로젝트에 맞춰 적용할 수 있습니다. (회원가입 필수)
uiverse 메뉴의 구성
포스팅 시점에 사이트 메뉴는 Elements / Challenges / Spotlight 3가지로 구성되어 있습니다.
- Elements : 사용자 인터페이스를 구성하는 ui요소들을 모아두었습니다.
- Challenges : 가이드라인이 확실한 엘리먼트 제작 도전 과제가 주어지고 우승자를 선정하는 방식으로 운영되고 있습니다.
- Spotlight : 주목할만한 금주의 Top Posts 및 Top 크리에이터들이 게재되고 있습니다.
금주의 탑 포스트는 글에 하이라이트 표시와 삭제 버튼, 소셜 미디어 링크 등과 같이 매거진에서 자주 이용하는 요소들이 올라 와 있네요.
마무리하며
평면적인 디자인의 ui 엘리먼트들에서 벗어나 보다 입체적이고 사용성에 도움이 되는 직관적인 디자인들을 엿볼 수 있었습니다. 실험적인 아이디어들이 많아서 실제 프로젝트에 적용할 수 있는 요소들이 많아 보이진 않지만 아이디어를 확장하는데 도움이 될 것 같습니다. ui디자이너와 개발자가 의사 소통하는 데 있어서도 도움이 될만한 자료이니 꼭 한번 들러보세요.
Explore 3000+ Free UI Elements: CSS & Tailwind
Library of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.
uiverse.io
'DESIGN > Tools' 카테고리의 다른 글
| 모든 UI/UX 디자이너에게 필요한 10가지 AI 슈퍼 툴 (0) | 2024.11.11 |
|---|---|
| [Tools] 편리한 Web 제작! 최신 온라인 도구 36가지 모음 (0) | 2021.06.18 |
