오버플로우
- 기기의 화면 자체보다 콘텐츠가 더 길거나 하는 문제로 인해 컨텐츠가 프레임의 밖으로 넘어가는 경우를 의미.
- 프레임에 오버플로우가 발생 시, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있어야한다.
- 즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야하며, 오버플로우가 되지 않으면 스크롤이 생기지 않는다.
스크롤 컨테이너
- 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능.
- 스크롤을 만들려면 실제 스크롤되어야하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 있어야 한다.
- 스크롤 방식 : 프로토타입 채널에서 선택 가능.
·No scrolling : 스크롤하지 않는 기본값이에요.
·Horizontal : 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤할 수 있다.
·Vertical : 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로 스크롤할 수 있다.
·Both directions : 가로 및 세로 방향으로 모두 스크롤할 수 있다.
- 메인 화면을 선택하고, 메인 화면 내부의 Body프레임의 높이를 확인한다.
- 스크롤 속성을 적용할 수 있도록 메인 화면보다 콘텐츠가 길게 길이를 조정한다.
- 메인 화면을 선택하고 프로토타입 모드로 변경한다.
- 스크롤 방식을 컨텐츠의 길이에 따라서 가로/세로로 중 하나 선택한다.
'UI\UX 공부 > figma강의 정리' 카테고리의 다른 글
| [5강] 화면 디자인 실습 (1) | 2025.07.17 |
|---|---|
| [5강] 화면 디자인 연결 요소 3인방 (0) | 2025.07.16 |
| [5강] 프로토타입과 프로토타이핑 (0) | 2025.07.16 |
| [4강] 합성 컴포넌트와 네스티드 인스턴스 (0) | 2025.07.16 |
| [4강] 버튼에 아이콘 넣기/바꾸기 (0) | 2025.07.15 |