brunch

매거진 신입에게 알려주는 피그마

라이킷 122 댓글 8

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이선주 Jun 22. 2021

프레임, 콘스트레인트

신입에게 가르쳐주는 피그마

피그마에서 프레임을 만들고, 오브젝트를 배치하는 방법에 대한 글입니다.

낯선 단어입니다. 뜻은 공간 상의 제약을 뜻합니다. 사용은 어렵지 않습니다. 정렬(Align)과 다른 의미로 쓰이니까 유의하시기 바랍니다. 스케치에서 비슷한 기능의 이름은 Resizing의 Pin to Edge입니다.

콘스트레인트는 프레임의 크기가 바뀔 때, 프레임의 경계에 맞게 오브젝트가 배치되도록 합니다. 설정해 두면, 크기 변경이 편리합니다.

처음부터 이 기능을 쓰긴 낯설지만, 쉬운 기능입니다. 디지털 디자인은 대지(Artboard)나 프레임, 캔버스(canvas)의 크기가 변합니다. 참고로 피그마의 캔버스 크기는 65,000까지 늘어납니다.(하지만 거기까지 채우진 마시고, Page로 분리해서 작업하시는 것이 좋습니다.)

콘스트레인트를 정해두면, 컴포넌트, 디바이스에 맞게 크기를 변경하거나, 반응형 디자인(responsive)을 할 때, 생기는 변경에 쉽게 대응할 수 있습니다.

프레임과
콘스트레인트

노란색은 텍스트를 담은 프레임입니다.

지난 글에서 설명한 것처럼 그룹이 아니라 프레임으로 모든 콘텐츠를 담을 수 있습니다.

프레임, 심벌 혹은 컴포넌트로 만들 때는 구분을 하면, 관리가 쉽습니다. 3 부분 혹은 2 부분으로 나눌 수 있습니다. 각 부분에 의미를 부여하면, 구조적인 디자인이 가능합니다.

구분을 할 때, Header, Body, Footer는 머리말, 본문, 하단의 분류로 HTML에서 자주 사용합니다. Contents와 Function은 2 부분으로 나눌 때 사용하는데, Navigation과 나머지로 나눠도 됩니다. 구획을 나누어 이름을 붙이면, 세부적인 조작과 개선이 가능합니다.

스케치나 피그마, XD 같은 툴이 없었을 때는 크기를 맞추기 위해 소모하는 시간이 많았습니다. 디자인 툴의 효율성이 높아지면 집에 일찍 갈 수 있을 것 같지만, 디자인의 규칙을 설계하는 시간이 필요해졌습니다. 선택은 2가지입니다. 일단 무작정 만들어서 개수를 채우는 방법과 처음 만들 때, 구조를 만드는 겁니다. 손이 빠르면 좋지만, 빠르게 하는 것보다 정확하게 하는 것이 좋고, 정확하게 하려면, 준비가 필요합니다.

UX와 애자일, 디자인 씽킹 프로세스는 Iteration(반복, 반복하며 목표를 이루는 접근법)이란 말이 자주 등장하기 때문에 결과물을 매번 수정하는 것보다 규칙을 수정하는 것을 권장합니다. 피그마의 컴포넌트나 스케치의 심볼은 디자인의 규칙이며 구성요소라고 할 수 있습니다.

인하우스 디자이너는 디자인의 지속성과 일관성이 중요해서 활용할 일이 많습니다.

프레임과 콘텐츠의 관계를 이해를 위해서 프레임만 있는 예제에 적절한 콘텐츠를 넣어봤습니다. 예제는 세로로 쌓인 상품 정보입니다. 프레임은 사진과 텍스트로 구분되어 있고, 텍스트 콘텐츠는 각 행에 맞추어 프레임을 만들었습니다.

저의 경우는 캔버스에서 위에서 아래로 프레임을 만들었고, 레이어는 아래에서 위로 쌓았습니다. 팀이나 회사의 규칙에 맞게 적용하시면 됩니다. 사람에 따라 두 순서를 일치시키는 사람도 있습니다.

※ 하지만 피그마에서는 레이어 패널의 레이어 순서를 아래에서 위로 해주세요.

나쁜 건 순서의 방향이 아니라 순서가 없는 겁니다. 피그마는 포토샵처럼 캔버스와 아트보드가 고정된 것이 아니라서 순식간에 캔버스가 뒤죽박죽 됩니다. 피그마는 협업툴이기 때문에 정리가 중요합니다. 남이 항상 보고 있습니다.

