프로토타입 스크롤 및 오버플로 동작 – Figma Learn - 도움말 센터

이 문서는 이전 Figma UI와 새로운 Figma UI에서 모두 확인할 수 있습니다. 페이지 왼쪽 하단의 토글을 사용하여 현재 UI를 선택하세요. UI3 알아보기: Figma의 새 디자인 →

시작하기 전에

이 기능을 사용할 수 있는 사용자

모든 요금제에서 사용 가능

파일에 대한 편집 가능 액세스 권한이 있는 사람은 누구나 프로토타입을 만들고 편집할 수 있습니다.

프로토타입에서 스크롤링과 패닝이 작동하는 방식을 설정하여 사용자 상호 작용을 복제합니다. 예를 들면 다음과 같습니다.

긴 콘텐츠 페이지를 위아래로 스크롤하기
좌우로 스크롤하여 슬라이더에서 다양한 요소 확인하기
대화형 지도에서처럼 원하는 방향으로 패닝하거나 스크롤하기
스크롤하는 동안 탐색 모음 및 메뉴와 같은 개체를 페이지의 한 위치에 고정하기
스크롤하여 지나간 후에도 프레임 상단에 그대로 유지되는 '스티키 개체' 만들기

Figma 프로토타입에서 스크롤을 사용하려면 다음을 수행해야 합니다.

스크롤을 위한 프레임 준비: 콘텐츠가 프레임 치수의 경계를 넘어 확장되는지 확인합니다.
프레임에 스크롤 오버플로 적용: 프레임의 스크롤을 세로, 가로, 둘 다, 또는 없음으로 정의합니다.
프레임 내 개체에 스크롤 위치 적용: 프레임 내 개체를 스크롤할 때 해당 개체의 동작을 정의합니다. 부모 프레임과 함께 스크롤하거나, 고정된 위치에 머물거나, 부모 프레임의 상단에 고정할 수 있습니다.

스크롤을 설정한 후에는 여러 프레임 사이를 탐색할 때 스크롤 위치를 유지하거나 재설정하는 방법도 고려해 볼 수 있습니다.

스크롤을 위한 프레임 준비

프레임에 스크롤 동작을 추가하려면 프레임에 프레임의 경계를 넘어서 확장하는 콘텐츠가 있어야 합니다.

웹페이지의 경우를 떠올려 보세요. 휴대전화에서 웹페이지를 탐색할 때 화면 크기에 맞는 콘텐츠만 볼 수 있습니다. 하지만 화면에 보이는 것 너머에는 스크롤을 해야만 볼 수 있는 '숨겨진' 콘텐츠가 존재합니다.

콘텐츠가 프레임 치수를 넘어가도록 확장하기

프레임 크기를 조정하려면 다음 안내를 따르세요.

업데이트할 프레임을 선택합니다.
오른쪽 사이드바에서 Design(디자인) 패널을 엽니다.
커서가 나타날 때까지 프레임 가장자리 위로 마우스를 가져갑니다.
바운딩 박스를 드래그하여 프레임 크기를 조정합니다.

제약조건은 개체의 크기를 조정할 때 개체의 동작 방식을 정의합니다. 제약 조건 및 자동 레이아웃 크기 조정 속성을 일시적으로 무시하려면 다음 수식 키를 누른 채 프레임 크기를 조정합니다.

Mac: ⌘ Command
Windows: Ctrl

각 개체가 선택된 프레임 내에 있는지 확인하려면 왼쪽 탐색 패널의 Layers(레이어) 섹션을 확인하세요. 자식 개체는 부모 프레임 아래에 중첩됩니다.

프레임의 바운딩 박스를 드래그합니다.

콘텐츠 숨기기

콘텐츠 숨기기로 프레임 경계를 벗어나는 모든 콘텐츠를 숨길 수 있습니다.

업데이트할 프레임을 선택합니다.
오른쪽 속성 패널에서 Design(디자인) 탭을 엽니다.
Layout(레이아웃) 섹션에서 Clip content(콘텐츠 숨기기) 옆에 있는 박스를 체크합니다.

클립 콘텐츠 설정을 활성화하면 프레임 경계를 넘어서는 콘텐츠를 숨길 수 있습니다.

