피그마 강의 (3) 부모, 자식 관계와 레이어 정렬

1. 부모, 자식 관계가 무엇이냐? 

해당 화면의 Layer 란에서, Frame 5는 Frame1과 2보다 앞서 있다. 여기서 Frame 5를 Frame 1과 2의 부모(Parent Container)라 부르고, 1과 2는 자식(Child Container)이라 부른다. 

 

부모 레이어에 마우스 커서를 갖다 대면 > 모양의 토글이 생기는데, 해당 토글을 활용하여 자식 레이어들을 접었다 필 수 있다. 레이어를 전체 접는 단축기는 alt + L이다. 

 

2. 프레임 정렬 

 

오른쪽 패널의 Alignment가 정렬을 의미한다. 정렬은 단일 개체를 대상으로 할 때와 다중 개체를 대상으로 할 때 작동되는 방식이 다르다. 

아이콘을 좌에서 부터 순서대로 (x축) 좌측, 가운데, 우측 정렬. (y축) 상단, 가운데, 하단 정렬로 분류할 수 있다. 

 

단일 개체를 대상으로 할 때는 부모 레이어인 Frame5를 기준으로 정렬하게 된다. 

정렬이 되려면 기준점이 있어야 하기 때문에 부모 레이어가 없는 상태 (예: 프레임 밖을 벗어난 단일 개체) 에서는 정렬이 되지 않는다. 

 

그렇다면 다중 개체를 대상으로는 어떻게 될까? 다중 개체는 서로가 서로의 기준이 된다. 

 

 

해당 이미지를 예시로 들 때, 좌측 정렬을 할 때는 빨강이 더 좌측에 있기 때문에 빨강을 기준으로 좌측 정렬이 된다. 

가운데 정렬을 할 때는 빨강과 파랑의 평균 지점에서 정렬이 된다. 우측 정렬은 파랑이 더 우측에 있기 때문에 파랑을 기준으로 우측 정렬이 된다. y축 정렬도 동일하다. 여기서 중요한 점은, 빨강과 파랑을 둘러싸는 큰 네모를 벗어나지 않는 선에서 정렬이 이루어진다는 것이다. 따라서 여기서 기준은 프레임이 아니다. 

 

추가로, 일단 빨강이 파랑으로 들어오게 되면 정렬은 파랑 내에서 빨강의 위치가 바뀌는 것으로 된다. 즉, 일단 파랑 안에 빨강이 들어오게 되면 파랑이 부모고 빨강이 자식인 것처럼 정렬이 이루어진다는 것이다. 

 

다음으로는 다중 정렬을 대상으로만 가능한 기능 세 가지다. (솔직히 봐도 잘 모르겠다....)

Tidy up: 그리드에 맞춰서 정렬해주는 기능이다

Distribute vertical spacing: 위 이미지처럼, 수직 간격을 맞춰주는 것이다.

Distribute horizontal spacing: 위 이미지를 90도 돌리면 된다. 수평 간격을 맞춰주는 기능이다.

 

위 세 기능은 어느 정도 저런 느낌으로 대강 배열을 해놓고, 기능으로 짠! 하고 완성지어야 본래 의도한대로 정렬이 되는 것 같다.