본 콘텐츠는 Graeme Fulton과 Prilly가 Prototypr.io를 위해 작성했습니다.
이 12개의 짧은 동영상은 ProtoPie의 몇 가지 기본 기능을 사용하여 다크 모드 토글 스위치를 만드는 과정을 안내합니다.
Dark Mode Toggle 프로토타입을 다운로드하고 직접 사용해 보세요.
#1: 태양 토글
첫 번째 단계는 단순히 태양을 왼쪽에서 오른쪽으로 이동시키는 것입니다. 이것은 토글을 탭했을 때 이후에 일어날 나머지 이벤트를 위한 "기본 틀" 을 제공하는 첫 번째 상호작용입니다.
#2: 태양 회전
이 부분에서는 태양을 회전하는 방법을 보여드리겠습니다. 이는 인터페이스에 약간의 개성을 더해 주는 마이크로 인터랙션입니다.
#3: 도형 크기 조절
응답 크기 조절과 불투명도를 활용해 봅시다. 토글 상호작용에 주고 싶은 효과 중 하나는 태양이 회전하며 달로 바뀌고, 그 반대도 마찬가지인 것입니다. 이를 위해 태양의 크기를 조절해야 합니다.
#4: 태양을 사라지게 하고 다시 나타나게 하기
여기서는 태양을 사라지게 하고 다시 나타나게 하는 방법을 보여드리겠습니다. 이미 갖고 있는 두 개의 불투명도 응답과 두 개의 조건을 함께 사용할 것입니다.
#5: 달 회전
태양에서 했던 것과 마찬가지로, 달에 대한 상호작용도 만들어야 합니다. 마치 두 조건에 있는 응답을 서로 바꾸는 것과 비슷합니다.
#6: 달 크기 조절
이 단계에서는 태양에서 했던 것처럼 달의 크기를 조절합니다. 달이 전체 크기로 표시되는 것을 처음 보게 될 것입니다!
#7: 불투명도로 크기 조절
다른 부분으로 넘어가기 전에 달의 불투명도를 변경하여 변형되는 듯한 착시 효과를 완성하겠습니다.
토글이 밝은색에서 어두운색으로, 그리고 그 반대로 전환되도록 하는 다음 단계에서는 몇 가지 색상 전환을 만들어 보겠습니다. 작은 디테일을 더하면 토글을 더욱 독특하게 만들 수 있다는 것도 살펴보겠습니다.
#8: 색상 전환
배경에 색상 전환을 추가하면 토글에서 사용자에게 더 많은 피드백을 제공할 수 있습니다. 태양이 달로 바뀌는 만큼, 배경도 밝은색에서 어두운색으로, 그리고 그 반대로 변하는 것이 자연스럽습니다.
#9: 더 많은 색상 전환
배경 색상 전환을 추가했으니, 고정된 사각형도 색이 바뀌는 것이 자연스럽습니다.
#10: 타원 색상
색상 전환을 완성하기 위해 이전과 비슷한 단계를 따를 것입니다.
이 토글 버튼에 마무리 손질을 더해 정말 독특하게 만들어 봅시다.
#11: 스프링 애니메이션
각 구름은 번호로 구분됩니다(예: 구름 1, 구름 2, 구름 3). 각 구름에 동일한 상호작용을 적용할 것입니다.
#12: 스프링 애니메이션 결합
여기에 더해 별이 움직이도록 만들어 봅시다! 여기서의 상호작용은 이전 동영상에서 구름을 움직이는 것과 꽤 비슷합니다.
이 튜토리얼 동영상이 마음에 드셨나요? ProtoPie를 A부터 Z까지 사용하는 방법을 배울 수 있는 자체 ProtoPie School을 확인해 보세요 — 모두 무료입니다.
