피그마의 프레임과 그룹/오토레이아웃/컨스트레인트와 리사이징

프레임과 그룹

1. 프레임의 개념

• 프레임(Frame): 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체
• 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 생성
• 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너(Container)라고도 부름

2. 그룹의 개념

• 여러 개체를 하나로 묶어 주는 기능
• 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능
• 프레임과 달리 그룹은 코드 블록으로 인식되지 않음
• 그룹은 여러 요소를 한 번에 담아 움직일 때 또는 복잡한 디자인을 정리할 때 사용
• 실무에서 그룹을 사용하는 빈도는 매우 적은 편

3. 프레임 vs 그룹

• 프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체
• 그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능
• 프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없음

위: 프레임 / 아래: 그룹으로, 테두리(Stroke)를 설정했을 때의 차이

 

 

오토레이아웃

1. 오토레이아웃의 개념

• 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능
• 레이아웃에 유연함을 만들어 주는 가장 중요한 기능 (디스플레이 크기가 바뀌어도 유연하게 대응)
• 프레임을 배치하고 정렬해 레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능

2. 코드 블록의 구조

• 코드 블록은 피그마에서 프레임으로 만들수 있음
  • 패딩(Padding) ■: 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
  • 보더(Border) ■: 코드 블록 내부 공간 바로 바깥의 가장자리, 실제 코드 블록의 테두리
  • 마진(Margin) ■: 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

패딩, 마진, 보더가 적용된 코드 블록

3. 컨테이너가 만들어지는 원리

• 오토레이아웃(Auto layout)은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용
• 모든 코드 블록은 내부에 들어 있는 개체와 개체를 둘러싼 패딩(내부 여백)으로 만들어짐
  • 우리가 만드는 UI의 크기는 개체의 크기 + 패딩

좌: 일반 텍스트 / 우: 텍스트를 오토 레이아웃으로 변환

오토레이아웃의 속성

4. 컨테이너를 쌓는 방법

• 컨테이너를 간격에 맞게 규칙적으로 정렬해 주는 기능도 수행하는 오토레이아웃을 활용해야 한다
• 컨테이너를 하나의 개체로 본다면 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있다
• 이 컨테이너들을 여러 개 쌓을 때 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들 수 있다

 

컨스트레인트와 리사이징

1. 컨스트레인트의 개념

• 컨스트레인트(Constraint)는 제약(조건), 제한이라는 뜻
• 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한
• 부모 컨테이너의 크기가 변할 때 자식 컨테이너는 어디를 기준으로 변할지를 정할 수 있음

2. 프레임 리사이징 (Frame Resizing)

• 리사이징의 개념
  • 프레임은 기본적으로 가로와 세로 길이가 고정되어 있는 Fixed(고정된) 상태
  • 리사이징이란 프레임을 오토레이아웃으로 감싸는 순간 Fixed 외 다른 사이즈 값이 생기는 것
  • 부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받음
  • 반대로, 자식의 리사이징 값에 따라 부모의 리사이징 값도 영향을 받음
• 리사이징의 종류
  • Fixed(고정 값): 공통 유형
  • Hug: 자식 컨테이너의 크기에 맞춰 조정, 부모만 쓸 수 있음
  • Fill: 부모 컨테이너 크기에 맞춰 조정, 자식만 쓸 수 있음

두 번째 자식의 세로(height) 값이 Fill 속성으로, 1번을 세로로 늘리면 2번 모양이 됨

부모의 세로(height) 값이 Hug 속성으로, 1번을 세로로 줄이면 2번 모양이 됨

3. 포지션 (Position)

• 포지션의 개념
  • 앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직임
  • 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때 개발에서는 포지션이라는 속성을 조정
• 포지션의 종류
  • Static(스태틱): 일반적인 요소들이 가지고 있는 포지션, 기본 값, 스크롤하면 같이 따라 움직임
  • Fixed(픽스드): 화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치
  • Absolute(앱솔루트): 고정되는 기준이 컨테이너 안으로, 부모 컨테이너 안에서 Fixed로 고정
  • Sticky(스티키): 스크롤에 따라 기본값과 Fixed를 전환하는 포지션, 스크롤을 따라 움직이다가 특정 위치부터는 상단에 고정