피그마 오토레이아웃 (Figma Auto Layout)_12.05

안녕하세요 오늘은 서비스 기획 12일차!

Figma 마지막 수업날이에요!

마지막 수업과 더불어서 오늘은 저희가 지난번 기획 발표를 했던 내용을 한번 더 고도화 하는 작업을 마지막에 진행하는 날이기도 해요

 

✨Part 1. Figma Auto Layout

오늘배운 내용은 Figma의 Auto Layout이에요

오토레이아웃의 단축키는 Shift + A인데

오토레이아웃의 경우 꼭 두개의 오브젝트가 잡혀야만 활성화가 되고

활성화가 된 상태에서 오토레이아웃을 걸어야지만 오토레이아웃이 만들어져요

 

1. Auto Layout이란?

오토레이아웃은 기본적으로 두 오브젝트가 잡히면 그 오브젝트들에 대해서 원하는 위치로 자동정렬을 할 수 있도록 도와주는 편리한 기능이데요!

이 기능은 오른쪽 패널을 통해서 상세한 조절이 가능해요

이 패널은 해당 패널의 부분을 클릭하면 조절이 가능하고

패널의 부분에 Alt를 누르고 클릭하게되면 해당 부분이 위, 아래 부분이었다면 위아래가 함께 잡히고 편집이 가능하고

만약 해당 부분 패널이 양옆이었다면 양옆의 패널이 같이 잡힌다는 특징이 있어요!

 

2. Auto Layout의 영역조정

그리고 Alt + Shift를 함께 누르시면 해당 상하좌우 양옆을 모두 함께 잡을 수 있고

해당부분을 잡고 한번에 영역의 크기를 조절할 수 있게 돼요!

 

그렇다면 이러한 오토레이아웃 상세하게 어떻게 사용하는걸까요?

 

오토레이아웃을 세밀하게 조절하고 싶은데 위, 아래, 좌, 우의 너비를 다르게 하고 싶을때는 , 를 이용하면 되는데요

기본적으로 같이 한 Blank에 적기 때문에 블랭크 내부의 좌표값은 (__, __) 이런식의 구조를 가지게 되어요

그래서 만약 각각 간격을 다르게 설정하고 싶으시다면 해당 부분을 참고하셔서 작성하시면 되는데 이 좌표의 경우

위 아래의 경우 위 좌표를 먼저 표시하고 컴마 다음 아래 좌표를 표시해요, 그리고 양옆은 좌, 우 의 순서를 가지고 있습니다!

이 점을 유념해서 사용하시면 좋을 듯 싶어요!

 

3. Auto Layout의 개체 정렬 방법

그리고 오토레이아웃은 영역이 줄어듦에 따라서 프레임 내부의 오브젝트들이 가지런히 정렬된다는 가장 큰 장점을 가지고 있는 기능이랍니다! 그래서 우측의 오토레이아웃 패널을 보시면 ↓, →, ↩︎ 모양을 보실 수 있으실 텐데 이 경우 영역의 크기가 줄어듦에 따라 안에있는 객체를 어떻게 정렬할 것인지를 선택하는 기능이라고 보시면 돼요!

특히 ↩︎ 모양의 경우 영역이 줄어듦에 따라서 줄 넘기기 처럼 다음 행으로 넘어간다고 보면 되고 크게는 다른 문서 프로그램의 줄 바꾸기와 같은 기능이라고 생각하시면 될 것 같습니다!

 

오토 레이아웃은 프레임에도 영향을 받는 기능이라고 할 수 이쓴데요 크게는 프레임에서 줄 수 있는 영향 기능으로 세가지가 있어요!

1. Fixed 

2. Hug

3. Fill

이렇게 세가지가 있습니다

이 세가지는 해당 설정에 따라 바깥 영역이 변하면 따라 안쪽 컨텐츠가 영향을 받아 요소가 변하도록 하는 기능인데요

각각 다른 역할과 특징을 가지고 있습니다!

 

[Fixed]는 말 그대로 고정이라는 의미이고 사이즈 고정으로 어떠한 것에도 영향을 받지않습니다! 외부 영역의 변화에도 외부 콘텐츠 영향의 변화를 받지 않아요!

[Hug]는 부모요소들이 설정하는데요 즉 바깥에 있는 개체가 안쪽의 개체를 끌어안고 있으며 이 개체들을 모두 감싸안는다는 느낌으로 내부 개체가 밖으로 새나가지 않도록 모두 감싸쥔다는 느낌으로 생각하시면 됩니다

