캐러셀 프로토타이핑 피그마 튜토리얼
스마트 에니메이트
피그마에서 캐러셀 프로토타이핑을 만드는 과정은 처음에는 다소 복잡하게 느껴질 수 있지만, 기본 개념을 이해하면 쉽게 다룰 수 있다. 여기서 캐러셀은 사용자가 슬라이드할 수 있는 이미지나 콘텐츠 목록을 의미한다. 피그마 프로토타이핑 중에 캐러셀이 고난도인 편인 듯하다. 하고도 까먹고 처음할때도 어려워 하는 사람들 많아서 튜토리얼을 적어본다.
캐러셀 Carousel 이란?
캐러셀은 여러 개의 항목(이미지, 카드 등)을 한 화면에서 보여주고, 사용자가 좌우로 스와이프하여 콘텐츠를 넘길 수 있도록 하는 UI 요소이다. 흔히 웹사이트나 앱에서 뉴스, 이미지 갤러리 등에서 많이 사용된다. 라틴어 "carus"에서 유래되어 "차"나 "마차"를 의미하는데, 원래는 18세기 유럽에서 마차나 말을 타고 돌면서 경기를 하는 행사를 의미했으며, 이런 행사에서 원을 그리며 돌아가는 움직임을 비유적으로 나타내는 단어로 발전했다.
현재 우리가 사용하는 캐러셀은 원래의 의미에서 발전하여, 회전하는 방식으로 항목을 순차적으로 보여주는 UI 요소로 확장됐는데 웹 디자인이나 앱 UI에서의 캐러셀은 일반적으로 여러 개의 콘텐츠(이미지, 카드, 제품 등)를 한 화면에 나열하고, 사용자가 좌우로 스와이프하거나 버튼을 클릭하여 그 콘텐츠를 넘기면서 볼 수 있게 해준다. 주로 슬라이드쇼처럼 작동하지만, 사용자가 직접 조작할 수 있다는 점에서 다르다.
이는 콘텐츠를 공간적으로 절약하면서, 사용자가 선택할 수 있는 다양한 옵션을 한 번에 제공하는 효과적인 방법으로, 특히 모바일 환경에서 많이 사용된다. 예를 들어, 인스타그램의 사진 슬라이드, 아마존의 제품 이미지 갤러리 등이 대표적인 예시이다.
캐러셀 프로토타이핑 피그마 튜토리얼
캐러셀 프로토타이핑 완료 피그마 화면은 아래와 같다. 4가지 이미지가 캐러셀 되는 형식에 아래 프로그레스바를 표기한 형태이다.
핵심은 smart animate 기능을 활용할때 좌우 이미지 위치를 반복적으로 명시하여 프레임 간의 위치 관계를 피그마에게 인식시켜 주는 것이다. 위의 완성된 화면을 Clip content 해보면 아래와 같이 되는데, 프레임 밑에 사실은 이미지 4개가 위치 관계를 포함하여 나열되어 있는 것이다.
프레임 위계 정한 뒤, 스마트 에니메이트
스마트 에니메이트 on drag 로 우선 최상위 프레임에 navigate 프로토타이핑을 건다.
Frame 1 → Frame 2 → Frame 3 → Frame 4
이렇게 되면 프레임 1에서 4까지는 드래그해서 전환이 되는데 이제 프레임 4에서 다시 돌아오는 것에서 막힌다. 그래서 아래와 같이 돌아오는 프로토타이핑을 동일하게 걸어준다. 이때의 프레임은 Frame 1-4 인 최상단 프레임이 아닌, 그 하위 프레임을 의미한다.
img4 → img3 → img2 → img1
프레임 레이어 위계를 보면 위와 같다. Frame1-4 각각 동일하게 img1-4 프레임이 있어야 한다.
참고로, progress bar 좌우 드래그 될때 위치 관계가 필요 없으므로 img 프레임 하위에 두어서 4개로 만들지 말고, Frame 프레임에 두어서 전환을 더 매끄럽게 진행할 수 있다.
레이어 정리가 중요
스마트에니메이트 기능을 활용할때는 레이어 명이 다르면 피그마가 이를 제대로 이식하지 못하는 에러도 발생한다. 그러므로 Frame 1-4의 각 레이어는 위 사진처럼 동일한 구조의 이름으로 설정해야 캐러셀 프로토타이핑이 정상 적동 될 것이니 주의하시길 바란다.
이 피그마 튜토리얼을 통해 프로토타이핑으로 캐러셀을 구현할 수 있는데, 하다가 막히는 부문이나 이해가 안되는 곳 있으면 댓글로 질문주셔도 좋다.
