02. 요소 트리

요소 트리

1. 요소 트리란?

요소(Elements) 트리를 얘기하기 전에, 먼저 요소가 뭔지 간단하게 설명해드릴게요. 요소는 말 그대로 페이지를 구성하는 요소를 의미합니다. 텍스트나 이미지, 아이콘부터 그룹, 인풋, 버튼 등 다양한 종류의 요소가 존재하는데, 이 요소로 이용해서 유저가 사용하는 프론트, 즉 유저 인터페이스(User Interface, UI)가 만들어지는 것이죠.

 

요소를 페이지에 배치해 다양한 디자인을 할 수 있기 때문에 이 요소들이 배치되는 내역을 알 수 있게 해주는 것이 바로 '요소 트리'입니다. 위치는 좌측 최상단에 있고 기본적으로 접혀있으나 사용 시에는 열려 있습니다.

 

2. 기본 작동 방식

요소 트리는 페이지에 배치하는 모든 요소가 표시됩니다. 또한 요소의 속성에 따라 부모-자식 관계로 하위 요소가 트리 형태로 표시됩니다. 요소는 기본적으로 요소 트리 내에서 드래그로 재배치가 불가능하지만, 'Responsive'로 업그레이드 할 경우 요소 트리 내에서 드래그 재배치가 가능합니다. ('Responsive'에 대해서는 추후 설명)

 

3. 기능

마우스 우클릭으로 요소를 삭제하거나 인덱스 순서(앞, 뒤)를 수정하거나 복사, 붙여 넣기 할 수 있습니다. 요소의 관계 상태에 따라 가능한 기능이 다르게 표시됩니다. 또 요소의 우측에는 눈 모양의 아이콘이 있는데요. 이것을 클릭하면 에디터에서 해당 요소가 감춰집니다.

 

4. 요소 트리로 할 수 있는 것

페이지를 디자인하다보면 무수히 많은 요소가 삽입되고 또 부모-자식 관계로 배치되는데요. 그러다 보면 어느 요소가 어떻게 배치되어 있는지 굉장히 헷갈리게 되죠. 또 숨김 처리한 요소는 에디터에 표시되지 않을 수 있어서 만약 요소 트리가 없다면 내가 배치했던 요소를 일일이 다 들춰봐야 하는 문제가 생깁니다. 요소 트리가 있으면 요소의 배치 상황을 한눈에 알 수 있어서 굉장히 편리합니다. 또 디자인 과정에서 걸리적거리는 요소를 잠시 숨겨놓을 수 있어 요소를 정리하는 용도로도 이용할 수 있습니다.