피그마에서 전체 이미지 크기 조절하는 방법 (비율 유지)

피그마에서는 프레임이나 이미지 등의 크기를 조절하는 방법이 매우 다양하게 있다. 

오늘은 그 방법을 기록해보려고 한다 :) 

 

그리고 프레임 안에서 드래그로 이미지 줄였는데, 내부 콘텐츠나 컴포넌트들이 같이 줄어들지 않아서 곤란했던 분들 주목.

필수적인데 알아내기 힘든 방법을 공유한다. 

 

 

---

1. 마우스로 직접 조절

가장 기본적인 방법. 아마 컴퓨터만 다룬다면 누구나 할수 있을 것이다. 

이미지 가장자리에 드래그를 통해 사이즈를 조절할 수 있다. 

 

추가로 기본을 몇가지 더 소개해 드리자면,

 

비율 유지하며 크기 조절 :

Shift + 드래그 → 가로세로 비율을 유지한 채 크기 변경.

 

중앙을 기준으로 크기 조절 :

Alt(Windows) / Option(Mac) + 드래그 → 이미지의 중심을 유지하면서 크기 변경.

 

비율 유지 + 중앙 기준 크기 조절 :

Shift + Alt (Windows) / Shift + Option (Mac) + 드래그

 

등의 방법이 있다. 특히 Shift + 드래그 방법은 아주 흔히 사용.

 

 

2. 정확한 크기 입력 

이미지를 선택한 후 오른쪽 패널에서 직접 Width값과 height값을 직접 조절하면 된다. 
W, H 값 옆 아이콘을 클릭하면 비율을 유지한 채 사이즈를 조절할 수 있다.

옛날엔 체인아이콘이었는데 바뀐건 뭐라고 해야한담....

그런데 위의 두 방법대로 해도

안의 내용들은 내 생각대로 같이 줄어들지 않는다면? 

 

 

 

3. 벡터 기반 크기 조절 (Scale Tool 활용)

Scale Tool을 활용하면 원하는 대로 프레임 안의 모든 내용이 비율에 맞춰 줄어드는 것이 가능하다. 

단축키는 K. 

 

실무에서 아주아주아주아주 많이 쓰는 내용이다. 

그러나 아무도 알려주지 않아서 필자도 알게 된 지는 2~3년밖에 안 됐음 ㅠㅜ

 

1️⃣ 단축키 K 를 눌러 Scale Tool(비율 조절 도구)을 활성화
2️⃣ 이미지를 선택한 후, 드래그하여 크기 조절
3️⃣ 비율 유지를 자동으로 적용하면서 조절 가능

단축키 K를 누르면 오른쪽 패널에 다음과 같이 Scale 메뉴가 생긴다.

 

Scale 메뉴는 내가 현재 선택한 개체를 원하는 비율대로 줄여준다. 

W와 H값을 직접 입력하여 조절할수도 있다. 한쪽만 숫자를 적어도 현재 비율에 맞춰 알아서 줄여준다. 

하단 1x라고 되어있는 버튼을 통해 배수별로 조절도 가능하다.

 

참으로 편한 기능이 아닐수 없다 :)