오토레이아웃, 컨스트레인트, 리사이징, 컬러 팔레트 알아보기

[사전캠프_9/3]

• 피그마 2주차 강의 이수
• 피그마 3주차 강의 이수

​

​

피그마 2주차 강의 학습 내용

​

 

2-1. 프레임과 그룹

• 프레임(Frame)
  • 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체
  • 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록
  • 다른 개체나 프레임을 넣을 수 있기 떄문에 컨테이너(Container)라고도 부름
• 그룹(Group)
  • 여러 개체를 하나로 담는 기능
  • 프레임과 달리 그룹은 코드 블록으로 인식되지 않는다.(실무에서 거의 사용하지 않음. 코드로 변환되지 않음.)

​

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

• 오토레이아웃의 개념
  • 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능
  • 다양한 크기의 디스플레이에 유연하게 대응할 수 있도록 레이아웃의 유연함을 만들어주는 기능
• 코드 블록의 구조
  • 우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있다.(컨테이너라고도 부른다)
  • 패딩(Pading) : 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
  • 보더(Border) : 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
  • 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

>> 오토레이아웃은 피그마의 핵심 테크닉

​

* 오토레이아웃 적용 방법

1) Frame1_프레임이 아닌 개체에 오토레이아웃 적용 시 기본 패딩값을 가진 프레임이 생김

2) Frame2_프레임에 오토레이아웃 적용 시 프레임 자체가 오토레이아웃으로 적용 됨

​

* 컨테이너 안에서 오토레이아웃 정렬 시 앞으로 가져오는게 가장 밑으로 배치된다. 최근에 생성된 개체가 밑으로 쌓이는 구조

​

​

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

• 컨스트레인트
  • 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해 오토레이아웃이 움직일 때의 규칙을 만들어준다.
  • 실무에서 꼭 사용되는 중요한 기능
  • 오토레이아웃 안에 있는 자식 개체들이 움직이는 조건 값
  • 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변하는지 정함

​

* 부모 컨테이너 안에 자식 컨테이너가 위쪽과 왼쪽을 기준으로 위치가 정해져있음. 이것이 컨스트레인트

 

2-6. 프레임 리사이징

 

Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 사용
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 사용

* 자식 fixed -> 부모 hug

* 부모 hug -> 자식fixed

* 자식 fill -> 부모 fixed

* 부모, 자식 모두 fixed 가능

 

3-2. 파운데이션

UI를 구성하는 기초 재료

UI는 기초 재료인 파운데이션과 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다.

* 버튼이라는 컴포넌트를 만들기 위해 파운데이션 요소를 조합해서 만든다.

• 파운데이션의 구성
  • 색상
  • 서체
  • 간격, 여백
  • 곡률
  • 그리드
  • 고도(높이 개념)
  • 아이콘

​

3-3. 컬러 스타일

• 컬러스타일을 만드는 일반적인 방법
  • 기본적으로 2-3가지 색상
  • 포인트 컬러 한 가지와 흑백 조합 추천

• • 포인트 컬러(프라이머리 컬러) : 정말 중요하고 핵심적인 부분에만 적용(버튼같은 사용자가 반드시 행동해야 하는 부분에만 적용하는 컬러)
  • 백드라운드 컬러 : 일반적으로 흰색(#FFFFFF)
  • 세컨더리 컬러(서브 컬러) : 배경색에서 도드라지는 부분을 만들어 포인터 컬러를 뒷받침

• 색상의 확장성
  • 색상을 정했다면 밝은 단계부터 어두운 단계까지 10단계를 만든다.
  • 다양한 상황에 대응할 수 있도록 유연하게 만들어 두어야 한다.

• 1:3:6 법칙
  • 가장 중요한 프라이머리 컬러의 비율 10%
  • 전체적인 배경인 흰색 60%
  • 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러 30%

​

*플러그인 사용하여 컬러 선택 - [Coolors]

3가지 색상으로 줄이기

3가지 색상 각각 10칸 만들어 컬러 팔레트 만들기

HSL 값으로 컬러값 변경 후 명도값(L) 10씩 차이나게 조절

​

*플러그인 사용하여 컬러 차트 만들기 - [Style]

컬러마다 이름 설정 후 플러그인 사용하면 바에 컬러 차트 생성

​

​

​

[회고]

컨스트레인트와 오토레이아웃의 개념과 기능을 잘 이해하고 계속해서 연습해봐야 바로바로 적용이 가능할 것 같다.

반복해서 실습하는 과정이 필요하다.