피그마 프로토타이핑 가로 스크롤 안 될 때 해결법(For scrolling to work on this frame, the content needs to be bigger than the frame.)

 

프로토타이핑 가로 스크롤 에러 메시지 

 

 

피그마로 프로토타이핑 작업 중에 만난 오류! 

scroll behavior에서 Overflow- Horizontal이 되어야 하는데, 느낌표와 함께 가로 스크롤 기능이 구현되지가 않았다. 

 

 

마우스를 호버하면 다음과 같은 안내 문구가 뜬다. 

 

 

For scrolling to work on this frame, the content needs to be bigger than the frame. 

이 문구가 핵심이다! 콘텐츠가 프레임보다 커야 overflow를 시킬 수 있는데, 콘텐츠가 프레임보다 작거나 크다면 overflow를 할 수가 없다.

 

 

 

피그마 가로스크롤 해결 방법 

 

 

내가 가로스크롤 효과를 줄 컴포넌트! 하단 3개의 카드에 가로스크롤 효과를 주려고 한다. 

 

 

 

여기서 꿀팁! 나의 경우 마지막 카드를 따로 오토레이아웃 처리를 한 다음, right padding을 16을 주었다. 이유는 첫번째 카드에 left padding을 16을 주었는데, 이 패딩값을 가로스크롤 시 오른쪽 카드가 노출될 때도 동일하게 맞춰주기 위함이다. 이러면 카드 양쪽 패딩값이 동일하게 16이 되면서 레이아웃이 훨씬 깔끔하고 정갈해보인다!! 

 

 

 

 

 

그 다음 3개의 카드를 하나의 프레임으로 잡아준다. 이 때 해당 프레임의 크기(정확하게는 가로 길이)는 반드시 3개 카드의 가로 길이보다 짧아야 한다. 

왜나면 해당 프레임에 overflow 효과를 주어야하기에, 스크롤될 컴포넌트들은 해당 프레임보다 커야하기 때문이다. (the content needs to be bigger than the frame.)

 

 

 

 

피그마 가로스크롤 해결

 

 

이제 이렇게 overflow-horizontal이 잘 작동하는 것을 확인할 수 있다!

 

마지막 카드에 right padding을 16으로 주어서 레이아웃도 훨씬 깔끔함 ㅎㅎ 

 

 

 

참고 자료

 

피그마 가로 스크롤 안 될 때 해결방법