–
요즘은 디자인 구성 요소를 확인할 때, 무조건 처음부터 직접 제작하기 보다 잘 만들어진 사례를 찾아 활용 가능 여부를 살펴보게 되는 것 같아요. 그만큼 다양한 샘플이 제공되고 있고, 조금만 검색해도 그럴듯한 결과를 쉽게 찾아볼 수 있기 때문입니다. 오늘 소개할 서비스 역시 같은 맥락에서, 다양한 서비스에 기본적으로 사용되는 체크박스나 토글 등을 결과물과 CSS로 제공합니다. 원하는 샘플이 있다면 CSS로 복사해 웹사이트 내 바로 적용하거나 입맛에 따라 수정해 활용할 수 있어요.
–
서비스는 하나의 화면으로 구성되어 있으며 CSS로 작업한 다양한 종류의 버튼, 토글 샘플이 등록되어 있어요. 체크, ON/OFF 등이 어떻게 작동되는지 예제를 직접 확인할 수 있습니다. 가장 큰 장점은 일반적으로 사용되는 샘플을 기준으로, 개성 있는 샘플도 함께 제공해 선택지가 다채롭게 제공된다는 점입니다.
기본적인 내용만 있어도 복사 후 쉽게 활용할 수 있어 편리하지 않을까 싶었는데, 조금씩 다르게 구현해 공개된 내용들이 많이 포함되어 있어 같은 구성 요소라 해도 보고 선택하는 즐거움이 있어요. 특정 대상을 선택하면 왼쪽에 ‘Copy’ 버튼이 나오는데, 클릭 시 CSS로 바로 복사가 가능합니다.
위 두 가지는 제가 직접 복사해 붙여넣기만 해서 살펴본 모습!
총 64개의 샘플이 등록되어 있으며, 대부분 우리가 서비스에서 자주 사용하는 대상이라 한 번쯤 살펴보고 참고하거나 복사 후 바로 적용하는 등의 방법으로 가볍게 활용하기 좋은 곳이라고 생각합니다. 더 자세한 내용은 ‘링크’를 통해 확인해주세요!
–
👀 함께 활용해보세요!
- 카드 UI 속 박스와 그림자를 쉽게 생성할 수 있는 : Box Shadow Art
- 주요 서비스에서 사용 되는 다양한 버튼 사례 확인이 가능한 : Copy & Paste CSS
- 여러 종류의 버튼을 확인, 코드를 복사해 바로 활용할 수 있는 : Buttons Generator
- 다양한 종류의 디자인 버튼과 적용 방법을 확인할 수 있는 곳!
- 종류에 따른 CSS 로딩 애니메이션을 살펴볼 수 있는 곳! : Whirl
- 24개 로딩애니메이션을 소스와 함께 제공해주는 곳!
- 코딩 없이, 다양한 스타일의 컴포넌트를 맞춤형으로 활용할 수 있는 곳!
- 무료로 사용 가능한 UI 구성요소 제공 서비스!
- 웹사이트 구축 시 사용 가능한 무료 툴팁 라이브러리 모음!
- 자주 쓰이는 레이아웃 패턴을 자세히 확인할 수 있는 : Layout patterns
- 헤드라인, 버튼 등 다양한 UI 구성 요소를 효과와 함께 확인할 수 있는 : UIUI.dev
–
