인터페이스의 왼쪽에 있는 빠른 도구메뉴에는 디자인에 추가할 수 있는 많은 요소(elements)와 모양이 포함되어 있습니다. 이들을 선택하고 캔버스에서 클릭하고 드래그하면 그려지고 클릭하면 드롭됩니다.

박스 (Box)

빠른 도구 패널 상단의 상자를 선택하거나 단축키 B를 사용합니다. 각 모서리에 핸들이 표시됩니다. 이 핸들을 사용하여 상자의 크기를 조정하거나 두 번 클릭하여 상자에 텍스트를 삽입할 수 있습니다.

상자 (Box)와 직사각형 (Rectangle)에는 차이가 있습니다. 상자 안에는 텍스트를 추가·편집할 수 있는 반면, 직사각형은 벡터 형상으로, 벡터 포인트를 드래그 하거나 새로운 포인트를 추가하거나 해서 커스터마이즈 할 수 있습니다. 또한 직사각형에는 독립 경계나 패딩을 정의할 수 없습니다.

신축 가능 상자

기본적으로 상자의 텍스트는 고정 크기로 설정되지만, 상자에 문자를 입력하면 상자가 확장되어 내부 텍스트에 맞게 자동으로 조정되도록 할 수도 있습니다. 그러기 위해서는 Fixed Width and Height (폭과 높이를 고정)의 체크를 해제하면 됩니다. 버튼의 경우도 마찬가지입니다.

<aside> 💡 비고 컴포넌트인 박스나 버튼에는 자동 사이즈 조정 기능이 없습니다.

</aside>

https://uxpincommunity.cdn.prismic.io/uxpincommunity/71062a1d-6085-4fae-b9da-b9b61c82d4a1_box-rectangle.mp4

모양 (Shapes)

자주 사용되는 도형과 그 단축키를 소개합니다. 이러한 도형을 추가한 후 도형을 더블 클릭하면 벡터 편집 모드로 들어갑니다. 이렇게 하면 꼭지점을 추가하거나 기존 꼭지점을 개별적으로 조작할 수 있습니다.