[내일배움캠프 사전캠프] DAY.4 (2강) 피그마 핵심 개념 학습

TIL. 2025/10/16

 

1. 오늘 학습 키워드

: 피그마 핵심 개념 ; 프레임/그룹, 오토레이아웃, 컨스트레인트의 개념과 정의

 

 

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

:UXUI에서 사용되는 언어, 피그마 인터페이스 기본적인 개념을 배운것을 토대로, 피그마에서 사용되는 아주 기본적인 사용 툴에 관하여 다룸.

그 중 가장 중요하게 배운 오토레이아웃/ 컨스트레인트의 개념에 대하여 심도있게 배운 시간이였다.

 

 

각 강의 당 내용 요약 정리

 

 

2-1강. 2강의 내용 간단 요약 소개
-2강에서 수업 목표
: ①프레임과 그룹의 차이 / ②오토레이아웃의 원리 / ③컨스트레인트 리사이지의 개념 이해

피그마를 다룰때의 핵심 개념
*프레임과 컨스트레인트
: 프레임은 피그마 디자인의 기본단위. 컨스트레인트는 프레임이 움직이는 규칙.

*오토레이아웃과 리사이징
: ui구조 설계시, 핵심적인 부분을 책임짐.
'반응형'이라고 하듯, 기본적으로 1배수 디자인(원본)만 진행하니, 다른 디스플레이 사이즈(기기마다 디스플레이 사이즈가 다름)에서 어떻게 확장/축소 되는지에 대한 규칙을 만들어 주는것. 지정값을 준다고 이해하면 될 듯함.

 

2-2강. 프레임과 그룹

- '디자인 > 코드' 는 어떻게 읽히는가?

1) 디자인→코드

: 우리가 만든 디자인이 코드로 변형되는 과정에서, 코드는 디자인을 레고처럼 쌓는 형식으로 변형시킴.(코드: 네모 박스 영역을 만들음=박스 모델)

2) 코드→디자인

:웹과 앱에서 코드를 디자인으로 다시 변형하여 화면으로 보이게 만들음.

 

-프레임 vs 그룹 (in Figma)

프레임이란(frame)?

: 피그마에서 코드블록을 만드는 기능,실제 화면으로 인식하는 개체

= '컨테이너'로 부르기도함. / 프레임에 다른개체 혹은 프레임을 넣을수 있기때문(ex. 프레임 안에 프레임+프레임+프레임 : 가능= 컨테이너)

디자인을 코드로 바꾸는 과정에서 개발 가능한 코드 블록으로 만들어짐.

 

그룹(group)이란? 

: 여러 개체를 하나로 묶는/담는 기능 > 코드 블록으로 인식되지 않음.(.svg이미지로 인식) > 피그마에서 대체적으로 사용되지 않음.

: 언제사용되나? - 여러 요소를 한번에 움직일때, 혹은 복잡한 요소들을 한번에 묶어 정리가 필요할때 사용.

 

 

-실제 피그마 프로그램에서 학습 진행 : 프레임과 그룹의 차이를 명확하게 알 수 있었던 실습

 

1) ⓐ프레임(컨테이너:프레임+프레임)형태와 ⓑ그룹(프레임+프레임)형태를 각각 만들었다.

>프레임 형성 방법 : 2개의 개체 선택 후, 오른쪽 마우스 > Frame selection>그룹 형성 방법 : 2개의 개체 선택 후, 오른쪽 마우스 > Group selection

▲ 위:프레임(컨테이너:프레임+프레임) / 아래:그룹 (프레임+프레임)

 

 

2) 프레임(컨테이너:프레임+프레임)형태,그룹(프레임+프레임)형태에 각각 배경색& 테두리(stroke)를 주니 차이가 명확하게 보였다

- 프레임 : 전체가 하나로 인식되어, 배경색과 테두리를 주었을때,

               내부에 있는 프레임은 영향 받지않고 전체가 하나로 인식되어 배경과 테두리가 적용되어짐.

-그룹 : 한 그룹으로 잡혀있지만, 전체가 아닌 각각의 프레임이 배경색과 테두리가 적용되어짐.

▲ 위:프레임(컨테이너:프레임+프레임) / 아래:그룹 (프레임+프레임)

 

즉, 인터페이스를 만들때는 프레임. 일러스트레이션을 만들때는 그룹 을 사용함.
프레임은 각각의 프레임이 영향을 받지 않지만, 그룹은 각각의 프레임이 영향을 받는 다는 것을 명확하게 이해 할 수 있었음.

 

2-3강. 부모-자식 관계와 레이어 정렬

- 부모자식 관계(레이어에 관한 설명)

: Frame 5, Group 1, Parents Container 는 다른 레이어들보다 앞에 살짝 튀어나와 있음, 그 외의 레이어는 뒤로 한칸씩 밀려있음

즉, Frame 5, Group 1, Parents Container 가 감싸고 있는 '부모', 그 외의 레이어는 '자식'이라고 생각하면 됨.

