피그마 활용법 2주차 2-1 ~ 2-3까지

[ 수업 목표 ]

피그마 핵심 기능인 프레임과 그룹의 차이를 이해하고 사용합니다 .

피그마 프레임을 정리하고 정렬하는 방법을 배웁니다.

오토레이아웃과 컨스트레인트를 활용해 레이아웃을 만들고 조정하는 방법을 이해합니다

 

 

 

프레임과 그룹 (얼마나 잘쓰느냐가 입문과 심화단계로 나뉨)

• • 피그마에서 코드 블록을 만드는 프레임과 개체를 묶는 그룹 기능의 차이를 알아야 더 정확한 구조를 설계할 수 있어요.
  • 프레임은 UI의 기본 설계 단위인 ‘블록’의 개념이고, 그룹은 개체를 묶는 ‘기능’이에요.
  • 같이 실습해 보면서 차이를 더 확실하게 이해해 볼 거예요.

레이어와 정렬

• • 레이어는 UI를 포함한 모든 개체 하나하나의 층이에요.
  • 이 레이어를 화면에 배치하는 규칙이 정렬입니다.
  • 아래에서 예시들과 함께 자세히 배워볼게요!

오토레이아웃과 컨스트레인트

• • 오토레이아웃은 UI 구조 설계에서 아주 핵심적인 역할을 담당해요.
  • 모든 UI가 이 오토레이아웃을 사용해서 만들어진다고 해도 과언이 아니에요.
  • UI 설계 외에도, 레이아웃을 조금 더 편하고 빠르게 쌓아 올리도록 도와주는 것도 오토레이아웃입니다.
  • 컨스트레인트는 오토레이아웃을 사용해서 UI와 레이아웃을 설계하는 정렬과 배치 규칙이에요.
  • 아직은 감이 안 잡히겠지만 걱정하지 마세요! 차근차근 알려드릴게요.

프레임과 그룹

 

코드는 디자인을 어떻게 해석할까?

 

디자인이 코드로 바뀌는 과정

이때, 코드는 디자인을 레고처럼 쌓아요.

코드는 기본적으로 네모난 박스 영역을 만들어요.

그래서 박스 모델이라고 합니다.

 

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

따라서 UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 해요.

 

 

프레임과 그룹 둘다 피그마에서 개체를 만드는 기본적인 기능이지만 차이가 크답니다.

 

 

📌 프레임 Frame

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

프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어져요.

박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈이에요.

(코드에서 박스모델  ☜  피그마 디자인에서 프레임 )

프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불러요.

용기, 그릇  -> 컨테이너

 

📌 그룹 Group

여러 개체를 하나로 담는 기능이에요.

그룹은 다양한 경우에 사용할 수 있어요.

여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능이에요.

프레임과 달리 그룹은 코드 블록으로 인식되지 않아요.

 

그룹은 구체적으로 언제 사용하나요?

그룹 기능은 여러 요소를 한번에 담아서 움직일 때 주로 사용해요.

또는 복잡한 디자인들을 정리할 필요가 있을 때 그룹을 사용해서 정리하기도 해요.

 

 

실무에서 그룹을 사용하는 빈도는 매우 적은 편이에요. 그래픽을 다룰때 로고 브랜드를 다룰때 쓰긴하나 실무에서 사용하지 않는다.

 

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

실습통해서 프레임과 그룹차이를 알아보자!

 

 

CAG 컨트롤 알트 쥐  = 프레임 셀렉션 (프레임으로 묶기)

프레임과프레임을 프레임으로 묶고 (각 색상 지정 가능)

프레임과프레임을 그룹으로 묶고 (그룹 색상이 한번에 바뀜, 속성을 적용할 수 없고 단지 묶여있을뿐야)

 

사이즈

 

따로 움직인다. 프레임

같이 움직인다. 그룹

 

레이어와 정렬

개발 가능한 디자인을 위해 레이어를 정리하고 정렬하는 것이 중요해요.

 

내가 레이어를 쉽게쌓았냐 안쌓았냐에 따라 개발자가 더 쉽게 이해하냐 아니냐가 된다

 

레이어를 쌓은 구조가 곧 코드 구조예요. 따라서 레이어로 뼈대를 만드는 법에 익숙해져야 한답니다! 😊

• 우리는 실제로 작동하는 앱과 웹사이트를 만들기 위해 피그마를 사용해요.
• 따라서 피그마에 그리는 것들은 모두 개발과 밀접한 관련이 있어요.
• 개발에서 디자인을 더 쉽게 이해하려면 디자인 구조가 최대한 코드 구조와 같으면 되겠죠?
• 이 코드 구조를 디자인에 반영하기 위해 레이어를 정렬하고 배치하게 돼요.

오토레이아웃을 배우고 나면 레이어에 대해 더 확실하게 이해할 수 있어요.

 

레이어의 개념

 

• UI가 쌓이는 방향은 화면 상단에서 하단으로 쌓이게 돼요.
• 즉, 하단에 있는 블록이 상단에 있는 블록보다 더 나중에 쌓인 블록이에요.

 

 

 

 

레이어의 원근

 

레이어가 쌓이는 방향

 

• 레이어는 화면 상단에서 하단으로 쌓이지만, 화면 앞에서부터 뒤라는 방향도 존재해요.
• 레이어가 쌓이는 순서는 상하좌우의 평면적인 순서뿐만 아니라 입체적인 앞뒤 순서도 있다는 뜻이에요.

