–
서비스를 다크모드로 이용할 때, 자주 사용되는 방법 중 하나가 바로 ‘토글’입니다. 그중에서도 토글 스위치는선택지가 2개 일 때 사용되며, 스위치를 켜고 끄는 경험을 모바일과 웹상에서 그대로 이어갈 수 있다는 장점이 있는데요. 오늘 소개할 서비스는 다크모드와 라이트모드 설정을 쉽게 만들어주는 ‘토글’ 라이브러리 입니다.
토글 컬렉션에는 현재 12개가 등록되어 있는데요. 라이트모드를 나타내는(현재 상태) 모습을 클릭하면 다크모드로 변경되는 것을 확인할 수 있습니다. 각각의 토글은 고유한 이름을 갖고 있으며, 애니메이션이 적용되어 있어 어떻게 동작하는지도 살펴볼 수 있도록 구성된 모습입니다.
위 영상은 각 토글이 어떻게 동작하는지 확인할 수 있는데, 우리가 자주 사용하고 접하는 토글 스위치와 달리 더 극적인 효과를 확인할 수 있다는 점이 눈에 띕니다. 서비스 성격에 따라 적용하고자 하는 인터페이스는 달라질 수 있지만, 다크모드와 라이트모드로 전환을 더 적극적으로 안내하고 상태를 표현할 수 있다는 점에서 좋은 활용 방법이 되지 않을까 싶네요.
제공되는 토글은 모두 ‘HTML, React’ 코드로 제공되며 수정을 통해 적용하는 것도 가능합니다. 12개 중 마음에 드는 토글을 찾아 입맛에 맞게, 빠르게 변경 후 사용할 수 있다는 장점이 있습니다.
검색해보면 다크모드와 관련된 토글 스위치 등을 어렵지 않게 찾아볼 수 있지만, 동일한 스타일에 따른 토글 여러개를 한번에 보긴 어려운데요. 이곳에는 12개의 토글은 물론 코드까지 함께 제공되고 있으니 자세한 내용은 ‘이곳’을 통해 확인해주세요!
–
함께 활용해보세요!
- 24개 로딩애니메이션을 소스와 함께 제공해주는 곳!
- 종류에 따른 CSS 로딩 애니메이션을 살펴볼 수 있는 곳! : Whirl
- 체크박스, 툴팁, 버튼 등 자주 쓰이는 UI 컴포넌트 구성 방법에 대한 자세한 내용을 확인할 수 있는 곳!
- 다양한 종류의 컴포넌트와 디자인 시스템 확인이 가능한 : The Component Gallery
–
