by
Dec 09. 2024
피그마 오토 레이아웃 실무에 활용하기
Auto layout - Fill / Hug
IT회사에서 근무하는 디자이너라면 피그마를 사용하거나 알고 있을 것이며,
피그마의 가장 메인 기능인 Auto layer - Fill / Hug의 개념에 대해서도 어느 정도 알 것으로 짐작된다.
해당 기능에 대해서는 구글에 검색해 보면 이미 많은 분들이 친절히 설명하고 계신다.
그래서 이것의 개념보다는 실무에 어떻게 사용할 수 있는지에 대해 작성하려 한다.
그래도 개념에 대해 이미지로 설명하자면,
<Fill>로 설정한 레이어는 외부의 고정된 값에 따라 크기가 변하며,
<Hug>는 내부의 값에 따라 변경되는 기능이다.
직접 만들어보기
피그마를 사용하실 수 있는 분들이라면 아래와 같이 리스트를 만들어보자.
(링크 > 피그마 커뮤니티에 예시 파일을 등록해 놓았습니다.)
(1) 텍스트 <넓이 fill>, 아이콘 <넓이 hug>을 오토레이아웃으로 합쳐준 후
(2) 다시 오토 레이아웃을 추가해 주며(shift⇧+A) 위, 아래 패딩을 추가하며 <높이 hug>로 설정한다.
(3) 마지막으로 오토 레이아웃을 추가해 주며 양옆에 패딩을 추가하며 <높이 hug>로 설정한다.
최종 넓이 설정 [텍스트+ 아이콘 오토 레이아웃 <Fill> | 상위 <fill> | 최상위 <fix 고정값>]
그리고 (4) 번처럼 배경에 컬러를 추가하면 완성되고, 이 복잡한 구조는 아래 이미지와 같이 활용된다.
(1) 번의 넓이를 변경해 주면 Fill로 설정된 텍스트 박스가 가변 되고 아이콘은 고정이 된다.
그리고 (2) 번처럼 하위 오토 레이아웃을 활용해 아래 언더라인을 추가해줄 수 있다.
추가적으로 (3) 번처럼 텍스트 박스에 높이를 제한해 주면 글자 초과 시 노출의 방식을 설정할 수 있다.
그럼 해당 기능을 통해 탭을 만들어보자.
(1) 만들었던 리스트에서 아이콘을 삭제하고 텍스트 정렬을 가운데로 지정한다.
(2) 바로 옆에 동일한 UI를 복사 후 첫 번째 UI에 하위 오토레아웃에 언더라인을 추가하여 탭을 만들어준다.
(3) 두 개의 UI 오토 레이아웃으로 만든 뒤(높이 hug / 넓이 고정값) 언더라인을 추가한다.
그러면 하나의 탭 복사(command+d)를 할 경우 (4)처럼 고정된 넓이 안에서 동일한 탭이 추가된다.
스크린 화면에 적용하기
이렇게 만들어진 UI들을 반응형으로 설정할 수 있는데,
UI 넓이를 화면에 맞춘 뒤 오른쪽과 왼쪽으로 포지션을 고정하게 되면 모든 게 끝난다.
(1)의 화면에서 넓이를 (2) 번처럼 변경하면 UI도 동일하게 변경된다.
다양하게 활용되는 오토레이아웃 - (1) 리스트 (2) 인풋 (3) 탭_고정 (4) 탭_스크롤해당 기능을 이해하게 된다면 위 이미지처럼 다양한 타입의 UI를 제작할 수 있으며 더 폭넓은 방식으로도
활용할 수 있다. 예를 들자면
모달 안 버튼(1)의 하나의 버튼의 경우 텍스트 박스 <Hug>를 적용하여 글자로 가변이 될 수 있지만,
(2)처럼 2개의 버튼을 쓴다면 동일한 크기의 버튼을 유지하도록 <fill> 기능을 통해 활용이 가능하다.
상단 네비게이션