내가보는 화면 평면이지만 떠있다. 

레이어의 원근은 화면을 보고 있는 내가 느끼는 UI의 멀고 가까운 정도에요!

• 레이어가 앞뒤로 쌓이는 걸 레이어가 멀거나 가깝다는 뜻에서 원근이라고 불러요.
• 레이어가 멀고 가까운 걸 다른 말로, 레이어가 화면으로부터 얼마나 떠있는지로 이야기해요.
• 화면을 보는 나한테 가까울 수록 화면으로부터 더 높이 떠있고, 나한테서 멀 수록 화면에 더 낮게 떠 있어요.
• Q. 레이어가 떠 있다는 게 어떤 뜻인가요?
  • 우리가 보는 화면은 평면이에요.
  • 하지만 화면이 겹쳐있거나 또는 그림자가 있다면 화면들이 입체적으로 느껴져요.
  • 우리가 보는 화면을 입체 도형에 대입하면 입체 도형의 축이 되고, 각각 X, Y ,Z 방향이에요.
  • 레이어가 떠 있다는 건 Z축 방향으로 레이어가 더 높이 올라와 있다는 뜻이에요.

 

 

분명히 모니터와 화면은 평면인 공간인데, 까만색 상자와 1:1상담 버튼은 뒤의 화면보다 더 높게 떠 있는 것처럼 느껴져요. 즉, 좀 더 나한테 가까워요

저 화면을 옆에서 바라본다고 생각하면 조금 더 명확하겠죠?

화면을 옆에서 보면 서로 떠 있는 정도가 다를 수가 있어요.

 

 🧔🏻 레이어의 높이

이해를 돕기 위해 ‘멀고 가까움’이라는 표현을 썼지만,

우리가 택배 상자의 크기를 가로 X 세로 X 높이로 재듯이

실무에서도 가로, 세로, 높이라고 불러요.

너비 또는 높이와 헷갈리지 않도록 개발과의 표현을 통일해서 각각 width, height, z-index라고 불러요.

Z값이나 Z인덱스 등으로 쓰기도 합니다 😊

 

 

레이어 패널 둘러보기

좌측 사이드 바의 레이어 패널을 한번 같이 둘러봐요

 

 

레이어의 부모-자식 관계

화면이 아닌 레이어 패널에서!!

 

• Group 1과 Frame 5는 Frame 1~4보다 더 앞에 튀어나와 있는 게 보여요.
• Frame 1~4는 각각 Group 1과 Frame 5보다 한 칸씩 뒤로 밀려 있어요.
• Frame 5와 Group 1이 각각 Frame 1과 2, 3과 4를 감싸고 있기 때문이에요.
• 즉, Frame 1과 2는 Frame 5 안에 있고, Frame 3과 4는 Group 1 안에 있어요.

감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child) 관계라고 해요!

 

레이어 접고 펴기

🔑 피그마 활용 TIP!

• 레이어 패널에서 ﹟은 프레임을 뜻해요.
• 레이어 패널에서 화살표를 누르면 부모를 펼처서 자식을 보거나 또는 접을 수 있어요. 

알트+엘 레이어전부접기

 

레이어 순서 변경하기

아래 실습을 따라하며 반복해보세요!

프레임5를 오른쪽버튼클릭해서 메뉴에서 브링투프런트

레이어 패널에서 더 위에 있는 레이어는 Front, 즉 더 앞에 있다는 뜻이고, 앞에 있다는 뜻은 Z(높이)가 더 높다는 뜻이에요.

 

맨앞으로가져오기  ] 단축키

맨 뒤로보내기 [ 단축키

 

레이어 패널에서 Frame 5가 밑으로 내려가고, 캔버스에서는 Group 1에 가려져요.

프레임파이브를 다시센드백했더니 내려가고  그룹1이 앞으로옴.

 

뒤로 한 칸 보내기 Send backward 컨트롤[

 

정렬 기능 둘러보기

정렬은 컨테이너 안의 개체들을 정렬하고 배치하는 방법이에요.

 

프레임 정렬하기

아래 실습을 따라하며 반복해보세요!

 

단일개체정렬

 

 

 

오른쪽 패널에서 정렬 메뉴들을 순차척으로 눌러보기

그래서 눌러봤다!ㅋ

왼쪽 가로가운데정렬 오른쪽 상단 세로가운데정렬 하단

부모를 기준으로 프레임1이 정렬되었다.

프레임1인데, 부모에씌어져있으니 부모를 기준으로 된듯!

 

다중개체정렬

프레임1과 프레임2동시선택했을때 정렬 눌러보기

 

선택된것의 가까운거 기준 

 

균등 분배하기

개체복제 Duplicate 

컨트롤디

 

프레임1과 2를 선택하고,복제

 💡 프레임 이름 뒤에 숫자를 입력해 두면, 프레임이 추가됐을 때 자동으로 1씩 늘어나요.

예) Frame 1이 있을 때 새로운 프레임을 만들면 자동으로 Frame 2라는 이름이 붙어요.

 

가로,세로 균등분배 해보기

잘 안보인다면 

균등분배해보고, 다시 

가로균등에서는 세로 정렬로 바꿔보면 착착착!정리된것을 확인 가능

세로균등에서는 가로 정렬로 바꿔보면 착착착!정리된것을 확인 가능