UI\UX 공부/figma강의 정리

[5강] 스크롤 컨테이너와 오버플로우

아노말로카리스 2025. 7. 16. 20:05
오버플로우
  • 기기의 화면 자체보다 콘텐츠가 더 길거나 하는 문제로 인해 컨텐츠가 프레임의 밖으로 넘어가는 경우를 의미.
  • 프레임에 오버플로우가 발생 시, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있어야한다.
  • 즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야하며, 오버플로우가 되지 않으면 스크롤이 생기지 않는다.
스크롤 컨테이너
  • 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능.
  • 스크롤을 만들려면 실제 스크롤되어야하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 있어야 한다.
  • 스크롤 방식 : 프로토타입 채널에서 선택 가능.
    ·No scrolling : 스크롤하지 않는 기본값이에요.
    ·Horizontal : 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤할 수 있다.
    ·Vertical : 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로 스크롤할 수 있다.
    ·Both directions : 가로 및 세로 방향으로 모두 스크롤할 수 있다.
  1. 메인 화면을 선택하고, 메인 화면 내부의 Body프레임의 높이를 확인한다.
  2. 스크롤 속성을 적용할 수 있도록 메인 화면보다 콘텐츠가 길게 길이를 조정한다.
  3. 메인 화면을 선택하고 프로토타입 모드로 변경한다.
  4. 스크롤 방식을 컨텐츠의 길이에 따라서 가로/세로로 중 하나 선택한다.