✳️ 프레임과 그룹
1. 프레임의 개념
- 프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체
프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불러요.
2. 그룹의 개념
- 그룹은 여러 개체를 하나로 담는 기능
그룹 기능은 여러 요소를 한번에 담아서 움직일 때 주로 사용 또는 복잡한 디자인들을 정리할 필요가 있을 때 그룹을 사용해서 정리
3. 프레임 VS 그룹
- 프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체
- 그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능
- 프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없음
✳️ 레이어와 정렬
1. 레이어의 개념
- 레이어는 개체 하나하나가 만드는 가상의 층
2. 레이어 원근의 개념
- 레이어의 원근은 화면을 보고 있는 내가 느끼는 UI의 멀고 가까운 정도
- 레이어는 상하좌우로도 쌓이지만, 앞뒤로도 쌓을 수 있음
- 우리가 보는 화면을 입체 도형에 대입하면 입체 도형의 축이 되고, 각각 X, Y ,Z 방향이다. 레이어가 떠 있다는 건 Z축 방향으로 레이어가 더 높이 올라와 있다는 뜻
- ex : 화면을 정면으로 보면 순서대로 위에서 아래 방향으로 나열되어있지만 화면을 옆에서 보면 서로 떠 있는 정도가 다를 수가 있다.
- ex : 화면을 정면으로 보면 순서대로 위에서 아래 방향으로 나열되어있지만 화면을 옆에서 보면 서로 떠 있는 정도가 다를 수가 있다.
3. 레이어의 높이
- 택배 상자의 크기를 가로 X 세로 X 높이로 재듯이 실무에서도 가로, 세로, 높이라고 함. 개발과의 표현을 통일해서 각각 width, height, z-index라고 함. Z값이나 Z인덱스 등으로 쓰임.
4. 레이어 패널과 정렬 기능
- 감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child) 관계라고 한다.
- 레이어 전부 접기(opt + L)
- 레이어 순서 변경 : 레이어 선택 > 맨 앞으로 보내기_Bring to front(]), 맨 뒤로 보내기_Send to back([), 뒤로 한 칸 보내기 Send backward(cmd + [)
- 정렬기능
- 정리하기(Tidy up) : 선택된 개체들을 가로 세로를 딱 맞춰서 정렬
- 수직 간격 균등 분배(Distribute vertical spacing) : 선택된 개체들 사이의 세로 간격을 균일하게 맞춤
- 수평 간격 균등 분배(Distribute horizontal spacing) : 선택된 개체들 사이의 가로 간격을 균일하게 맞춤
✳️ 오토레이아웃
1. 오토레이아웃의 개념
- 오토레이아웃은 레이아웃을 자동으로 조정할 수 있는 기능으로 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만들고 간격에 맞게 컨테이너를 쌓을 수 있게 해준다.
- 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
- 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
- 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
2. 컨테이너가 만들어지는 원리
- 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들어 낼 수 있다
3. 오토레이아웃 만들기
- 텍스트 레이어 만들기 > 마우스 우클릭 > Add auto layout을 적용(Shift+A)
- 오토레이아웃의 정렬 방향: 오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지 정함
- 세로: 수직 방향으로 쌓아요
- 가로: 수평 방향으로 쌓아요
- 감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓아요.
- 정렬 위치: 오토레이아웃의 사이즈가 변할 때, 안에 있는 프레임들이 어디를 기준으로 정렬되는 지 정함
- 오토레이아웃 해제: 오토레이아웃 속성을 제거(일반 프레임으로 변경됨)
- 고급 옵션: 오토레이아웃의 고급 속성을 설정
- 간격: 오토레이아웃 안에 프레임이 여러개 있을 때, 이 프레임 사이의 간격
- 좌우 패딩: 오토레이아웃의 좌우 여백값
- 상하 패딩: 오토레이아웃의 상하 여백값
- 패딩 개별 조정하기: 상하좌우 패딩을 각각 따로 설정할 수 있음
4. 컨스트레인트
1. 컨스트레인트의 개념
- 컨스트레인트란? 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻
- 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어야 함.
2. 컨스트레인트 패널 살펴보기
- 캔버스 상에서 보이는 파란 점선은 컨스트레인트 패널 값과 같다.
5. 프레임 리사이징
1. 리사이징의 개념
- 프레임은 기본적으로 크기가 고정인데 이 상태를 Fixed(픽스드;고정된)라고 함
- 프레임을 오토레이아웃으로 감싸는 순간, Fixed외의 다른 사이즈값이 생기는데 이걸 리사이징이라고 함
- 리사이징은 부모의 사이즈 값에 따라 자식의 사이즈값이 영향을 받고 반대로, 자식의 사이즈 값에 따라 부모의 사이즈값도 영향을 받음
2. 리사이징의 종류
- 리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있다.
✳️ 피그마 실습(숙제)
UI/UX디자인 - 스터디/아티클/리뷰