기획자가 활용해야 할 피그마(Figma) 필수 기능 2

작업속도를 극도로 끌어올리고 싶다면, 꼭!

6월 초, 기획자가 활용해야 할 피그마(Figma) 필수 기능 1 을 작성하면서 추후 별도로 정리해서 올리겠다던 Auto Layout 에 대해 내가 이 기능을 활용하는 방법을 간략하게 적어보려 한다.

참, 그 전에 맛보기로 컬러를 지정해서 사용하는 기능부터 알아보고 넘어가자.

컬러지정

자꾸만 컬러값 복사하기 귀찮을 때, 동일한 오브젝트인데 매번 색깔을 다르게 쓸 때, 공통된 컬러를 한 번에 수정해야할 때 등 컬러와 관련한 작업의 번거로움을 줄이고 깔끔하고 통일된 기획안을 만들기 위해 컬러를 지정해서 사용하는 것을 권장한다.

컬러를 사용하는 아무 오브젝트나 선택한 뒤 컬러 바로 우측 상단의 더보기(: :) 클릭 > 추가(+) > 컬러명 작성 후 Create Style을 클릭하면, 해당 컬러가 지정이 되어 언제든 편하게 쓸 수 있다.

캔버스가 지정된 상태에서 우측 Design 패널을 보면 내가 지정한 컬러들 목록을 확인, 수정할 수 있다.

화면을 기획하면서 주로 지정해놓고 사용하는 컬러가 있다면 타이틀 / 기본텍스트 / 플레이스홀더 / 인풋박스 테두리 / 키컬러 / 에러 / 활성 / 비활성 정도인 것 같다.

컬러를 지정해놓고 사용하는 것이 디자이너의 영역이라고 생각할 수도 있겠으나, 앞서 말했듯 조금 더 정돈된 화면과 정확한 의미전달을 위해서 '설명글'을 최소화하고 시각적으로 보여주는 것도 괜찮은 방법이라고 생각한다.

이제 본격적으로 Auto Layout 기능 활용법을 적어본다.

1. Auto Layout_기초

오토레이아웃은 기본적으로 "정렬"을 편하게 하기 위한 기능이다. 텍스트, 도형, 라인 등 오브젝트들을 정렬하기 위해서는 일일이 손으로 이동하던가, 다중선택하여 우측 디자인패널 상단 정렬 기능을 사용할 수도 있겠지만 오토레이아웃(Shift + A)을 이용한다면 일정한 간격 정렬 뿐만 아니라 가로/세로, 상하좌우 여백 설정, 정렬 기준 등을 보다 쉽게 컨트롤할 수 있다.

2. 텍스트를 Auto Layout으로

오토레이아웃은 여러 개의 오브젝트를 대상으로 할 수도 있지만, 텍스트 하나만을 오토레이아웃으로 만들어 활용하면 아주 편리하다. 위에서 말했듯, 오토레이아웃은 좌우여백을 줄 수 있기 때문에 여백, 컬러, 라운드 설정만 해도 아주 조작하기 쉬운 버튼을 만들 수 있다.

3. 텍스트 Auto Layout을 Auto Layout으로 모아 테이블 만들기

어드민을 작업하다보면 테이블을 그려야하는 경우가 많다. 지금까지 내가 지켜봐온 작업자들의 방식에는 몇 가지 유형이 있었다.

1. 선긋기 형

일단 배경이 될 박스를 맨 아래에 놓고, 그 위에 텍스트들을 가지런히 놓고 사이사이 라인도 그린다. 나름 간격조정을 한다며 마우스로 키보드로 열심히 디테일을 조정한다. 이 방법, 고생길이 훤하다. 중간에 컬럼 삭제/추가가 되기라도 하면 간격 조정한다고 소중한 시간을 버리게 된다. 테이블 전체 사이즈라도 조정해야 하는 날에는 아마도 울 수도 있다. 수정대응이 가장 어렵고 미련한 방식이다.

2. 박스 연결하기 형

선긋기 형에서 조금 업그레이드 된 유형이다. 텍스트와 도형을 그룹짓고, 그룹들을 연결하며, 그룹의 가로 사이즈도 조절하며 간격을 조정한다. 다만 이 또한 컬럼 추가/삭제에 따른 대응에는 그닥 적합하지 못하다.

3. 오토레이아웃

이럴 때 아래 단계로 오토레이아웃을 사용한다면 작업시간을 줄이고 수정대응을 원활하게 할 수 있다.

(1) 컬럼명 하나하나를 오토레이아웃으로 만들어 좌우여백 및 컬러를 지정하여 박스를 만든다.

(2) 이들을 또 다시 오토레이아웃(가로)으로 묶는다. (만약 컬럼 박스마다 테두리 라인이 있다면, 묶인 오토레이아웃의 간격을 테두리 두께만큼 (-)로 지정하면 깔끔해진다.)

(3) 묶인 오토레이아웃 Frame의 가로 길이를 테이블 사이즈에 맞게 고정한다. (Hug 말고 Fixed로 지정)

(4) 각 개별 컬럼박스의 가로길이도 조정해야 하는데, 데이터의 길이가 가장 긴 컬럼박스는 Fill로, 나머지는 Fixed로 지정한다. (이렇게 해야 컬럼이 추가/삭제 되어도, 전체 고정된 가로길이 안에서 Fill 컬럼박스의 길이가 자동으로 조정된다.)

(5) 이렇게 완성된 오토레이아웃 프레임을 컴포넌트로 지정한다.

(6) 컴포넌트를 몇 개 복사한 뒤 이들을 오토레이아웃(세로)으로 묶는다.

이렇게 만들어진 테이블은 마더컴포넌트를 조작함에 따라 일괄적용되어 수정대응을 아주 쉽게 할 수 있다.

이외에도 오토레이아웃을 이용하는 방법은 다양하다.

팝업이나 모달을 만들 때 내용물에 따라 자동으로 사이즈가 조절되도록 활용할 수도 있고, 팝업 내 버튼을 여러 개 만들고 Fill 로 지정하여, 버튼 하나를 삭제(또는 숨김)하면 나머지 버튼이 영역을 채우도록 할 수도 있다.

다양한 활용, 원활한 수정대응이 가능하기 때문에 이 오토레이아웃을 잘만 다룰 줄 안다면 업무효율을 상당히 높일 수 있을 것이다.