섹션 0. 피그마 컴포넌트 디자인 ~ 오토 레이아웃 기능 활용

1. 피그마 컴포넌트 디자인 

- 기본 네비게이션 바

- 타이틀이 없는 네비게이션 바

- 아이콘을 하나만 쓰는 네비게이션 바

- 타이틀 없고 아이콘을 하나만 쓰는 네비게이션 바

...

여러가지 경우의 수가 나온다.

 

뒤로 가기 아이콘으로 아이콘이 바뀐다고 가정했을 때도,

... 마찬가지로 여러가지 경우의 수가 나온다.

-> 모든 경우의 수를 일일히 만들 것인가? 그것이 가능할까?

 

하나만 만들고도 모든 경우의 수를 만들도록 할 수 있을까?

 

첫번째 방법 : 겹쳐 놓는다.

같은 위치에 들어갈 모든 아이콘들을 겹쳐서 배치하고, 필요한 아이콘만 보이게끔 하여 사용한다.

문제는, 아이콘이 많아지면 굉장히 복잡해진다는 것.

 

두번째 방법 : 네비게이션 컴포넌트 안쪽에 포함된 아이콘 그룹도 모두 컴포넌트화 한다.

네비게이션 컴포넌트를 메인 컴포넌트로 만들고,

그 안쪽에 포함된 아이콘 그룹도 컴포넌트로 만들면

결과적으로 네비게이션 컴포넌트 안에 아이콘 인스턴스들이 포함된 형태가 된다.

그럼 이때, 아이콘 인스턴스들끼리 교체가 가능하므로 (각각의 아이콘은 모두 하나의 부모를 두고 있으므로)

-> 같은 자리에 다른 아이콘으로 변경할 수 있다.

 

조심할 점 )

마스터 컴포넌트는 캔버스 영역 밖으로 빼놓고 사용한다.

마스터 컴포넌트가 캔버스 안에 포함되어 있을 경우, 해당 캔버스가 컴포넌트의 부모가 되므로 관리가 어려워질 수도 있다.

예를 들어, 캔버스 안에 포함된 아이콘을 컴포넌트화 했을때 컴포넌트는 캔버스이름 / 아이콘 / 해당아이콘이름 으로 저장된다.

 

응용 )

컴포넌트의 부모 이름을 변경하여 관리를 수월하게 할 수 있다.

예를 들어, 네비게이션바와 하단바에 사용할 아이콘이 다르다면 각각

네비게이션 바에 사용할 아이콘 : 아이콘 / 네비게이션 / 해당 아이콘 이름

하단 바에 사용할 아이콘 : 아이콘 / 하단 / 해당 아이콘 이름

으로 관리한다면, 아이콘에서는 전체 아이콘이 보이고 네이게이션 바와 하단 바에서는 각각에 해당되는 아이콘만 보일 것.

 

---

 

2. 피그마 컴포넌트와 반응형 디자인

컴포넌트를 다른 디바이스 사이즈에 어떻게 적용하면 좋을까?

늘어난 길이에 맞게 컴포넌트를 늘리면, 위치나 아이콘의 크기 등이 망가진다.

 

좌우의 비율, 크기 등을 유지하면서 크기를 바꾸려면 어떻게 해야할까?

 

Constraints 기능을 이용한다.

Constraints 기능이란? 프레임의 크기가 바뀌어도 여백은 유지가 되는 것.

즉, 네비게이션 컴포넌트 내부에서 아이콘들에 Constraints 기능을 적용하면 네비게이션 바의 크기를 바꾸어도 동일한 비율을 유지할 수 있다.

 

하단 바의 경우, 바를 N등분 한 뒤에 아이콘을 해당 Column 의 중앙에 위치하고 싶을 텐데

단순히 Constraints 기능만을 이용하면 그렇게 되지 않는다.

하단 바 컴포넌트에서 Layout Grid를 이용하여 Column을 나눠주고 Constraints 기능을 이용하면 된다.

(아이콘의 개수만큼 Column을 설정하면 된다)

 

조심할 점 )

Constraints 기능은 프레임을 기준으로 작동하므로, 항상 그 점을 유의하여 사용한다.

 

---

 

3. 오토 레이아웃 기능 100% 활용하기

오토 레이아웃 기능이란? 객체를 프레임으로 변경해주는 기능.

 

BUTTON 이라는 텍스트에 오토 레이아웃 기능을 적용하면, 프레임으로 변경된다.

padding, margin 등을 적용하여 해당 프레임을 꾸밀 수 있다.

그 상태에서 안쪽 텍스트를 바꾸면, padding이나 margin 등은 유지된 채 프레임의 크기가 변경된다.

 

응용 ) 오토 레이아웃을 적용한 프레임 두개에 오토 레이아웃을 적용할 수 있다.

그럼 각 프레임 사이에 여백이 생길텐데, 여기에 프레임을 더 추가해도 해당 여백을 유지한 채로 프레임이 추가된다.

사이 여백을 변경하면, 모든 프레임 사이의 여백이 한번에 변경되므로 편하다 !

세로 정렬로 변경하는 것 또한 가능하다.

 

응용 2 ) 플러그인을 활용하여 영화 설명 카드를 만들어보자.

Unsplash 플러그인 ? 사진을 삽입할 수 있는 플러그인

오토 레이아웃이 적용된 프레임에 삽입한 사진을 넣으면, 적용해둔 여백이 유지되면서 사진이 삽입된다.

(여백을 다시 맞출 필요 없이, 한번 여백을 설정해두면 계속 유지가 되므로 편하다 !)

 

응용 3 ) 레이아웃 마다 여백을 다르게 설정해보자.

이전까지는 프레임 안의 레이아웃 사이 여백이 모두 같았다.

하지만 다르게 설정하고 싶다면?

일단, 오토 레이아웃을 모두 풀어주고 설정하고 싶은 대로 여백을 설정한다.

그리고 같은 여백을 갖는 프레임끼리 오토 레이아웃을 적용해주고 (그룹화 해주고)

오토 레이아웃이 적용된 프레임에 다시 오토 레이아웃을 적용해주면 된다.

 

오토 레이아웃을 적용한 프레임에

또 ! 오토 레이아웃을 적용하고

또 ! 오토 레이아웃을 적용하고... 가 가능하기 때문에

무한으로 응용할 수 있다는 점을 기억하자.