[Fill]은 자식요소만 설정하는데요 내부 개체들과 외부 개체들이 서로 공간에 맞도록 최소 공간을 기준으로 꽉꽉 채워 자리 잡아 정렬하는 것을 의미해요!

 

그리고 오토레이아웃은 사실 객체가 모두 정렬이 되어있고 그 사이 간격이 다 정해져 있는 상태여도 그 안에 객체를 추가하고 싶다고 해서 그 내부의 프레임 공간을 늘린 후에 안에 객체를 추가하지 않아도 됩니다!

그 이유는 어차피 그 안에 오브젝트를 그냥 집어넣으면 겉에있는 오토레이아웃의 프레임이 자동으로 간격에 맞춰서 프레임 사이즈를 조절하기 때문이에요.

이게 바로 오토레이아웃을 사용하는 편리하고 큰 이유중 하나입니다.

 

4. Auto Layout 객체 위치 변경하기

오토 레이아웃을 만들었는데 오브젝트의 순서가 가끔은 원하던대로 만들어지지 앞고 역방향으로 제작되었던 경험이 있나요?

이럴때 혹시 하나씩 개체를 옮겨서 바꾸셨을까요?

오늘 그 방법에 대해서도 새로 배운 사실인데..! 오른쪽 미트볼 메뉴쪽에 First on Top이라는 버튼을 눌러서 개체의 순서를 뒤집어주면 맨 뒤에 있는 오브젝트가 가장 위로 올라온다느 사실 알고 계셨나요?

저는 여태 몰라서 하나하나 풀고 옮기고 도형 위치를 난잡하게 옮겼던...

저는 그랬지만 헤메지 마시라고 미리 말씀드려요

 

오토레이아웃은 동일 디자인, 아니면 같이 묶인 개체들간의 순서또한 함께 묶은 후 해당 개체만 따로 위치를 옮길 수 있는 기능도 가지고 있어요

해당 기능을 사용하기 위해서는 오토레이아웃을 묶어주어야 하는데요

오토레이아웃으로 잡힌 객체들을 한번에 다같이 잡고 해당 객체들을 Shift + A를 통해 한번에 묶어줍니다

해당객체들이 묶이기 시작하면 객체들이 한 뭉텅이로써 서로 간격 조정과 객체 사이사이 위치 조정을 편하게 하실 수 있는 기능이 활성화가 되어요

만약에 객체 사이의 간격을 조정하고 싶으시면 객체 사이의 간격을 눌러서 늘리시면 되구

만약 객체의 위치를 위 아래로 바꾸고 싶으시다면 위치를 옮기고 싶으신 해당 객체를 더블클릭하신 후에 ↑, ↓버튼을 통해 위치를 조절해주시면 됩니다!

 

5. Absolute Position

저 여기에서 실수 하나를 했는데 상하좌우기준 사방 꺾쇠가 들어간 + 모양의 아이콘이 왼쪽에 뜨는바람에 제가 오토레이아웃을 만들었음에도 불구하고 오토레이아웃이 적용되지 않았는데요..

이건 Absolute Position이라고 절대영역이라는 기능이에요..! 프레임 옆에 있는 사방 꺾쇠를 누르시면 적용이 되는 건데 

적용이 되고 나면 해당 오브젝트는 레이아웃안에 있지만 원하는 포지션에 배치가 가능해지고 다른 레이아웃이나 효과 등등에 대해서 영향을 받지 않는 단독 포지션을 가지게 됩니다!

 

6. 최소 최대 영역지정

다음은 콘텐츠의 영역지정을 해야할 경우에 사용하는 기능이에요!

이 기능은 최솟값과 최댓값이 있는데요 

[ →⎮← ] 의 경우 최소값을 의미하고 최소 영역을 지정해야 하는 콘텐츠 영역을 사용해야 할 때  주로 사용합니다

[ ⇤ ⇥ ] 의 경우 최댓값을 의미하고 최대 영역을 지정해놓고 그 지정역역 이상을 사용할 수 없을때 주로 사용합니다.

 

그래서 해당 버튼들의 기능은 때와 사용 용도에 따라서 편의에 따라 사용하시면 유용하게 사용하실 수 있으실 듯 싶어서 설명드려요☺️

 

 

✨Part 2. Dev Mode

다음으로는 대망의 데브 모드입니다

데브모드? 데브모드가 뭐에요? 

 

 