> 감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child)관계라고 칭함.

 

- 레이어 정렬

프레임 속에서 정렬 하는 방법(단일개체) : 단일개체만 선택하여, 감싸고 있는 부모프레임을 기준으로 자식 프레임이 정렬됨.

프레임끼리 정렬(다중개체): 다중개체 각각의 기준점이 서로가 되어 정렬됨.

 

2-4강. 오토레이아웃 기능 살펴보기 ★

오토레이아웃(Auto-layout)이란? 레이아웃을 자동으로 조정할 수 있는 기능. / 레이아웃의 유연함을 만들어주는 요소

>사람들은 다양한 크기의 디스플레이를 사용하니, 앱과 웹을 만들때 유연하게 대응할 수 있도록하는 기능

 

*핵심개념

1. 코드 블록의 구조

-패딩(padding) : 코드 블록 안에있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
-보더(border)코드 블록 내부 공간 바로 바깥의 가장자리, 실제 코드 블록의 테두리
-마진(margin)코드블록 바깥의 여백이자 다른 코드 블록과의 간격

코드블록 참고 이미지-참고문서 자료 첨부

 

우리가 보는 화면의 디자인은 모두 코드 블록으로 이루어져있다고 함.

 

2.컨테이너 구조

모든 코드 블록, 즉 우리가 만드는 ui의 크기는 '개체의 크기+패딩(내부 여백)' 으로 이루어짐.

 

*컨테이너를 아래로 쌓아 내려가는 것>코드 블록이 쌓이는 원리

 

컨테이너를 여러개 쌓을때, 얼만큼의 간격으로 몇개를 쌓을 건지, 규칙적으로 정렬해주는 기능을 하는 것이 오토레이아웃 기능

 

 

**오토레이아웃은 두가지 방법으로 생성 가능**
1. 프레임이 아닌개체에 오토레이아웃을 적용한다 : 기본 패딩값을 가진 오토레이아웃 형성
: 해당 개채 선택 후 > 오른쪽마우스 > add auto layout
2. 이미 있는 프레임에 오토레이아웃 속성을 적용한다 ; 프레임자체가 오토레이아웃으로 변환
: 해당 개체 선택 > 오른쪽 마우스 > frame selection > shift+a(단축키)

 

 

**오토레이아웃 패널 기능 파악하기

오토레이아웃 패널

 

오토레이아웃 패널을 통해 정렬방향과 정렬위치(오토레이아웃 사이즈가 변할시, 안에 있는 프레임들이 어디를 기준으로 정렬되는 지에 관한 기능.)에 대한 내용도 배우며, 직접 프로그램을 통해 실습을 진행하였다.

 

 

 

2-5강. 프레임과 컨스트레인트

컨스트레인트란(constraint)? 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻.

>부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할지 정할수있는 기능.

 

*오토레이아웃을 오토-레이아웃으로, 오토-레이아웃 답게 만들어주는 기능이며,

또한 활용하기에 따라, 반응형 웹사이트처럼 실시간으로 움직이는 레이아웃에 다양한 움직임을 연출할 수 있음.

 

컨스트레인트 패널

 

- 패널을 어떻게 설정하느냐에 따라 움직임을 다양하게 연출 가능하다는 것을 배웠다.*(복습 필요)

 

 

3. 학습하며 겪은 문제/해결방법

-문제1.

: 오토레이아웃 설정 중 / (1)간격 조절하기, (2)정렬 방향 설정하기 오류

오토레이아웃 패널

(1)간격 조절하기 : l'l > 같이 생긴 칸에 수정할 간격을 입력해야하는데, 'W 창' 와이드 값에다가 잘못 기입하여 수정에 오류가 있었음

>>해결방법 : 해당 강의 영상을 다시보며, 처음부터 다시 시도하니 해결되었음

 

(2) 정렬 방향 설정 : 간격 조절하기에서 잘못된 상태에서 시도하니 정렬방향도 오류가 났음.

>>해결방법 : 이 또한 위와 동일하게 다시 시도하니, 해결되었음.

 

 

오늘은 2강 강의 모두 수강하려고 했지만, 2-4강과 2-5강의 내용이 내가 이해하기에 조금 어려워서, 정말 5~6번 보면서 따라가느라 시간이 많이 지체가 되었다.('미치겠다'를 수십번 외치게 되는 마법..^^)

오늘 내용을 스스로 복습하며, 내일 다시한번 강의를 보고 복습해서 내용을 익혀야겠다,, + 컨스트레인트 복습이 필요할 것 같다.

 

 

4. 내일 학습 할 것은 무엇인지

: 오늘 목표한 2강을 모두 수강하지 못하였고, 이해하는데 시간을 많이 쏟았기 때문에,

오늘 본 2-1강. ~ 2-5강. 을 다시한번 빠르게 복습한 후, 과제제출까지 완료한 후, 3강으로 넘어갈 예정이다.