[Figma] 사이드바가 있는 웹앱에서의 스크롤 가능한 프로토타입

피그마에는 와이어프레임을 실제 웹앱같이 인터렉션 할 수 있는 프로토타입이라는 것이 있습니다.

기본적으로는 특정 부분을 클릭하여서 같은 화면에 특정한 요소가 추가된 다른 프레임으로 이동하는 방식을 쓸 수 있습니다.

하지만, 스크롤하는 경우를 표현하고 싶다면 어떻게 해야할까요? 그리고 사이드바가 있는 경우의 추가작업까지 해보겠습니다.

사용할 화면

아래와 같이 왼쪽에 사이드바가 있고 홈 화면에 여러개의 카드들을 보여주는 웹앱이 있다고 해봅시다.

마지막에 짤려있는 카드들을 보면 스크롤이 가능하다는 것을 보여주고 싶다는 의미를 어렴풋이 알 수 있습니다.

실제로도 보이는 것은 3줄이지만 아래의 한 줄이 더 있다는 것을 확인할 수 있죠.

디자인하는 입장에서도 디자인을 보는 입장에서도 스크롤 가능하다는 것을 생각할 수 있지만, 프로토타입에서 확인을 하려하면 스크롤이 되지 않습니다.

스크롤을 프로토타입에서도 보여주고 싶다면 어떻게 해야 할까요? ?

프로토타입에 스크롤 적용

프로토타입에서 스크롤을 사용하기 위해 홈 화면 프레임을 선택한 후 오른쪽 패널의 프로토타입을 선택해줍니다.

프로토타입 항목에서 Overflow scrolling 항목에서 No scrolling이 아니라 수직 스크롤을 하기 위해 Vertical scrolling을 선택해줍니다.

스크롤을 설정했으니 프토토타입을 실행하여서 확인해보면,

스크롤은 되지만 사이드바가 고정되지 않는 것을 확인 할 수 있습니다... ?

제가 원했던 것은 사이드바는 고정되고 컨텐츠들만 스크롤 되는 것이었습니다...

그러면 사이드바는 고정되고 컨텐츠만 스크롤 시키려면 어떻게 해야 할까요? ?

사이드바 고정

피그마에서는 이를 위해 스크롤 시에도 아이템을 화면에 고정시키는 옵션을 제공하고 있습니다.

그러면 사이드바를 고정시켜봅시다.

사이드바 프레임을 선택한 뒤 디자인 탭의 Fix position when scrolling을 선택하게 되면 스크롤시에도 사이드바 프레임이 고정되게 됩니다.

이 옵션을 선택한 뒤에 다시 프로토타입을 실행시키고 스크롤을 해보면,

사이드바가 고정되고 컨텐츠만 스크롤되는 것을 확인할 수 있습니다. ???

끝으로

사이드바를 사용하는 레이아웃은 자주 사용하고 스크롤이 발생하는 경우도 많기 때문에, 알아두면 좋을 것 같습니다.

또한, Fix position when scrolling는 position: sticky, fixed (sticky의 경우 조금 작업이 더 필요하지만) 를 표현하고 싶을 때 유용하니 기억해두면 좋겠죠?

이상입니다. ?