인형 안에 인형 안에 인형 안에...

캔버스 위에 프레임이 있고, 프레임 안에 계속 프레임이 들어가는 모습입니다. 프레임 안에 있는 프레임마다 콘스트레인트를 적용할 수 있습니다.(그룹에서는 콘스트레인트를 사용할 수 없습니다.)

콘스트레인트는 가로와 세로로 구분되어 있습니다. 그리고 가로와 세로 방향마다 위치 정렬과 크기 조정으로 구분됩니다. 먼저 위치는 Left, Right, Center와 Top Botttom, Center의 조합으로 9가지가 나옵니다.

9가지 배치가 나옵니다.

그리고 Left and Right, Scale(가로)과 Top and Bottom, Scale(세로)로 나뉩니다.

개선이 되겠지.

그림으로 나누면 이렇습니다. 피그마의 인터페이스가 난해한 부분이 있습니다. 네모칸 오른쪽의 콤보박스를 매번 클릭해서 설정하면, 시간이 많이 걸립니다. 왜냐하면, 위치 조정과 크기 변경이 섞여 있거든요.

왼쪽의 네모를 누를 때 쉬프트를 누르고 클릭하면, 위치와 크기 변경을 바꾸기가 쉽습니다.

제한 사항을 적용하지 않고 프레임의 크기를 조정하려면, 커맨드를 누르면 됩니다.

프레임 안에 있는 텍스트 크기까지 변경하시려면, 프레임 선택 후 'K'를 누르고 조정하세요.

이미지의 채움 설정은 'Fill' 입니다.

크기 조정하는 2개의 선택이 있는데, Left and Right는 프레임의 크기가 늘어나는 만큼 콘텐츠의 크기도 더하기로 늘어납니다. Scale은 프레임의 크기가 커지거나 작아진 비율만큼 콘텐츠에 적용됩니다.

상품 정보를 모두 프레임으로 만든 후, 가장 큰 프레임의 크기를 수정하면, 이미지처럼 프레임 내부의 콘텐츠가 적절하게 변경에 맞게 배치됩니다.

그런데 콘스트레인트를 정하는 방법에 따라서 크기를 변경하게 되면, 원하지 않는데 콘텐츠가 겹치거나, 의도하지 않은 여백이 생길 수 있습니다.

경우에 따라 여백을 꽉 채우는 방법을 사용할 수 있습니다. 프레임을 사용해서 디자인하는 방법이 있는 것처럼, 프레임을 사용하지 않고, 구성할 수도 있습니다.

크기를 조정할 때, 똑같이 보이도록 만든 예제입니다. 왼쪽은 오토 레이아웃을 사용하지 않았고, 오른쪽은 콘센트레이트를 사용하지 않고, 오토 레이아웃만 사용한 결과입니다.

콘스트레인트와 오토 레이아웃을 함께 사용하면, 좀 더 유연한 작업이 가능합니다.

하지만 2개의 기능이 가진 인터페이스가 비슷하고, 조합할 수 있는 경우가 많기 때문에 좀 복잡합니다.

간단하게 구분을 하면,

콘스트레이트: 프레임과 프레임 안의 콘텐츠의 관계를 정할 때

오토 레이아웃: 프레임 안에서 2개 이상의 비슷한 콘텐츠를 가로 혹은 세로로 배치할 때

그래서 기본적으로 프레임으로 간단히 구성을 해보고, 콘텐츠를 넣어가면서 오토 레이아웃을 적용해 나가는 것을 추천합니다.

여기까지 왔으면, 피그마에 어제부터 로그인한 사람이라도, 왠만큼은 할 겁니다.
하지만 아직 끝이 아닙니다. 피그마에서 중요한 건 실무 UI 디자인이 아니라 플로우와 협업입니다.
UX 파트의 분이라면, 이 정도만 알아도, 종이에 쓱쓱 그리는 거보다 훨씬 빠르게,
실질적인 앱을 구상하고 만들 수 있습니다. 스케치는 뭔가 꼼꼼하게 '디자인'하는 것을 주로 했다면,
피그마는 '구조'를 중심으로 설명하려고 노력하고 있다는 것을 알아주세요.

다음은 오토 레이아웃입니다.

keyword