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

Frame(프레임)에서 비율을 고정할 수 있는 방법

400×300px 사이즈 프레임을 만들고, 비율 잠금 아이콘을 누르면 4:3 비율이 고정됩니다.
비율이 고정된 상태에서 Width를 Fill로 설정하면, 너비에 맞춰 자동으로 높이가 조정되어 항상 4:3 비율을 유지하게 됩니다.

Note: CMS 컬렉션 목록에서 고정된 종횡비를 사용하면 모든 CMS 이미지가 동일한 비율을 상속받아 일관된 레이아웃을 유지합니다.

다양한 비율의 이미지를 함께 사용하는 방법

이미지마다 고유한 종횡비를 가지고 있을 경우,프레이머 데모 프로젝트 의 이미지 컴포넌트를 사용하시면 됩니다.

1. Framer의 CMS 컬렉션에 이미지를 업로드

2. 데모 프로젝트에서 제공하는 Image 컴포넌트 사용

데모 프로젝트의 컴포넌트는 이미지의 원본 비율을 유지하면서, CMS 컬렉션 안에서도 각기 다른 비율대로 표시되도록 설정되어 있습니다.

본 글은 Framer 공식 블로그의 ‘Using images with unique aspect ratios in the CMS’ 를 번역·각색한 콘텐츠입니다.