피그마의 모든 것, 프레임 편 - 1
그룹과 프레임의 차이
프레임(Frame)이란 무엇인가.
피그마를 오래 사용했었던 사람들이라면 프레임이라는 개념에 이미 익숙해져 있을 거라고 생각한다.
하지만 피그마를 처음 시작하거나 다른 툴(XD, 스케치에서 많게는 포토샵, PPT까지)에서 피그마로 이제 막 환승을 시작한 사람들은 어떨까? 전통적인 툴에서는 많아지는 오브젝트들을 관리할 때, 그것들을 단지 하나의 그룹으로 묶어버리는 것으로 충분했다. 하지만 우리는 정적인 디자인으로 끝나는 게 아니지 않은가?
컴포넌트를 통해 재사용성을 높이고 반응형 환경을 고려해야 하고 잦은 수정 및 반복 작업을 보다 수월하게 만들어야 한다. 그래야 내가 편해진다..
따라서 전통적인 방식의 그룹 사용 방식과는 살짝 다른 개념을 가지고 접근해야 할 필요가 있다.
우리는 이제부터 피그마를 쓸 거니까.
Rectangle과는 다르다..!피그마에서는 프레임(Frame)이라는 개념을 사용한다. 스케치나 어도비 XD에서 "아트보드"라고 불리는 그것과 같은 개념으로, 특정 화면 크기에 맞추어 디자인을 하는 경우 그 디자인을 담는 공간을 칭한다.
가끔씩 피그마 수업을 진행하다 보면, 프레임의 개념 아직 익숙하지 않은 사람들은 프레임을 간혹 '그룹'이나 'Rectangle'과 혼동하여 사용하곤 한다. 정확히는 "Rectangle + 그룹"과 "프레임으로 감싸는 것"의 차이를 모른다.
그룹 vs 프레임
위 두 가지 방식의 차이는 버튼을 디자인할 때 이 둘의 차이가 가장 명확하게 드러난다.
아래의 이미지에서 왼쪽 버튼은 Rectangle 위에 텍스트를 얹고 이 둘을 그룹핑했으며, 오른쪽은 프레임 안에 텍스트를 넣고 프레임 자체에 컬러를 넣어 만들었다.
두 버튼의 레이어 구성의 차이캔버스(피그마의 작업공간, 기본적으로 회색으로 표시된 부분)에 프레임을 그렸을 때 프레임의 이름이 좌측 상단에 표시되는 것 외에 프레임과 Rectangle은 시각적으로는 차이가 없다고 할 수 있다.
둘 다 똑같은 네모 모양에다가 Fill, Stroke, Effect, Radius 등 다양한 속성을 편집할 수 있기 때문이다.
좌측 방식은 책들을 끈으로 묶어놓는 것과 같고,
우측 방식은 책들을 상자에 담는 것과 같다.
이사를 가거나 헌책들을 정리할 때 책들을 노끈으로 묶어본 경험이 있는가?
그룹을 사용하는 작업방식은 이와 일치한다. 책들은 오브젝트고 노끈은 그룹이다.
사실 그룹은 노끈보다는 신축성이 대단히 좋은 고무줄에 더 가깝다고 볼 수 있지만, 여기선 노끈이 그러한 성질을 가지고 있다고 가정하도록 하겠다. 탄력적인 노끈으로 묶인 책들은 상대적으로 자유롭게 움직일 수 있다. 그리고 책이 움직이는 방향에 따라서 끈도 함께 늘어나거나 줄어들거나 한다.
그룹도 마찬가지다. 그룹은 감싸고 있는 오브젝트의 크기와 위치에 맞추어 그 사이즈가 자동으로 늘어나거나 줄어든다.
반면에 책이 담긴 상자는 프레임이다. 책의 크기나 위치가 어찌 되어도 상자의 크기는 변하지 않는다.
프레임도 별도의 수정을 하지 않는 한 프레임 내부에 담긴 오브젝트들의 크기나 개수의 변화에 상관없이 최초에 생성된 모양을 계속 유지한다. 심지어 내부에 있는 오브젝트가 없어도, 또 오브젝트가 프레임을 뚫고 나가더라도 말이다.
그래서 결론이?
다시 버튼으로 돌아와서, 우리가 반응형 버튼을 디자인한다고 생각해보자.
버튼은 좌우로 늘어나야 할 수도 있으며 디자인에 따라 width가 고정이 되어야 할 수도 있다.
특히 구축 단계에선 이러한 수정이 매우 잦은 편이기 때문에 버튼은 가능한 한 유연하게 디자인하는 편이 여러모로 편하다.
그룹을 통해 만들었을 경우 예상되는 이슈는 다음과 같다.
1. 버튼을 그대로 클릭하면 그룹 전체가 셀렉이 되는데, 이때 그룹이 선택된 상태로 버튼을 늘리거나 줄이면 내부 요소 (주로 텍스트)에 소수점이 생긴다.
2. 소수점을 만들지 않고 수정하기 위해선 1) cmd + 클릭으로 Rectangle을 선택 → 2) Rectangle의 사이즈를 수정 → 3) 변경된 Rectangle에 맞게 폰트의 위치도 수정이라는 굉장히 번거로운 프로세스를 거쳐야 한다.
그룹 자체를 선택한 상태에서 사이즈를 수정하면 이러한 문제가 발생한다.반면에 프레임을 통해 만들었다면 위와 같은 이슈는 발생하지 않는다.
그룹과 달리 프레임에선 Constraints나 오토 레이아웃을 통해 내부 요소를 제어할 수 있기 때문에, 거의 모든 환경에 대처할 수 있고 컨트롤이 용이하다.
그렇다면 모든 걸 프레임으로 해결하면 될까?
그렇다. 실제로 그룹이 사용되는 빈도는 0에 가깝다. 그룹이 쓰이는 경우는 그룹을 써야 좀 더 편집이 쉬울 때(오토레이아웃 편에서 다룰 예정), 혹은 주로 귀찮을 때 사용한다(...)
프레임과 Rectangle
사실 Rectangle과 프레임은 그 사용처가 근본적으로 다르지만 위의 예시로 들었던 버튼을 만드는 경우같이 피그마 비기너분들은 프레임 대신에 Rectangle만을 사용해서 컬러를 조정하는 경우가 많기 때문에 이 둘은 과연 어떤 차이가 있는지 다뤄보려고 한다.
참고로 버튼의 백그라운드 컬러를 조정하는데 Rectangle을 쓰면 안 된다는 이야기는 아니다.
실제도 마테리얼 같은 경우는 컴포넌트들이 Background, Surface, Overlay의 계층구조로 이루어져 있기 때문에 프레임의 한 가지 컬러로는 마테리얼 컴포넌트를 커버할 수 없다.
다만 Rectangle을 그룹으로 묶는 형식이 아니라, 프레임 내부에 별도의 Rectangle을 사용해서 오퍼시티를 통해 시각적인 레벨을 제어하는 걸 권장드린다는 이야기다.
Rectangle은 단순히 네모난 오브젝트에 불과하다. 그리고 프레임은 이러한 오브젝트들을 담는 그릇의 역할을 수행한다. 둘 다 자기 자신을 꾸밀 수 있는 속성 옵션을 제공하지만 (Fill, Stroke, Effect, Radius 등) 프레임은 그릇이기 때문에 프레임이 포함하고 있는 다른 오브젝트들에 대한 옵션도 제공한다.
프레임과 Rectangle의 디자인 패널프레임은 Rectangle에서 편집할 수 있는 모든 설정을 포함하고 별도의 기능도 제공하는 걸 볼 수 있다.
위에서부터 순서대로 살펴보면 다음과 같다.
1. 여러 디바이스의 사전 설정 옵션 (Preset)
2. 캔버스 사이즈를 내부 오브젝트에 맞추어 조정하기 (Resize to fit)
3. 캔버스 사이즈를 벗어나는 오브젝트들 클리핑 하기 (Clip content)
4. 오토레이아웃
5. 레이아웃 그리드
1. 프리셋(Preset)
피그마에서 제공하는 다양한 프리셋프레임을 만들기 위해 F(or A)를 누르면, 우측 디자인 패널에서 피그마가 제공하는 기본적인 프리셋들을 확인할 수 있다.
2. Resize to fit
Resize to fit 기능은 자주는 아니지만 가끔 사용하는 기능이다.
프레임과 그룹의 차이에서 프레임을 박스에 비유했는데, 이 기능을 사용하게 되면 박스(프레임)의 사이즈를 박스에 들어있는 물건(오브젝트)에 맞춰서 마치 그룹처럼 딱 맞게 조절해주는 기능이다.
위의 이미지처럼 줄어드는 것도 가능하며, 프레임 밖을 벗어난 오브젝트가 있다면 프레임 사이즈가 커지게 된다. 다만 이 기능의 경우 주의사항이 있는데, Shadow를 사용하는 경우에 Blur값에 그림자가 차지하는 영역이 커지기 때문에 이런 걸 고려하지 않고 모든 프레임을 리사이징 했다간 다시 하나하나 수정해야 하는 번거로움이 생길 수도 있으니 잘 살펴보고 사용해야 한다.
간과하기 쉽지만 쉐도우도 영역을 차지한다!3. Clip content
프레임의 영역을 넘어서는 오브젝트들을 보여줄 건지 말 건지 선택하는 옵션이 바로 Clip content이다.
디자인을 하다 보면 가로 스크롤(Horizontal Scroll)이나, 프로토타이핑에서 애니메이션을 표현하기 위해서 등등의 다양한 목적에 의해 프레임을 넘어가는 오브젝트들이 생긴다.
그렇다며 어떤 원리에 의해 프레임 안으로 오브젝트가 들어가거나 나오게 될까?
(여기서 프레임 안으로 들어간다는 표현은 레이어상 프레임 레이어 안쪽으로 오브젝트가 들어간다는 의미다)
바로 마우스 커서의 위치에 따라서 결정이 된다. 프레임 안에 오브젝트를 넣을 때 오브젝트를 클릭하고 있는 마우스 커서가 프레임 안으로 완전히 들어와야 오브젝트가 프레임 안으로 들어가게 된다.
반대로 오브젝트를 뺄 때도 클릭하고 있는 마우스 커서가 프레임 밖으로 완전히 나가야 오브젝트도 프레임 밖으로 빠지게 되는 것이다.
마우스 커서가 완전히 나오면 오브젝트는 프레임 바깥으로 빠지게 된다.하지만 애니메이션 등의 효과를 위해 오브젝트를 밖으로 빼는 경우 위 같은 컨트롤은 불편할 수밖에 없다.
오브젝트를 완전히 안 보이게 하고 싶은데 그러려면 마지막에는 어쩔 수 없이 키보드 방향키를 통해서 오브젝트를 이동시켜야 하기 때문이다.
위 같은 경우엔 스페이스바를 활용하면 된다.
스페이스바를 함께 누르고 이동시키면 프레임 안에 있던 오브젝트를 어떻게 이동시켜도 영역 밖으로만 이동할 뿐, 프레임 밖으로 완전히 나가지는 않는다.
이미지는 프레임 영역 밖에 있는 것처럼 보이지만 레이어상에선 프레임에 포함되어 있다.주의해야 할 점은 처음부터 스페이스바를 누른 채로 이동을 하면 안 된다는 점이다.
처음부터 스페이스바를 누르고 클릭을 하게 되면 캔버스의 위치가 이동된다!
따라서 스페이스바 → 클릭 → 드래그 가 아닌
클릭 → 스페이스바 → 드래그의 순서대로 작업을 해야 원하는 기능을 수행할 수 있다.
이러한 스페이스바의 활용은 오브젝트를 프레임 위에 올리거나 할 때도 동일하게 사용이 가능하다.
예를 들어 오토레이아웃으로 구성된 카드 리스트들 위로 플로팅 버튼을 위치시키고 싶을 경우 스페이스바와 함께 컨트롤을 하게 된다면 애꿎은 플로팅 버튼이 오토레이아웃 사이로 들어가는 일을 방지할 수 있다.
프레임 편 - 2에서 계속됩니다.
피그마와 함께 브런치를 시작하려고 합니다.
피그마에서 가장 많이 활용되는 개념인 프레임부터 시작을 하려고 해요. 프레임 편 -2 에서는 프레임 자체에 좀 더 집중해서 나머지 기능들을 다룰 예정입니다. 부족한 글 읽어주셔서 감사합니다.
