본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

프레이머의 최신 CSS 스타일

Framer에서는 모던 UI를 구현할 때 자주 사용하는 CSS 속성들을 폭넓게 지원하고 있습니다. 예를 들어 Blur, Filters, Blending, Z Index, Cursor, Pointer Events, User Select 같은 속성들은 스타일을 지원하며, 이 모든 스타일은 최신 브라우저에서 안정적으로 작동합니다.

이번 가이드에서는 그중에서도 브라우저에 최근 도입된 Overscroll 속성과 Mask 속성을 살펴보겠습니다.

Overscroll 속성

Overscroll은 사용자가 스크롤 가능한 영역의 끝에 도달했을 때 어떤 동작을 할지를 제어하는 속성입니다. Frame이나 Stack이 Overflow: Scroll로 설정된 경우 가장 유용하게 활용됩니다.

Overscroll 브라우저 지원 현황

• Chrome: 65+

• Chrome on Android: 111

• Edge: 79+

• Safari: 16+ (2022년 9월부터)

• Safari on iOS: 16+

• Firefox: 59+

• Opera: 52+

• Opera Mobile: 73

• Samsung Internet: 8.2+

• Android Browser: 119

• Firefox for Android: 119

Mask 속성

Mask는 이미지나 그라디언트를 사용해 요소(Frame 등)의 특정 부분을 가리거나 드러내는 데 활용됩니다. 섬세한 시각적 표현이 필요한 UI에서 특히 유용하게 사용되는 속성이에요.

Mask 브라우저 지원 현황

• Chrome: 120+

• Chrome on Android: 120+

• Edge: 120+

• Safari: 15.4+

• Safari on iOS: 15.4+

• Firefox: 53+

• Opera: 106+

• Opera Mobile: 80

• Samsung Internet: 25+

• Android Browser: 120

• Firefox for Android: 53+

마무리

Framer의 최신 CSS 지원 덕분에, 디자인 디테일을 그대로 구현하면서도 안정적인 크로스 브라우징을 유지할 수 있습니다. Framer의 최신 지원 정보는 Can I Use에서 확인할 수 있습니다.

본 글은 Framer 공식 블로그의 ‘CSS Styles Support’를 번역·각색한 콘텐츠입니다.