지난 포스팅까지는 하나의 제목으로 쭉 연재를 했었는데, 아무래도 제목만 봤을땐 무슨 내용이 있는지 연상할 수 없겠다는 생각이 들어서 이번 포스팅부터는 제목을 바꿔보기로 했다.
이전 포스팅이 궁금하신 분들은 아래 목록을 참고해주세요. :)
지난 포스팅 목록
기획자의 툴 - MS office, Sketch, Figma현재 필드에서 주로 사용되는 기획 툴에 관한 이야기
기획자의 피그마
(Figma) - OverviewFigma를 실무에 도입하기까지의 스토리
기획자의 피그마 - Figma로 스토리보드 만들기 (1)Figma로 효율적인 작업을 위한 준비, 디자인시스템, 협업에 관한 이야기
기획자의 피그마 - Figma로 스토리보드 만들기 (2)Figma로
만드는 스토리보드 기본에 관한 사항
기획자의 피그마 - Figma로 스토리보드 만들기 (3)Figma로 만든 스토리보드의 디스크립션 처리 방법 제안
기획자의 피그마 - Figma로 스토리보드 만들기 (4)Figma 파일의 Share, Export 기능에 대한 설명과 활용 방법
기획자의 피그마 - Figma로 스토리보드 만들기 (5)Figma의 컴포넌트 기능에 대한 설명과 활용 방법
좋아보이긴 하는데... 그래서 이걸 뭐 어떻게 쓰라는거지?
Figma의 오토 레이아웃 (Auto layout) 기능이 릴리즈되자마자 유튜브로 달려가 튜토리얼 영상을 시청했다.
https://youtu.be/NrKX46DzkGQ
피그마를 실무에 도입해서 사용한지 약 7개월쯤 되는 시점이었지만 여전히 일정 부분 기존의 업무 스타일(문서 툴을 주로 사용하던) 의 고정 관념을 갖고 있던 상태였다. 게다가 새로운 기능이 나왔든 말든, '나는 손이 겁나 빠르니까 학습하는 시간을 쓰는 것 보다 나의 화려한 손기술로 커버하겠어' 와 같은 쓸데없는 장인정신을 발휘하기도 했다. 혹시라도 저같이 이런 생각을 하고 있는 기획자분들은 없으시겠죠? 그런 생각은 존내 쓸데없으니 제발 내다버리셈
Auto layout 기능의 편리함
예제는 버튼 만들기
#오토레이아웃 은 말 그대로 화면을 구성하는 각 요소의 레이아웃을 자동으로 적용시킬 수 있는 기능이다.
각 요소의 정렬 방식, 여백 등을 수치를 통해서 정확하게
제어할 수 있고, 오토레이아웃이 적용된 에셋을 컴포넌트로 구성해두면 변경 사항 발생 시에도 쉽고 빠르게 대처할 수 있다.
예를들어 버튼을 구성한다고 가정해보자.
이 기능이 있기 전까지는 버튼 구성을 위해서는 바탕이 되는 사각형을 그리고, 내부에 위치할 텍스트와의 상/하/좌/우 여백을 쟤고 그에 맞춰서
텍스트 위치를 잡았다. 따라서 만약 버튼의 텍스트가 예상과는 다르게 길어지거나 너무 짧아지게 되면 마스터 컴포넌트로 들어가 길이를 바꿔서 조정해야 했다.
이런 부분을 오토레이아웃을 통해서 자동으로 조정이 가능하도록 만들 수 있다.
1. 우선 버튼 명칭을 사용될 텍스트를 작성한다.
예제 이미지와 같이 Button 이라는 텍스트를 쓴 후, 이것을 Group 이나 Frame 섹션으로 변경한다.
*Auto layout은 Frame 단위에만 적용이 가능하다. 따라서 Group 섹션 상태에서 Auto layout을 적용하게 되면 해당 컴포넌트는 자동으로
frame 섹션으로 변경된다.
2. 그 다음 우측 패널에서 Auto layout 영역의 플러스(+) 버튼을 클릭힌다.
3. Auto layout은 프레임 내부에 있는 각 에셋을 가로(Vertical), 세로(Horizontal) 정렬시킬 수 있다.
4. 컴포넌트 특징에 따라서 가로 또는 세로 정렬을 하되 고정된 너비 안에서 움직일 것인지 혹은 가변적으로 둘 것인지에 대한 선택이 가능하다.
5. 또한 텍스트를 기준의 상/하/좌/우 여백 값을 설정한다. 만약 버튼을 구성하는 에셋이 텍스트와 아이콘 등으로 구성되어 있다면 각 요소 간의
여백 또한 조정이 가능하다.
6. 그리고 텍스트를 감싸고 있는 프레임 자체에
배경 색상과 테두리 라인을 적용시킬 수 있다.
이렇게 버튼을 생성하게 되면, 버튼을 구성하는 에셋의 길이에 따라 자동으로 동일한 여백값이 적용된다.
예제를 버튼으로 제시하긴 했지만, 오토레이아웃의 활용도는 매우 높다.
특히 데이터의 길이에 따라서 유동적으로 크기가 변동 가능성이 큰 부분을 요소에 따라 오토 레이아웃으로 엮어두면 화면 구성을 진행할 때 영역 조정을 별도로 할 필요 없이
편리하게 사용이 가능하다.
