–
화면을 어떻게 구성하는지도 중요하지만, 버튼 등에 어떤 효과를 활용할지 결정하는 것 역시 중요한 과정이라고 할 수 있는데요. 요즘은 디자인이나 기획 과정에서 효과를 직접 설계해 보여줄 수 있는 여러 툴이 존재하지만 별도의 학습과정이 필요한 경우가 많습니다. 그래서 오늘은, 헤드라인이나 버튼 등 화면을 구성하는 여러 요소의 효과를 직접 확인하고 코드로 바로 활용할 수 있도록 도와주는 서비스를 살펴보고자 합니다.
‘UIUI’는 한 개발자가 만든 웹서비스로 동일한 문구의 헤드라인, 버튼 디자인 샘플과 함께 다양한 효과를 확인할 수 있는 곳입니다. 디자인으로 끝난 상태가 아니라, 어떤 효과를 적용하면 좋을지 직접 본 뒤 코드로 활용할 수 있어 더욱 참고하기 좋은 곳이기도 합니다.
영상을 보면, 동일한 문구 내 다양한 효과가 적용된 모습을 확인할 수 있는데요. 총 10개의 효과가 적용되어 있으며 하나씩, 자세히 들여다볼 수 있습니다.
마음에 드는 효과가 있다면, 코드 버튼을 클릭해 코드를 확인할 수 있어요. 제공되는 코드를 직접 수정할 수 있으며, 코드를 보며 변경된 효과를 확인하는 것도 가능합니다. 창을 새로 열어 링크를 복사해 효과를 쉽게 공유할 수 있어요. 어떤 효과를 활용하면 좋을지 빠르게 확인 및 참고할 수 있도록 구성되어 있는 모습입니다.
헤드라인과 함께 ‘버튼’ 효과도 제공되고 있어요. 마찬가지로 동일한 문구가 적용된 버튼을 여러 효과에 따라 확인할 수 있습니다. 버튼 역시 10가지 효과를 확인할 수 있습니다.
버튼에 마우스를 가져다 대면 효과를 자세히 볼 수 있습니다. 10가지 효과가 처음엔 많지 않게 느껴졌는데, 하나씩 확인하다보니 일반적으로 사용할 수 있는 내용은 모두 포함되어 있어 좋았습니다.
버튼도 헤드라인과 같이 코드를 확인하거나 복사할 수 있으며, 링크를 통해 누군가에게 쉽게 공유할 수 있습니다. 헤드라인과 버튼 총 20여개의 효과를 직접 확인할 수 있다는 점에서 적용 전 참고하기 좋은 곳이라는 생각이드네요. 곧 스피너 효과도 추가될 예정이라고 하니 더 기대가 되는 곳입니다. 더 자세한 내용은 ‘이곳’을 통해 확인해주세요!
–
함께 활용해보세요!
- 여러 종류의 버튼을 확인, 코드를 복사해 바로 활용할 수 있는 : Buttons Generator
- 글래스모피즘 디자인 구현을 위한 CSS 생성 서비스 : Glass UI
- 다양한 종류의 인터랙션 디자인 패턴을 큐레이션 해주는 : Patttterns
–
