[Day 5] 레이어 결과창에서 조절해보기

30일간의 Framer.js 스터디

결과창(Preview)에서 레이어 조절해보기



<그림. 결과창에서 변형>

레이어의 속성 중 크기, 위치, 회전, 배율 등의 속성은 우측의 결과창에서도 바꿀 수 있습니다. 소스코드 창 레이어 소스코드 왼쪽에 있는 작은 속성 버튼을 클릭하면 가운데 속성이 표시되고 우측의 결과창에 있는 레이어 귀퉁이에 동그란 모양의 버튼들이 생성된 걸 볼 수 있습니다. 

크기 조절

이 귀퉁이 버튼들을 클릭하고 드래그 앤 드롭하면 크기를 변경할 수 있습니다. 좌, 우측은 가로 크기를 변경하고 상, 하단은 세로 크기를 변경합니다. 그리고 대각선 가장자리에 위치한 버튼은 동시에 조절이 가능합니다.

이렇게 변형한 크기는 속성 창에 'Size' 항목에 반영되고 소스코드를 보시면 레이어의 가로 값(width)과 세로 값(height)이 바뀌는 것을 확인할 수 있습니다.

레이어 회전 

결과창에서 레이어를 회전할 수도 있습니다. 레이어 귀퉁이 버튼에서 커서를 조금만 떼어보면 휜 모양의 화살표가 나타납니다. 이때 클릭을 하고 마우스를 이동하면 레이어가 회전하게 됩니다. 그리고 이 회전 값은 속성 창에 'Rotation' 값을 변경하게 되고 소스코드에도 rotaion이라는 속성 값이 추가됩니다. 

테두리 둥글림값 조절

레이어의 상단 좌측에 보시면 귀퉁이 버튼보다 더 작은 동그라미 버튼이 있습니다. 이 버튼으로 테두리 둥글림값(Border radius)을 조절할 수 있습니다. 둥글림 버튼을 드래그 앤 드롭하면 각진 테두리에서 동그란 테두리로 변형이 가능합니다. 

둥글림 값은 속성 창에 BorderRadius라고 표시되며 , 소스코드에는 borderRadius라는 속성으로 추가됩니다. 그리고 둥글림 정도는 가로길이(width)와 세로 길이(height)에서 작은 값의 절반만큼만 가능합니다. 예를 들어 가로가 300px이고 세로가 500px이라면 작은 값인 가로의 300px 의 절반값인 150px 까지만 둥글림이 적용되고 그 이상 값은 무시됩니다. 



비율(Scale) 조절

마지막으로 Scale 값을 변경할 수 있습니다.  레이어 위에 커서를 두고 Command 키를 누르고 있으면 <그림>과 같이 커서 밑에 원모 양이 생깁니다. 이 상태에서 클릭하고 드래그하게 되면 Scale 값이 바뀌면서 레이어의 비율 크기를 늘이거나 줄일 수 있습니다. 비율 값은 속성 창에 'Scale'로 표시되며 소스코드에서는 'scale'이라는 속성 값으로 표시됩니다. 

<그림. 비율 조절>