레이어를 정리하고 싶어요
피그마에서 Group과 Frame 똑똑하게 활용하기
앞선 글들에서는 너무 복잡한 이야기부터 바로 다룬 것 같아(^^;;) 이번에는 피그마 내의 기본 단위에 대한 소개를 드려보고자 합니다!
피그마에는 레이어들을 묶는 두 가지 단위가 있습니다.
하나는 그룹(Group),
하나는 프레임(Frame)이죠.
이 둘은 레이어를 묶어주는 기능으로써는 동일하지만,
작동하는 방식이나 역할이 꽤나 다른데요! 차근차근 소개드려 보겠습니다.
그룹(Group)
그룹은 말 그대로 레이어들을 하나의 그룹으로 묶어주는 기능입니다. 고유하게 존재하는 객체들(eg. 텍스트, 벡터, 도형 등)을 묶어주는 기능으로, 레이어들을 깔끔하게 정리할 수 있습니다.
프레임(Frame)
프레임은 컨텐츠를 배치할 캔버스, 도화지의 역할이라고 보실 수 있습니다.
(일러스트레이터에서 Artboard와 같은 느낌이라고 보시면 좋을 것 같습니다.)
Frame은 Group과 달리 부가적으로 지정해 줄 수 있는 속성이 굉장히 많습니다!
캔버스의 역할이기 때문에 컨텐츠를 묶어주는 기능도 수행할 수 있지만, 내부의 컨텐츠들이 배치되어있을 때 정렬이나, 프레임의 크기가 늘어났을 때 대응하게 되는 방법 또한 지정해 줄 수 있죠.
덕분에 조금 더 유용한 반응형 디자인을 할 수 있기도 하고, 적절하게 영역을 끊어줄 수 있기도 합니다.
이에 대해 조금 더 자세히 설명드려 볼게요.
1. Clip Content
프레임을 넘어가는 객체들이 프레임 안에 존재할 수 있습니다.
구조적으로 레이어는 프레임 안에 속해있지만, 레이어 사이즈가 프레임보다 크다면 넘쳐서 존재할 수도 있겠죠? Clip content라는 속성을 통해 프레임 이상의 객체를 보이지 않도록 지정해 줄 수 있습니다.
Clip content 속성의 활성화 여부에 따라 바뀌는 모습이는 우리가 흔히 사용하는 Mask 기능과 유사하다고 볼 수 있겠습니다. 프레임을 활용하여 단순한 마스킹 정도는 쉽게 할 수 있게 되는 것이지요.
또한 프레임에 적용하는 효과는 내부의 레이어들보다 상위에 있게 됩니다. 어떤 뜻이냐면..
eg. Stroke 속성은 맨 위의 프레임에 넣은 속성이기 때문에 내부에 있는 레이어보다 상위에서 보여집니다요렇게 Stroke가 내부의 레이어들보다 위쪽에 자리잡도록 보여지는 것이지요. Effects의 다양한 속성들 또한 동일하게 작동하게 됩니다.
다만, Fill 속성의 경우에는 반대로 Background를 채우는 속성이기 때문에 맨 뒤로 들어가게 되는 점이 차이점이 되겠습니다.
2. Constraints
프레임 단위 안의 컨텐츠들에게 줄 수 있는 대표 속성이라고 할 수 있겠죠. Constraints 설정입니다.
이 설정을 통해 프레임의 크기가 변함에 따라 컨텐츠의 크기가 바뀌는 방법이나 위치해야 하는 기준을 정할 수 있습니다. 사례를 몇가지 들어볼게요.
Left, Right, Top, Bottom, Center를 지정하여 프레임이 늘어나면 객체가 해당 위치를 기준으로 움직이도록 할 수 있습니다.
Right / Bottom 으로 설정해둔 객체가 우측 하단으로 붙어서 움직이는 모습Left and right, Top and bottom, Scale 속성으로 지정하여 프레임이 늘어나면 내부의 컨텐츠도 늘어나게 만들 수 있습니다.
Left and right / Top and bottom 속성으로 객체의 사이즈가 함께 늘어나는 모습이런 식으로 내부 컨텐츠들을 자동으로 조정되게 만듦으로써 더욱 효율적인 UI 설계를 할 수 있게 됩니다.
만약 내부의 컨텐츠들에 Constraints 설정을 해뒀는데,
이 설정의 영향을 받지 않고 상위의 프레임의 크기만 조절하고 싶다면
cmd(ctrl)을 누른 채로 사이즈 핸들을 드래그해서 프레임만의 사이즈를 조절할 수도 있답니다.
이러한 Constraints 속성을 심화해서 활용하는 기능이 Auto-layout 입니다.
오토 레이아웃은 내부 객체의 사이즈 증감에 따라 상위 프레임의 크기가 자동으로 늘어나고, 줄어들도록 만들어주는 기능이라고 보시면 되겠는데요, 이 오토 레이아웃을 활용하는 방법이 다소 다양해서 다음에 추가로 설명을 적어보겠습니다 ㅎㅎ
오늘은 피그마에서 레이어를 묶어주는 두 가지 단위에 대해 소개드렸는데요, 그룹은 상대적으로 이야기할게 많지 않았지만, 프레임을 더욱 똑똑하게 활용하실 수 있도록 이것저것 설명을 더해보았습니다 :)
움직이는 이미지를 준비해 더욱 쉽게 이해하실 수 있도록 준비해 봤는데용, 모쪼록 도움이 되셨으면 좋겠습니다!
