podium_nam0422

3일차 내일배움캠프가 끝나갑니다.

후... 아직 많이 부족함을 느낀 하루였던 것 같습니다.

오늘 배운 오토레이아웃 기능을 이해하는게 어찌나 힘든지... 

강의 들으면서 진땀을 뺏네요. ㅎㅎ (한 5번은 돌려 본것 같습니다)

내일은 좀 더 시간을 체계적으로 세우고 실행할 수 있도록 해야겠어요!

1. 프레임과 그룹 차이 알아보기

이번 시간엔 두 개의 크고 작은 프레임을 만들어 주었습니다!

프레임과 그룹의 차이를 알아보기 위해 만든 두개의 프레임도 복사해서 아래쪽으로 띄워주겠습니다.

상단에 있는 두 프레임을 함께 선택 후 우클릭을 눌러 보겠습니다.

'Frame selection' 으로 묶어 줄게요!

그리고 밑에 있는 두 프레임은 같은 방식으로 Group selection을 적용해줄게요.

눈에 띄는 차이점은 없겠지만 이제 수정을 해보면서 어떤 차이가 있는지 알아보겠습니다.

이렇게 네게의 박스를 각각 색상을 입혀줄게요.

이번엔 상단에 있는 프레임에 Fill을 입혀 보겠습니다.

박스의 아래에 흰색 배경이 깔린게 보이시죠?

그리고 밑에 있는 그룹도 같이 묶여있는 상태로 Fill을 입혀보겠습니다.

어떤가요? 이미지 처럼 아래에 색깔이 깔린게 아닌 객체의 색상이 한번에 같이 바뀐 걸 알 수 있죠?

즉, 프레임 : 각각의 블록들에 별개의 배경색을 정할 수 있고, 별개의 코드 블럭이 됩니다.

그룹 : 여러 객체를 하나로 묶어둔 상태이기 때문에 코드가 아닌 블록이 됩니다. 이런 그룹은 한번에 옮기기 위해 사용하는 기능입니다.

※코드 블럭 : 우리가 사용하는 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔 화면에 보여줍니다.

우리가 피그마에서 그린 디자인은 코드가 되며 코드는 기본적으로 네모난 박스 영역을 만듭니다. 

이 때, 생기는 박스 모델을 코드 블럭이라고 부른답니다. (우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있어요)

2. 오토레이아웃 이해하기

오토레이아웃은 피그마의 꽃이자 기본기의 끝판왕이며 핵심이라고 합니다.

세상엔 정말 다양한 디바이스가 있습니다.

웹과 앱을 만들 때 이런 디바이스를 고려해야 하는데 이럴 때 유연하게 대응할 수 있는 기능이라고 이해해 보았습니다.

오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용합니다.

즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩입니다.

오토레이아웃을 활용하면 유연한 UI 디자인이 가능하겠다는 걸 느꼈습니다.

그럼 오토레이아웃을 만들어 보겠습니다.

이렇게 텍스트를 하나 작성해 주시고 마우스 우클릭 후 add auto layout을 적용해 보겠습니다.

이렇게 생성한 오토레이어는 프레임이 아닌 객체에 오토레이아웃을 적용한 프레임이 됩니다,

이번엔 다른 방법으로 만들어 볼게요

다른 텍스트를 만들어서 Frame selection을 적용해 보겠습니다.

그 후 다시 우 클릭 후 add auto layout을 적용해 보겠습니다

앞서 만든 두 개의 프레임 박스가 어떻게 다를까요?

1번 : 프레임이 아닌 객체에 오토레이아웃을 적용한 것

2번 : 이미 만들어진 프레임에 오토레이아웃 속성을 부여하는 것

말이 좀 어렵죠? ㅎㅎ 저도 이해하는데 한참이 걸렸답니다.

1번 : 기본 패딩값을 가진 오토레이아웃이 생깁니다.

2번 : 프레임 자체가 오토레이아웃 속성으로 변환이 됩니다.

(사실 저도 아직 오토레이아웃을 완벽하게 이해하지 못 한 것 같습니다 ㅎㅎ;;; ㅠㅠ...)

앞으로 과정에서 계속 공부하고 익숙해지다보면 깨닫게 되겠죠~?

절대 포기하지 않고 uxui 디자이너가 되기 위해 달려가볼게요!!!! 으쌰으쌰~~!