프레임에 스크롤 오버플로 적용

스크롤 오버플로는 사용자가 프레임의 크기를 넘어 확장되는 콘텐츠와 상호 작용하는 방법을 정의합니다.

오버플로 동작은 프레임에만 적용할 수 있습니다. 이는 캔버스에 직접 있는 프레임(최상위 프레임) 뿐만 아니라 다른 프레임이나 레이어에 중첩된 프레임에도 적용됩니다.

프레임에 스크롤 오버플로를 적용하려면 다음 안내를 따르세요.

프레임을 선택합니다.
오른쪽 속성 패널에서 Prototype(프로토타입) 탭을 엽니다.
Scroll behavior(스크롤 동작) 섹션에서 Overflow(오버플로) 드롭다운을 선택합니다. 다음 중에서 선택합니다.
- No scrolling(스크롤 없음)
- Horizontal(가로)
- 세로
- Both directions(양방향)

프레임을 선택하고 Prototype(프로토타입) 탭에서 스크롤 오버플로 설정을 적용합니다.

참고: 느낌표로 표시된 오류 메시지("For scrolling to work on this frame, the content needs to be bigger than the frame(이 프레임에서 스크롤이 작동하려면 콘텐츠가 프레임보다 커야 합니다)")가 표시되면 프레임의 콘텐츠를 프레임 크기 이상으로 확장하여 스크롤할 수 있도록 프레임을 준비해야 한다는 의미입니다.

세로

세로 스크롤을 사용하면 사용자는 위아래로 스와이프하거나 스크롤할 수 있습니다. 이 동작을 사용하여 긴 웹사이트 또는 앱 내 콘텐츠 페이지를 아래로 스크롤하는 동작을 모방할 수 있습니다.

세로 스크롤이 있는 프로토타입의 예.

Horizontal(가로)

가로 스크롤을 사용하면 세로 위치를 유지하면서 좌우로 스와이프하거나 스크롤할 수 있습니다. 이 기능을 사용하면 제품, 갤러리, 라이브러리 등의 콘텐츠에 대한 슬라이더를 만들 수 있습니다.

가로 스크롤이 있는 프로토타입의 예

No scrolling(스크롤 없음)

스크롤 없음을 선택하면 사용자는 어느 방향으로도 스크롤할 수 없습니다. 프레임 경계를 벗어나는 콘텐츠는 볼 수 없습니다.

Both directions(양방향)

양방향(가로 및 세로)을 통해 사용자는 지도나 확대된 이미지를 볼 때와 같이 원하는 방향으로 탐색할 수 있습니다.

가로 스크롤과 세로 스크롤이 모두 있는 프로토타입의 예.

프레임 내 개체에 스크롤 위치 적용

스크롤 위치는 사용자가 프레임에 있는 레이어를 스크롤하여 지나갈 때 해당 레이어의 동작을 정의합니다. 각 레이어에는 하나의 스크롤 위치만 적용할 수 있습니다.

개체, 그룹 또는 컴포넌트를 선택합니다. 개체는 스크롤 오버플로가 적용된 프레임에 있어야 합니다.
오른쪽 속성 패널에서 Prototype(프로토타입) 탭을 엽니다.
Scroll behavior(스크롤 동작) 섹션에서 Position(위치) 드롭다운을 선택합니다. 다음 중에서 선택합니다.
- Scroll with parent(부모와 함께 스크롤)
- Fixed(고정)
- Sticky(스티키)

개체가 선택되었습니다. Prototype(프로토타입) 탭에서 스크롤 동작 설정이 적용됩니다.

Scroll with parent(부모와 함께 스크롤)

부모와 함께 스크롤되는 개체는 스크롤할 때 프레임 위아래로 이동합니다. 이 동작을 사용하면 긴 콘텐츠 페이지를 위아래로 스크롤하는 동작을 모방할 수 있습니다. 부모 프레임과 함께 스크롤되는 개체가 있는 프로토타입의 예.

Fixed(고정)

고정된 개체는 위아래로 스크롤해도 움직이지 않습니다. 예를 들어, 이 옵션을 사용하여 상태 표시줄을 장치 상단에 고정하거나 메뉴를 프레임 하단에 고정할 수 있습니다.

