피그마의 모든 것, 스크롤 편
스크롤은 어떻게 하는 거야?
스크롤 어떻게 넣나요..?
보다 멋있는 프로토타입을 만들다 보면 여기저기에 스크롤을 사용하고 싶을 때가 있습니다.
하지만 피그마에 익숙하지 않다면 생각보다 스크롤을 자유롭게 쓰기 어렵다는 생각이 들 때가 있는데요.
아주 작은 포인트만 이해하고 넘어가시면 스크롤은 생각보다 복잡하지 않으니 쉽게 사용하실 수 있게 되실 거예요.
스크롤의 구성 및 동작 조건
우선 스크롤은 프레임에서만 설정할 수 있습니다. (오토레이아웃도 프레임이니 물론 스크롤 설정 가능합니다)
스크롤은 컨테이너의 크기와 콘텐츠의 크기로 구성되어 있습니다.
그리고 스크롤은 콘텐츠를 담고 있는 컨테이너(프레임)의 크기보다 안에 담겨있는 콘텐츠의 크기가 더 클 때 실행이 가능합니다. 만약 콘텐츠의 크기가 컨테이너와 같거나 더 작다면 스크롤은 동작하지 않아요.
사실 스크롤이 헷갈리는 이유는 피그마의 특성상 프레임의 중첩이 가능하기 때문인데요,
프레임이 컨테이너가 될 수도 있고 콘텐츠가 될 수도 있기 때문에 스크롤을 어디에 걸어야 알맞은 결과가 나오는지 헷갈리기 때문이죠.
내가 어떤 프레임에 스크롤을 걸어야 원하는 결과가 나올지 아래 예시들과 함께 알아보도록 하겠습니다.
스크롤의 종류
스크롤은 프로토타입 탭 (Shift+E)에서 확인이 가능하다.스크롤은 우측 상단에 있는 프로토타입 탭을 직접 클릭하거나 Shift + E로 손쉽게 전환이 가능합니다.
그리고 스크롤이 되게 만들 프레임을 선택하게 되면 Overflow scrolling 항목에서 스크롤을 설정할 수 있는데요. 타이틀 그대로 오버플로우 되는 부분에 대해서 어떻게 처리할지 설정을 하는 부분이기 때문에 오버플로우(콘텐츠의 크기가 컨테이너(프레임)의 크기보다 커지는 것)가 선행되어야겠죠?
스크롤은 총 3가지 옵션으로 설정이 가능합니다
1. Horizontal (가로)
2. Vertical (세로)
3. Horizontal and Vertical (가로 세로 모두)
가로 스크롤과 세로 스크롤Horizontal Scrolling(가로 스크롤)은 커머스의 상품 목록이나 앨범 이미지 등 다양한 곳에서 사용을 합니다.
Vertical Scrolling (세로 스크롤) 같은 경우는 위와 같이 일정한 영역(초록색 박스)을 지정하고 그 영역 안에서 텍스트가 스크롤 되게 만들 때 주로 사용을 하는 편입니다.
Horizontal Scroll
위의 예시는 6개의 초록색 카드를 오토레이아웃으로 묶어 만든 디자인입니다.
레이어를 보시면 Card_01 ~ 06이 Scroll_Area라는 프레임으로 묶여있는 걸 확인하실 수 있습니다.
여기서 Scroll_Area의 크기는 파란색 점선과 같습니다.
보통 Horizontal Scrolling을 실행할 때는 오토레이아웃을 함께 사용하는 경우가 많습니다.
오토레이아웃으로 카드를 가로방향으로 나열하게 되면 위와 같은 형태가 되는데요. 여기서 보통 가장 많이 착각을 하게 됩니다. 분명 눈으로 봤을 땐 컨테이너보다 콘텐츠의 크기가 옆으로 삐져나갔는데? 정작 스크롤은 동작하지 않아요.
이리저리 만져보다가 결국 스크롤이 활성화되는 부분인 제일 바깥쪽 프레임에다가 스크롤을 활성화하게 되면 아래와 같은 오류가 생깁니다.
오류-1 ) 타이틀까지 함께 스크롤링됨전체 영역에 스크롤을 걸어버리는 바람에 타이틀까지 함께 스크롤링되는 건데요.
아래 프로토타입 링크에서 직접 확인해 볼 수 있습니다.
위와 같은 오류가 생기는 이유가 무엇일까요?
바로 컨테이너와 콘텐츠의 영역에서 혼동이 있었기 때문인데요.
우리가 스크롤시켜야 하는 건 A~F의 카드인데 제일 바깥쪽 컨테이너(프레임)에다가 가로 스크롤을 걸어버렸으니 당연히 그 내부에 있는 모든 콘텐츠들이 스크롤 되게 된 것이죠.
콘텐츠 크기 = 컨테이너 크기
콘텐츠 크기 > 컨테이너 크기첫 번째로 우리가 알아야 할 것은 정확한 영역의 이해입니다.
첫 번째 그림에서는 콘텐츠(카드들의 묶음)의 크기와 컨테이너(파란 점선)의 크기가 같습니다.
따라서 스크롤이 활성화되지 않았던 것이죠.
이렇게 특정한 영역에서 스크롤을 활성화시키려면 콘텐츠의 크기보다 컨테이너의 크기를 줄여서 콘텐츠를 오버플로우 시켜줘야 합니다.
두 번째 그림에서는 Scroll_Area(파란 점선)를 좌우 마진 16에 맞추어 줄어주었습니다.
Tip) 프레임의 크기를 줄일 때 Constraints의 영향을 받지 않으려면 Cmd(Ctrl)을 함께 누르고 사이즈를 줄이면 된다.
이렇게 되면 Scroll_Area의 컨테이너보다 초록색 카드 콘텐츠의 사이즈가 더 크기 때문에 Scroll_Area에서의 Horizontal Scroll이 활성화됩니다.
정상적으로 작동되는 스크롤은 아래와 같습니다.
그럼 이번엔 다른 케이스를 한번 살펴보죠.
우측 마진 16을 맞추지 않고 그냥 최상단 프레임에 맞추어 Scroll_Area를 축소하면 어떻게 될까요?
그러면 Scroll_Area가 우측으로 늘어났기 때문에 가로 스크롤을 끝까지 했을 때 마진 없이 화면의 오른쪽에 딱 붙어 보이는 결과가 나오게 됩니다.
이렇게 Scroll_Area의 크기에 따라 스크롤되는 영역의 끝단까지 컨트롤할 수 있으니 상황에 맞추어 사용하시면 되겠습니다!
세로 스크롤과 가로&세로 스크롤은 방향만 다를 뿐 기본 원리는 가로 스크롤과 동일합니다.
쾌적한 스크롤링되시길 바랍니다.
피그마에 대한 질문이 있으시다면 댓글, 혹은 오픈 톡방에서 질문 남겨주시면 아는 범위 내에서
답변 드리도록 하겠습니다!
https://open.kakao.com/o/glYzrC0c
