UI기획의 생산성을 확 끌어올려줄 Figma 고급 기능 사용 - 1부

이전 시간에는 Figma 기본 기능 사용을 통해 Frame 생성, 텍스트 입력, 도형 만들기, 정렬 등 기본적인 기능들을 실습을 통해 배웠습니다.

이번 피그마 고급 기능 사용에서는 더 효율적으로 기획할 수 있도록 컴포넌트, 오토 레이아웃, 컨스트레인트 등 심화된 기능에 대해 배워볼 예정입니다. 그럼 하나씩 살펴보겠습니다.

1) 컴포넌트

전체 앱 서비스의 UI를 약 80페이지 정도 진행하고 있다고 가정하고, 그 상황에서 헤더나 푸터 등 공통 요소인데 이에 대한 변경이 있다면 관련된 페이지를 일일이 수정해야 합니다. 그런데 이와 같이 공통적으로 쓰이는 헤더, 푸터, 메뉴바, 팝업, 버튼 등을 컴포넌트화해서 사용하면 한 번에 수정이 가능합니다.

즉, 수정 시간, 유지 보수 시간을 단축해서 작업 효율을 증가시킬 수 있는 기능입니다.

그렇다면 컴포넌트를 어떻게 활용해야 할까요? 그 방법에 대해 알아보겠습니다.

컴포넌트 사용하기 1

① 공통화 즉 컴포넌트화할 요소(버튼)을 클릭하고 우측 마우스를 클릭합니다.

② Create component를 선택하면 컴포넌트가 생성되며,

③ 좌측 Layers 패널에서 해당 버튼은 ◈ 마스터 컴포넌트 아이콘으로 변경되며,

④ 복제된 요소는 ◇ 인스턴스 아이콘 표시로 변경됩니다.

즉, 컴포넌트에는 마스터 컴포넌트와 인스턴스 컴포넌트 두 종류가 있습니다. 인스턴스 컴포넌트는 마스터 컴포넌트를 복제했을 때 생기는 복사본을 말합니다. 마스터 컴포넌트는 이러한 인스턴스 컴포넌트의 마스터 역할을 하게 됩니다. 마스터 컴포넌트를 부모, 인스턴스 컴포넌트를 자식 개념으로 이해하시면 쉽습니다.

컴포넌트 사용하기 2

① 좌측 마스터 컴포넌트를 복사해서 우측으로 옮기면

② 번 요소는 좌측의 마스터 컴포넌트의 하위 인스턴스(자식)가 되며, 텍스트를 수정하면 텍스트는 종속되지 않고 덮어쓰기(override) 됩니다. 즉 스타일은 공통화되어 유지되지만 텍스트 등을 개별로 변경해서 쓸 수 있습니다. 그러나 향후 하단 버튼의 크기와 컬러를 일괄로 바꾸고자 할 경우 마스터 컴포넌트를 수정하면 일괄 변경됩니다. 비유를 하자면 앱 서비스 브랜드 컬러를 블루로 해서 진행 중이었는데 정책 변경으로 레드로 변경할 때 마스터 컴포넌트의 컬러를 변경해주면 전체 하위 인스턴스 버튼의 컬로가 한 번에 바뀌게 됩니다.

앱 서비스가 아닌 PC웹 서비스의 UI를 기획할 때도 GNB(General Navigation Bar)와 푸터가 공통 요소이기 때문에 이 부분을 컴포넌트화해 놓으면 프로젝트가 진행되는 동안 메뉴의 수와 문구 등을 한 번에 바꾸기에 용이합니다.

2) 오토 레이아웃

오토 레이아웃 기능을 사용하게 되면 복수 요소의 간격 부분에 대한 설정을 동일하게 적용할 수 있습니다.

피그마 기본 기능 사용에서 만든 로그인 페이지를 활용하여 오토 레이아웃 기능에 대해 살펴보도록 하겠습니다.

오토 레이아웃 기능 사용하기

① 유사한 그룹, 도형 등 반복 요소를 2개 이상 선택 후

② 우측 디자인탭의 Auto layout 항목의 우측 + 버튼을 클릭하면 편집 영역이 나타납니다.

③ 수치를 늘리거나 줄이면

④ Auto layout으로 그룹핑되고 요소간 간격 부분의 여백 수치로 반영이 됩니다.

⑤ ↓→ 는 반복되는 방향을 아래로 할지, 우측으로 할지 선택하는 옵션이고,

⑥ 영역을 클릭해 상하좌우의 여백값을 적용할 수 있습니다.

3) 컨스트레인트

컨스트레인트 기능은 '제약'을 의미합니다. 좀 더 쉽게 고정이라고 생각해 주시면 됩니다.

컨스트레인트를 사용하면 프레임의 크기를 변경할 때 프레임 내 요소들을 고정시켜 요소의 너비는 변하지 않도록 하거나

위치를 고정시킬 수 있습니다.​

반대로 프레임을 늘릴 때 요소의 너비도 함께 늘릴 수도 있습니다. 다음 로그인 페이지 샘플을 확인해보도록 하겠습니다.

컨스트레인트 사용하기

① UI가 360x640px 사이즈인 상태에서 롱스크롤 페이지를 기획하기 Frame 하단 영역을 마우스로 잡고 아래로 늘리면

② 번 영역의 Constraint(고정) 설정이

③ 세로 Center(중앙)로 기본 설정되어 있기 때문에 UI 요소들이 함께 내려 옵니다.

④ 번 하단 버튼은 컨스트레인트 설정이 ⑤ Top으로 되어 있어서 내리는 방향과 고정 영역이 반대로 있어서 도형이 늘어나게 됩니다.

③ 번은 Top으로, ⑤은 Bottom으로 설정하면 ⑥ 번 영역과 같이 상단 영역은 위로 ⑦번 영역은 하단으로 고정되어 레이아웃이 흐트러지지 않게 됩니다.

위 ③번과 ⑤번과 같이 상단은 Top, 하단은 Bottom으로 컨스트레인트를 설정하면 Frame 화면 크기를 자유롭게 늘려 여러 디바이스의 크기게 맞게 UI 기획을 베리에이션할 수 있습니다.

오늘 컴포넌트, 오토 레이아웃, 컨스트레인트 3개 고급 기능을 익혀보았습니다. 이러한 고급 기능이 여러분의 반복 작업을 줄이고, 결과물을 내는 속도 또한 빠르게 변화시켜줄 수 있습니다. 그럼 다음 포스팅에서 레이아웃 그리드, 스타일 사용하기, 팀 라이브러리 등의 기능도 살펴보도록 하겠습니다. 오늘도 고생 많으셨습니다!:)

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의