프레임과 그룹
신입에게 가르쳐주는 피그마
피그마의 프레임과 그룹에 대한 글입니다.
이전 글을 보면 피그마 프로젝트의 구조를 볼 수 있습니다.
피그마는 프로젝트가 있고, 프로젝트 안에 파일, 페이지, 프레임이 있습니다. 그런데 포토샵과 스케치에서는 그룹이 레이어를 만들고 관리하지만, 피그마에서는 프레임이 매우 중요합니다.
그래서 다른 툴처럼 그룹만 사용하면 피그마를 잘 활용하기 어렵습니다.
피그마의
레이어
이름 옆의 아이콘의 의미를 알면 피그마를 이해하기 쉽습니다.피그마의 레이어 앞에는 작은 아이콘이 표시됩니다. 피그마 프로젝트를 시작하면 회색 캔버스 위에 프레임을 만들 수 있습니다. 프레임을 만들면 스케치의 심벌처럼 컴포넌트를 만들면서 작업을 진행하게 됩니다.
포토샵 같은 툴에서는 캔버스가 있고, 그 위에 아트보드를 만들어서 작업을 구분합니다. 하지만, 아트보드 안에 아트보드를 넣을 수는 없습니다.
피그마의 프레임은 아트보드와 다릅니다. 프레임은 모바일 디바이스가 될 수 있고, 컴포넌트가 될 수 있고, 이미지가 될 수 있습니다. 그리고 프레임 안에 프레임을 넣을 수도 있습니다.
프레임을 만들게 되면, 프레임 안에 배치되는 오브젝트의 좌표는 프레임을 기준으로 다시 결정됩니다. 그룹과 달리 모든 프레임은 자신의 (0,0)을 가지게 되는 겁니다.
이번 글에서는 프레임과 그룹에 대해서 다룹니다. 레이어의 종류 중에는 오토 레이아웃이 있는데, 오토 레이아웃은 다음 글에서 차례대로 설명하려고 합니다.
프레임에 그룹을 넣을 수 있고, 그룹 안에 프레임을 넣을 수도 있습니다.프레임은 피그마에서 의미 있는 작업은 프레임을 통해서 이루어집니다. 쉽게 설명하면, 프레임은 경계의 기준이 있습니다. 아이콘이 보여주듯이 프레임은 격자처럼 사용되고, 그룹은 경계가 없습니다. 그룹은 작업이나 레이어를 적당한 묶음으로 묶어서 작업을 편하게 합니다. 그룹이나 콘텐츠도 컴포넌트로 만들면, 프레임으로 변경됩니다.
작은 차이 같지만, 이 차이가 중첩해서 쌓이고, 컴포넌트가 됩니다. 스케치나 다른 그래픽 툴과 다른 부분입니다.
프레임과 그룹의 차이프레임은 콘텐츠를 담는 컨테이너이며, 콘텐츠에 영향을 주지 않습니다. 아트보드와 같습니다.
그룹은 적용된 Storke와 Fill이 적용되었을 때, 그룹 안의 콘텐츠에 같은 스타일이 적용됩니다. 이미지에 나와 있는 것처럼 그룹에 속성을 부여하면, 콘텐츠의 속성을 변경한다. 그룹의 크기를 바꾸면, 콘텐츠도 변경된 비율에 따라서 크기가 변경됩니다.
화면의 오른쪽을 보면, 수치와 속성을 조정할 수 있는 패널이 있습니다. 프레임과 그룹은 패널도 다른 형태입니다. 프레임과 그룹은 자유롭게 변경할 수 있습니다.
프레임은 가로와 세로를 바꿀 수 있고, 여백을 없앨 수도 있습니다. 그리고 클립핑도 정할 수 있습니다.
미리 제공되는
프레임
그룹으로 만들어도 프레임으로 쉽게 바꿀 수 있습니다. 그룹을 프레임으로 바꿀 때, 다양한 프리셋이 있는 것을 확인할 수 있습니다.
애플 제품군의 프레임이 굉장히 많다.복잡한 크기를 OS와 플랫폼 별로 분류해 보면, iOS와 MacOS가 상당한 수를 차지한다는 것을 볼 수 있습니다. 소셜 미디어의 크기도 다양하게 준비되어 있는데, 드리블(www.dribbble.com)의 프리셋도 있다는 것이 흥미롭습니다.
참고로 아이폰의 경우는 아이폰 8, 아이폰 11 Pro나 X를 많이 사용하고, 안드로이드는 Android를 많이 사용합니다.
자주 쓰진 않지만, 편리합니다.프레임 패널에서 Resize to fit은 많이 사용하지는 않지만, 가끔 쓸모가 있는 경우가 있습니다.
가급적이면, 불필요하거나 의도하지 않은 여백을 두지 않는 것이 좋습니다.
‘오토 레이아웃’ 기능을 통해서 여백을 따로 설정할 수 있습니다.
피그마의 사용하다가 보면, 프레임 덕분에 화면이 굉장히 복잡해지는 편입니다. 프레임에 스타일을 주지 않으면, 프레임이 잘 안 보입니다. 아트보드가 아니기 때문에 관리는 쉽지만, 협업을 생각하면 Page 단위로 분할하거나 팀 내 규칙을 만들어 관리하는 것이 좋습니다.
클리핑 콘텐츠를 선택하면, 콘텐츠(특히 텍스트)가 프레임의 폭보다 커도 텍스트가 계속 표시됩니다. 이러면 그룹과 비슷해 보입니다.
스케치에서 Import 하신 경우는 대부분의 레이어가 프레임으로 되어 있어서 처음 피그마를 쓰시는 분들은 당황할 수 있습니다.
프레임과 그룹 패널 모두에 모서리를 둥글게 하는 기능이 있습니다. 스케치보다는 더 직관적으로 각각의 둥근 정도를 결정할 수 있습니다. 피그마의 경우는 스퀘어클을 만들 수 있도록 코너의 테두리를 좀 더 부드럽게 하는 기능을 제공합니다.
아이폰에서 둥근 테두리를 만들 때는 iOS 체크가 있는 부분(60%)으로 정해두면 됩니다.
스퀘어클과 자세한 사항에 대해서는 https://brunch.co.kr/@pliossun/188 에서 좀 더 자세히 설명해 두었습니다. 피그마의 Corner smoothing을 사용하면, 모서리가 둥근 모양을 쉽게 만들 수 있습니다.
각각의 차이로 보면, 좀 차이가 덜 나서, 비교 이미지를 만들었습니다. Radius가 같은 수치라도 ‘Corner smoothing’의 정도에 따라 형태가 달라집니다.
프레임 안의
콘텐츠를 선택한 경우의 차이
그룹과 프레임의 프레임의 콘텐츠를 선택해보면, 컨테이너의 차이에 따라 패널이 달라집니다.
프레임 안의 콘텐츠를 선택해 보면, Constraints가 보입니다.
프레임 안의 콘텐츠는 프레임의 크기에 따라 프레임이 변하면, 프레임 안의 콘텐츠가 어떤 기준으로 배치될지 결정할 수 있습니다.
프레임을
잘 활용해야 합니다.
프레임 안에 프레임이 들어가고, 프레임은 컴포넌트를 포함하게 됩니다. 자세한 내용은 피그마 웹사이트의 지원 항목에서도 알 수 있지만, 다른 툴과의 실질적인 차이를 글로 작성해보았습니다.
다른 그래픽 툴과 차이가 나는 곳은 ‘아트보드’라는 대지에 대한 개념입니다. 디지털이 되었지만, 종이를 깔고 작업한다는 개념은 계속됩니다. 작업 공간인 캔버스 위에 작은 캔버스인 아트보드로 분할되는 겁니다. 피그마는 큰 종이인 대지의 개념이 희박합니다. 프로그램 개념을 시각화한 듯 합니다. 쉽게 말하면 HTML의 DIV 태그 같은 거죠.
이 글에서 설명한 프레임과 그룹의 속성은 디자인 시스템에 사용되는 컴포넌트에 제작에 영향을 줍니다.
다음 글은 Constraints와 Auto Layout에 대한 내용입니다.
