–
특정 행동을 유도하거나, 일련의 과정에 따라 기능 또는 화면 단위로의 이동과 실행을 가능하게 해주는 것은 ‘버튼’입니다. 실제로 우리가 서비스를 사용하며 가장 흔하게 접할 수 있는 인터페이스 요소 중 하나인데요. 정적인 버튼도 있지만 최근에는 동적인, 모션이 가미된 버튼도 자주 확인할 수 있습니다. 오늘은 다양한 효과가 적용된 버튼을 한눈에 살펴보고, 어떻게 적용하면 좋을지에 대한 정보를 함께 얻을 수 있는 서비스를 소개하고자 합니다.
‘UI Buttons’는 우리가 직접 구현하기 어려운, 다양한 버튼 샘플을 보기 좋게 정리해둔 곳입니다. 조금 지나치다 싶을 만큼의 효과가 적용된 버튼은 물론 무난하게 적용해 사용할 수 있는 버튼까지 정말 다양한 종류를 확인할 수 있다는 점이 가장 큰 장점입니다.
서비스는 다채로운 버튼을 살펴볼 수 있는 리스트와 각 버튼에게 할당된 상세 페이지로 구성되어 있습니다. 리스트에서 효과를 충분히 확인할 수 있기에, 마음에 드는 버튼이 있다면 상세 화면으로 이동해 더 구체적인 정보를 확인하는 방법으로 활용이 가능합니다.
꽤 많은 수의 버튼이 있어, 처음 이곳을 알게 되었을 때 스크롤을 조금씩 내리며 전체 버튼을 신나게 구경했는데요. 일부는 실제 진행 중인 사이드 프로젝트 웹 화면 내 적용해보기도 했습니다. 실제 서비스에 적용할 수 있을 만큼의 모습을 갖추고 있어 더욱 유용하게 느껴지는 공간입니다.
특정 버튼의 상세 화면으로 이동하면 CSS로 적용할 수 있는 내용을 바로 확인할 수 있습니다. 복사하기 버튼도 제공되니 기본 모습으로 적용한 뒤 원하는 조건을 추가하거나 수정해 활용할 수 있습니다. 상세 화면에서는 이전(리스트) 화면으로 돌아가지 않더라도 다른 버튼을 볼 수 있으며, 함께 확인하기 좋은 리소스 역시 제공됩니다.
서비스와 화면, 그리고 각 상황에 맞는 잘 구성된 ‘버튼’을 필요로 한다면 더없이 좋은 출발점이 될 수 있는 곳이라 생각합니다. 있는 그대로 사용하기도 좋지만, 직접 구성하지 않고도 기본 모습으로 적용한 뒤 알맞게 수정할 수 있는 기준을 제공해주기 때문입니다. 더 자세한 내용은 ‘링크’를 확인해주세요!
- 헤드라인, 버튼 등 다양한 UI 구성 요소를 효과와 함께 확인할 수 있는 : UIUI.dev
- 여러 종류의 버튼을 확인, 코드를 복사해 바로 활용할 수 있는 : Buttons Generator
- 주요 서비스에서 사용 되는 다양한 버튼 사례 확인이 가능한 : Copy & Paste CSS
–
