[내일배움캠프 사전캠프 2일차] UXUI사전캠프 퀘스트 및 피그마 기초 2주차 수강

얼레벌레 2일차..!

일단 노션에 오늘 계획 적고 어제 멤버카드와 프로필 설정을

너무 대충한 것 같아서 다시 해주었다. 그리고 면담하고 2주차 강의를 들었다.

1주차 강의와 다르게 갑자기 어려워진 느낌이라 조금 당황스러웠지만 일단 들어,,

 

 

<체계적으로 배우는 피그마 기초 완전 정복 2주차>

-수업목표

1. 프레임과 그룹의 차이를 이해하고 사용할 수 있다

2. 오토레이아웃의 원리를 이해하고 사용할 수 있다

3. 컨스트레인트와 리사이징의 개념을 이해하고 사용할 수 있다

 

 

-프레임

피그마의 기본 단위

 

 

-오토레이아웃

UI 설계 외에도, 레이아웃을 조금 더 편하고 빠르게 쌓아 올리도록 도와주는 것이며,

이 오토레이아웃 간의 규칙이 리사이징이다.

 

 

-컨스트레인트

오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있다.

하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는

오토레이아웃이 움직일 때의 규칙을 만들어 줘야 한다.

컨스트레인트는 '오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다'는 뜻으로

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

 

 

-리사이징

프레임은 기본적으로 고정되어 있어서 이 상태를 Fixed(고정된)이라고 한다.

프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생긴다.

이걸 리사이징이라고 한다.

부모의 값에 따라 자식의 값이, 자식의 값에 따라 부모의 값이 영향을 미친다.

 

 

-리사이징의 종류

1. Fixed : 고정값, 공통

2. Hug : 자식 컨테이너의 크기에 맞춰 조정, 부모만 쓸 수 있음

3. Fill : 부모 컨테이너의 크기에 맞춰 조정, 자식만 쓸 수 있음

 

 

-포지션

1. Static(스태틱)

일반적인 요소들이 가지고 있는 포지션이다. 기본값이자 스크롤을 하면 같이 따라 같이 움직인다.

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

면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있다.

우리가 아는 웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position 이다.

3. Absolute(앱솔루트)

Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이다.

즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 부모 컨테이너를 기준으로 한다.

4. Sticky(스티키)

스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이다. 스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것을 뜻한다.

 

 

느낀 점

오우 갑자기 어려워져서 숙제를 다 못 끝낼 것 같았다;;

오늘 사전캠프 끝난 후 부터 바로 시작해야 할 것 같다,,

만약 오늘 다 한다면 TIL 다시 수정해서 올리자!!

 

드디어 다 모인 8조,, 본수업때는 조가 바뀐다고 들어서 조금 아쉬웠다!

그동안 잘 부탁드립니당☺️

 

 

+내일 학습 할 것

1. UXUI디자이너 온보딩하기

2. 2주차 강의 숙제하기