개체에 절대 위치가 적용되지 않는 한 자동 레이아웃을 사용하는 프레임의 모든 개체에 고정 스크롤 위치를 할당할 수 없습니다. 고정된 개체가 있는 프로토타입의 예.

개체를 고정으로 설정하면 Figma는 해당 개체를 프레임의 다른 레이어 위로 이동하고 왼쪽 탐색 패널의 Layers(레이어)섹션에서 Fixed(고정)으로 레이블을 지정합니다. 고정된 레이어 위에 스크롤 개체를 배치할 수 없습니다.

레이어 패널은 고정 및 스크롤 레이어에 레이블을 지정합니다.

Sticky(스티키)

세로 스크롤이 있는 프레임 내의 모든 개체에 스티키 스크롤 위치를 적용합니다.

스티키 개체는 처음에는 스크롤되지만 상단 가장자리가 부모 프레임의 상단에 도달하면 고정됩니다. (다시 위로 스크롤하면 개체가 고정되지 않고 부모 프레임 아래로 이동합니다.)

팁: Figma에서는 부모, 자식, 형제, 최상위 프레임이라는 용어를 사용하여 개체 간의 관계를 설명합니다. Figma의 레이어 계층 구조에 대해 자세히 알아보기 →

스티키 개체가 있는 프로토타입의 예.

고정 개체가 프레임의 다른 레이어에 중첩된 경우, 직접 부모(direct parent)의 경계 내에 유지됩니다. 즉, 직접 부모 레이어를 뷰 밖으로 스크롤해도 스티키 개체는 부모와 함께 계속 스크롤됩니다. 보조 프레임에 스티키 개체가 내장된 프로토타입의 예.

왼쪽 탐색 패널의 Layers(레이어) 섹션을 확인하여 스크롤할 때 스티키 개체가 어떻게 쌓이는지 확인하세요. 스티키 개체 아래의 모든 레이어는 뒤로 스크롤되고 스티키 개체 위의 모든 레이어는 맨 앞으로 스크롤됩니다. 스티키 스크롤을 위해 개체가 쌓이는 순서를 변경하려면 Layers(레이어) 패널에서 순서를 변경합니다.

참고: 자동 레이아웃 프레임에서 왼쪽 탐색 패널의 Layers(레이어) 섹션의 레이어를 다시 정렬하면 레이어가 캔버스에 시각적으로 나타나는 순서에 영향을 미칩니다.

기본적으로 자동 레이아웃 프레임에 있는 개체의 캔버스 스태킹 설정이 Last on top(마지막이 맨 위로)으로 설정되어 있습니다. 즉, 시각적으로 프레임의 맨 아래에 있는 레이어가 그 위에 있는 레이어 앞에 쌓이게 됩니다.

레이어가 위에서 아래로 쌓이도록 순서를 바꾸려면:

자동 레이아웃 프레임을 선택합니다.
오른쪽 사이드바의 Auto layout(자동 레이아웃) 섹션에서 Auto layout(자동 레이아웃) 설정을 선택합니다.
Canvas stacking(캔버스 스태킹) 드롭다운 메뉴에서 First on top(첫 번째가 맨 위로)을 선택합니다.

자동 레이아웃에 대해 자세히 알아보기 →

스크롤 위치 유지 및 재설정

프로토타입에 여러 페이지 또는 화면이 포함된 경우 스크롤 위치를 유지하거나 프레임 간 스크롤 위치를 재설정하도록 선택할 수 있습니다.

스크롤 위치 유지: 프레임 간 전환 시 사용자의 스크롤 위치를 유지합니다.
스크롤 위치 재설정: 프레임 간 전환 시 사용자의 스크롤 위치를 재설정합니다.

프로토타입에서 스크롤 위치를 유지하거나 재설정하는 방법에 대해 자세히 알아보기 →

참고: 스크롤 위치 유지는 프로토타입 상태 관리의 한 유형입니다. 상태 관리를 사용하면 프로토타입 재생 시 프레임 안팎으로 이동할 때 개체 속성과 상태를 유지할 수 있으며, 스크롤 위치, 인터랙티브 컴포넌트, 동영상에 적용할 수 있습니다.

프로토타입 상태 관리에 대해 자세히 알아보기 →