홍익대학교 Figma 특강후기 (오토레이아웃)

홍익대학교 Interface Design(2) 수업에서 <Figma Auto layout 마스터>라는 주제로 특강을 진행했습니다.

디자인 시스템을 구축하면서 효율적인 컴포넌트 제작을 위해 고민을 했습니다. 더욱 복잡한 컴포넌트들을 만들면서 Figma 오토레이아웃에 대해서 공부하게 되었고 운이 좋게도 제가 공부했던 내용들을 모교에서 강의할 수 있게 되었습니다.

프로덕트 디자이너라면 해상도마다 변화하는 반응형 디자인을 염두에 둬야합니다. Auto layout이 없다면 Figma에서 반응형 디자인을 구현할 수 없습니다.

Auto Layout의 Resizing, Constraints의 개념을 모른다면 제대로된 반응형 디자인을 할 수 없습니다. 아래 개념을 정확히 알고 계신다면 컴포넌트를 만드는데에는 큰 무리가 없을거에요.

오토레이아웃 필수지식

❶ Resize

❷ Constraints

❸ Ignore Auto layout

❶ Resizing

정의

Hug contents: 콘텐츠(텍스트, 아이콘 등)의 크기에 맞춰 Frame이 “딱 맞게” 줄어드는 모드입니다.

Fill container: 부모 Frame이 가진 남는 공간을 채우도록, 자식 요소가 가변적으로 늘어나는 모드입니다.

Fixed: 명시한 너비/높이를 유지하며, 콘텐츠나 부모 크기가 바뀌어도 값이 변하지 않는 모드입니다.

중요성

같은 컴포넌트를 “짧은 텍스트 버튼”에도, “긴 텍스트 버튼”에도, “가로로 꽉 차는 버튼”에도 재사용하고 싶다면 Resizing 설정이 핵심입니다.

잘못 설정하면 텍스트가 잘리거나, 버튼이 의도와 다르게 너무 길거나 짧아지는 문제가 반복적으로 발생합니다.

Auto Layout, Constraints와 함께 사용했을 때 반응형 컴포넌트의 완성도가 크게 올라갑니다.

사용례

버튼: 가로는 Hug(텍스트 길이에 맞게), 세로는 Fixed(높이 일정)로 설정해 텍스트만 바뀌어도 버튼 높이는 일정하게 유지.

리스트 아이템: 가로는 Fill로 설정하여 화면 너비에 맞게 늘어나게 하고, 내부 요소는 Hug/Fixed를 섞어 안정적인 구조 유지.

아이콘: 가로·세로를 Fixed로 지정해 어떤 환경에서도 일정한 크기로 보이도록 설정.

정의

Constraints는 부모 Frame의 크기가 변할 때, 자식 객체가 어떤 방향으로 고정되거나 함께 늘어날지를 정의하는 규칙입니다.

예를 들어, 왼쪽·오른쪽·위·아래에 고정할 것인지, 가운데 정렬로 남길 것인지, 양쪽과 동시에 붙어서 함께 늘어나게 할 것인지 등을 설정할 수 있습니다.

중요성

화면 사이즈가 바뀌는 상황(모바일 → 태블릿, 웹 브라우저 리사이징 등)에서 UI가 어떤 식으로 반응할지 미리 시뮬레이션할 수 있습니다.

제대로 설정하지 않으면 로고가 중앙에 있어야 할 상황에서 구석으로 쏠리거나, 버튼이 화면 밖으로 밀려나는 등 레이아웃 붕괴가 발생합니다.

컴포넌트 단위로도 Constraints를 올바르게 설계해두어야, 여러 환경에서 재사용할 때 수정 없이 그대로 사용할 수 있습니다.

사용례

상단 네비게이션 바에서 로고는 항상 왼쪽, 메뉴는 오른쪽에 고정되도록 설정.

카드 안의 버튼이 가로 폭이 넓어져도 항상 아래쪽 중앙 정렬을 유지하도록 Constraints 설정.

모달 창의 X 버튼을 오른쪽 상단에 고정해서, 모달 크기가 커져도 항상 구석에 위치하도록 구성.

정의

Absolute Position은 Auto Layout이 적용된 Frame 내부에서, 특정 요소만 레이아웃 흐름에서 분리해 “정확한 좌표”에 고정시키는 방식입니다.

일반 요소는 Auto Layout의 방향과 정렬 규칙을 따르지만, Absolute Position으로 설정된 요소는 마치 “떠 있는 레이어”처럼 독립적으로 배치됩니다.

중요성

뱃지, 뱃지 카운트, 장식 아이콘처럼 레이아웃의 흐름에는 포함되지만 시각적으로는 겹쳐서 보여야 하는 요소를 처리할 때 유용합니다.

무조건 Absolute Position을 쓰는 것이 아니라, 레이아웃 규칙과 독립적으로 배치해야 할 때만 사용해야 컴포넌트 유지보수가 용이합니다.

생각보다 많은 학생들이 기존에는 Frame이나 Group 단위로 UI를 만들었습니다. 특강 이후에는 Auto 레이아웃의 여러 필수요소들을 적용해서 UI 엘리먼트를 만드는 워크샵을 진행했습니다.

실무에서는 디자인 시스템의 컴포넌트를 사용하는 일이 많습니다. 학생 때부터 컴포넌트와 오토레이아웃을 제어하는 습관을 들이면 실무 적응에 큰 도움이 됩니다.

가끔 Group으로 만든 컴포넌트를 전달받곤 하는데, 이를 사용하는 것은 매우 어려운 경험이었습니다. 그래서 오토레이아웃의 중요성을 더욱 강조했습니다.

좋은 기회주셨던 홍익대학교의 정상목 교수님께 감사하다는 말씀을 드리고 싶습니다.