피그마 기초 완전 정복 - 피그마 핵심 개념 학습 (크기와 위치 제어 편)

1. 오늘 학습 키워드

- 프레임 리사이징

- 포지션

- Static

- Fixed

- Sticky

- Absolute

---

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

 

<리사이징 (Resizing)>

- 사이즈가 변경된다는 의미

- 기본적인 프레임은 가로/세로 길이가 고정임 = Fixed(rhwjd) 상태

- 오토레이아웃을 적용하면 Fixed 외의 다양한 크기 조정 옵션을 사용할 수 있음

- 부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받음

- 자식의 리사이징 값에 따라 부모의 리사이징 값도 영향을 받음

 

 

리사이징 종류

- 가로 길이와 세로 길이에 각각 적용할 수 있음

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

 

 

리사이징 값 확인하기

1. 오토 레이아웃으로 묶어주기

 

2. 오토레이아웃 패널 확인하기

- 너비와 높이에 새로운 속성이 추가

 

3. 부모와 자식 컨테이너가 각각 어떤 값으로 설정되어 있는지 확인해주기

방법 1. (오토)레이아웃 패널의 너비와 높이를 확인하기

방법 2. 프레임을 선택하면 프레임 박스 밑에 현재 리사이징 값을 확인하기

 

부모 컨테이너 → 고정값(Fixed) x 내용에 맞게 조절하기(Hug)

채우기(Fill) x 고정값(Fixed)

 

 

리사이징 관계 확인하기

1. 부모와 자식 둘 다 고정일 수도 있음

2. 자식이 고정값일 때(fixed) → 부모는 감쌈(hug)

 

3. 자식이 부모에 맞게 움직일 때(fill) → 부모는 고정값으로 멈춤(fixed)

 

4. 부모가 자식을 감쌀 때(hug) - 자식 사이즈는 고정값으로 멈춤(fixed)

부모 컨테이너는 자식 컨테이너의 길이에 따라 유동적으로 변함

 

 

ex) 부모 컨테이너의 너비 리사이징 값이 허그(hug)일 때

- 자식 컨테이너 너비 리사이징 값을 채우기(fill)로 변경하면 부모의 리사이징 값이 변함

 

 

 

<포지션 (Position)>

- 실제 개발에서도 사용하는 개념

- 포지션은 요소의 위치를 설정하고 제어하는 기능임

- 일반적인 요소는 스크롤 시 함께 이동함

- 웹사이트의 헤더나 하단 버튼처럼 특정 요소는 위치를 고정할 수 있음

- 스크롤에 따라 요소의 위치를 다르게 동작하도록 설정할 수 있음

 

 

피그마에서 설정할 수 있는 포지션

1. Static(스태틱)

- 모든 요소의 기본 포지션 값임

- 스크롤 시 요소가 함께 이동함

- 별도의 위치 고정 기능이 적용되지 않은 상태임

 

2. Fixed(픽스드;고정된)

- 화면을 기준으로 위치가 고정되는 포지션 값임

- 스크롤해도 항상 같은 위치를 유지함

- 헤더, 하단 고정 버튼 등에 주로 사용됨

 

 

 

 

 

3. Absolute(앱솔루트)

- 부모 컨테이너를 기준으로 위치가 고정되는 포지션 값임

- 스크롤 시 부모 컨테이너와 함께 이동함

- 부모 컨테이너 내부에서 원하는 위치에 자유롭게 배치할 수 있음

- 배지, 아이콘, 플로팅 버튼 등을 배치할 때 주로 사용됨

 

4. Sticky(스티키)

 

- 스크롤에 따라 움직이다가 특정 위치에서 고정되는 포지션 값임

- 초기에는 일반 요소처럼 스크롤과 함께 이동함

- 설정된 위치에 도달하면 화면 상단 또는 지정된 위치에 고정됨

- 카테고리 메뉴, 목차(Tab), 필터 바 등에 주로 사용됨

 

 

 

 

 

 

피그마에서 포지션 설정하기

1. Static, Fixed, Sticky

- 프로토타임의 스크롤 동작 패널에서 조절함

 

Scroll with parent (기본값)
- 부모 컨테이너와 함께 스크롤되는 방식, Static(스태틱) 을 의미함

Fixed (Stay in place)

- 화면의 현재 위치에 고정되는 방식, Fixed(픽스드) 를 의미함

Sticky (Stop at top edge)

- 스크롤을 따라 이동하다가 상단에 도달하면 고정되는 방식, Sticky(스티키) 를 의미함

 

 

2. 앱솔루트 포지션 (Absolute Position)

- 포지션(Position) 패널에서 설정할 수 있음

- 오토레이아웃 프레임 내부에서만 사용할 수 있음

- 오토레이아웃의 정렬 규칙에 영향을 받지 않음

- 부모 프레임 안에서 원하는 위치에 자유롭게 배치할 수 있음

- 일반 프레임은 원래 자유롭게 배치할 수 있으므로 앱솔루트를 사용할 필요가 없음

 

 

 

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정 도중 리사이징 기능을 학습하며 실무에서 어떤 설정 실수가 발생하는지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 부모와 자식 프레임의 리사이징 값을 적절하게 설정하지 않으면 화면 크기 변경 시 요소가 의도치 않게 늘어나거나 잘리는 문제가 발생할 수 있다는 것을 알게 되었다.

2)

 학습 과정 도중 리사이징과 컨스트레인트의 차이를 구분하는 데 어려움이 있었다. 둘 다 부모 프레임 크기가 변경될 때 관련된 기능으로 보여 어떤 상황에서 각각 사용하는지 명확하게 이해하지 못했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 리사이징은 크기 변화와 관련된 기능이고 컨스트레인트는 위치와 기준점을 설정하는 기능이라는 점까지는 이해할 수 있었다.

3)
학습 과정 도중 앱솔루트 포지션의 필요성을 이해하기 어려웠다. 일반 프레임에서는 원래 자유롭게 배치가 가능한데 왜 별도의 기능이 필요한지 의문이 들었다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 앱솔루트 포지션은 오토레이아웃 내부에서만 의미가 있으며 오토레이아웃의 정렬 규칙을 무시하고 자유롭게 배치하기 위해 사용된다는 것을 알게 되었다.