[figma figma boy 개념북] 프레임 기본 개념, 오토 레이아웃

아뇨 민균데요·2025년 5월 20일

피그마피그마보이

목록 보기

1/7

일단 내가 피그마 개념을 다시 되짚는 이유는, 후반 강의에서 전문 용어를 쓰고 있기 때문에 (난 디자이너가 될 것도 아니고 실무에서 그렇게 큰 차이가 없을 것 같은데) 이해를 완벽히 하는데 어려움이 있기도 하고, 이왕 이렇게 된 거 개념도 제대로 알아서 디자이너 만큼 해보자는 의미 이기도 하다.

우리가 디자인을 하면 프로그램은 디자인을 코드로 변환 시킨다.
디자인 -> 코드
이때 코드는 디자인을 레고처럼 쌓는다
(코드는 기본적으로 네모난 영역을 만든다. 그래서 박스 모델이라고 부르기도 함)

웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보낸다.

쉽게 말하자면 우리가 피그마를 통해 디자인을 입력하면 코드로 변환 됐다가 앱 또는 웹을 통해 디자인으로 송출이 되는 것이다.

📍프레임(컨테이너)

피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체다.
프레임은 별 걸 다 넣을 수 있는 코드 블록이다(심지어 자신도 들어감)
그래서 컨테이너라는 별명으로도 불린다

📍그룹

여러 개체를 하나로 묶어주는 기능

그룹은 여러 개체를 한 번에 조정하거나 디자인을 정리하는 등 사용자 편의를 위한 기능이다.

프레임과 달리 코드 블럭으로 인식되지 않는다.

통상적으로 SVG 파일로 인식된다고 생각하면 편하다.

실무에서는 그룹 안 쓴다. 거의.

프레임 vs 그룹

프레임은 코드 블록을 만들고, 실제 코드로 바꿀 수 있는 개체다.

프레임은 개발에 필요한 속성을 적용할 수 있고, 그룹은 적용할 수 없다.

프레임 따라 만들어보기 실습

f = 프레임 단축키
shift+f = 정 도형
shift + 클릭 = 여러 개체 선택
opt = 복사
우클릭->Frame selection or cmd+opt+g= 프레임으로 묶기
우클릭->group selection or cmd+g =
그룹으로 묶기

해봐야 아는 거지 결국

frame들(frame5,6)을 frame(7)으로 다시 묶고 fram 7을 선택한 경우에 우측에서 fill을 누르면

이렇게 외부 프레임이 채워진다. 반면 group 상태에서 fill을 선택하면

이렇게 그냥 색이 같아져 버린다. 왜냐면 그룹 바이는 각기 다른 객체들에 '동일한' 효과를 부여하는데 중점을 두기 때문

윤곽선(stroke)도 동일한 원리로 적용 된다.

상위 항목을 parent, 하위 항목을 child라 부르기도 한다.

opt + L프레임 접기(펴기는 단축키 없음)

꼭 알아야 한다. 오토레이 아웃

📍 what is auto layout?

앱과 웹 화면의 크기가 바뀔 때 유연하게 대응할 수 있도록 하는 기능

📍layout을 제대로 써먹으려면 BOX MODEL을 알아야 한다!(디자인 용어)

아니 이해하니까 어려운 개념이 전혀 아닌데 왜인지 모르겠는데 어렵게 설명을 해놔서 그냥 내가 직접 그렸다.
바로 이해가 되지 않나?

content <콘텐트, 내용>
텍스트나 도형 이미지 등 박스 내의 내용

padding <패딩>
테두리 안쪽 여백(콘텐츠와 프레임 테두리 사이의 간격)

border <테두리, 보더>
박스의 테두리(프레임 박스의 테두리)

margin <마진>
테두리 바깥 여백(이웃 요소와의 간격)

프레임(컨테이너)은 개체와 패딩으로 이루어진다.

오토레이아웃은 이러한 content와 padding 사이의 간격을 조절한다

그냥 대충 데스크탑에서 볼 때와 모바일에서 볼 때를 생각하면 된다. 보통 이 경우에는 모바일 전용 페이지를 만들긴 하지만 어쨌든 **화면 크기**에 맞춰 자연스럽게 **맞춰지는 기능**을 **오토 레이아웃**이라 생각하면 된다.

이 기능 사용하면 간격에 맞게 테이블을 쌓기도, 비율을 알아서 조정하게 하기도 쉬워진다.

CMD+ENTER or 캔버스 클릭: 텍스트 적고 빠져 나오기

콘텐츠를 자동으로 조절되는 프레임에 담기 (auto lay out 적용하는 법)

실습 해보기 위해 일단 텍스트(콘텐츠) 2개를 만들어 보자

콘텐츠 클릭 -> add auto layout or
콘텐츠 클릭 -> shift + A

이러면 요소 주변에 패딩이 생긴다. 이 패딩은 설정에 따라 다른 요소와 상호 작용하며 유동적으로 변한다.

2번 컨테이너에는 우클릭, frame selection을 통해 먼저 일반 프레임을 달아준다.

그 뒤에 shift + A를 눌러주면 동일하게 auto frame이 생긴다.

편의를 위해 auto layout 이름을 텍스트와 동일하게 바꿔보자
cmd + R = 선택 요소 이름 바꾸기

오토레이아웃 패널 살피기

오토레이아웃의 정렬 방향:
오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지를 정해요.
a. 세로: 수직 방향으로 쌓기
b. 가로: 수평 방향으로 쌓기
c. 감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓기.

2.정렬 위치: 오토레이아웃의 사이즈가 변할 때, 안에 있는 프레임들이 어디를 기준으로 정렬되는 지 정하기 << 쌉 중요!!!!
3.오토레이아웃 해제: 오토레이아웃 속성 제거. 일반 프레임으로 변경
4.고급 옵션: 오토레이아웃의 고급 속성을 설정
5.간격: 오토레이아웃 안에 프레임이 여러개 있을 때, 이 프레임 사이의 간격
6.좌우 패딩: 좌우 여백값
7.상하 패딩: 상하 여백값
8.패딩 개별 조정: 상하좌우 패딩을 각각 따로 설정하기.
9.프레임 밖으로 넘친 부분 가리기
10.프레임 크기를 내부 요소에 맞게 맞추기