질문사항
카드 컴포넌트 내 이미지가 비율 고정된 상태로 스케일되도록 설정할 수 있을까요? 현재 Constraints를 Scale로 설정하고 레이아웃에 비율 고정을 걸어도, 카드 컴포넌트를 가로로 줄이면 이미지도 가로로만 줄어듭니다. 가로로 줄일 때 이미지도 비율 고정된 상태로 함께 줄어들게 하는 방법이 궁금합니다.
답변
피그마에서 컴포넌트 내 이미지가 비율 고정된 상태로 스케일되도록 하려면 몇 가지 방법을 고려할 수 있습니다. 질문하신 상황은 이미지가 부모 프레임의 가로 길이에 맞춰 가로로만 줄어들고 세로 비율이 깨지는 경우로 보입니다.
해결 방법:
이미지 Fill 설정 확인: 이미지 레이어를 선택한 후, Fill 속성에서 'Fill' 대신 'Fit' 또는 'Crop'을 사용하고 있는지 확인하세요. Fill: 이미지가 프레임을 채우도록 확대/축소되며, 프레임 비율과 다르면 이미지가 잘리거나 늘어날 수 있습니다. Fit: 이미지가 프레임 안에 완전히 들어가도록 확대/축소되며, 비율은 유지됩니다. 프레임에 여백이 생길 수 있습니다. Crop: 이미지를 프레임에 맞춰 자르면서 비율을 유지합니다.여기서는 'Fit' 또는 'Crop'이 더 적합할 수 있습니다.
Constraints 설정: 이미지 레이어의 Constraints를 'Left & Right'와 'Top & Bottom' 대신 'Scale'로 설정하는 것이 맞습니다. 하지만 부모 프레임의 크기가 변할 때 이미지 자체의 비율을 유지하려면, 이미지 레이어의 Fill 설정이 중요합니다.오토 레이아웃(Auto Layout) 활용: 이미지를 포함하는 프레임(또는 오토 레이아웃)을 만들고, 이 프레임에 `Hug Contents` 또는 `Fill Container`를 적절히 적용하여 부모 컴포넌트의 크기 변화에 따라 이미지가 반응하도록 설정할 수 있습니다.플러그인 활용: 언급하신 대로 'Aspect Ratio'와 같은 플러그인을 사용하면 이미지의 종횡비를 쉽게 고정하고 관리할 수 있습니다. 이 플러그인은 특히 이미지 카드나 미디어 컴포넌트 작업 시 효율적입니다.핵심은 이미지 레이어의 Fill 속성을 'Fit' 또는 'Crop'으로 설정하고, Constraints를 'Scale'로 지정하여 부모 컴포넌트의 크기 변화에 따라 이미지도 비율을 유지하며 반응하도록 하는 것입니다.