피그마 프로토타입의 활용(프레임 인터랙션, 베리언트 스위치 인터랙션, 캐러셀(carousel) 인터랙션,내비게이션 드로워 인터랙션등)
1. 피그마와 프로토타입
피그마의 프로토타입 기능을 활용하면, 디자인 요소에 전환, 애니메이션과 같은 인터랙션 효과를 만들 수 있습니다. [Prototype] 메뉴를 살펴보면 디바이스의 기종과 색상, 미리보기 화면의 바탕화면 색상을 지정할 수 있는 옵션이 있습니다.
2. 프레임 인터랙션(Interaction)의 이해
가장 빈번하게 사용되는 인터랙션은 프레임과 프레임 간의 페이지 전환으로 이루어지는 경우가 많고, 프레임 전환 인터랙션은 같은 오브젝트가 다른 프레임에서 색상이나 그림자와 같은 변화로 페이지가 전환되는 인터랙션을 말합니다.
3. 베리언트 스위치 인터랙션
디자인을 하다 보면 한 페이지 안에서 일어나는 인터랙션이 매우 많을 때가 있습니다. 따라서 버튼 형태에 인터랙션을 적용해야 한다면, 버튼을 제작하는 베리언트 단계에서 인터랙션을 지정하여 사용하는 것이 더 효율적입니다.
4. 버튼 인터랙션
버튼은 사용자와 서비스가 상호작용 할 때 가장 많이 사용하는 컴포넌트 중 하나이며, 서비스의 상태를 표시할 수 있는 요소이기도 합니다.
호버(Hover)와
프레스드(Pressed)상태의 버튼을 만들어보고 탭 했을 때 다른 프레임으로 이동하는
인터랙션을 제작해 봅니다.
5. 캐러셀(carousel) 인터랙션
캐러셀은 서비스의 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식으로 자동 또는 수동으로 이미지를 이동 시킬 수 있습니다. 이는 메인 페이지의 히어로(hero) 이미지뿐만 아니라 다양한 형태의 콘텐츠를 노출하는 방식으로 구현할 수 있기 때문에 이미지를 좌우로 드래그하여 보여주거나 여러 개의 콘텐츠를 배치하여 보여줄 때 유용한 방식입니다.
프레임 밖으로 사각형이 보이는 것은 사각형을 프레임 안에 배치하지 않았다는 의미이며, [Layers]에서 사각형을 프레임 내부로 배치합니다. 프레임 내부에 오브젝트를 배치하면 프레임 외부에 배치된 부분은 보이지 않습니다.
6. 오버플로우 스크롤링 인터랙션
오버플로우 스크롤링은 화면 내에서 좌우로 스크롤이 된다는 점에서 캐러셀 인터랙션과 비슷하다고 느껴질 수 있습니다. 하지만 캐러셀 인터랙션은 드래그하는 중에 손가락 터치를 멈추면 특정 포인트로 다시 돌아가는 성질이 있고, 오버플로우 스크롤링은 스크롤 하는 도중에 멈추게 되면 멈춘 위치에서 이미지가 좌우 어디로도 치우치지 않고 정지한다는 특징이 있습니다.
[UI Faces] 플러그인을 활용해 얼굴 이미지를 만들고 오버플로우 스크롤링 인터랙션을 구현해 봅니다.
7. 모달 창 인터랙션
모달 창이란 팝업 창과 비슷한 개념으로 특정 영역에 원하는 크기로 새로운 디자인을 띄우는 것을 말합니다. 팝업 창이 새로운 브라우저로 페이지를 띄우는 것이라면 모달 창은 페이지 내에 레이어를 이용해 페이지를 표시하는 것으로 부모 창이 사라지면 모달 창도 함께 사라진다는 점에서 팝업 창과 차이가 있습니다.
8. 내비게이션 드로워(Drawer) 인터랙션
내비게이션 드로워(Drawer)는 화면의 왼쪽 가장자리에서 서랍처럼 열리고 닫히면서 앱을 팀색 할 수 있는 패널을 말합니다. 평상시에는 화면 밖에 배치되어 보이지 않지만, 메뉴 항목을 눌렀을 때 슬라이딩 되면서 나타나는 특징을 가집니다.
피그마에서 내비게이션 드로워(Drawer)를 구현하는 주요 방식은 오버레이(Overlay) 인터랙션을 활용하는 것입니다. 숨겨진 드로워(Drawer) 상태의 프레임을 만들고, 특정 트리거가 발생했을 때 화면 위로 슬라이드 되어 나타나도록 설정합니다.