1. Dev 모드가 뭐에요? 어떻게 진입해요?😫

Dev Mode는 Develop(개발)을 의미하는 부분의 앞 글자를 따와서 피그마가 개발자를 위한 협업툴을 베타테스트로 출시한 새로운 기능입니다. 데브모드의 경우 Shift + D로 활성화시킬 수 있고 우측 상단에.

[</>]라는 모양이 활성화되며 데브모드로 진입할 수 있게 됩니다!

그 경우가 아니라면 상단의 데브모드를 클릭하게되면 동그란 데브모드 버튼이 오른쪽으로 옮겨가면서 데브모드로 진입하게 됩니다

화면이 전환되고 패널이 바뀌면 데브모드로 진입했다고 할 수 있어요!

 

 

2. Ready for Dev

처음 기능은 Ready for Dev입니다

이건 Design에서 원하는 오브젝트를 클릭하고 상단의 Make as ready for Dev를 눌러서 해당 오브젝트를 눌러 표시를 할 수 있는 기능이 Ready for Dev입니다! 

이 기능은 개발자에게 보여주고싶은 부분이나 북마크 해두고 싶은 부분을 보여주어 썸네일 클릭시 해당 영역으로 바로 이동할 수 있도록 도와주는 기능이라고 할 수 있어요!

이 기능은 섹션, 프레임, 오브젝트, 컴포넌트, 오토레이아웃 등등 다양하게 붙일 수 있지만 섹션에는 조금 특이하게 Ready for Dev 모양이 붙는하고 할 수 있어요

오브젝트나 컴포넌트와 같은 것들은 왼쪽 상단에 붙는 반면 섹션은 섹션이라는 명칭의 오른쪽 상단에 붙는다는점

하지만 둘다 의미는 같고 기능상 차이는 없으니 표시만 다르다고 생각하시면 될 듯 싶습니다

 

 

3. Code Snippents

그리고 애플리케이션을 개발하면서 눈여겨 보아야 할 것! 

바로 애플리케이션 내 버튼이나 애플리케이션의 마진들의 사이 간격을 보는 것인데요

Dev모드에서는 Alt클릭시 선택 영역에 대한 간격 값까지 코드값으로 세세하게 볼 수 있는 기능을 구비해주고 있어요

바로 디자이너와 개발자들이 미처 바로바로 캐치하기 어려운 부분을 기능 자체에서 볼 수 있도록 제공해주는 것이라고 할 수 있지요

 

그리고 다음 기능으로는 코드 스니펫(Code Snippents)이라는 기능인데요

코드 스니펫은 선택한 부분에 대한 정보를 우측 패널에 표시하는 것을 의미하는데 코드 내용과 색상 정보, 그리고 개발 코드등의 정보를 담고 있다고 할 수 있어요

 

 

4. Compare Change

세번째는 Compare Change기능인데요 이 기능은 Figma에서 함께 협업하는 직종 분야의 사람들이 모두 함께 두루두루 사용성을 높이 치고있는 기능중 하나라고 할 수 있어요 이 Compare Change는  변동사항을 알려주는 기능으로 이전버전과 현재 버전의 차이점을 알려주는 것이라고 할 수 있어요

그래서 현재 디자인 상태와 선택된 버전에 대한 디자인의 변동 사항의 비교를 할 수 있죠

이 기능은 비단 디자이너와 개발자만을 위한 기능은 아니고 디자이너에겐 디자인 양식을, 기획자에겐 기획양식을, 개발자에게는 개발에 대한 수정사항을 서로 비교해서 볼 수 있도록 도와주는 기능이라고 할 수 있어요

또한 이 부분은 하단의 왼쪽 패널을 확인하시면 Edited / Removed / Added를 알려줌으로써 어느 부분이 바뀌었는지를 확실히 볼 수 있게 하고 하단에 Overlay를 통해서 전후를 겹쳐 비교할 수 있도록 하는 기능을 제공하고 있어요☺️

 

 

굵직굵직한 기능중에 제가 생각한 Dev Mode의 중요 기능은 이정도인 것 같아요!

다른 분들도 이번 Figma의 새로운 기능에 대해서 관심이 많으실텐데

아직 많이 공개가 되지 않은 부분이라 선뜻 손대지 못하고 많이 망설이고 계실 것 같아요

그렇다면 제가 지금 적어드린 부분만 간단하게 한번 배워보시는 것도 어떠실까 저는 추천드리고 싶어요☺️