피그마의 모든 것, 프레임 편 - 2
프레임의 주요 기능
이번에는 프레임이 가지고 있는 특성 및 주요 기능에 관해 살펴보려고 한다.
프레임은 몇 가지 기능을 가지고 있다.
1. 프레임 중첩
2. Constraints
3. 레이아웃 그리드
4. 프로토타입
1. 프레임 중첩
피그마에서는 프레임 안에 프레임을 넣을 수 있다. 물론 프레임 안의 프레임 안의 프레임도 가능하다.
피그마를 사용하다 보면 이러한 중첩 개념은 굉장히 많이 사용된다.
나중에 다룰 피그마의 주요 기능들(오토레이아웃, 컴포넌트)이 전부 프레임 베이스로 작동하기 때문이다.
따라서 피그마를 점점 사용하면서 툴에 익숙해져 여러 가지 기능을 복합적으로 사용해 디자인하다 보면
여러분의 레이어 패널은 그룹 대신 프레임으로 가득하게 될 것이다.
프레임은 레이어 패널에서 # 아이콘으로 확인할 수 있다.2. Constraints
Constraints는 우리가 프레임 사이즈를 조절할 때, 프레임 내부의 오브젝트가 어떻게 변할 것인지에 대해 설정하는 기능이다.
Constraints의 기본값은 Left, Top이며 이는 프레임 사이즈를 어떤 식으로 바꿔도 내부의 오브젝트는 프레임의 왼쪽, 위에 붙어있겠다는 걸 말한다.
위 이미지를 보면 오브젝트를 선택했을 때 프레임에 붙어있는 파란색 점선이 보이는데 이것이 바로 해당 오브젝트가 프레임에 대해 가지고 있는 제약(Constraints)이다.
여기서 프레임의 우측 아래를 늘려보면 내부 오브젝트(회색 정사각형)의 위치는 변하지 않는다.
이번에는 오브젝트를 오른쪽 아래로 이동시키고 Constraints를 Right, Bottom으로 변경한 다음 프레임의 우측 아래를 늘려보았다. 이번엔 오브젝트가 함께 이동한 모습을 볼 수 있다.
이처럼 Constraints는 오브젝트를 선택할 때 나타나며, 파란색 점선의 형태로 확인할 수 있고, 파란색 점선에 붙어있는 형태로 작동한다는 것을 알 수 있다.
Constraints의 종류Constraints는 2가지 방향(Vertical, Horizontal)이 있으며 각 방향마다 5가지의 옵션을 가지고 있는데, 위에서 다룬 기본적인 2가지 옵션 외에 나머지 3가지 옵션을 살펴보자.
Left and Right, Top and BottomLeft and Right와 Top and Bottom은 프레임의 사이즈가 변하면 파란색 점선의 간격은 변하지 않은 채로, 오브젝트 자체의 사이즈가 늘어나거나 줄어든다.
Left and Right는 주로 오토레이아웃을 사용하지 않는 반응형 레이아웃을 만들 때 사용한다.
CenterCenter는 말 그대로 프레임의 가운데에 위치하는데, 개인적으로는 디자인 단계에서 어떤 컴포넌트의 높이가 수정이 잦을 경우 오브젝트를 가운데에 위치시키는 용도로 많이 사용한다.
Scale스케일은 비율에 의해 작동한다. 오브젝트가 프레임 내부에 차지하고 있는 비율에 따라서 오브젝트의 크기가 결정된다.
예를 들어 프레임 사이즈 100px, 오브젝트 사이즈가 20px 일 때 프레임 사이즈가 100px에서 156px로 56%만큼 늘어날 경우, 오브젝트의 사이즈 또한 56%(11.2px) 이 증가하여 31.2px이 된다.
따라서 스케일에는 언제나 소수점이 나타날 여지가 있다.
일반적으로 배수로 증가했을 때 균일한 비율의 룩앤필을 가져가야 하는 아이콘을 그릴 때 많이 사용한다.
Constraints는 오토레이아웃을 사용하지 않는 컴포넌트에서는 그 활용도가 매우 높아서 어떤 옵션이 어떻게 동작하는지 확실하게 알고 넘어가는 것이 좋다.
Constraints의 기본적인 활용Left and Right랑 Scale이 뭐가 달라요?
Contsraints를 설명하다 보면 가장 많이 듣는 질문인데, 위 두 가지는 비슷한 듯하면서 다르다.
프레임 변화에 있어서 Left and Right(Top and Bottom)은 여백(고정값)을 제외한 나머지 영역이 변하고
Scale은 여백을 포함한 모든 것이 비율에 의해 변하게 된다.
따라서 아래 같은 바-형태의 컴포넌트같이 Width가 100%인 경우 위 두 옵션의 결괏값은 차이가 없어 보인다.
Width가 100%라면 Left and Right와 Scale의 차이는 없다.하지만 100%가 아니라면?
100% 미만이라면 미세한 차이가 생길 수밖에 없다.프레임 사이즈 200px, 컴포넌트 크기 168px, 좌우 마진 각 16px*2 = 32px 인 환경에서 프레임 사이즈를 200px → 280px로 80px만큼 늘렸을 때,
Left and Right는 좌우 마진 16px이 유지가 되면서 컴포넌트의 크기만 168px → 248px로 80px 증가한다.
반면에 Scale은 컴포넌트 비율 84%, 좌우 마진 비율 각 8%*2 = 16%만큼의 비율이 유지가 되기 때문에
컴포넌트 크기는 280px의 84%인 235.2px, 좌우 마진은 각 8%만큼인 22.4px이 된다.
3. 레이아웃 그리드
Grid, Columns, Rows프레임에선 레이아웃 그리드 기능을 제공한다.
그리드 시스템 자체의 활용도에 대한 설명은 차치하고, 피그마에선 레이아웃 그리드가 또 다른 활용도를 가지고 있기 때문에 피그마가 제공하는 기능적인 측면에 대해서만 살펴볼 예정이다.
그리드 시스템이 궁금하신 분은 아래의 글을 참고하도록 하자.
피그마의 레이아웃 그리드는 Grid, Columns, Rows의 3가지 옵션을 제공하지만, 여기서는 활용도가 가장 높은 컬럼(Columns, 열)만 다루도록 하겠다.
그리드를 컬럼으로 바꾸는 방법프레임을 선택하면 우측의 디자인 패널에 Layout grid라는 옵션이 보인다. 여기서 + 버튼을 누르게 되면 기본적으로 Grid가 생성이 되게 되는데 여기서 Grid (8px) 좌측의 9개의 사각형 아이콘을 누르면 Layout grid의 디테일 옵션이 나타난다. 여기서 좌측 상단의 Grid를 Columns으로 변경해주면 컬럼을 사용할 수 있다!
Columns의 디테일 옵션Count : 컬럼의 개수를 정한다.
Color : 컬럼의 색과 투명도를 정한다.
Type : Left, Right, Center, Stretch의 4가지 옵션을 제공한다.
Width : 컬럼의 너비
Margin(Offset) : 컬럼이 시작되는 부분과 프레임 사이의 간격을 뜻한다.
(Left, Right, Center의 경우 Offset이라고 표기되고, Stretch는 Margin이라고 표기된다)
Gutter : 각 컬럼사이의 간격을 말한다.
그리드와 Constraints의 관계
위에서 설명한 Constraints는 기본적으로 파란 점선이 프레임에 붙어있게 되지만 레이아웃 그리드가 있는 경우에는 레이아웃 그리드에 우선하게 된다.
아래의 이미지는 레이아웃 그리드 옵션을 Columns/Stertch/Gutter를 1로 설정한 320px 짜리 프레임이다.
Constraints는 그리드에 먼저 적용된다.선택된 아이콘의 Constraints가 레이아웃 그리드가 없는 경우엔 프레임에 붙어있지만, 레이아웃 그리드가 존재하는 경우엔 파란 점선이 레이아웃 그리드의 컬럼에 붙어있는 걸 확인할 수 있다.
이렇듯 피그마에서는 레이아웃 그리드가 단순히 그리드의 역할만 수행하는 게 아니라 Constraints 와의 연계가 가능하다.
프레임의 늘어났을 때의 차이는 다음과 같다.이제 Constraints를 Left에서 Center로 바꿔주게 된다면 아래와 같은 결과를 얻을 수 있다.
이런 식으로 그리드와 Constraints의 연계를 통해 오토레이아웃을 사용하지 않아도 어느 정도는 반응형 컴포넌트에 대응할 수 있다. 물론 피그마에선 오토레이아웃을 사용하는 게 제일 편한 방법이긴 하지만 이런 방법도 가끔씩 필요할 때가 있기 때문에 소개를 해보았다.
참고로 레이아웃 그리드의 색이 보고 싶지 않을 때는 단축키 (맥 : Control + G / 윈도우 : Ctrl + Shift + 4)를 통해 레이아웃 그리드를 히든 처리하거나, 디자인 패널의 눈 아이콘을 감기면 된다.
눈을 감겨도 그리드는 동작한다.4. 프로토타입
프로토타입이 여기에 있는 이유는 프로토타입의 최소 단위가 프레임(Frame)이기 때문이다.
프로토타입엔 Open overlay같이 단순한 프레임 전환이 아닌 외부 요소를 불러오는 기능도 있는데 이를 위해선 그룹이나 단순한 도형이 아닌 프레임이 필요하다. 프로토타입은 추후에 프로토타입 편에서 자세히 다루기로 하겠다.
