[기초 Figma] 스크롤(½)

피그마를 사용하면 다양한 프로토타입을 사용할 수 있는데, 대표적인 프로토타입으로 스크롤이 있습니다. 기본 제작 원리만 알면 다양하게 이용할 수 있어 배워두면 유용합니다.

스크롤 종류

스크롤은 오른쪽 상단 [Prototype]에서 확인가능합니다.

 

스크롤은 우측상단의 [Prototype]탭에서 확인가능합니다.
스크롤을 만들 프레임을 선택하면 [Overflow Scrolling]에서 스크롤을 설정할 수 있습니다.
오버 플로우 스크롤은 오버 플로우되는 부분을 스크롤링 하겠다는 의미이기 때문에 “오버플로우(프레임 크기보다 안에 있는 컨텐츠의 크기가 클때)”가 먼저 진행되어야 아래의 항목이 생겨납니다.

스크롤은 총 3가지로 나누어져있습니다.
1. Horizontal Scrolling(가로 스크롤)
2. Vertical Scrolling(세로 스크롤)

3. Horizontal and Vertical Scrolling(가로세로 모두 가능한 스크롤)

 

스크롤 동작 조건
[Overflow Scrolling]이 진행되려면 앞서 말했듯이 “오버플로우(프레임 크기보다 안에 있는 컨텐츠의 크기가 클때)”가 먼저 진행되어야합니다.

                         프레임크기 = 컨텐츠 크기                                        프레임크기 < 컨텐츠 크기(스크롤 기능 활성화)

위와 같은 경우 Auto 레이아웃을 사용합니다.
프레임을 선택해 줄여주시면 스크롤 기능이 활성화됩니다.
왼쪽은 프레임과 컨텐츠 크기가 같아 [Overflow Scrolling]이 활성화 되지 않습니다.
오른쪽은 프레임의 크기보다 컨텐츠 크기가 세로로 넓기 때문에 [Overflow Scrolling-Vertical Srolling]이 활성화됩니다.

이후 프레임을 선택후,[Prototype]탭에서 [Overflow Scrolling-Vertical Srolling]을 선택해주시면 됩니다. 

 

스크롤  질문사항
Q1. 컨텐츠를 프레임 내에서만 보이게 하고싶어요./프레임 바깥부분에 컨텐츠가 노출됩니다.

Clip Content는 오른쪽 상단 [Design]에서 확인가능합니다.
프레임 선택후, 오른쪽 상단 [Design]탭에서 Clip Content 버튼을 체크해주시면, 프레임 바깥부분의 컨텐츠가 사라집니다.

Q2. Frame이 줄여질때 문제가 생기는 경우
1. Frame 지정을 안했을경우

Frame으로 묶여있지 않고각각의 개체로 있을경우, Frame 조절이 오류가 생깁니다.
이럴경우 Auto Layout을 통해 1개의 프레임으로 만들어주던가, 오른쪽 마우스를 클릭후 Frame Selection(단축키 : Option+Command+G)를 선택해주시면 됩니다.

 

Clip Content는 오른쪽 상단 [Design]에서 확인가능합니다.

2. Frame이 되어있음에도 이상하게 줄어드는 경우

프레임 크기를 줄일때 Constraints의 영향을 받지않으려면 Command(Control)을 함께 누르고 줄이면 됩니다.



다음번에는 사이드바(네비게이션 바)가 있을 경우의 스크롤에 대해 알아보겠습니다.

참고사이트 : https://brunch.co.kr/@smu00/5

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기
브랜드의 성장박스 Data Nugget